/* Self-hosted fonts (SIL OFL 1.1). Baloo 2 by Ek Type, Mukta by Ek Type. Subsets: Latin, Devanagari, and a ~1 KB ₹-only face so Latin pages with amounts never load Devanagari. */
@font-face{font-family:"Baloo 2 Devanagari";font-style:normal;font-weight:500 800;font-display:swap;src:url("/fonts/baloo2-700-devanagari-889589e39f04ac2257f7e67a5d3bca57.woff2") format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 800;font-display:swap;src:url("/fonts/baloo2-var-rupee-d70689d283bb1efa831c4ad7b7cac992.woff2") format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 800;font-display:swap;src:url("/fonts/baloo2-var-latin-01fcdef177778aaf5f2b595be337dc40.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Mukta Devanagari";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/mukta-400-devanagari-b786401020a1a7c04f7cffd4003c3125.woff2") format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Mukta";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/mukta-400-rupee-ca7f864e437c2c6d4134bbb020e342ae.woff2") format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Mukta";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/mukta-400-latin-afc380f56ddb2f9af60fac54658e7b51.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Mukta";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/mukta-500-rupee-e2d0680925a57066936dc00e6be04c23.woff2") format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Mukta";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/mukta-500-latin-0742895157f6290e28d1f84cadb79fe8.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Mukta Devanagari";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/mukta-700-devanagari-693d9a1aabe1290a9f5106995ed765bc.woff2") format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Mukta";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/mukta-700-rupee-7d1682f5b3bc0e24124d364264cab378.woff2") format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Mukta";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/mukta-700-latin-9b7e3ea2eb7dea950cae5853059d1d9b.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Hindi headings use one static Baloo 2 Bold (700) Devanagari face for every heading weight: 63 KB instead of the
   115 KB variable face, which kept Hindi pages under the Lighthouse 90 bar on a phone (plan M2a Task 19). A Hindi
   h1 is set at 700, not 800; Devanagari at 700 already carries the weight. */
/* English pages use only a handful of Devanagari characters (the hero tagline, "साथ", the language link).
   These subsets belong to "Baloo 2" and "Mukta" themselves, while the full Devanagari faces above are separate
   families ("Baloo 2 Devanagari", "Mukta Devanagari"). English stacks name the short faces first, so an English
   page never downloads the 60-115 KB files; Hindi pages (tokens.css, :root:lang(hi)) name the full families
   first, so they never download the short ones as well. Regenerate with tools when copy changes.
   Mukta 500 has no Devanagari face on purpose: Hindi medium text uses the 400 face, which saves a 69 KB
   download on Hindi pages (page audit, M1). */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 800;font-display:swap;src:url("/fonts/baloo2-var-hi-short-e445862bb6f5c6984374215cbe7ee456.woff2") format("woff2");unicode-range:U+0902,U+0906,U+090F,U+0915,U+0916,U+091A,U+091C,U+0921,U+0924,U+0925,U+0926,U+0928,U+092A,U+092C,U+092E,U+0930,U+0932,U+0938,U+0939,U+093C,U+093E,U+093F,U+0940,U+0947,U+0948,U+094B,U+094D,U+0964}
@font-face{font-family:"Mukta";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/mukta-400-hi-short-0990e2fa5a67c3d5b4d8839a34e56080.woff2") format("woff2");unicode-range:U+0902,U+0906,U+090F,U+0915,U+0916,U+091A,U+091C,U+0921,U+0924,U+0925,U+0926,U+0928,U+092A,U+092C,U+092E,U+0930,U+0932,U+0938,U+0939,U+093C,U+093E,U+093F,U+0940,U+0947,U+0948,U+094B,U+094D,U+0964}
@font-face{font-family:"Mukta";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/mukta-500-hi-short-20b5c4d58bcbbd5307f85586f51e9a26.woff2") format("woff2");unicode-range:U+0902,U+0906,U+090F,U+0915,U+0916,U+091A,U+091C,U+0921,U+0924,U+0925,U+0926,U+0928,U+092A,U+092C,U+092E,U+0930,U+0932,U+0938,U+0939,U+093C,U+093E,U+093F,U+0940,U+0947,U+0948,U+094B,U+094D,U+0964}
@font-face{font-family:"Mukta";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/mukta-700-hi-short-f752d335d4102f9478a242e8bde0b1de.woff2") format("woff2");unicode-range:U+0902,U+0906,U+090F,U+0915,U+0916,U+091A,U+091C,U+0921,U+0924,U+0925,U+0926,U+0928,U+092A,U+092C,U+092E,U+0930,U+0932,U+0938,U+0939,U+093C,U+093E,U+093F,U+0940,U+0947,U+0948,U+094B,U+094D,U+0964}
/*
 * Saath design tokens — direction B "Haath" (Gate 4a, 2026-09-23).
 *
 * Rules, as in IndiaMedicalCart's site.css:
 *  - Components use these custom properties only; no raw hex outside this file.
 *  - Every text/background pair used by a component is listed in
 *    docs/design/contrast-pairs.json and checked by tools/contrast_check.py (WCAG 2.2 AA).
 *  - Logo red (--c-red) is for graphics and text ≥ 24px only; body-size red text uses --c-red-text.
 */
:root {
  /* Brand */
  --c-blue: #2E3890;          /* logo blue: grounds, links, focus */
  --c-blue-ink: #1F2766;      /* body text, headings on light */
  --c-blue-soft: #E3E6F6;     /* progress track, selected chips */
  --c-blue-wash: #F3F5FC;     /* alternate surface, need rows */
  --c-blue-line: #B9C0E8;     /* hairlines on blue grounds */
  --c-red: #EC2529;           /* logo red: graphics, the funding fill, large type */
  --c-red-text: #C8161D;      /* red at text size: "₹X to go", errors */
  --c-marigold: #FFC23D;      /* primary buttons, highlights on blue */
  --c-marigold-hover: #FFB61A;
  --c-marigold-wash: #FFF4D6; /* Rupee Trail panel, gentle notices */
  --c-marigold-ink: #8A5A00;  /* small text on marigold wash */

  /* Neutrals (blue-biased, chosen not inherited) */
  --c-white: #FFFFFF;
  --c-muted: #4A5178;         /* secondary text: 7.7:1 on white */
  --c-line: #DDE1F2;          /* decorative dividers on white */
  --c-field-border: #6F78A6;  /* input and choice borders: 4.3:1 on white (WCAG 1.4.11) */

  /* Semantic */
  --c-success: #17613E;
  --c-success-wash: #E4F3EA;
  --c-danger: var(--c-red-text);
  --c-danger-wash: #FDECEC;
  --c-focus: var(--c-blue);

  /* Type */
  --font-display: "Baloo 2", "Baloo 2 Devanagari", "Mukta", "Mukta Devanagari", system-ui, sans-serif;
  --font-body: "Mukta", "Mukta Devanagari", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Scale: 1.25 major third from 16px */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.8vw, 3.75rem); /* hero */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Space (4-based) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem; --sp-9: 6rem;
  --gutter: max(1rem, 4vw);
  --measure: 65ch;
  --page-max: 72rem;

  /* Shape — radius by role, not one radius for everything */
  --r-pill: 999px;     /* buttons, progress, chips */
  --r-sheet: 1.75rem;  /* the white sheet that rises over blue */
  --r-card: 1rem;      /* child cards */
  --r-row: 0.75rem;    /* need rows, trail panel */
  --r-field: 0.5rem;   /* inputs */

  /* Elevation — only sheets and dialogs lift */
  --shadow-sheet: 0 -1px 0 var(--c-line), 0 12px 32px -16px rgb(31 39 102 / 0.28);
  --shadow-dialog: 0 24px 48px -12px rgb(31 39 102 / 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-hero: 900ms;

  /* Touch */
  --tap: 2.75rem; /* 44px minimum target */
}

/* Hindi pages take the full Devanagari families first, so the short English-page subsets in fonts.css are
   never downloaded on top of them. Latin characters fall through to the Latin faces of the same fonts. */
:root:lang(hi) {
  --font-display: "Baloo 2 Devanagari", "Baloo 2", "Mukta Devanagari", "Mukta", system-ui, sans-serif;
  --font-body: "Mukta Devanagari", "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/*
 * Saath public site — core kit (direction B "Haath").
 *
 * Conventions (same as IndiaMedicalCart):
 *  - Colours only through tokens.css. Logical properties only. Mobile first.
 *  - Breakpoints: 45rem (tablet), 60rem (desktop nav).
 *  - No inline styles or scripts (CSP 'self'); progress bars use native <progress>.
 *  - Class vocabulary is fixed; page files add classes only with a page prefix (e.g. .home-…).
 *
 * Kit classes: .container .stack .cluster .grid-cards .visually-hidden .skip-link
 *   .site-header .brand .site-nav .lang-switch .give-bar .wa-chat .site-footer .trust-strip
 *   .btn(--primary|--secondary|--on-blue|--ghost|--lg|--block) .link
 *   .hero-haath .hands .sheet .section .section--wash
 *   .field .field__label .field__help .field__error .input .choice .segmented
 *   .amount-picker .citizen-switch .funding .funding__togo .funding__meta
 *   .child-card .avatar .illus-label .needs .need .trail .trail__row
 *   .stat .notice(--info|--success|--danger|--warm) .chip .table .empty .dialog .toast .funding--done
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-blue-ink);
  font: 400 var(--fs-md)/var(--lh-body) var(--font-body);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0; max-width: var(--measure); }
a { color: var(--c-blue); text-underline-offset: 0.18em; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
[lang="hi"] { line-height: 1.7; }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -4rem;
  background: var(--c-marigold); color: var(--c-blue-ink); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); font-weight: 700; z-index: 10;
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* ---------- Layout ---------- */
.container { inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--sp-4); align-content: start; }
.stack--lg { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; list-style: none; }
ul.cluster { padding: 0; margin: 0; }
.grid-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.section { padding-block: var(--sp-7); }
.section--wash { background: var(--c-blue-wash); }

/* ---------- Header / nav ---------- */
.site-header { background: var(--c-blue); color: var(--c-white); }
/* Focus on dark grounds turns marigold (6.3:1 on blue, 8.5:1 on ink) */
.site-header, .hero-haath, .site-footer { --c-focus: var(--c-marigold); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-block-size: 4rem; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
.brand img { block-size: 2.5rem; inline-size: auto; }
.brand__on-blue { background: var(--c-white); border-radius: var(--r-row); padding: var(--sp-1) var(--sp-2); }
.site-nav { display: none; }
.site-nav a:not(.btn) { color: var(--c-white); text-decoration: none; font-weight: 500; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { background: rgb(255 255 255 / 0.12); }
.lang-switch { display: inline-flex; gap: var(--sp-1); font-size: var(--fs-sm); }
.lang-switch a, .site-account { color: var(--c-white); text-decoration: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); }
.site-tools { display: inline-flex; gap: var(--sp-1); }
.site-account { font-size: var(--fs-sm); border: 1px solid; white-space: nowrap; }
.lang-switch a[aria-current="true"] { background: var(--c-white); color: var(--c-blue); font-weight: 700; }
@media (min-width: 60rem) {
  .site-nav { display: flex; gap: var(--sp-1); align-items: center; }
}
/* Sticky give bar on mobile only (brief) */
.give-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 5;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white); box-shadow: 0 -8px 24px -12px rgb(31 39 102 / 0.3);
  display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
}
.give-bar p { font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 60rem) { .give-bar { display: none; } }
body.has-give-bar { padding-block-end: 5.5rem; }
@media (min-width: 60rem) { body.has-give-bar { padding-block-end: 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--tap); padding-inline: var(--sp-5);
  border: 2px solid transparent; border-radius: var(--r-pill);
  font: 700 var(--fs-md)/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--c-marigold); color: var(--c-blue-ink); }
.btn--primary:hover { background: var(--c-marigold-hover); }
.btn--secondary { background: var(--c-white); color: var(--c-blue); border-color: var(--c-blue); }
.btn--on-blue { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-blue); padding-inline: var(--sp-3); }
.btn--lg { min-block-size: 3.25rem; padding-inline: var(--sp-6); font-size: var(--fs-lg); }
.btn--block { inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Hero: the hands (the one memorable moment) ---------- */
.hero-haath { background: var(--c-blue); color: var(--c-white); position: relative; overflow: hidden; }
.hero-haath__inner { display: grid; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-9); position: relative; z-index: 1; }
.hero-haath h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); max-inline-size: 11ch; }
.hero-haath__hi { font: 700 var(--fs-xl)/1.4 var(--font-display); color: var(--c-marigold); }
.hero-haath__lede { font-size: var(--fs-lg); max-inline-size: 34ch; }
.hero-haath__note { font-size: var(--fs-sm); color: var(--c-blue-line); }
.hero-haath__note a { color: var(--c-white); }
.hands {
  position: absolute; inset-inline-end: -12%; inset-block-end: -6%;
  inline-size: min(26rem, 62vw); z-index: 0; overflow: visible;
}
.hands__adult { fill: var(--c-red); }
.hands__child { fill: var(--c-white); }
@media (min-width: 45rem) { .hands { inset-inline-end: -4%; inline-size: min(30rem, 44vw); } }
@media (prefers-reduced-motion: no-preference) {
  .hands__child { animation: hand-meet var(--dur-hero) var(--ease-out) 200ms both; }
  @keyframes hand-meet { from { transform: translate(-8%, 14%) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .hands__child { transform-origin: 50% 90%; transform-box: fill-box; }
}

/* The white sheet that rises over the blue (Haath signature shape) */
.sheet {
  background: var(--c-white); color: var(--c-blue-ink);
  border-start-start-radius: var(--r-sheet); border-start-end-radius: var(--r-sheet);
  margin-block-start: calc(-1 * var(--sp-7)); position: relative; z-index: 2;
  box-shadow: var(--shadow-sheet);
}

/* ---------- Forms ---------- */
.field { display: grid; gap: var(--sp-1); }
.field__label { font-weight: 700; }
.field__help { font-size: var(--fs-sm); color: var(--c-muted); }
.field__error { font-size: var(--fs-sm); color: var(--c-danger); font-weight: 500; }
.input {
  font: inherit; color: inherit; min-block-size: var(--tap); inline-size: 100%;
  padding: var(--sp-2) var(--sp-3); border: 2px solid var(--c-field-border); border-radius: var(--r-field); background: var(--c-white);
}
.input:focus-visible { border-color: var(--c-blue); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--c-danger); }
.choice {
  display: flex; gap: var(--sp-3); align-items: center; min-block-size: var(--tap);
  padding: var(--sp-3) var(--sp-4); border: 2px solid var(--c-field-border); border-radius: var(--r-row); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-wash); box-shadow: inset 0 0 0 1px var(--c-blue); }
.choice input { accent-color: var(--c-blue); inline-size: 1.25rem; block-size: 1.25rem; }
.choice__main { display: grid; }
.choice__main small { color: var(--c-muted); font-size: var(--fs-sm); }
.segmented { display: inline-flex; padding: var(--sp-1); background: var(--c-blue-soft); border-radius: var(--r-pill); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill); font-weight: 700; cursor: pointer; }
.segmented input:checked + span { background: var(--c-blue); color: var(--c-white); }
.segmented input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---------- Amount picker & citizenship switch ---------- */
.amount-picker { display: grid; gap: var(--sp-2); }
@media (min-width: 45rem) { .amount-picker { grid-template-columns: repeat(3, 1fr); } }
.amount-picker .choice__main b { font: 700 var(--fs-lg)/1.2 var(--font-display); }
.citizen-switch { display: grid; gap: var(--sp-2); border: 0; margin: 0; padding: 0; }
.citizen-switch legend { font: 700 var(--fs-xl)/1.25 var(--font-display); margin-block-end: var(--sp-2); }
@media (min-width: 45rem) { .citizen-switch { grid-template-columns: 1fr 1fr; } .citizen-switch legend { grid-column: 1 / -1; } }

/* ---------- Funding ---------- */
.funding { display: grid; gap: var(--sp-2); }
.funding__togo { font: 800 var(--fs-2xl)/1 var(--font-display); color: var(--c-red-text); }
.funding__meta { font-size: var(--fs-sm); color: var(--c-muted); }
.funding progress {
  appearance: none; inline-size: 100%; block-size: 0.875rem; border: 0; border-radius: var(--r-pill);
  background: var(--c-blue-soft); overflow: hidden; color: var(--c-red);
}
.funding progress::-webkit-progress-bar { background: var(--c-blue-soft); border-radius: var(--r-pill); }
.funding progress::-webkit-progress-value { background: var(--c-red); border-radius: var(--r-pill); }
.funding progress::-moz-progress-bar { background: var(--c-red); border-radius: var(--r-pill); }
/* Fully funded: green fill and a calm headline, never red */
.funding--done .funding__togo { color: var(--c-success); }
.funding--done progress { color: var(--c-success); }
.funding--done progress::-webkit-progress-value { background: var(--c-success); }
.funding--done progress::-moz-progress-bar { background: var(--c-success); }

/* ---------- Child card ---------- */
.child-card {
  display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--r-card); color: inherit; text-decoration: none;
}
.child-card:hover { border-color: var(--c-blue); }
.child-card__top { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; }
.child-card__name { font: 700 var(--fs-xl)/1.1 var(--font-display); }
.child-card__where { font-size: var(--fs-sm); color: var(--c-muted); }
.child-card__dream { font-size: var(--fs-md); }
.avatar { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: var(--c-marigold); overflow: hidden; }
.avatar--lg { inline-size: 8rem; block-size: 8rem; }
.avatar svg { display: block; inline-size: 100%; block-size: 100%; }
.illus-label { font-size: var(--fs-xs); color: var(--c-muted); }
.chip { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--sp-3); border-radius: var(--r-pill); background: var(--c-blue-soft); color: var(--c-blue-ink); font-size: var(--fs-sm); font-weight: 500; }
.chip--urgent { background: var(--c-marigold-wash); color: var(--c-marigold-ink); }

/* ---------- Needs ---------- */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.need { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }
.need__amount { font-weight: 700; }
.need__amount--togo { color: var(--c-red-text); }
.need__amount--done { color: var(--c-success); }

/* ---------- Rupee Trail ---------- */
.trail { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-marigold-wash); border-radius: var(--r-row); }
.trail__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
.trail__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding-block: var(--sp-2); border-block-start: 1px solid rgb(138 90 0 / 0.18); }
.trail__row:first-of-type { border-block-start: 0; }
.trail__vendor { font-weight: 700; }
.trail__meta { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--c-marigold-ink); }

/* ---------- Stats, notices, tables, empty, dialog, toast ---------- */
.stat { display: grid; gap: var(--sp-1); }
.stat__num { font: 800 var(--fs-3xl)/1 var(--font-display); color: var(--c-blue); }
.stat__label { color: var(--c-muted); }
.stat__asof { font-size: var(--fs-xs); color: var(--c-muted); }
.link { color: var(--c-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.link:hover { text-decoration-thickness: 2px; }
.notice, .notice--info { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row); border-inline-start: 4px solid var(--c-blue); background: var(--c-blue-wash); }
.notice--success { border-color: var(--c-success); background: var(--c-success-wash); }
.notice--danger { border-color: var(--c-danger); background: var(--c-danger-wash); }
.notice--warm { border-color: var(--c-marigold); background: var(--c-marigold-wash); }
/* Positioned, so a visually hidden label inside a cell stays in this box instead of widening the page. */
.table-wrap { overflow-x: auto; position: relative; }
.table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); }
.table th, .table td { text-align: start; padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--c-line); }
.table th { font-weight: 700; color: var(--c-muted); }
.table td.num, .table th.num { text-align: end; }
.empty { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-6); border: 2px dashed var(--c-line); border-radius: var(--r-card); }
.dialog { border: 0; border-radius: var(--r-card); padding: var(--sp-6); max-inline-size: min(32rem, 92vw); box-shadow: var(--shadow-dialog); color: var(--c-blue-ink); }
.dialog::backdrop { background: rgb(31 39 102 / 0.5); }
.toast { position: fixed; inset-block-end: var(--sp-5); inset-inline-start: 50%; transform: translateX(-50%); background: var(--c-blue-ink); color: var(--c-white); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-weight: 500; }

/* ---------- Footer & trust ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.trust-strip b { font-weight: 700; }
.site-footer { background: var(--c-blue-ink); color: var(--c-white); padding-block: var(--sp-7); }
.site-footer a { color: var(--c-white); }
.site-footer .trust-strip { color: var(--c-blue-line); }
.site-footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 45rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__concern { background: var(--c-marigold); color: var(--c-blue-ink); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-4); }
.site-footer__concern a { color: var(--c-blue-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* The "हिन्दी" link on English pages uses the system Devanagari face, so it does not pull a
   60 KB web font onto pages that are otherwise Latin-only. */
.lang-switch [lang="hi"] { font-family: system-ui, "Noto Sans Devanagari", sans-serif; }

/* A staff preview of a draft (plan 09-m2b Task 10): pinned, so no screenshot of a draft passes for the live page */
.preview-banner {
  position: sticky; inset-block-start: 0; z-index: 60; margin: 0; padding: var(--sp-2) var(--gutter);
  background: var(--c-marigold); color: var(--c-blue-ink); font-weight: 700; text-align: center; max-inline-size: none;
}

/* A dated notice above the page (plan 10-m2e Task 11): a details element, so it folds away without script */
.site-banner { background: var(--c-marigold-wash); border-block-end: 1px solid var(--c-marigold); }
.site-banner__toggle { cursor: pointer; padding: var(--sp-1) var(--gutter); font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-blue-ink); max-inline-size: var(--page-max); margin-inline: auto; }
.site-banner__inner { max-inline-size: var(--page-max); margin-inline: auto; padding: 0 var(--gutter) var(--sp-3); }
.site-banner__text { margin: 0; max-width: none; color: var(--c-blue-ink); }
.site-banner__text .link { margin-inline-start: var(--sp-2); }

/* The cookie banner (spec H FR-H-06, plan 12-m2d D8): a bar at the top of the page, never fixed, so it covers
   nothing. Accept and Reject are the same button, the same size, side by side. */
.cookie-banner { background: var(--c-blue-wash); border-block-end: 1px solid var(--c-line); }
.cookie-banner__inner { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); }
.cookie-banner__title { font-size: var(--fs-lg); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cookie-banner__actions form { margin: 0; }
.cookie-banner__button { min-inline-size: 11rem; }
@media (min-width: 60rem) {
  .cookie-banner__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-6); }
}
.cookie-settings { max-inline-size: 48rem; }
.cookie-settings__choice { border: 0; margin: 0; padding: 0; }
.cookie-settings__choice legend { padding: 0; }
/* WhatsApp button, 2026-10-15 */
.wa-chat{position:fixed;inset-inline-end:var(--gutter);inset-block-end:5.5rem;z-index:6;display:flex;padding:.75rem;border-radius:50%;background:var(--c-success);color:var(--c-white)}
.wa-chat svg{inline-size:1.75rem;block-size:1.75rem}
@media (min-width:60rem){.wa-chat{inset-block-end:var(--sp-5)}}
/*
 * Saath media kit — image bands, splits, media cards, story, gallery, video (Phase 4b).
 * Loaded after site.css on every public page. Tokens only; no inline styles.
 *
 * Classes: .band-img .band-img__media .band-img__text (.band-img--left|--right text side)
 *          .split (.split--flip) .split__media .split__body
 *          .media-card .media-card__img .media-card__body
 *          .story .story__media .story__body   .gallery
 *          .figure .caption-illus   .video-embed .video-embed__transcript
 *
 * Images: always <img> with width/height, srcset 480/960/1440, sizes, and loading="lazy" except
 * the single above-the-fold image of a page (which gets fetchpriority="high"). Every generated image
 * of a person carries .caption-illus "Illustrative image" (ADR 0007).
 */

/* The app serves every brand image as <picture> (AVIF + JPEG, plan M2a E8). "contents" keeps the wrapper out of
   layout, so every rule below that targets the <img> of a grid, split or card keeps working unchanged. */
picture { display: contents; }
/* A <source> is otherwise a block box, and inside a "contents" picture it would take a grid cell of its own.
   Hiding it changes nothing about which file the browser picks. */
picture > source { display: none; }

/* ---------- Illustrative caption (ADR 0007) ---------- */
.caption-illus {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--c-muted);
}
.figure { margin: 0; display: grid; gap: var(--sp-2); }
.figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-card); }

/* ---------- Full-bleed image band with text (21:9) ---------- */
.band-img { position: relative; display: grid; background: var(--c-blue-ink); color: var(--c-white); overflow: hidden; }
.band-img__media { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.band-img__text { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--gutter); background: var(--c-blue-ink); }
.band-img__text h2 { color: var(--c-white); }
.band-img__text p { color: var(--c-blue-line); }
.band-img .caption-illus { color: var(--c-white); position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-3); background: rgb(31 39 102 / 0.9); padding: 0.1rem var(--sp-2); border-radius: var(--r-pill); }
/* From tablet up the text sits on the image, over a scrim that keeps white text ≥ 4.5:1 */
@media (min-width: 45rem) {
  .band-img { grid-template-areas: "stack"; }
  /* picture is display: contents (above), so its img is the grid item, not the picture. */
  .band-img > *, .band-img > picture > img { grid-area: stack; }
  .band-img__media { aspect-ratio: 21 / 9; min-block-size: 22rem; }
  .band-img__text {
    align-self: end; max-inline-size: 36rem; margin: var(--sp-6) var(--gutter);
    padding: var(--sp-5); border-radius: var(--r-card); background: rgb(31 39 102 / 0.86);
  }
  .band-img--right .band-img__text { justify-self: end; }
}

/* ---------- Split: image beside text ---------- */
.split { display: grid; gap: var(--sp-5); align-items: center; }
.split__media img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-card); }
.split__body { display: grid; gap: var(--sp-3); }
@media (min-width: 45rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .split--flip .split__media { order: 2; }
}

/* ---------- Media card (3:2 image on top) ---------- */
.media-card {
  display: grid; grid-template-rows: auto 1fr; background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden;
  color: inherit; text-decoration: none;
}
.media-card:hover { border-color: var(--c-blue); }
.media-card__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.media-card__body { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); align-content: start; }
.media-card__body h3 { color: var(--c-blue); }

/* ---------- Story (4:5 portrait beside text) ---------- */
.story { display: grid; gap: var(--sp-5); }
.story__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.story__body { display: grid; gap: var(--sp-3); align-content: center; }
@media (min-width: 45rem) { .story { grid-template-columns: 2fr 3fr; gap: var(--sp-7); } }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.gallery img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-row); }

/* ---------- Video (1:1 on the site, transcript beneath — the IMC pattern) ---------- */
.video-embed { display: grid; gap: var(--sp-3); max-inline-size: 36rem; }
.video-embed video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; border-radius: var(--r-card); background: var(--c-blue-ink); }
.video-embed__transcript summary { cursor: pointer; font-weight: 700; color: var(--c-blue); min-block-size: var(--tap); display: flex; align-items: center; }
.video-embed__transcript p { margin-block-start: var(--sp-2); }
.video-embed__caption { font-size: var(--fs-sm); color: var(--c-muted); }
.video-embed__caption b { color: var(--c-blue-ink); }
/* The poster facade (06-media-serving M5): a lazy picture that links to the film; video-facade.js swaps in the
   player on click, and without JS the link opens the film in the browser's own player. */
.video-facade { display: block; position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--c-blue-ink); }
.video-facade img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; }
.video-facade:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/*
 * Interior pages (Phase 4b): about, partner homes, impact, stories, CSR, contact,
 * report a concern, donate, give from abroad. Loaded after site.css and media.css.
 * Tokens only. Every class here is prefixed .pi- (page interior). Page-only rules live in
 * css/page-<name>.css. Blocks marked KIT CANDIDATE are generic enough for media.css/site.css.
 */

/* ---------- Page hero with image (visual-plan §5.2 "hero-image") KIT CANDIDATE ----------
   A compact blue title band, the banner full-bleed under it, and the white sheet rising over
   the banner's bottom 3rem. The banner is the page's LCP: fetchpriority="high", never lazy. */
.pi-hero { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.pi-hero__title { display: grid; gap: var(--sp-3); padding-block: var(--sp-6); }
.pi-hero__title h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); max-inline-size: 18ch; }
.pi-hero__eyebrow { font-size: var(--fs-sm); font-weight: 500; color: var(--c-blue-line); }
.pi-hero__lede { font-size: var(--fs-lg); max-inline-size: 46ch; }
.pi-hero__note { font-size: var(--fs-sm); color: var(--c-blue-line); max-inline-size: 60ch; }
.pi-hero__note a, .pi-hero__lede a { color: var(--c-white); }
.pi-hero__side { display: grid; gap: var(--sp-3); }
.pi-hero__side .cluster { margin-block-start: var(--sp-2); }
@media (min-width: 60rem) {
  /* H1 on the left, lede and actions on the right, bottoms aligned, so the band stays short above the image */
  .pi-hero__title { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-7); grid-template-rows: 1fr auto; align-items: end; padding-block: var(--sp-7) var(--sp-6); }
  .pi-hero__eyebrow { grid-column: 1; grid-row: 1; }
  .pi-hero__title > h1 { grid-column: 1; grid-row: 2; }
  .pi-hero__side { grid-column: 2; grid-row: 1 / span 2; }
}
.pi-hero__media { position: relative; margin: 0; }
.pi-hero__media img {
  display: block; inline-size: 100%; block-size: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%;
}
@media (min-width: 45rem) { .pi-hero__media img { aspect-ratio: 21 / 9; max-block-size: 34rem; } }
/* the sheet overlaps the bottom 3rem, so the chip sits at the top */
.pi-hero__media .caption-illus, .pi-media .caption-illus {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  color: var(--c-white); background: color-mix(in srgb, var(--c-blue-ink) 90%, transparent);
  padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
.pi-hero + .sheet { padding-block-start: var(--sp-2); }
/* A hero with no picture ends in the blue, so the sheet rising over it would cover its last lines: leave room
   for the overlap, as contact-hero does. */
.pi-hero:not(:has(.pi-hero__media)) .pi-hero__title { padding-block-end: calc(var(--sp-7) + var(--sp-5)); }

/* ---------- Image with its caption chip on the image KIT CANDIDATE (.media-frame) ---------- */
.pi-media { position: relative; margin: 0; }
.pi-media img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-card); aspect-ratio: 16 / 9; object-fit: cover; }
.pi-media--card img { border-radius: 0; aspect-ratio: 3 / 2; }

/* ---------- Section heads and prose ---------- */
.pi-head { display: grid; gap: var(--sp-3); max-inline-size: var(--measure); }
.pi-lead { font-size: var(--fs-lg); }
.pi-muted { color: var(--c-muted); font-size: var(--fs-sm); }
.pi-placeholder { color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding-inline: var(--sp-1); font-weight: 500; overflow-wrap: anywhere; }
.pi-sample { justify-self: start; font-size: var(--fs-xs); color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding: var(--sp-1) var(--sp-3); }

/* ---------- Plain lists with a marker that means something ---------- */
.pi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-inline-size: var(--measure); }
.pi-list li { position: relative; padding-inline-start: var(--sp-6); }
.pi-list li::before {
  content: ""; position: absolute; inset-inline-start: var(--sp-1); inset-block-start: 0.55em;
  inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--c-marigold);
}
/* a check: kept on file, done, verified */
.pi-list--check li::before {
  inline-size: 0.5rem; block-size: 0.9rem; border-radius: 0; background: none;
  border-inline-end: 3px solid var(--c-success); border-block-end: 3px solid var(--c-success);
  transform: rotate(45deg); inset-block-start: 0.3em; inset-inline-start: var(--sp-2);
}
/* a "no": what we don't do */
.pi-list--no li::before {
  inline-size: 0.75rem; block-size: 3px; border-radius: var(--r-pill); background: var(--c-red-text);
  inset-block-start: 0.75em;
}

/* ---------- Numbered steps: only for real sequences KIT CANDIDATE (.steps) ---------- */
.pi-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: pi-step; }
.pi-steps > li { counter-increment: pi-step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); align-items: start; align-content: start; }
.pi-steps > li::before {
  content: counter(pi-step); grid-row: 1 / span 2; display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
  background: var(--c-blue); color: var(--c-white); font: 800 var(--fs-lg)/1 var(--font-display);
}
.pi-steps h3 { font-size: var(--fs-lg); padding-block-start: var(--sp-2); }
.pi-steps p { grid-column: 2; }
@media (min-width: 60rem) {
  .pi-steps--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-6); }
  .pi-steps--row > li { grid-template-columns: minmax(0, 1fr); }
  .pi-steps--row > li::before { grid-row: auto; }
  .pi-steps--row p { grid-column: 1; }
}

/* ---------- Facts (registration numbers) KIT CANDIDATE (.facts) ---------- */
.pi-facts { display: grid; gap: var(--sp-3) var(--sp-6); margin: 0; }
@media (min-width: 45rem) { .pi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .pi-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pi-facts > div { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }
.pi-facts dt { font-size: var(--fs-sm); color: var(--c-muted); }
.pi-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Cards grid (media cards in a list) ---------- */
.pi-cards { list-style: none; margin: 0; padding: 0; }
.pi-cards > li { display: grid; }
.pi-cards .media-card__body h3 a { color: inherit; text-decoration: none; }
.pi-cards .media-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.pi-cards .media-card { position: relative; }
.pi-cards .media-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.pi-cards .media-card__body h3 a:focus-visible { outline: 0; }
.pi-card-link { font-weight: 700; color: var(--c-blue); margin-block-start: auto; }

/* ---------- FAQ KIT CANDIDATE (.faq) ---------- */
.pi-faq { display: grid; max-inline-size: 48rem; border-block-start: 1px solid var(--c-line); }
.pi-faq details { border-block-end: 1px solid var(--c-line); }
.pi-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-block-size: var(--tap); padding-block: var(--sp-3); cursor: pointer;
  font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-blue-ink); list-style: none;
}
.pi-faq summary::-webkit-details-marker { display: none; }
.pi-faq summary::after {
  content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem;
  border-inline-end: 2px solid var(--c-blue); border-block-end: 2px solid var(--c-blue); transform: rotate(45deg);
}
.pi-faq details[open] summary::after { transform: rotate(-135deg); }
.pi-faq details > p { padding-block-end: var(--sp-4); }

/* ---------- Closing band: blue, with the hands' two colours in the actions ---------- */
.pi-closing { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.pi-closing__inner { display: grid; gap: var(--sp-4); justify-items: start; padding-block: var(--sp-7); }
.pi-closing h2 { font-size: var(--fs-3xl); max-inline-size: 20ch; }
.pi-closing p { color: var(--c-blue-line); }
.pi-closing a:not(.btn) { color: var(--c-white); }
@media (min-width: 60rem) {
  .pi-closing__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-7); }
  .pi-closing__inner > .cluster { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Video placeholder (before the film exists) KIT CANDIDATE (.video-embed__soon) ---------- */
.pi-video-soon {
  display: grid; place-items: center; gap: var(--sp-3); aspect-ratio: 1 / 1; padding: var(--sp-5);
  border-radius: var(--r-card); background: var(--c-blue-ink); color: var(--c-white); text-align: center;
}
.pi-video-soon__play { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--c-marigold); }
.pi-video-soon__play::after { content: ""; inline-size: 1.25rem; block-size: 1.5rem; margin-inline-start: 0.3rem; background: var(--c-blue-ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pi-video-soon p { font: 700 var(--fs-lg)/1.3 var(--font-display); max-inline-size: 18ch; }

/* ---------- Two-column body used by several pages ---------- */
.pi-two { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 60rem) { .pi-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); } }
.pi-two > * { min-inline-size: 0; }
.pi-panel { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); align-content: start; }
.pi-panel h3 { font-size: var(--fs-xl); }

/* ---------- Label/value details list (contact points) ---------- */
.pi-details { display: grid; gap: var(--sp-3); margin: 0; }
.pi-details > div { display: grid; gap: 0; }
.pi-details dt { font-size: var(--fs-sm); color: var(--c-muted); }
.pi-details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Policy pages (plan M2a Task 15): long legal drafts, set as readable prose under the draft banner.
   The body is generated HTML (tools/content/policies.py): h2-h4, p, ul, the "In plain words" aside, tables. */
.policy-body { max-inline-size: 46rem; display: grid; gap: var(--sp-4); }
.policy-body h2 { font-size: var(--fs-2xl); margin-block-start: var(--sp-5); }
.policy-body h3 { font-size: var(--fs-xl); margin-block-start: var(--sp-3); }
.policy-body h4 { font-size: var(--fs-lg); }
.policy-body ul { display: grid; gap: var(--sp-2); padding-inline-start: 1.25rem; margin: 0; }
.policy-body code { font-family: inherit; font-weight: 600; overflow-wrap: anywhere; }
.policy-summary { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-card); background: var(--c-blue-wash); }
.policy-tbc { font-style: italic; color: var(--c-muted); }

/* The team page's people (plan 10-m2e Task 9): a card each, photo optional */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.team-card { display: grid; gap: var(--sp-1); align-content: start; }
.team-card__photo { margin: 0 0 var(--sp-2); }
.team-card__photo img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
.team-card__name { font-size: var(--fs-md); margin: 0; }
.team-card__role { color: var(--c-muted); font-size: var(--fs-sm); }
.team-card__bio { font-size: var(--fs-sm); }
/*
 * Home page (en + hi), Phase 4b: 15 bands built around the real images.
 * Tokens only; every class is prefixed .home-. Loaded after site.css and media.css.
 * Kit candidates are marked "KIT CANDIDATE".
 *
 * Band order and rhythm: hero (blue) → sheet: trust · meaning image band · film · how (wash) ·
 * children · trail (wash) · programs · ways (wash) · visits · abroad (wash) · impact · stories (wash) ·
 * FAQ · closing image band. ADR 0007: the classroom band sits two bands above the child cards,
 * and nothing generated sits inside the impact band.
 */

/* ---------- Hero ---------- */
.home-hero__eyebrow { font-size: var(--fs-sm); font-weight: 500; color: var(--c-blue-line); }
/* On phones the hands sit under the text, not behind it: reserve room for them. */
.home-hero__inner { padding-block-end: calc(var(--sp-8) + min(12rem, 48vw)); }
.home-hero__inner .cluster { margin-block-start: var(--sp-2); }
@media (min-width: 45rem) {
  .home-hero__inner { padding-block: var(--sp-8) calc(var(--sp-9) + var(--sp-6)); padding-inline-end: calc(var(--gutter) + 40vw); }
}
@media (min-width: 60rem) {
  .home-hero__inner { padding-inline-end: calc(var(--gutter) + 26rem); }
  .hero-haath .hands { inset-inline-end: max(0rem, calc((100vw - var(--page-max)) / 2)); inset-block-end: -4%; inline-size: min(30rem, 36vw); }
}
/* "Watch our film" link on blue: a marigold play disc and white text (KIT CANDIDATE: .film-link) */
.home-hero__film {
  display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: start;
  min-block-size: var(--tap); color: var(--c-white); font-weight: 700; text-underline-offset: 0.25em;
}
.home-hero__film svg { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
.home-hero__film:hover { text-decoration-thickness: 2px; }
.home-play__disc { fill: var(--c-marigold); }
.home-play__tri { fill: var(--c-blue-ink); }

/* ---------- Shared bits ---------- */
.home-sample-note { font-size: var(--fs-sm); color: var(--c-muted); }
.home-muted { color: var(--c-muted); font-size: var(--fs-sm); }
.home-head { display: grid; gap: var(--sp-3); }
.home-head p { font-size: var(--fs-lg); }
.home-list { list-style: none; margin: 0; padding: 0; }

/* Caption chip laid over an image (KIT CANDIDATE: .media-card__media + .caption-illus--chip).
   The chip carries its own white plate, so its contrast never depends on the photo. */
.home-media { position: relative; display: block; margin: 0; }
.home-media .caption-illus {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2);
  background: var(--c-white); color: var(--c-blue-ink);
  padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
.split__media.figure .caption-illus { justify-self: end; }

/* ---------- 2 · Trust strip (right under the hero, inside the sheet) ---------- */
.home-trust { padding-block: var(--sp-6) var(--sp-7); }
.home-trust h2 { font-size: var(--fs-xl); }
.home-trust__list { display: grid; gap: var(--sp-3) var(--sp-5); margin: 0; }
@media (min-width: 45rem) { .home-trust__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .home-trust__list { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.home-trust__list > div { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-3); border-block-start: 2px solid var(--c-blue-soft); }
.home-trust__list dt { font-size: var(--fs-sm); color: var(--c-muted); }
.home-trust__list dd { margin: 0; font-weight: 700; }

/* ---------- 3 · Meaning and 15 · Closing: 21:9 bands with text on the open left third ---------- */
.home-band .band-img__text p { max-inline-size: 60ch; }
.home-band .band-img__text .link { color: var(--c-white); }
@media (min-width: 45rem) {
  /* Taller than 21:9 on tablets so the text panel never runs past the photo; cover keeps the subject. */
  .home-band .band-img__media { min-block-size: 34rem; }
  .home-band .band-img__text { max-inline-size: 27rem; align-self: center; }
}
.home-band h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.home-closing .band-img__text .cluster { margin-block-start: var(--sp-2); }
.home-closing__safety { font-size: var(--fs-sm); }
.home-closing__safety a { color: var(--c-white); font-weight: 700; }

/* ---------- 4 · Film (V1). Static placeholder until the video pipeline ships ---------- */
.home-film__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 45rem) { .home-film__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-7); } }
.home-film .video-embed { inline-size: 100%; max-inline-size: 22rem; justify-self: center; }
/* KIT CANDIDATE: .video-embed__placeholder, the 1:1 poster block (marigold disc on blue) */
.home-film__poster {
  display: grid; place-items: center; align-content: center; gap: var(--sp-4);
  aspect-ratio: 1 / 1; padding: var(--sp-5); border-radius: var(--r-card);
  background: var(--c-blue); color: var(--c-white); text-align: center;
  font: 700 var(--fs-lg)/1.3 var(--font-display);
}
.home-film__poster svg { inline-size: 4.5rem; block-size: 4.5rem; }
.home-film__lines { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-inline-start: 0; list-style: none; }

/* ---------- 5 · How Hold a Hand works: illustrated, numbered steps (a real sequence) ---------- */
.home-steps { counter-reset: home-step; display: grid; gap: var(--sp-6) var(--sp-5); }
@media (min-width: 45rem) { .home-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .home-steps { grid-template-columns: repeat(4, 1fr); } }
.home-step { counter-increment: home-step; display: grid; gap: var(--sp-3); align-content: start; }
.home-step img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); }
.home-step h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xl); }
.home-step h3::before {
  content: counter(home-step); flex: none;
  display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  border-radius: 50%; background: var(--c-blue); color: var(--c-white);
  font: 800 var(--fs-lg)/1 var(--font-display);
}
.home-how__surplus p { max-inline-size: none; }

/* ---------- 6 · Featured children (avatars only) ---------- */
.home-children__list > li { display: grid; }
.home-card { align-content: start; }
.home-card .btn { margin-block-start: auto; }
.home-card__badge, .home-card__due { justify-self: start; }
.home-card__due { margin: 0; }
.home-card .funding progress { margin-block: var(--sp-1); }

/* ---------- 7 · Rupee Trail: photo first, then the text and the sample panel ---------- */
.home-trail .split { align-items: start; }
@media (min-width: 45rem) { .home-trail .split__media { position: sticky; inset-block-start: var(--sp-5); } }
.home-trail__panel { padding: var(--sp-5); gap: var(--sp-3); }
.home-trail__badge { justify-self: start; background: var(--c-white); color: var(--c-marigold-ink); }
.home-trail__child { padding-inline-start: var(--sp-4); }
.home-trail__panel b { font: 700 var(--fs-lg)/1.2 var(--font-display); }

/* ---------- 8 · Programs and 9 · Ways: 3:2 image-led cards ---------- */
.home-cards { display: grid; gap: var(--sp-5); }
@media (min-width: 45rem) { .home-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .home-cards { grid-template-columns: repeat(3, 1fr); } }
.home-cards > li { display: grid; }
.home-cards .media-card__body h3 a { color: var(--c-blue); text-decoration-color: var(--c-blue-line); text-decoration-thickness: 2px; }
.home-cards .media-card__body h3 a:hover { text-decoration-color: currentColor; }
/* The whole card is the click target; the heading link is the one accessible name. */
.home-cards .media-card { position: relative; }
.home-cards .media-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.home-cards .media-card:has(a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.home-cards .media-card__body h3 a:focus-visible { outline: 0; }
.home-cards .chip { justify-self: start; }
/* Ways: two wide cards, then three: the grid is not a row of identical tiles */
@media (min-width: 60rem) {
  .home-ways .home-cards { grid-template-columns: repeat(6, 1fr); }
  .home-ways .home-cards > li { grid-column: span 2; }
  .home-ways .home-cards > li:nth-child(-n+2) { grid-column: span 3; }
}

/* ---------- 10 · Visits and 11 · Abroad: splits ---------- */
.home-visits__promise { font-weight: 700; padding-inline-start: var(--sp-4); border-inline-start: 4px solid var(--c-marigold); }

/* ---------- 12 · Impact (no image, by rule) ---------- */
.home-impact__asof { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 500; }
.home-impact__stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); margin: 0; }
@media (min-width: 60rem) { .home-impact__stats { grid-template-columns: repeat(4, 1fr); } }
.home-impact__stats dd { margin: 0; }
.home-impact__stats .stat__num { order: -1; }
.home-impact .notice { max-inline-size: var(--measure); }

/* ---------- 13 · Stories: objects only, beside the promise and the empty state ---------- */
.home-stories__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) { .home-stories__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-7); align-items: center; } }
.home-stories .gallery { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 29.99rem) { .home-stories .gallery { grid-template-columns: 1fr 1fr; } .home-stories .gallery li:first-child { grid-column: 1 / -1; } }
.home-stories .gallery li { display: grid; }

/* ---------- 14 · Short FAQ ---------- */
.home-faq__list { display: grid; max-inline-size: 48rem; }
.home-faq__list details { border-block-start: 1px solid var(--c-line); }
.home-faq__list details:last-child { border-block-end: 1px solid var(--c-line); }
.home-faq__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-block-size: var(--tap); padding-block: var(--sp-3); cursor: pointer;
  font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-blue-ink); list-style: none;
}
.home-faq__list summary::-webkit-details-marker { display: none; }
.home-faq__list summary::after { content: "+"; flex: none; font-size: var(--fs-2xl); line-height: 1; color: var(--c-blue); }
.home-faq__list details[open] summary::after { content: "−"; }
.home-faq__list details p { padding-block-end: var(--sp-4); }

/* Phones: the step illustration sits beside its text, so four steps don't take four screens */
@media (max-width: 44.99rem) {
  .home-step { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); }
  .home-step img { grid-row: 1 / span 2; align-self: start; border-radius: var(--r-row); }
  .home-step h3 { font-size: var(--fs-lg); }
}
/* About (about.html). Tokens only; classes prefixed .about-. Shared interior kit: page-interior.css. */
.about-story { align-items: start; }
.about-story__film { justify-self: center; inline-size: 100%; max-inline-size: 26rem; }
.about-col-title { font-size: var(--fs-lg); color: var(--c-muted); }

/* Mission and vision: said once, large, side by side */
.about-mv { display: grid; gap: var(--sp-6); }
@media (min-width: 45rem) { .about-mv { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.about-mv h3 { font-size: var(--fs-md); font-family: var(--font-body); color: var(--c-muted); }
.about-mv__line { font: 700 var(--fs-xl)/1.35 var(--font-display); color: var(--c-blue); }
@media (min-width: 60rem) { .about-mv__line { font-size: var(--fs-2xl); } }
.about-values__title { font-size: var(--fs-xl); }
.about-values { display: grid; gap: var(--sp-5) var(--sp-6); margin: 0; }
@media (min-width: 45rem) { .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .about-values { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.about-values > div { display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-3); border-block-start: 3px solid var(--c-marigold); }
.about-values dt { font: 700 var(--fs-lg)/1.2 var(--font-display); }
.about-values dd { margin: 0; }

/* Where we work: places are 16:9, captioned by region only */
.about-gallery { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .about-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.about-gallery img { aspect-ratio: 16 / 9; }
.about-place { margin: 0; display: grid; gap: var(--sp-2); }
.about-place figcaption { font-weight: 700; color: var(--c-blue-ink); }
.about-office { max-inline-size: 36rem; grid-template-columns: minmax(0, 1fr); }

/* People: real portraits only. Until they arrive, a tile holds each place (no generated face). */
.about-people { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 60rem) { .about-people { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }
.about-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.about-person { display: grid; gap: var(--sp-2); }
.about-person__photo {
  display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--r-card);
  background: var(--c-blue-wash); border: 2px dashed var(--c-blue-line);
}
.about-person__photo span { font: 800 var(--fs-3xl)/1 var(--font-display); color: var(--c-blue); }
.about-person__role { font-size: var(--fs-sm); color: var(--c-muted); }

.about-proof { display: grid; gap: var(--sp-5); }
@media (min-width: 60rem) { .about-proof { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.about-proof__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.about-proof__links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
/* Partner homes (about-partner-homes.html). Tokens only; classes prefixed .ph-. No generated person on this page. */
.ph-note { align-self: center; }
.ph-note p { max-inline-size: none; }
@media (min-width: 60rem) { .ph-checks { grid-template-columns: 1fr 1fr; max-inline-size: none; column-gap: var(--sp-7); } }
.ph-concern { border-inline-start: 4px solid var(--c-marigold); }
/*
 * Programs hub + the shared program-page layout (class 10/12, scholarship, see to learn,
 * document desk, women). Tokens only; every class is prefixed .prog-.
 * Loaded after site.css and media.css. Kit candidates are marked "KIT CANDIDATE".
 */

/* ---------- Page hero with image (visual-plan §5.2 "hero-image") — KIT CANDIDATE ---------- */
.prog-hero { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.prog-hero__inner { display: grid; gap: var(--sp-4); padding-block: var(--sp-6) var(--sp-7); }
.prog-hero h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); max-inline-size: 20ch; }
.prog-hero__lede { font-size: var(--fs-lg); max-inline-size: 46ch; }
.prog-hero .cluster { margin-block-start: var(--sp-2); }
.prog-hero .btn--ghost { color: var(--c-white); text-decoration: underline; text-underline-offset: 0.2em; }

/* Breadcrumb in place of an eyebrow: it tells you where you are and takes you back */
.prog-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-blue-line); }
.prog-crumbs li + li::before { content: "/"; margin-inline-end: var(--sp-2); }
.prog-crumbs a { color: var(--c-white); display: inline-flex; align-items: center; min-block-size: var(--tap); }
.prog-crumbs li { display: inline-flex; align-items: center; }

/* The 21:9 banner: full bleed under the blue band, the white sheet rises over its foot.
   Phones show it near 4:3 with object-fit: cover (subjects sit in the central 40%). */
.prog-banner { margin: 0; position: relative; background: var(--c-blue-ink); }
.prog-banner__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 45rem) {
  .prog-banner__img { aspect-ratio: 21 / 9; max-block-size: 38rem; }
}

/* Caption chip on an image (ADR 0007): a solid ink plate keeps it ≥ 4.5:1 on any pixel */
.prog-media { position: relative; display: block; }
.prog-media .caption-illus,
.prog-banner .caption-illus {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2);
  background: var(--c-blue-ink); color: var(--c-white);
  padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
.prog-banner .caption-illus { inset-inline-end: var(--gutter); inset-block-start: var(--sp-3); }

/* ---------- Section heads ---------- */
.prog-head { display: grid; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.prog-head p { color: var(--c-muted); font-size: var(--fs-lg); }
.prog-lead { font-size: var(--fs-xl); line-height: 1.5; }
.prog-muted { color: var(--c-muted); font-size: var(--fs-sm); }
.prog-tbc { border-block-end: 2px dotted var(--c-field-border); color: var(--c-muted); }

/* ---------- Programs hub: image-led program cards ---------- */
.prog-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.prog-cards > li { display: grid; }
@media (min-width: 45rem) {
  .prog-cards { grid-template-columns: repeat(2, 1fr); }
  .prog-cards__lead { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .prog-cards { grid-template-columns: repeat(3, 1fr); }
  .prog-cards__lead { grid-column: span 2; grid-row: span 2; }
  .prog-card--lead { grid-template-rows: 1fr auto; }
  .prog-card--lead .prog-media { min-block-size: 18rem; }
  .prog-card--lead .media-card__img { position: absolute; inset: 0; block-size: 100%; aspect-ratio: auto; }
  .prog-card--lead .media-card__body h3 { font-size: var(--fs-2xl); }
  .prog-card--lead .media-card__body p { font-size: var(--fs-lg); }
}

/* The whole card is one link (the heading's), with a visible CTA line */
.prog-card { position: relative; }
.prog-card h3 a { color: inherit; text-decoration: none; }
.prog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prog-card h3 a:focus-visible { outline: none; }
.prog-card:has(h3 a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.prog-card:hover .prog-card__cta { text-decoration-thickness: 2px; }
.prog-card__descriptor { font-weight: 700; }
.prog-card__cta { margin-block-start: var(--sp-2); color: var(--c-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.prog-card .chip { justify-self: start; }

/* Ways to help: four photo cards, then two text rows */
.prog-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 45rem) { .prog-ways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .prog-ways { grid-template-columns: repeat(4, 1fr); } }
.prog-ways > li { display: grid; }
.prog-ways .media-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.prog-ways h3 { font-size: var(--fs-lg); }
.prog-more { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 45rem) { .prog-more { grid-template-columns: repeat(2, 1fr); } }
.prog-more li { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-white); }
.prog-more a { font: 700 var(--fs-lg)/1.3 var(--font-display); }

/* ---------- Money flow: You → Saath → the vendor (a real sequence) — KIT CANDIDATE ---------- */
.prog-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: prog-flow; }
.prog-flow li { position: relative; display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); background: var(--c-white); border-radius: var(--r-row); }
.prog-flow b { font: 700 var(--fs-xl)/1.2 var(--font-display); }
.prog-flow li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: var(--sp-6); inset-block-end: calc(-1 * var(--sp-5));
  block-size: var(--sp-5); border-inline-start: 2px dashed var(--c-marigold-ink);
}
@media (min-width: 45rem) {
  .prog-flow { grid-template-columns: repeat(3, 1fr); }
  .prog-flow li:not(:last-child)::after {
    inset-inline-start: 100%; inset-block: 50% auto; inline-size: var(--sp-5); block-size: 0;
    border-inline-start: 0; border-block-start: 2px dashed var(--c-marigold-ink);
  }
}
.prog-money { background: var(--c-marigold-wash); }
.prog-money .prog-grid { align-items: center; }

/* ---------- Generic two-column grid ---------- */
.prog-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) { .prog-grid { grid-template-columns: 5fr 7fr; gap: var(--sp-8); } }

/* ---------- Numbered steps (only where the content is a sequence) — KIT CANDIDATE ---------- */
.prog-steps { list-style: none; margin: 0; padding: 0; counter-reset: prog-step; display: grid; gap: var(--sp-5); }
.prog-steps > li {
  counter-increment: prog-step; position: relative; display: grid; gap: var(--sp-1);
  padding-inline-start: calc(var(--tap) + var(--sp-4)); align-content: start;
}
.prog-steps > li::before {
  content: counter(prog-step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%;
  background: var(--c-blue); color: var(--c-white); font: 800 var(--fs-xl)/1 var(--font-display);
}
.prog-steps > li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: calc(var(--tap) / 2 - 1px);
  inset-block: calc(var(--tap) + var(--sp-1)) calc(-1 * var(--sp-5) + var(--sp-1));
  border-inline-start: 2px dashed var(--c-blue-line);
}
.prog-steps h3 { font-size: var(--fs-lg); padding-block-start: var(--sp-2); }
@media (min-width: 60rem) {
  .prog-steps--row { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-6); }
  .prog-steps--row > li { padding-inline-start: 0; padding-block-start: calc(var(--tap) + var(--sp-3)); }
  .prog-steps--row > li:not(:last-child)::after {
    inset-block: calc(var(--tap) / 2 - 1px) auto;
    inset-inline: calc(var(--tap) + var(--sp-2)) calc(-1 * var(--sp-6) + var(--sp-2));
    border-inline-start: 0; border-block-start: 2px dashed var(--c-blue-line);
  }
}

/* ---------- Class 10/12: what we do (not a sequence) + the board-year rail ---------- */
.prog-do { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5) var(--sp-7); }
@media (min-width: 45rem) { .prog-do { grid-template-columns: repeat(2, 1fr); } }
.prog-do > li { display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-4); border-block-start: 3px solid var(--c-blue); }
.prog-do h3 { font-size: var(--fs-xl); }
.prog-do .prog-do__wide { grid-column: 1 / -1; }

/* The board-year calendar as a rail of fixed dates — KIT CANDIDATE (.date-rail) */
.prog-rail { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.prog-rail li {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--tap); font-weight: 700;
}
.prog-rail li::before {
  content: ""; flex: none; inline-size: 1rem; block-size: 1rem; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-blue);
}
.prog-rail li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: calc(0.5rem - 1px);
  inset-block: calc(50% + 0.5rem) calc(-50% - var(--sp-3) + 0.5rem); border-inline-start: 2px solid var(--c-blue-line);
}
.prog-rail li:last-child::before { background: var(--c-marigold); border-color: var(--c-marigold-ink); }
@media (min-width: 45rem) {
  .prog-rail { grid-template-columns: repeat(6, 1fr); gap: 0; }
  .prog-rail li { flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding-inline-end: var(--sp-3); }
  .prog-rail li:not(:last-child)::after {
    inset-inline: 1rem 0; inset-block: calc(0.5rem - 1px) auto; border-inline-start: 0; border-block-start: 2px solid var(--c-blue-line);
  }
}

/* ---------- Lists: checklist, what-we-fund ---------- */
.prog-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.prog-checks li { position: relative; padding-inline-start: var(--sp-6); max-inline-size: var(--measure); }
.prog-checks li::before {
  content: ""; position: absolute; inset-inline-start: var(--sp-1); inset-block-start: 0.45em;
  inline-size: 0.9rem; block-size: 0.5rem; border-inline-start: 3px solid var(--c-success); border-block-end: 3px solid var(--c-success);
  transform: rotate(-45deg);
}
.prog-fund { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.prog-fund li { padding: var(--sp-3) var(--sp-4); background: var(--c-white); border-radius: var(--r-row); border: 1px solid var(--c-line); font-weight: 500; }
.section--wash .prog-fund li { border-color: transparent; }

/* ---------- The promise band: one plain sentence, set large ---------- */
.prog-promise { background: var(--c-marigold-wash); }
.prog-promise__line { font: 800 var(--fs-2xl)/1.2 var(--font-display); max-inline-size: 24ch; text-wrap: balance; }
@media (min-width: 45rem) { .prog-promise__line { font-size: var(--fs-3xl); } }
.prog-nevers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.prog-nevers li { font: 700 var(--fs-lg)/1.35 var(--font-display); padding-inline-start: var(--sp-5); border-inline-start: 4px solid var(--c-red); }
@media (min-width: 45rem) { .prog-nevers { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-6); } }

/* ---------- Split tweaks: caption plate needs a positioned media box ---------- */
.prog-split .split__media { position: relative; }

/* ---------- Principles (women) ---------- */
.prog-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4) var(--sp-7); }
@media (min-width: 45rem) { .prog-principles { grid-template-columns: repeat(2, 1fr); } }
.prog-principles li { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }
.prog-principles b { font: 700 var(--fs-xl)/1.25 var(--font-display); color: var(--c-blue); }

/* ---------- Safety notice (women) ---------- */
.prog-safety { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-row); border-inline-start: 6px solid var(--c-red-text); background: var(--c-danger-wash); }
.prog-safety__nums { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.prog-safety__nums a { font: 800 var(--fs-2xl)/1 var(--font-display); color: var(--c-blue-ink); display: inline-flex; align-items: baseline; gap: var(--sp-2); min-block-size: var(--tap); }
.prog-safety__nums span { font: 500 var(--fs-md)/1.3 var(--font-body); color: var(--c-muted); }

/* ---------- Results (empty until the first report) ---------- */
.prog-results { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 2px dashed var(--c-line); border-radius: var(--r-card); }
.prog-results__labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- FAQ ---------- */
.prog-faq { display: grid; gap: 0; max-inline-size: 48rem; }
.prog-faq details { border-block-end: 1px solid var(--c-line); }
.prog-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-block-size: var(--tap); padding-block: var(--sp-3); cursor: pointer;
  font: 700 var(--fs-lg)/1.3 var(--font-display); list-style: none;
}
.prog-faq summary::-webkit-details-marker { display: none; }
.prog-faq summary::after { content: "+"; flex: none; font: 700 var(--fs-2xl)/1 var(--font-display); color: var(--c-blue); }
.prog-faq details[open] summary::after { content: "–"; }
.prog-faq details p { padding-block-end: var(--sp-4); }

/* ---------- Closing: blue again, a bookend to the hero ---------- */
.prog-close { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.prog-close h2 { font-size: var(--fs-2xl); max-inline-size: 26ch; }
@media (min-width: 45rem) { .prog-close h2 { font-size: var(--fs-3xl); } }
.prog-close p { color: var(--c-blue-line); }
.prog-close .btn--ghost { color: var(--c-white); text-decoration: underline; text-underline-offset: 0.2em; }
.prog-close a:not(.btn) { color: var(--c-white); }
/*
 * Hold a Hand program page (sponsor-a-child.html). Tokens only, mobile first, prefix .sac-.
 * Loaded after site.css and media.css.
 */

/* ---------- Page hero with image (visual-plan §5.2 "hero-image") ---------- */
.sac-hero .hero-haath__inner { padding-block: var(--sp-6); gap: var(--sp-3); }
.sac-hero h1 { max-inline-size: 14ch; }
.sac-hero__eyebrow { font-size: var(--fs-sm); color: var(--c-blue-line); max-inline-size: 44ch; }
.sac-hero .hero-haath__note { max-inline-size: 60ch; }
.sac-hero__banner { position: relative; margin: 0; }
/* Phones see the 21:9 master at about 4:3 (subject sits in the central 40%) */
.sac-hero__banner img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sac-hero__banner .caption-illus {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  background: var(--c-blue-ink); color: var(--c-white); padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
@media (min-width: 45rem) {
  .sac-hero__banner img { aspect-ratio: 21 / 9; max-block-size: 34rem; }
}

/* ---------- What Hold a Hand is ---------- */
.sac-what__grid { display: grid; gap: var(--sp-6); }
.sac-what__lead { font: 700 var(--fs-lg)/1.3 var(--font-display); }
.sac-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sac-way { padding: var(--sp-3) var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }
.sac-way b { color: var(--c-blue); }
.sac-what__who { padding-block-start: var(--sp-5); border-block-start: 1px solid var(--c-line); }
@media (min-width: 60rem) {
  .sac-what__grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .sac-what__who { grid-column: 1 / -1; }
}

/* ---------- Not adoption: typographic, deliberately no image ---------- */
.sac-not-adoption { padding-block-end: var(--sp-7); }
.sac-not-adoption__panel {
  display: grid; gap: var(--sp-4); padding: var(--sp-5);
  border: 2px solid var(--c-blue); border-radius: var(--r-card);
}
.sac-not-adoption__panel h2 { font-size: var(--fs-2xl); color: var(--c-blue); }
@media (min-width: 45rem) {
  .sac-not-adoption__panel { grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding: var(--sp-6); align-items: start; }
  .sac-not-adoption__panel h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); }
}

/* ---------- How it works: step illustrations + explainer film ---------- */
.sac-how__grid { display: grid; gap: var(--sp-6); }
.sac-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.sac-step {
  display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card);
}
.sac-step img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-row); }
.sac-step h3, .sac-step p { padding-inline: var(--sp-2); }
.sac-step h3 { font-size: var(--fs-lg); }
.sac-step h3 + p { margin-block-start: calc(-1 * var(--sp-2)); }
@media (min-width: 45rem) { .sac-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .sac-how__grid { grid-template-columns: 3fr 2fr; align-items: start; gap: var(--sp-7); }
  .sac-how .sac-film { position: sticky; inset-block-start: var(--sp-5); }
}

/* Film slot placeholder (plan §3.15: 1:1, marigold play disc on blue). Not a control, so not focusable. */
.sac-film { margin: 0; }
.sac-film__poster {
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  aspect-ratio: 1 / 1; padding: var(--sp-5); text-align: center;
  background: var(--c-blue); color: var(--c-white); border-radius: var(--r-card);
}
.sac-film__poster p { font: 700 var(--fs-lg)/1.3 var(--font-display); max-inline-size: 20ch; }
.sac-film__disc {
  display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem;
  border-radius: 50%; background: var(--c-marigold);
}
.sac-film__disc::after {
  content: ""; inline-size: 0; block-size: 0; margin-inline-start: 0.35rem;
  border-block: 0.75rem solid transparent; border-inline-start: 1.2rem solid var(--c-blue-ink);
}
.sac-film__caption { font-size: var(--fs-sm); color: var(--c-muted); }
.sac-film--reel { max-inline-size: 22rem; }

/* ---------- Amounts ---------- */
.sac-amounts__grid { display: grid; gap: var(--sp-6); }
.sac-tiers { font-size: var(--fs-md); }
.sac-tiers__amt { font: 700 var(--fs-lg)/1.2 var(--font-display); overflow-wrap: anywhere; }
@media (min-width: 45rem) { .sac-tiers__amt { white-space: nowrap; } }
.sac-muted { font-size: var(--fs-sm); color: var(--c-muted); gap: var(--sp-2); }
@media (min-width: 60rem) {
  .sac-amounts__grid { grid-template-columns: 3fr 2fr; gap: var(--sp-7); align-items: center; }
  .sac-film--reel { justify-self: end; inline-size: 100%; }
}

/* ---------- Where your money goes (split) ---------- */
.sac-money__rule { font: 700 var(--fs-xl)/1.3 var(--font-display); color: var(--c-blue); }

/* ---------- Safety: tick list ---------- */
.sac-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.sac-checks li { position: relative; padding-inline-start: var(--sp-6); max-inline-size: var(--measure); }
.sac-checks li::before {
  content: ""; position: absolute; inset-inline-start: 0.3rem; inset-block-start: 0.35rem;
  inline-size: 0.5rem; block-size: 0.85rem; border: solid var(--c-success);
  border-width: 0 3px 3px 0; transform: rotate(45deg);
}

/* ---------- Together (media card, horizontal from tablet) ---------- */
.sac-together__card { max-inline-size: 60rem; }
.sac-together__title { font-size: var(--fs-2xl); color: var(--c-blue); }
.sac-together__card .media-card__body { gap: var(--sp-3); }
@media (min-width: 45rem) {
  .sac-together__card { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .sac-together__card .media-card__img { block-size: 100%; }
  .sac-together__card .media-card__body { align-content: center; padding: var(--sp-6); }
}

/* ---------- Tax + FAQ ---------- */
.sac-faq__grid { display: grid; gap: var(--sp-7); }
.sac-qa details { border-block-end: 1px solid var(--c-line); }
.sac-qa summary {
  display: flex; align-items: center; min-block-size: var(--tap); padding-block: var(--sp-2);
  font-weight: 700; cursor: pointer; color: var(--c-blue-ink);
}
.sac-qa summary::before {
  content: "+"; flex: none; inline-size: 1.5rem; font: 700 var(--fs-xl)/1 var(--font-display); color: var(--c-blue);
}
.sac-qa details[open] summary::before { content: "–"; }
.sac-qa summary::-webkit-details-marker { display: none; }
.sac-qa summary { list-style: none; }
.sac-qa details p { padding: 0 0 var(--sp-4) 1.5rem; }
@media (min-width: 60rem) { .sac-faq__grid { grid-template-columns: 1fr 2fr; } }

/* ---------- Closing band (hands-same-level, text on the open left third) ---------- */
.sac-close { --c-focus: var(--c-marigold); }
.sac-close__link {
  display: inline-flex; align-items: center; min-block-size: var(--tap);
  color: var(--c-white); font-weight: 700; text-underline-offset: 0.18em;
}
/*
 * Page: Hold a Hand listing. Tokens only; every class is prefixed .listing-.
 * Kit candidates (reusable, see report): .listing-pill, .listing-pager, .avatar img.
 */

/* Hero: calmer than home. No hands; the sheet still rises over the blue. */
.listing-hero .hero-haath__inner { padding-block: var(--sp-6) var(--sp-8); gap: var(--sp-3); }
.listing-hero h1 { max-inline-size: 16ch; }
.listing-hero__eyebrow { font-size: var(--fs-sm); color: var(--c-blue-line); max-inline-size: 44ch; }

/* Layout: filters above results on mobile, a side column from 60rem */
.listing-layout { display: grid; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 60rem) {
  .listing-layout { grid-template-columns: 18rem 1fr; gap: var(--sp-7); align-items: start; }
  .listing-filters { position: sticky; inset-block-start: var(--sp-4); }
}

/* Filters: a native <details> so it works without JS */
.listing-filters__panel { border: 1px solid var(--c-line); border-radius: var(--r-card); }
.listing-filters__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-block-size: var(--tap); padding: var(--sp-3) var(--sp-4);
  font: 700 var(--fs-lg)/1.2 var(--font-display); cursor: pointer; list-style: none;
  border-radius: var(--r-card);
}
.listing-filters__toggle::-webkit-details-marker { display: none; }
.listing-filters__toggle::after {
  content: ""; inline-size: 0.6rem; block-size: 0.6rem; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg); margin-block-start: -0.3rem;
}
.listing-filters__panel[open] .listing-filters__toggle::after { transform: rotate(-135deg); margin-block-start: 0.3rem; }
.listing-filters__panel[open] .listing-filters__toggle { border-block-end: 1px solid var(--c-line); border-end-start-radius: 0; border-end-end-radius: 0; }
.listing-filters__form { padding: var(--sp-4); gap: var(--sp-5); }
.listing-filters__actions { display: grid; gap: var(--sp-2); }

.listing-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-inline-size: 0; }
.listing-fieldset legend { padding: 0; margin-block-end: var(--sp-2); }

/* Checkbox pills (kit candidate): 44px targets, visible focus, checked state */
.listing-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.listing-pill { position: relative; display: inline-flex; }
.listing-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.listing-pill span {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4);
  border: 2px solid var(--c-line); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500;
  background: var(--c-white);
}
.listing-pill input:checked + span { border-color: var(--c-blue); background: var(--c-blue-soft); font-weight: 700; }
.listing-pill input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Results head */
.listing-results { display: grid; gap: var(--sp-5); min-inline-size: 0; }
.listing-results__head { display: grid; gap: var(--sp-2); }
.listing-results__count { font-size: var(--fs-2xl); }
.listing-results__meta { font-size: var(--fs-sm); color: var(--c-muted); }
.listing-results__sample { font-size: var(--fs-sm); max-inline-size: none; }

/* Grid list reset */
.listing-grid { list-style: none; margin: 0; padding: 0; }
.listing-grid > li { display: grid; }

/* Card additions */
.child-card .avatar img, .avatar img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.listing-card__sample { justify-self: start; min-block-size: 1.5rem; font-size: var(--fs-xs); }
.listing-card__code { font-size: var(--fs-xs); color: var(--c-muted); }
.listing-card__due { justify-self: start; }
.listing-card__needs { display: grid; gap: var(--sp-1); }
.listing-card__needs-title { font: 700 var(--fs-sm)/1.3 var(--font-body); color: var(--c-muted); }
.listing-card__needlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.listing-card__more { font-size: var(--fs-sm); color: var(--c-muted); }
.listing-card__supporters { font-size: var(--fs-sm); font-weight: 500; }
.child-card .illus-label { margin-block-start: calc(-1 * var(--sp-3)); }

/* Between the grid: full-row pair of short explainers */
.listing-inline {
  grid-column: 1 / -1; display: grid; gap: var(--sp-5);
  padding: var(--sp-5); background: var(--c-marigold-wash); border-radius: var(--r-row);
}
@media (min-width: 45rem) { .listing-inline { grid-template-columns: 1fr 1fr; } }
.listing-inline__item { display: grid; gap: var(--sp-2); align-content: start; }
.listing-inline__title { font-size: var(--fs-lg); }
.listing-inline .link { font-weight: 700; justify-self: start; min-block-size: var(--tap); display: inline-flex; align-items: center; }

/* Pagination (kit candidate) */
.listing-pager { display: grid; gap: var(--sp-2); justify-items: center; padding-block-start: var(--sp-3); }
.listing-pager__status { font-size: var(--fs-sm); color: var(--c-muted); }
.listing-pager__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; align-items: center; }
.listing-pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--tap); min-block-size: var(--tap); padding-inline: var(--sp-3);
  border-radius: var(--r-pill); color: var(--c-blue); font-weight: 700; text-decoration: none;
}
.listing-pager__link:hover { background: var(--c-blue-wash); }
.listing-pager__link[aria-current="page"] { background: var(--c-blue); color: var(--c-white); }
.listing-pager__link--off { color: var(--c-muted); font-weight: 500; }
.listing-pager__gap { color: var(--c-muted); padding-inline: var(--sp-1); }

/* Preview-only variant block */
.listing-variant { display: grid; gap: var(--sp-3); padding-block-start: var(--sp-6); border-block-start: 1px dashed var(--c-line); }
.listing-variant__label { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--c-muted); }
.listing-variant .empty h3 { font-size: var(--fs-xl); }

/* Footer strip */
.listing-foot { display: grid; gap: var(--sp-2); padding-block: var(--sp-5) var(--sp-7); border-block-start: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); }
.listing-filters .choice { align-items: start; }
.listing-filters .choice input { margin-block-start: 0.2rem; flex: none; }

/* Empty-state illustrations (3:2 paper-cut, visual plan 3.5) */
.listing-empty__art { display: block; inline-size: 100%; max-inline-size: 15rem; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-row); }
/*
 * Page: Hold a Hand child profile. Tokens only; every class is prefixed .profile-.
 * Kit candidates (see report): .avatar img, .profile-check (checkbox row), the :has() reveal
 * of a choice's sub-fields, per-need progress inside .need.
 */

.profile-muted { color: var(--c-muted); font-size: var(--fs-sm); }

/* Blue band: short, so the sheet (and the child) arrives fast */
.profile-band { background: var(--c-blue); color: var(--c-white); }
.profile-band__inner { display: grid; gap: var(--sp-2); padding-block: var(--sp-4) var(--sp-8); }
.profile-band__back {
  color: var(--c-white); font-weight: 700; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap);
}
.profile-band__back::before {
  content: ""; inline-size: 0.55rem; block-size: 0.55rem;
  border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg);
}
.profile-band__sample { font-size: var(--fs-sm); color: var(--c-blue-line); }
.profile-band__sample b { color: var(--c-marigold); }

/* Layout: identity, give panel, story on mobile; story left + sticky give panel right on desktop */
.profile-layout {
  display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8);
  grid-template-areas: "id" "aside" "story";
}
.profile-id { grid-area: id; }
.profile-aside { grid-area: aside; }
.profile-story { grid-area: story; min-inline-size: 0; }
@media (min-width: 60rem) {
  .profile-layout {
    grid-template-columns: minmax(0, 1fr) 24rem; column-gap: var(--sp-8);
    grid-template-areas: "id aside" "story aside";
    align-items: start;
  }
  .profile-aside { position: sticky; inset-block-start: var(--sp-4); }
}

/* Identity */
.profile-id { display: grid; gap: var(--sp-4); grid-template-columns: auto 1fr; align-items: center; }
.profile-id__figure { margin: 0; display: grid; gap: var(--sp-2); justify-items: center; }
.profile-id__figure .illus-label { max-inline-size: 9rem; text-align: center; }
.profile-id__avatar { inline-size: 7rem; block-size: 7rem; }
.avatar img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.profile-id__text { display: grid; gap: var(--sp-1); }
.profile-id__code { font-size: var(--fs-sm); color: var(--c-muted); }
.profile-id h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
.profile-id__meta { font-size: var(--fs-lg); font-weight: 500; }
.profile-id__supporters { font-size: var(--fs-sm); color: var(--c-muted); }
.profile-id__adoption { grid-column: 1 / -1; max-inline-size: none; }
.profile-id__adoption a { font-weight: 700; }
@media (min-width: 45rem) {
  .profile-id { column-gap: var(--sp-6); }
  .profile-id__avatar { inline-size: 11rem; block-size: 11rem; }
  .profile-id__figure .illus-label { max-inline-size: 12rem; }
}

/* Give panel */
.profile-give {
  display: grid; gap: var(--sp-5); padding: var(--sp-5);
  border: 2px solid var(--c-blue); border-radius: var(--r-card); background: var(--c-white);
}
.profile-give__funding progress { block-size: 1.125rem; }
.profile-give__supporters { font-size: var(--fs-sm); font-weight: 500; }
.profile-give__form { gap: var(--sp-4); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--c-line); }
.profile-give__title { font-size: var(--fs-xl); }
.profile-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; gap: var(--sp-2); }
.profile-fieldset legend.field__label { padding: 0; margin-block-end: var(--sp-2); }
.profile-give__option { display: grid; gap: var(--sp-2); }
.profile-give__sub { border: 0; margin: 0; padding: 0 0 0 var(--sp-6); display: grid; gap: var(--sp-2); min-inline-size: 0; }
/* Reveal a choice's sub-fields only when it is chosen. Without :has(), all stay visible. */
@supports selector(:has(*)) {
  .profile-give__option:not(:has(> .choice input:checked)) > .profile-give__sub { display: none; }
}
.profile-check { display: flex; gap: var(--sp-3); align-items: center; min-block-size: var(--tap); cursor: pointer; }
.profile-check input { accent-color: var(--c-blue); inline-size: 1.25rem; block-size: 1.25rem; margin: 0; flex: none; }
.profile-give .segmented { display: flex; }
.profile-give .segmented label { flex: 1; }
.profile-give .segmented span { justify-content: center; inline-size: 100%; min-block-size: var(--tap); }
.profile-trust { font-size: var(--fs-xs); color: var(--c-muted); gap: var(--sp-1) var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--c-line); }
.profile-trust b { color: var(--c-blue-ink); }

/* Interests and dreams */
.profile-about { display: grid; gap: var(--sp-6); }
@media (min-width: 45rem) { .profile-about { grid-template-columns: 1fr 1fr; } }
.profile-about h2 { font-size: var(--fs-xl); }
.profile-quote { margin: 0; display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-4); border-inline-start: 4px solid var(--c-red); }
.profile-quote p { font: 700 var(--fs-xl)/1.35 var(--font-display); }

/* Needs */
.profile-needs { gap: var(--sp-3); }
.profile-need { row-gap: var(--sp-2); padding: var(--sp-4); align-items: start; }
.profile-need__main { display: grid; gap: var(--sp-1); }
.profile-need__name { font-size: var(--fs-lg); }
.profile-need .need__amount { text-align: end; }
.profile-need--done .need__amount { font-size: var(--fs-sm); max-inline-size: 11ch; }
.profile-need__bar { grid-column: 1 / -1; }
.profile-need__bar progress { block-size: 0.625rem; }
.profile-need--done progress::-webkit-progress-value { background: var(--c-success); }
.profile-need--done progress::-moz-progress-bar { background: var(--c-success); }
.profile-need__cta { grid-column: 1 / -1; justify-self: start; }

/* Rupee Trail explainer */
.profile-trail { padding: var(--sp-5); }
.profile-trail__note { font-size: var(--fs-sm); color: var(--c-marigold-ink); }
.profile-link { font-weight: 700; justify-self: start; display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* Privacy and safety strip */
.profile-safety { display: grid; gap: var(--sp-2); padding: var(--sp-5); background: var(--c-blue-wash); border-radius: var(--r-row); font-size: var(--fs-sm); }
.profile-safety a { font-weight: 700; display: inline-flex; align-items: center; min-block-size: var(--tap); }
/* Donate (donate.html). Tokens only; classes prefixed .donate-. Images sit below the form, never beside it. */
.donate-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 60rem) { .donate-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--sp-8); } }
.donate-form { max-inline-size: 42rem; }
.donate-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-3); min-inline-size: 0; }
.donate-legend { font: 700 var(--fs-xl)/1.25 var(--font-display); margin-block-end: var(--sp-2); padding: 0; }
/* The program list shows once "A program you choose" is picked (CSS only) */
.donate-program { display: none; padding-inline-start: var(--sp-6); }
.donate-fieldset:has(input[value="program"]:checked) .donate-program { display: grid; }
.donate-child { cursor: default; flex-wrap: wrap; justify-content: space-between; }
.donate-other { max-inline-size: 14rem; }
.donate-tax { border-block-start: 4px solid var(--c-success); }
@media (min-width: 60rem) { .donate-tax { position: sticky; inset-block-start: var(--sp-5); } }
.donate-h-sm { font-size: var(--fs-xl); }
.donate-ways { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 60rem) { .donate-ways { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.donate-fieldset .segmented { justify-self: start; }
.donate-ways h3 { font-size: var(--fs-lg); }
/* Give from abroad (donate-from-abroad.html). Tokens only; classes prefixed .abroad-. */
.abroad-question { font-weight: 700; }
.abroad-routes { display: grid; gap: var(--sp-5); }
@media (min-width: 45rem) { .abroad-routes { grid-template-columns: 1fr 1fr; } }
.abroad-route { position: relative; padding-block-start: var(--sp-6); }
.abroad-route--fcra { border: 2px solid var(--c-blue); }
.abroad-route__answer {
  position: absolute; inset-block-start: calc(-1 * var(--sp-4)); inset-inline-start: var(--sp-5);
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill); background: var(--c-blue-soft); color: var(--c-blue-ink);
  font: 800 var(--fs-lg)/1.2 var(--font-display);
}
.abroad-route--fcra .abroad-route__answer { background: var(--c-blue); color: var(--c-white); }
.abroad-route .cluster { margin-block-start: auto; }
.abroad-steps { max-inline-size: 48rem; }
.abroad-bank { border-block-start: 4px solid var(--c-blue); }
.abroad-expect { display: grid; gap: var(--sp-5) var(--sp-7); margin: 0; }
@media (min-width: 45rem) { .abroad-expect { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .abroad-expect { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abroad-expect > div { display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-blue-line); }
.abroad-expect dt { font: 700 var(--fs-lg)/1.25 var(--font-display); }
.abroad-expect dd { margin: 0; }
/* The globe and the hands sit at the two ends of this route diagram: keep more width on phones. Scoped to this
   hero, because the app bundles every page sheet into one (plan M2a E7). */
@media (max-width: 44.99rem) { .pi-hero--abroad .pi-hero__media img { aspect-ratio: 16 / 9; } }
/* CSR (csr.html). Tokens only; classes prefixed .csr-. */
.csr-fit__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 60rem) { .csr-fit__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); } .csr-fit .media-card__body { padding-inline: var(--sp-4); } }
.csr-fit h3 { color: var(--c-blue-ink); }
.csr-fit__item { justify-self: start; background: var(--c-marigold-wash); color: var(--c-marigold-ink); }
.csr-h-sm { font-size: var(--fs-xl); }
/* Impact (impact.html). Tokens only; classes prefixed .impact-. The hero photo and the numbers are
   two bands apart, with the registration facts between them (ADR 0007). */
.impact-empty { background: var(--c-white); max-inline-size: 48rem; }
.impact-empty__title { font: 700 var(--fs-xl)/1.3 var(--font-display); }
.impact-method { max-inline-size: 48rem; }

.impact-ways { display: grid; gap: var(--sp-5); }
@media (min-width: 60rem) { .impact-ways { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-7); align-items: start; } }
.impact-ways__lead { position: relative; }
.impact-ways__lead .media-card__img { aspect-ratio: 21 / 9; }
.impact-ways__lead h3 a { color: inherit; text-decoration: none; }
.impact-ways__lead h3 a::after { content: ""; position: absolute; inset: 0; }
.impact-ways__lead:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.impact-ways__list { list-style: none; margin: 0; padding: 0; display: grid; }
.impact-ways__list li { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-block-end: 1px solid var(--c-line); }
.impact-ways__list li:first-child { padding-block-start: 0; }
.impact-ways__list h3 { font-size: var(--fs-lg); }

/* The headline numbers, once published (plan 10-m2e E12): each line carries its own number, so no chart */
.impact-numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 45rem) { .impact-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.impact-numbers li { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-blue-ink);
  padding: var(--sp-3) var(--sp-4); background: var(--c-white); border-radius: var(--r-row); }
.impact-numbers__asof { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 500; }
/*
 * Get-involved pages (Phase 4b): donate-books, donate-clothes, volunteer, volunteer-teach,
 * saathi-circles, fundraise. One shared page file because the six pages share one set of
 * section templates. Every class is prefixed .inv-. Tokens only. Loaded after media.css.
 *
 * The one flourish: a dotted red trail joins the steps of a process (drive stages, the
 * volunteer onboarding timeline). It echoes the Rupee Trail: "follow it all the way".
 * Everything else stays quiet: white sheet, blue ink, one marigold button per block.
 */

/* ---------- Page hero with image (visual plan §5.2 "hero-image") ---------- */
.inv-hero { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.inv-hero__inner { display: grid; gap: var(--sp-4); padding-block: var(--sp-6); }
.inv-hero__eyebrow { color: var(--c-blue-line); font-weight: 500; }
.inv-hero h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); max-inline-size: 16ch; }
.inv-hero__lede { font-size: var(--fs-lg); max-inline-size: 44ch; }
.inv-hero__actions { padding-block-start: var(--sp-2); }
.inv-hero .btn--on-blue:hover { background: rgb(255 255 255 / 0.12); }
@media (min-width: 60rem) {
  .inv-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-8);
    align-items: end; padding-block: var(--sp-7) var(--sp-6);
  }
}
.inv-hero__head, .inv-hero__side { display: grid; gap: var(--sp-3); align-content: start; }

/* The 21:9 banner under the title band. Phones crop to 4:3 around the centre (plan §2). */
@media (max-width: 44.99rem) {
  .inv-banner .band-img__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 45rem) {
  .inv-banner .band-img__media { max-block-size: 34rem; }
}
/* The sheet rises over the banner's bottom 3rem (kit .sheet margin) */
.inv-sheet { padding-block-end: var(--sp-4); }

/* ---------- Sections inside the sheet ---------- */
.inv-section { padding-block: var(--sp-7); display: grid; gap: var(--sp-5); }
.inv-section + .inv-section { border-block-start: 1px solid var(--c-line); }
.inv-section__head { display: grid; gap: var(--sp-3); max-inline-size: var(--measure); }
.inv-section__head p { color: var(--c-muted); }
.inv-wash { background: var(--c-blue-wash); }
.inv-wash .inv-section { border: 0; }
.inv-small { font-size: var(--fs-sm); color: var(--c-muted); }
.inv-placeholder { overflow-wrap: anywhere; color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding-inline: var(--sp-1); }
.inv-lead { font: 600 var(--fs-xl)/1.4 var(--font-display); max-inline-size: 34ch; }

/* Two columns from desktop (text beside a film, a form beside its notes) */
.inv-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (min-width: 60rem) {
  .inv-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .inv-duo--form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .inv-duo--form > :first-child { position: sticky; inset-block-start: var(--sp-5); }
}

/* ---------- Numbered steps (text only) ---------- */
.inv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: inv-step; }
.inv-steps > li { counter-increment: inv-step; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-1) var(--sp-4); align-items: start; align-content: start; }
.inv-steps > li::before {
  content: counter(inv-step); grid-row: span 2; display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
  background: var(--c-blue-soft); color: var(--c-blue); font: 800 var(--fs-lg)/1 var(--font-display);
}
.inv-steps h3 { font-size: var(--fs-lg); padding-block-start: var(--sp-1); }
@media (min-width: 45rem) { .inv-steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

/* ---------- Drive stages: four illustrations on a dotted trail ---------- */
.inv-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.inv-stage { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.inv-stage__art { position: relative; }
.inv-stage__art img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-row); border: 1px solid var(--c-line); background: var(--c-white);
}
/* The trail: from each illustration to the next (decorative) */
.inv-stage:not(:last-child) .inv-stage__art::after {
  content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
  block-size: var(--sp-5); border-inline-start: 3px dotted var(--c-red);
}
.inv-stage__text { display: grid; gap: var(--sp-1); }
.inv-stage__name { font: 700 var(--fs-xl)/1.1 var(--font-display); color: var(--c-blue); }
.inv-stage__text p { font-size: var(--fs-md); }
@media (min-width: 60rem) {
  .inv-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
  .inv-stage { grid-template-columns: 1fr; align-items: start; }
  .inv-stage:not(:last-child) .inv-stage__art::after {
    inset-block-start: 50%; inset-inline-start: 100%; block-size: 0;
    inline-size: var(--sp-6); border-inline-start: 0; border-block-start: 3px dotted var(--c-red);
  }
}
.inv-stages-note { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Film slot (placeholder until the video pipeline lands) ---------- */
.inv-film { margin: 0; }
.inv-film__slot {
  aspect-ratio: 1 / 1; max-inline-size: 26rem; border-radius: var(--r-card);
  background: var(--c-blue-ink); color: var(--c-white);
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  padding: var(--sp-5); text-align: center;
}
.inv-film__disc { inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--c-marigold); display: grid; place-items: center; }
.inv-film__disc::after {
  content: ""; inline-size: 0; block-size: 0; margin-inline-start: 0.3rem;
  border-block: 0.7rem solid transparent; border-inline-start: 1.1rem solid var(--c-blue-ink);
}
.inv-film__title { font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-white); max-inline-size: 18ch; }
.inv-film__soon { font-size: var(--fs-sm); color: var(--c-blue-line); }

/* ---------- Images with an illustrative caption ---------- */
.inv-fig { position: relative; margin: 0; }
.inv-fig > .caption-illus {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2);
  background: var(--c-blue-ink); color: var(--c-white); padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
.inv-cards { display: grid; gap: var(--sp-5); }
@media (min-width: 45rem) { .inv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .inv-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.inv-card-link { font-weight: 700; color: var(--c-blue); text-decoration: underline; text-underline-offset: 0.18em; }
.inv-card-meta { font-size: var(--fs-sm); color: var(--c-muted); }
.inv-textcard { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); border: 2px dashed var(--c-line); border-radius: var(--r-card); }
.inv-textcard h3 { color: var(--c-blue); }

/* ---------- Accept / can't accept ---------- */
.inv-accept { display: grid; gap: var(--sp-5); }
@media (min-width: 45rem) { .inv-accept { grid-template-columns: 1fr 1fr; } }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.inv-list li { position: relative; padding-inline-start: 1.75rem; }
.inv-list li::before { position: absolute; inset-inline-start: 0; font-weight: 700; }
.inv-list--yes li::before { content: "✓"; color: var(--c-success); }
.inv-list--no li::before { content: "✕"; color: var(--c-red-text); }
.inv-panel { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-row); }
.inv-panel h3 { font-size: var(--fs-xl); }
.inv-panel--yes { border-block-start: 4px solid var(--c-success); }
.inv-panel--no { border-block-start: 4px solid var(--c-red-text); }

/* ---------- Ways to get items to us ---------- */
.inv-routes { display: grid; gap: var(--sp-4); }
.inv-route { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }
.inv-route h3 { font-size: var(--fs-lg); }

/* ---------- Forms ---------- */
.inv-form { display: grid; gap: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); }
@media (min-width: 45rem) { .inv-form { padding: var(--sp-6); } }
.inv-form h2 { font-size: var(--fs-2xl); }
.inv-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-inline-size: 0; }
.inv-fieldset legend { font-weight: 700; padding: 0; margin-block-end: var(--sp-2); }
.inv-choices { display: grid; gap: var(--sp-2); }
@media (min-width: 45rem) { .inv-choices--2 { grid-template-columns: 1fr 1fr; } }
.inv-form .choice { padding-block: var(--sp-2); }
.inv-form .amount-picker { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.inv-form select.input { appearance: auto; }
.inv-form textarea.input { min-block-size: 7rem; resize: vertical; }
.inv-checklist { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }
.inv-checklist .choice { background: var(--c-white); }
.inv-form-foot { display: grid; gap: var(--sp-3); }

/* Fundraiser cover choice: three pictures as radios */
.inv-covers { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 45rem) { .inv-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.inv-cover { display: grid; gap: var(--sp-2); padding: var(--sp-2); border: 2px solid var(--c-field-border); border-radius: var(--r-row); cursor: pointer; align-content: start; }
.inv-cover img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-field); }
.inv-cover__label { display: flex; gap: var(--sp-2); align-items: center; min-block-size: var(--tap); font-weight: 500; }
.inv-cover input { accent-color: var(--c-blue); inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.inv-cover:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-wash); box-shadow: inset 0 0 0 1px var(--c-blue); }
.inv-cover:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.inv-cover--own { align-content: center; justify-items: start; }
.inv-cover--own .inv-cover__blank { inline-size: 100%; aspect-ratio: 3 / 2; border: 2px dashed var(--c-line); border-radius: var(--r-field); display: grid; place-items: center; color: var(--c-muted); font-size: var(--fs-sm); }

/* ---------- Volunteer safety ---------- */
.inv-safeguards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 45rem) { .inv-safeguards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .inv-safeguards { grid-template-columns: repeat(3, 1fr); } }
.inv-safeguards li { padding: var(--sp-4); background: var(--c-white); border-radius: var(--r-row); border-inline-start: 4px solid var(--c-blue); }
.inv-safeguards b { display: block; font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-blue); margin-block-end: var(--sp-1); }
.inv-safeguards .inv-safeguards__key { border-inline-start-color: var(--c-marigold); }

/* ---------- Onboarding timeline (teach): the trail, vertical ---------- */
.inv-timeline { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: inv-t; }
.inv-timeline > li {
  counter-increment: inv-t; position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--sp-4); padding-block-end: var(--sp-5);
}
.inv-timeline > li::before {
  content: counter(inv-t); display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 50%; background: var(--c-blue); color: var(--c-white); font: 800 var(--fs-lg)/1 var(--font-display);
  position: relative; z-index: 1;
}
.inv-timeline > li:not(:last-child)::after {
  content: ""; position: absolute; inset-block: 2.75rem 0.25rem; inset-inline-start: calc(1.25rem - 1.5px);
  border-inline-start: 3px dotted var(--c-red);
}
.inv-timeline__body { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-1); }
.inv-timeline__body h3 { font-size: var(--fs-lg); }
.inv-timeline__time { font-size: var(--fs-sm); color: var(--c-muted); }
.inv-timeline__time b { color: var(--c-blue-ink); }
@media (min-width: 45rem) {
  .inv-timeline__body { grid-template-columns: minmax(0, 1fr) 13rem; column-gap: var(--sp-5); }
  .inv-timeline__body h3, .inv-timeline__body > p:not(.inv-timeline__time), .inv-timeline__body > a { grid-column: 1; }
  .inv-timeline__time { grid-column: 2; grid-row: 1 / span 3; text-align: end; }
}
/* The police-verification step is the one we are proudest of: marigold disc, warm panel */
.inv-timeline__key .inv-timeline__body { padding: var(--sp-3) var(--sp-4); background: var(--c-marigold-wash); border-radius: var(--r-row); }
.inv-timeline > .inv-timeline__key::before { background: var(--c-marigold); color: var(--c-blue-ink); }
.inv-timeline__key .inv-timeline__time { color: var(--c-marigold-ink); }

.inv-rules { counter-reset: none; display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-5); padding-inline-start: calc(var(--sp-5) + 1.25rem); border: 2px solid var(--c-blue); border-radius: var(--r-row); }
.inv-rules li { padding-inline-start: var(--sp-1); }

/* ---------- Saathi Circles ---------- */
.inv-hero--split .inv-hero__inner { padding-block: var(--sp-6) calc(var(--sp-7) + var(--sp-5)); }
@media (min-width: 60rem) { .inv-hero--split .inv-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; } }
.inv-hero__fig img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-card); }
.inv-hero__fig .caption-illus { background: var(--c-blue-ink); }
.inv-badge { justify-self: start; display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--sp-3); border-radius: var(--r-pill); background: var(--c-marigold); color: var(--c-blue-ink); font-weight: 700; font-size: var(--fs-sm); }
.inv-notify { display: grid; gap: var(--sp-2); max-inline-size: 30rem; }
.inv-notify__row { display: grid; gap: var(--sp-2); }
@media (min-width: 30rem) { .inv-notify__row { grid-template-columns: minmax(0, 1fr) auto; } }
.inv-notify .field__label { color: var(--c-white); }
.inv-notify .field__help { color: var(--c-blue-line); }

.inv-mock { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); }
.inv-mock__name { font: 700 var(--fs-xl)/1.2 var(--font-display); color: var(--c-blue); }
.inv-mock__sample { font-size: var(--fs-xs); color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding: var(--sp-1) var(--sp-2); justify-self: start; }
.inv-sees { display: grid; gap: var(--sp-4); }
.inv-sees p { padding-inline-start: var(--sp-4); border-inline-start: 4px solid var(--c-blue-soft); }
.inv-sees p:nth-child(2) { border-inline-start-color: var(--c-marigold); }

/* ---------- Fundraise ---------- */
.inv-occasions-more { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.inv-packages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 45rem) { .inv-packages { grid-template-columns: repeat(2, 1fr); } }
.inv-package { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-row); }
.inv-package h3 { font-size: var(--fs-lg); }
.inv-package__price { font: 800 var(--fs-2xl)/1 var(--font-display); color: var(--c-blue); }
.inv-package .btn { justify-self: start; margin-block-start: var(--sp-2); }
.inv-bubble {
  max-inline-size: 30rem; padding: var(--sp-3) var(--sp-4); background: var(--c-success-wash); color: var(--c-blue-ink);
  border-radius: var(--r-row); border-start-start-radius: 0; font-size: var(--fs-md);
}
.inv-bubble__caption { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- FAQ ---------- */
.inv-faq { display: grid; border-block-start: 1px solid var(--c-line); max-inline-size: 48rem; }
.inv-faq details { border-block-end: 1px solid var(--c-line); }
.inv-faq summary {
  cursor: pointer; min-block-size: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3); font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-blue-ink); list-style: none;
}
.inv-faq summary::-webkit-details-marker { display: none; }
.inv-faq summary::after { content: "+"; font-size: var(--fs-xl); color: var(--c-blue); flex: none; }
.inv-faq details[open] summary::after { content: "–"; }
.inv-faq details > p { padding-block-end: var(--sp-4); }

/* ---------- Closing band ---------- */
.inv-close { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.inv-close__inner { display: grid; gap: var(--sp-5); padding-block: var(--sp-8); justify-items: start; }
.inv-close h2 { font-size: var(--fs-3xl); max-inline-size: 22ch; color: var(--c-white); }
.inv-close .btn--on-blue:hover { background: rgb(255 255 255 / 0.12); }

/* ---------- Small helpers ---------- */
.inv-hero .link { color: var(--c-white); justify-self: start; }
.inv-notice-title { font-size: var(--fs-xl); }
.inv-form--wide { max-inline-size: 48rem; }
/*
 * Meet Your Saathi (meet-your-saathi.html) and its child page Saath Milan (saath-milan.html).
 * Tokens only, mobile first. Prefixes .mys- (shared by both pages) and .milan-.
 * Loaded after site.css and media.css.
 */

/* ---------- Page hero with image (visual-plan §5.2 "hero-image") ---------- */
.mys-hero .hero-haath__inner { padding-block: var(--sp-6); gap: var(--sp-3); }
.mys-hero h1 { max-inline-size: 16ch; }
.mys-hero__eyebrow { font-size: var(--fs-sm); color: var(--c-blue-line); }
.mys-hero__eyebrow a { color: var(--c-white); }
.mys-hero__banner { position: relative; margin: 0; }
.mys-hero__banner img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mys-hero__banner .caption-illus {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  background: var(--c-blue-ink); color: var(--c-white); padding: 0.1rem var(--sp-2); border-radius: var(--r-pill);
}
@media (min-width: 45rem) {
  .mys-hero__banner img { aspect-ratio: 21 / 9; max-block-size: 34rem; }
}

/* ---------- Shared layout bits ---------- */
.mys-cols { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) { .mys-cols { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); align-items: start; } }
.mys-list { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); max-inline-size: var(--measure); }
.mys-list b { color: var(--c-blue); }
.mys-muted { font-size: var(--fs-sm); color: var(--c-muted); }
.mys-panel { padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.section--wash .mys-panel { border-color: var(--c-blue-line); }

/* ---------- The rules, in short: the page's one bold device ---------- */
.mys-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: 2px solid var(--c-blue); }
.mys-rule {
  display: grid; gap: var(--sp-1); padding-block: var(--sp-4);
  border-block-end: 1px solid var(--c-line);
}
.mys-rule__key { font: 800 var(--fs-2xl)/1.1 var(--font-display); color: var(--c-blue); }
.mys-rule span { max-inline-size: 40ch; }
@media (min-width: 45rem) {
  .mys-rules { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
}
@media (min-width: 60rem) {
  .mys-rules { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-7); }
  .mys-rule { padding-block: var(--sp-5); }
}

/* ---------- Two ways to meet ---------- */
.mys-ways__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.mys-way { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-4); border-inline-start: 4px solid var(--c-marigold); }
.mys-way h3 { color: var(--c-blue); }
.mys-way--aside { border-inline-start-color: var(--c-blue-line); }
.mys-way--aside h3 { font-size: var(--fs-lg); }

/* ---------- The child decides ---------- */
.mys-assent__lede { font: 700 var(--fs-xl)/1.35 var(--font-display); color: var(--c-blue); }

/* Film slot placeholder (plan §3.15: 1:1, marigold play disc on blue). Not a control, so not focusable. */
.mys-film { margin: 0; max-inline-size: 26rem; }
.mys-film__poster {
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  aspect-ratio: 1 / 1; padding: var(--sp-5); text-align: center;
  background: var(--c-blue); color: var(--c-white); border-radius: var(--r-card);
}
.mys-film__poster p { font: 700 var(--fs-lg)/1.3 var(--font-display); max-inline-size: 20ch; }
.mys-film__disc {
  display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem;
  border-radius: 50%; background: var(--c-marigold);
}
.mys-film__disc::after {
  content: ""; inline-size: 0; block-size: 0; margin-inline-start: 0.35rem;
  border-block: 0.75rem solid transparent; border-inline-start: 1.2rem solid var(--c-blue-ink);
}
@media (min-width: 45rem) { .split--flip .mys-film { justify-self: end; inline-size: 100%; } }

/* ---------- Code of conduct: do / don't ---------- */
.mys-dodont { display: grid; gap: var(--sp-4); }
.mys-dodont__col { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); background: var(--c-white); border-radius: var(--r-card); border-block-start: 4px solid var(--c-success); }
.mys-dodont__col--dont { border-block-start-color: var(--c-red-text); }
.mys-dodont__col--do h3 { color: var(--c-success); }
.mys-dodont__col--dont h3 { color: var(--c-red-text); }
@media (min-width: 45rem) { .mys-dodont { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ ---------- */
.mys-faq__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) { .mys-faq__grid { grid-template-columns: 1fr 2fr; column-gap: var(--sp-7); align-items: start; } }
.mys-qa details { border-block-end: 1px solid var(--c-line); }
.section--wash .mys-qa details { border-color: var(--c-blue-line); }
.mys-qa summary {
  display: flex; align-items: center; min-block-size: var(--tap); padding-block: var(--sp-2);
  font-weight: 700; cursor: pointer; list-style: none;
}
.mys-qa summary::-webkit-details-marker { display: none; }
.mys-qa summary::before { content: "+"; flex: none; inline-size: 1.5rem; font: 700 var(--fs-xl)/1 var(--font-display); color: var(--c-blue); }
.mys-qa details[open] summary::before { content: "–"; }
.mys-qa details p { padding: 0 0 var(--sp-4) 1.5rem; }

/* ---------- Closing (blue, no image) ---------- */
.mys-close { background: var(--c-blue); color: var(--c-white); --c-focus: var(--c-marigold); }
.mys-close__inner { display: grid; gap: var(--sp-5); padding-block: var(--sp-8); justify-items: start; }
.mys-close h2 { font-size: var(--fs-3xl); max-inline-size: 22ch; }

/* ---------- Saath Milan ---------- */
.milan-tagline { font: 700 var(--fs-xl)/1.3 var(--font-display); color: var(--c-marigold); }
.milan-never { padding: var(--sp-5); background: var(--c-marigold-wash); border-radius: var(--r-row); }
.milan-never p { font: 600 var(--fs-lg)/1.45 var(--font-display); }
.milan-first { font: 700 var(--fs-lg)/1.4 var(--font-display); color: var(--c-blue); }
/* The 21:9 venue master is shown as 16:9 inside the split */
.milan-safety__media img { aspect-ratio: 16 / 9; object-fit: cover; }
.milan-dates__grid { align-items: start; }
.milan-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.milan-event {
  display: grid; gap: var(--sp-1); justify-items: start; padding: var(--sp-4) var(--sp-5);
  background: var(--c-white); border: 1px solid var(--c-blue-line); border-radius: var(--r-card);
}
.milan-event__when { font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--c-blue); }
.milan-event__meta { font-size: var(--fs-sm); color: var(--c-muted); margin-block-end: var(--sp-2); }
.milan-gifts__title { font-size: var(--fs-xl); }
.milan-sample { justify-self: start; }
/* Stories hub (stories.html). Tokens only; classes prefixed .stories-.
   Story images are objects and places, or real consented photos: never a generated person (ADR 0007). */
.stories-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.stories-filters ul { list-style: none; margin: 0; padding: 0; gap: var(--sp-2); }
.stories-filters__label { font-weight: 700; }
.stories-chip {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4);
  border: 2px solid var(--c-field-border); border-radius: var(--r-pill); color: var(--c-blue-ink); text-decoration: none; font-weight: 500;
}
.stories-chip:hover { border-color: var(--c-blue); }
.stories-chip[aria-current="page"] { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); font-weight: 700; }
.stories-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.stories-card h3 { font-size: var(--fs-xl); }
.stories-card__meta { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 500; }

/* Published stories (plan 10-m2e Task 10): the hub's cards and a story's readable column */
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.story-card { display: grid; gap: var(--sp-2); align-content: start; }
.story-card__media { margin: 0; }
.story-card__media :is(img, video) { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); }
.story-card__title { font-size: var(--fs-lg); margin: 0; }
.story-body { max-inline-size: 42rem; }
.story-body p { font-size: var(--fs-md); }

/* Plan 50-m13 GR7: a fundraiser's photo. */
.fundraiser-photo { max-inline-size: 100%; block-size: auto; border-radius: var(--r-card); }
/* Report a concern (report-a-concern.html). Tokens only; classes prefixed .concern-.
   Calm and direct: the quick exit, 112 and Childline 1098 come first; the only picture is a kind illustration. */
/* Scoped to the page: this sheet is joined into the one public bundle. */
.concern-page { padding-block-end: 5rem; }

/* Quick exit: fixed on screen at all times, thumb-reachable on phones */
.concern-exit {
  position: fixed; z-index: 20; inset-block-end: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--sp-3);
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-5);
  background: var(--c-blue-ink); color: var(--c-white); border: 2px solid var(--c-white); border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none; box-shadow: var(--shadow-dialog); --c-focus: var(--c-marigold);
}
.concern-exit:hover { background: var(--c-blue); }
/* Wide screens: top right, just below the header bar, so it never covers the language switch */
@media (min-width: 60rem) { .concern-exit { inset-block: calc(4rem + var(--sp-3)) auto; } .concern-page { padding-block-end: 0; } }

/* Emergency box: before everything else */
.concern-emergency { background: var(--c-danger-wash); border-block-end: 4px solid var(--c-red-text); }
.concern-emergency__inner { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); }
.concern-emergency h2 { font-size: var(--fs-2xl); }
.concern-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 45rem) { .concern-calls { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .concern-emergency__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--sp-7); align-items: center;
    padding-block-start: calc(var(--tap) + var(--sp-5)); }
  .concern-emergency__after { grid-column: 1 / -1; }
}
.concern-call {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-4); min-block-size: 4.5rem; background: var(--c-white);
  border: 2px solid var(--c-red-text); border-radius: var(--r-row); color: var(--c-blue-ink); text-decoration: none;
}
.concern-call:hover { background: var(--c-danger-wash); }
.concern-call__num { font: 800 var(--fs-3xl)/1 var(--font-display); color: var(--c-red-text); }
.concern-call__what { display: grid; font-weight: 700; }
.concern-call__what small { font-weight: 400; font-size: var(--fs-sm); color: var(--c-muted); }

.concern-hero__title { font-size: var(--fs-3xl); }
@media (min-width: 60rem) { .concern-hero__title { font-size: var(--fs-4xl); } }

/* For children: bigger, softer type beside the umbrella */
.concern-kids__art img { aspect-ratio: 3 / 2; max-inline-size: 28rem; }
.concern-kids__body p { font-size: var(--fs-lg); }

.concern-examples { max-inline-size: 48rem; }
@media (min-width: 60rem) { .concern-examples { grid-template-columns: 1fr 1fr; max-inline-size: none; column-gap: var(--sp-7); } }

.concern-form { display: grid; gap: var(--sp-5); max-inline-size: 44rem; }
.concern-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.concern-fieldset legend, .concern-legend-sm { font-weight: 700; margin-block-end: var(--sp-2); padding: 0; }
.concern-fieldset legend { font: 700 var(--fs-lg)/1.3 var(--font-display); }
.concern-textarea { min-block-size: 11rem; resize: vertical; }
.concern-file { padding-block: var(--sp-2); }
/* The "call now" prompt appears when "No, or I'm not sure" is chosen; CSS only, no script needed */
.concern-urgent { display: none; }
.concern-fieldset:has(input[value="no"]:checked) .concern-urgent { display: grid; }
/* "I'd like to stay anonymous" hides the name and contact boxes; the server drops them either way (FR-A-68) */
.concern-you:has(input[name="anonymous"]:checked) .concern-you__details { display: none; }
.concern-next h3 { font-size: var(--fs-lg); }
/* Contact (contact.html). Tokens only; classes prefixed .contact-.
   The one image sits beside the title; the safety callout and the form come first. */
.contact-hero__grid { display: grid; gap: var(--sp-5); padding-block: var(--sp-6) calc(var(--sp-7) + var(--sp-5)); align-items: center; }
.contact-hero h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
@media (min-width: 45rem) { .contact-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); } }
.contact-hero__media img { border-radius: var(--r-card); }

.contact-layout { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8); }
@media (min-width: 60rem) {
  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-8); align-items: start; }
  .contact-safety { grid-column: 1 / -1; }
}
.contact-safety h2 { font-size: var(--fs-xl); }
.contact-safety p { max-inline-size: none; }
.contact-form { display: grid; gap: var(--sp-5); }
.contact-textarea { min-block-size: 10rem; resize: vertical; }
.contact-h-sm { font-size: var(--fs-xl); }
/*
 * Checkout: domestic (checkout.html) and FCRA (checkout-abroad.html).
 * Tokens only. Every class here is prefixed .checkout-.
 * Forms stay calm (design-system.md): white, blue ink, one marigold button per screen.
 * Reveals use :has() so the page works without JavaScript. Browsers without :has()
 * show every optional block (see the @supports fallback at the end).
 */

/* ---------- Blue band that the sheet rises over ---------- */
.checkout-band { background: var(--c-blue); color: var(--c-white); }
.checkout-band__inner { display: grid; gap: var(--sp-2); padding-block: var(--sp-6) calc(var(--sp-7) + var(--sp-5)); }
.checkout-band h1 { font-size: var(--fs-3xl); }
.checkout-band p { color: var(--c-blue-line); }
.checkout-band a { color: var(--c-white); }

.checkout-sheet { padding-block: var(--sp-6) var(--sp-8); }

/* ---------- Two-column layout from 60rem: form, then sticky summary ---------- */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.checkout-form { display: grid; gap: var(--sp-7); min-inline-size: 0; }
@media (min-width: 60rem) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--sp-8); }
  .checkout-aside { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: var(--sp-5); }
  .checkout-form { grid-column: 1; grid-row: 1; }
}

/* ---------- Steps ---------- */
.checkout-step { display: grid; gap: var(--sp-5); }
.checkout-steps { display: grid; gap: var(--sp-7); min-inline-size: 0; }
.checkout-step .segmented { flex-wrap: wrap; max-inline-size: 100%; }
.checkout-step + .checkout-step, .checkout-steps > .checkout-step { padding-block-start: var(--sp-7); border-block-start: 1px solid var(--c-line); }
.checkout-step__head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); align-items: center; }
.checkout-step__num {
  display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  border-radius: 50%; background: var(--c-blue-soft); color: var(--c-blue);
  font: 800 var(--fs-lg)/1 var(--font-display);
}
.checkout-step__head h2 { font-size: var(--fs-xl); }
.checkout-step__head p { grid-column: 2; color: var(--c-muted); }
@media (min-width: 45rem) { .checkout-step__head h2 { font-size: var(--fs-2xl); } }

/* Fieldsets that carry the step's heading as their legend */
.checkout-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--sp-3); }
.checkout-fieldset > legend { padding: 0; margin-block-end: var(--sp-3); }
.checkout-fieldset > legend.checkout-subhead { font-weight: 700; margin-block-end: var(--sp-2); }
.checkout-group { display: grid; gap: var(--sp-4); }

/* ---------- Route question: two big choice cards ---------- */
.checkout-route { display: grid; gap: var(--sp-3); }
@media (min-width: 45rem) { .checkout-route { grid-template-columns: 1fr 1fr; } }
.checkout-route .choice { align-items: start; padding: var(--sp-4) var(--sp-5); min-block-size: 5.5rem; }
.checkout-route .choice input { margin-block-start: var(--sp-1); }
.checkout-route .choice__main b { font: 700 var(--fs-lg)/1.3 var(--font-display); }
.checkout-why { border-radius: var(--r-row); }
.checkout-why summary { cursor: pointer; color: var(--c-blue); font-weight: 700; min-block-size: var(--tap); display: inline-flex; align-items: center; }
.checkout-why p { font-size: var(--fs-sm); color: var(--c-muted); padding-block-end: var(--sp-2); }

/* ---------- Revealed blocks (no JS needed) ---------- */
.checkout-reveal { display: none; gap: var(--sp-4); padding: var(--sp-4); border-inline-start: 3px solid var(--c-blue-soft); }
.checkout-step:has(#route-yes:checked) .checkout-reveal--nri { display: grid; }
.checkout-reveal--nri:has(#nri-abroad:checked) .checkout-reveal--passport { display: grid; }
.checkout-group:has(#tax-toggle:checked) .checkout-reveal--pan { display: grid; }
.checkout-amounts:has(#amount-other:checked) ~ .checkout-reveal--amount { display: grid; }
.checkout-amounts:has(#costs-other:checked) ~ .checkout-reveal--costs { display: grid; }
.checkout-fieldset:has(#public-custom:checked) .checkout-reveal--custom { display: grid; }
.checkout-occasion:has(option[value="festival"]:checked) .checkout-reveal--festival { display: grid; }
.checkout-occasion:has(option[value="memorial"]:checked) .checkout-reveal--memorial { display: grid; }
.checkout-occasion:has(#occasion-notify:checked) .checkout-reveal--notify { display: grid; }

/* ---------- Amount pills (radio group) ---------- */
.checkout-amounts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.checkout-amounts label { position: relative; }
.checkout-amounts input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.checkout-amounts span {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4);
  border: 2px solid var(--c-line); border-radius: var(--r-pill); font-weight: 700; cursor: pointer; background: var(--c-white);
}
.checkout-amounts span small { font-weight: 400; color: var(--c-muted); margin-inline-start: var(--sp-1); }
.checkout-amounts input:checked + span { border-color: var(--c-blue); background: var(--c-blue-wash); }
.checkout-amounts input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.checkout-rupee { display: grid; grid-template-columns: auto 1fr; align-items: center; max-inline-size: 16rem; }
.checkout-rupee > span { padding-inline: var(--sp-3); font-weight: 700; color: var(--c-muted); }

/* ---------- What you're giving to ---------- */
.checkout-for { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; }
.checkout-for__name { font: 700 var(--fs-xl)/1.15 var(--font-display); }
.checkout-for__meta { font-size: var(--fs-sm); color: var(--c-muted); }
.checkout-avatar img { display: block; inline-size: 100%; block-size: 100%; }

/* Two fields side by side from 45rem */
.checkout-pair { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 45rem) { .checkout-pair { grid-template-columns: 1fr 1fr; } }
.checkout-pair--narrow { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 45rem) { .checkout-pair--narrow { grid-template-columns: 2fr 1fr; } }

.checkout-valid { font-size: var(--fs-sm); color: var(--c-success); font-weight: 500; }
.checkout-pan { text-transform: uppercase; letter-spacing: 0.06em; max-inline-size: 16rem; }

/* Illustrative-state label for the preview only; not product UI */
.checkout-preview-note { font-size: var(--fs-xs); color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding: var(--sp-1) var(--sp-3); justify-self: start; }

/* ---------- Receipt preview: calm, document-like ---------- */
.checkout-receipt { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-block-start: 4px solid var(--c-blue); border-radius: var(--r-row); }
.checkout-receipt h3 { font-size: var(--fs-lg); }
.checkout-receipt dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); }
.checkout-receipt dt { color: var(--c-muted); }
.checkout-receipt dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Policy list before the pay button ---------- */
.checkout-policy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.checkout-policy li { display: grid; gap: var(--sp-1); padding-inline-start: var(--sp-4); border-inline-start: 3px solid var(--c-blue-soft); }
.checkout-policy b { font-weight: 700; }
.checkout-policy p { font-size: var(--fs-sm); color: var(--c-muted); }
.checkout-policy li.checkout-policy__key { border-color: var(--c-red); }
.checkout-policy li.checkout-policy__key p { color: var(--c-blue-ink); font-size: var(--fs-md); }

.checkout-pay { display: grid; gap: var(--sp-3); }
.checkout-pay__secure { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Summary (aside) ---------- */
.checkout-summary { border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); }
.checkout-summary > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  min-block-size: 3.5rem; padding: var(--sp-3) var(--sp-5); font: 700 var(--fs-lg)/1.2 var(--font-display);
}
.checkout-summary > summary::-webkit-details-marker { display: none; }
.checkout-summary > summary::after { content: ""; inline-size: 0.6rem; block-size: 0.6rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: var(--sp-2); }
.checkout-summary[open] > summary::after { transform: rotate(-135deg); }
.checkout-summary__total-mini { margin-inline-start: auto; }
.checkout-summary__body { display: grid; gap: var(--sp-5); padding: 0 var(--sp-5) var(--sp-5); }
@media (min-width: 60rem) {
  .checkout-summary > summary { cursor: default; }
  .checkout-summary > summary::after, .checkout-summary__total-mini { display: none; }
}

.checkout-lines { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) 0; }
.checkout-lines dd { padding-inline-start: var(--sp-3); }
.checkout-lines dt { color: var(--c-muted); }
.checkout-lines dd { margin: 0; text-align: end; font-weight: 700; }
.checkout-lines__total { padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }
.checkout-lines dt.checkout-lines__total { color: var(--c-blue-ink); font-weight: 700; }
.checkout-lines dd.checkout-lines__total { font: 800 var(--fs-2xl)/1 var(--font-display); }
.checkout-closes { font-size: var(--fs-sm); color: var(--c-success); font-weight: 500; }
.checkout-small { font-size: var(--fs-sm); color: var(--c-muted); }
.checkout-summary .trust-strip { gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--c-line); }
.checkout-summary .trust-strip b { color: var(--c-blue-ink); }

/* ---------- FCRA hold screen ---------- */
.checkout-divider { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-block: 2px dashed var(--c-line); }
.checkout-ref { display: grid; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-blue-wash); border-radius: var(--r-row); }
.checkout-ref__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.checkout-ref__value { font: 800 var(--fs-2xl)/1 var(--font-display); color: var(--c-blue); letter-spacing: 0.02em; white-space: nowrap; }
@media (min-width: 45rem) { .checkout-ref__value { font-size: var(--fs-3xl); } }
.checkout-bank { margin: 0; display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-row); }
.checkout-bank > div { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--c-line); }
.checkout-bank > div:first-child { border-block-start: 0; }
@media (min-width: 45rem) { .checkout-bank > div { grid-template-columns: 12rem 1fr; } }
.checkout-bank dt { color: var(--c-muted); font-size: var(--fs-sm); }
.checkout-bank dd { margin: 0; font-weight: 700; }
.checkout-placeholder { font-family: var(--font-body); color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding-inline: var(--sp-2); }
.checkout-copied { font-size: var(--fs-sm); color: var(--c-success); font-weight: 700; }

/* Without :has(), show every optional block so nothing is unreachable */
@supports not selector(:has(a)) {
  .checkout-reveal { display: grid; }
}

/* Tax toggle: the receipt preview shows only when it's on; the "off" note only when it's off */
.checkout-form:has(#tax-toggle:checked) .checkout-reveal--receipt { display: grid; }
.checkout-group:not(:has(#tax-toggle:checked)) .checkout-reveal--taxoff { display: grid; }
.checkout-step:has(#freq-monthly:checked) .checkout-reveal--monthly { display: grid; }
.checkout-fieldset:has(#public-named:checked) .checkout-reveal--named { display: grid; }

/* Confirmation notes reached by in-page links (no JS needed) */
.checkout-target { display: none; }
.checkout-target:target { display: grid; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.checkout-answer { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; padding: var(--sp-3) var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }

/* Long labels must not squeeze the native control */
.checkout-form .choice input { flex: none; }
/* Aside: summary card, then the hold and "not adoption" notes, visible even when the card is collapsed */
.checkout-aside { display: grid; gap: var(--sp-4); }
.checkout-aside__note { display: grid; gap: var(--sp-2); }
.checkout-aside__note a { justify-self: start; }
.checkout-pay .btn { line-height: 1.2; padding-block: var(--sp-2); text-align: center; }
/*
 * Thank-you page (thank-you.html). Tokens only. Every class here is prefixed .thanks-.
 * The flourish is the paper-cut hands illustration in the blue band (thanks-hands-confetti):
 * the gift is the moment the two hands meet. Everything under the sheet stays calm.
 */

.thanks-hero .hero-haath__inner { padding-block: var(--sp-7) calc(var(--sp-8) + var(--sp-6)); }
.thanks-hero h1 { max-inline-size: 12ch; }
.thanks-hero__lede { font-size: var(--fs-lg); max-inline-size: 36ch; }
.thanks-hero__child { max-inline-size: 36ch; color: var(--c-blue-line); }
.thanks-hero__text { display: grid; gap: var(--sp-4); }
/* The hands illustration (visual plan 3.9): below the text on phones, beside the H1 from 45rem */
.thanks-hero__art { display: block; inline-size: 100%; max-inline-size: 22rem; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); }
@media (min-width: 45rem) {
  .thanks-hero .hero-haath__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: center; gap: var(--sp-7); }
}

.thanks-sheet { padding-block: var(--sp-6) var(--sp-8); }
.thanks-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
@media (min-width: 60rem) { .thanks-layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-8); } }
.thanks-main, .thanks-side { display: grid; gap: var(--sp-7); min-inline-size: 0; }
.thanks-side { gap: var(--sp-5); }

/* Receipt: document-like, calm */
.thanks-receipt { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--c-line); border-block-start: 4px solid var(--c-success); border-radius: var(--r-row); }
.thanks-receipt__no { display: grid; gap: var(--sp-1); }
.thanks-receipt__no span { font-size: var(--fs-sm); color: var(--c-muted); }
.thanks-receipt__no b { font: 800 var(--fs-xl)/1.1 var(--font-display); color: var(--c-blue); white-space: nowrap; }
@media (min-width: 45rem) { .thanks-receipt__no b { font-size: var(--fs-2xl); } }
.thanks-small { font-size: var(--fs-sm); color: var(--c-muted); }
.thanks-placeholder { color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding-inline: var(--sp-2); }
.thanks-preview-note { font-size: var(--fs-xs); color: var(--c-marigold-ink); background: var(--c-marigold-wash); border-radius: var(--r-field); padding: var(--sp-1) var(--sp-3); justify-self: start; }

/* What happens next: a real sequence, so it is numbered */
.thanks-next { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: thanks-step; }
.thanks-next li { counter-increment: thanks-step; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sp-3); align-items: start; }
.thanks-next li::before {
  content: counter(thanks-step); display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  border-radius: 50%; background: var(--c-blue-soft); color: var(--c-blue); font: 800 var(--fs-lg)/1 var(--font-display);
}
.thanks-next p { padding-block-start: var(--sp-1); }

/* Guest account prompt */
.thanks-account { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 2px solid var(--c-blue); border-radius: var(--r-card); }
.thanks-account h2, .thanks-section h2 { font-size: var(--fs-xl); }
.thanks-section { display: grid; gap: var(--sp-4); }
.thanks-trail-label { font-size: var(--fs-xs); color: var(--c-marigold-ink); }
/*
 * Donor panel (account.html). Page classes use the .account- prefix.
 * Tokens only; no raw hex. Calm screen: white, blue ink, one marigold button per block.
 * The one warm moment is the Rupee Trail, drawn as a path between payments.
 */

/* ---------- Greeting band: blue, with the sheet rising over it ---------- */
.account-head { background: var(--c-blue); color: var(--c-white); }
.account-head__inner { display: grid; gap: var(--sp-2); padding-block: var(--sp-6) calc(var(--sp-7) + var(--sp-5)); }
.account-head h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.account-head__summary { font-size: var(--fs-lg); max-inline-size: 52ch; }
.account-head__summary b { font-family: var(--font-display); font-weight: 700; color: var(--c-white); white-space: nowrap; }
.account-head__count { color: var(--c-blue-line); }
.account-head__sample { font-size: var(--fs-xs); color: var(--c-blue-line); }

/* ---------- Layout: nav + main ---------- */
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-5) var(--sp-8); }
.account-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-inline-size: 0; }
@media (min-width: 60rem) {
  .account-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-7); padding-block-start: var(--sp-6); }
}

/* Panel nav: a scrolling strip of pills on mobile, a sidebar from 60rem */
.account-nav { min-inline-size: 0; }
.account-nav__list {
  list-style: none; margin: 0; padding: 0 0 var(--sp-2);
  display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: thin;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
}
.account-nav a {
  display: flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4);
  border-radius: var(--r-pill); color: var(--c-blue-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.account-nav a:hover { background: var(--c-blue-wash); }
.account-nav a[aria-current="page"] { background: var(--c-blue-soft); font-weight: 700; }
@media (min-width: 60rem) {
  .account-nav__list {
    position: sticky; inset-block-start: var(--sp-5);
    flex-direction: column; overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .account-nav a { white-space: normal; }
  .account-nav__end { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }
}

/* ---------- Sections ---------- */
.account-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-7); border-block-start: 1px solid var(--c-line); scroll-margin-block-start: var(--sp-4); }
.account-section__head { display: grid; gap: var(--sp-2); }
.account-section__head p { color: var(--c-muted); }
.account-section__head--row { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 45rem) { .account-section__head--row { grid-template-columns: 1fr auto; } }
.account-tight { gap: var(--sp-2); }
.account-fine { font-size: var(--fs-sm); color: var(--c-muted); }

/* Needs your attention */
.account-attention { display: grid; gap: var(--sp-3); padding-block-end: var(--sp-6); }
.account-attention__title { font-size: var(--fs-lg); }
.account-attention__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.account-attention__list .notice { grid-template-columns: 1fr; align-items: center; }
.account-attention__list a { font-weight: 700; display: inline-flex; align-items: center; min-block-size: var(--tap); }
@media (min-width: 45rem) { .account-attention__list .notice { grid-template-columns: 1fr auto; gap: var(--sp-4); } }

/* ---------- My Saathis ---------- */
.avatar img { display: block; inline-size: 100%; block-size: 100%; }
.child-card .child-card__name { font-size: var(--fs-lg); }
.account-chip--done { background: var(--c-success-wash); color: var(--c-success); }
.account-chip--school { background: var(--c-white); color: var(--c-blue-ink); border: 1px solid var(--c-line); margin-inline-start: var(--sp-2); vertical-align: middle; }
.account-latest { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }
.account-latest__label { font-weight: 700; font-size: var(--fs-sm); }

/* ---------- Gifts table ---------- */
.account-status--failed { color: var(--c-red-text); font-weight: 500; }
.account-cell-link { display: block; font-size: var(--fs-sm); }
.table td { vertical-align: top; }

/* ---------- Rupee Trail: the path from one gift to each payment ---------- */
.account-verify { gap: var(--sp-2); }
.account-verify__title { font-size: var(--fs-lg); }
.account-trail { gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
@media (min-width: 45rem) { .account-trail { padding: var(--sp-6); } }
.account-trail__head { display: grid; gap: var(--sp-1); }
.account-trail__head .trail__title { font-size: var(--fs-xl); }
.account-trail__receipt { font-size: var(--fs-sm); color: var(--c-marigold-ink); }
.account-trail__sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.account-trail__sums div { display: grid; gap: var(--sp-1); align-content: start; }
.account-trail__sums dt { font-size: var(--fs-sm); color: var(--c-marigold-ink); }
.account-trail__sums dd { margin: 0; font: 800 var(--fs-2xl)/1 var(--font-display); }
.account-trail__bar progress { background: var(--c-white); }
.account-trail__bar progress::-webkit-progress-bar { background: var(--c-white); }

.account-trail__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.account-trail__row {
  position: relative; padding-inline-start: var(--sp-5); padding-block: var(--sp-3);
  border-block-start: 0;
}
/* the trail: a dotted line with a stop at each payment */
.account-trail__row::before {
  content: ""; position: absolute; inset-inline-start: 0.3125rem; inset-block: 0;
  border-inline-start: 2px dotted var(--c-marigold-ink);
}
.account-trail__row:first-child::before { inset-block-start: var(--sp-4); }
.account-trail__row:last-child::before { block-size: var(--sp-4); }
.account-trail__row::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--sp-3) + 0.3rem);
  inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-marigold-wash);
}
.account-trail__row > p { margin: 0; }
.account-trail__amt { font: 700 var(--fs-lg)/1.2 var(--font-display); text-align: end; }
.account-trail__row .trail__vendor { font-size: var(--fs-md); }
.account-trail__row--transfer::after { background: var(--c-blue); }
.account-trail__row--unspent::after { background: var(--c-marigold-wash); box-shadow: inset 0 0 0 2px var(--c-marigold-ink), 0 0 0 3px var(--c-marigold-wash); }
.account-trail__row--unspent .trail__vendor, .account-trail__row--unspent .account-trail__amt { color: var(--c-marigold-ink); }

/* donor-terms reminder, next to the school */
.account-terms {
  grid-column: 1 / -1; display: grid; gap: var(--sp-1); margin-block-start: var(--sp-2);
  padding: var(--sp-3); background: var(--c-white); border-radius: var(--r-field);
  border-inline-start: 4px solid var(--c-blue); font-size: var(--fs-sm);
}
.account-example {
  grid-column: 1 / -1; justify-self: start; font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-marigold-ink); border: 1px dashed var(--c-marigold-ink); border-radius: var(--r-pill); padding-inline: var(--sp-2);
}
.account-trail__prov { font-size: var(--fs-sm); color: var(--c-marigold-ink); }

/* explainers */
.account-explain { display: grid; gap: var(--sp-2); }
.account-explain details { border-block-end: 1px solid var(--c-line); }
details.account-explain { border-block-end: 1px solid var(--c-line); }
.account-explain summary {
  display: flex; align-items: center; min-block-size: var(--tap); cursor: pointer;
  font-weight: 700; color: var(--c-blue);
}
.account-explain details > p, details.account-explain > ul { padding-block-end: var(--sp-3); }
.account-optin { max-inline-size: 36rem; }
.account-optin .choice__main { gap: var(--sp-1); }

/* ---------- Receipts ---------- */
.account-receipts { list-style: none; margin: 0; padding: 0; display: grid; }
.account-receipt {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-3); align-items: center;
  padding-block: var(--sp-3); border-block-end: 1px solid var(--c-line);
}
.account-receipt .btn { justify-self: start; padding-inline: 0; }
@media (min-width: 45rem) {
  .account-receipt { grid-template-columns: 1fr auto; }
  .account-receipt .btn { padding-inline: var(--sp-3); }
}
.account-receipt__no { font-weight: 500; }
.account-receipts__more { display: grid; gap: var(--sp-2); }

/* ---------- Monthly plan ---------- */
.account-plan { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-card); }
@media (min-width: 45rem) { .account-plan { padding: var(--sp-5); } }
.account-plan__failed { gap: var(--sp-3); }
.account-plan__body { display: grid; gap: var(--sp-2); }
.account-plan__title { font-size: var(--fs-2xl); }
.account-plan__actions { padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); }

.account-dialog { inline-size: min(32rem, 92vw); }
.account-dialog:target:not([open]) {
  display: block; position: static; margin-block: var(--sp-5) 0; margin-inline: 0; max-inline-size: none; inline-size: auto;
  border: 2px solid var(--c-blue); box-shadow: none;
}
.account-fieldset { border: 0; margin: 0; padding: 0; gap: var(--sp-2); }
.account-fieldset legend { padding: 0; margin-block-end: var(--sp-2); }
textarea.input { resize: vertical; }

/* ---------- Updates ---------- */
.account-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 45rem) { .account-updates { grid-template-columns: 1fr 1fr; } }
.account-update { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.account-update__title { font-size: var(--fs-lg); }

/* ---------- Pledges, visits ---------- */
.account-pledge { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-blue-wash); border-radius: var(--r-row); }
.account-elig { display: grid; gap: var(--sp-3); }
.account-elig__title { font-size: var(--fs-lg); }
.account-elig__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.account-elig__todo { position: relative; padding-inline-start: var(--sp-6); }
.account-elig__todo::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.25rem;
  inline-size: 1.125rem; block-size: 1.125rem; border: 2px solid var(--c-muted); border-radius: 50%;
}
.account-rules { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-1); }

/* ---------- Settings ---------- */
.account-notify th[scope="row"] { font-weight: 500; color: var(--c-blue-ink); }
.account-notify td { font-weight: 500; }
.account-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.account-links a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 700; margin-inline-end: var(--sp-2); }

.account-concern { margin-block-start: var(--sp-5); }
.account-concern a { font-weight: 700; }
.account-trail, .account-plan, .account-plan__failed, .account-update, .child-card { grid-template-columns: minmax(0, 1fr); }
.account-trail__row { grid-template-columns: minmax(0, 1fr) auto; }
.account-section__head--row > .btn { justify-self: start; }
.child-card { align-content: start; }

/* ---------- Empty states (preview variants; visual plan 3.13) ---------- */
.account-variant__label { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--c-muted); }
.account-empty-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.account-empty { padding: var(--sp-5); align-content: start; }
.account-empty h3 { font-size: var(--fs-lg); }
.account-empty__art { display: block; inline-size: 100%; max-inline-size: 15rem; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-row); }

/* ---------- Sign-in, sign-up and the link pages (plan 23-m5a): one narrow form under the band ---------- */
.account-auth { display: grid; gap: var(--sp-5); max-inline-size: 30rem; }
.account-auth__social { display: grid; gap: var(--sp-2); }
.account-auth__or { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); }
.account-auth__or::before, .account-auth__or::after { content: ""; flex: 1; border-block-start: 1px solid var(--c-line); }
.account-auth__links { display: grid; gap: var(--sp-2); }
.account-auth__links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.account-sheet { padding-block: var(--sp-6) var(--sp-8); }
/* Signing out is a POST, so the last nav item is a button drawn like its sibling links (plan 24-m5b). */
.account-nav__signout {
  display: flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--sp-4); inline-size: 100%;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--c-blue-ink); font: inherit; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.account-nav__signout:hover { background: var(--c-blue-wash); }
.account-messages { padding-block-end: var(--sp-4); }
.account-main .child-card .illus-label { margin-block-start: 0; }

/* Safety checks (plan 42-m10a): one block per item, its state as a chip, and the item's own form below. */
.screen-list { display: grid; gap: var(--sp-4); padding: 0; list-style: none; }
.screen-item { display: grid; gap: var(--sp-3); padding-block-end: var(--sp-4); border-block-end: 1px solid var(--c-line); }
.screen-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.screen-item__head h2 { font-size: var(--fs-lg); margin: 0; }
.screen-chip--pending { background: var(--c-marigold-wash); color: var(--c-marigold-ink); }
.screen-form { display: grid; gap: var(--sp-3); max-inline-size: 36rem; }
.screen-quiz fieldset { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.screen-quiz legend { font-weight: 600; margin-block-end: var(--sp-2); }
.screen-module { padding-block: var(--sp-3); border-block-end: 1px solid var(--c-line); }
.screen-module h2 { font-size: var(--fs-lg); }
.referee-form { display: grid; gap: var(--sp-4); max-inline-size: 44rem; }

/* Meet Your Saathi (plan 43-m10b): each step, met or left, with its action. */
.visit-steps { display: grid; gap: var(--sp-2); padding: 0; list-style: none; }
.visit-step { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline; padding-block: var(--sp-2); border-block-end: 1px solid var(--c-line); }
.visit-step--done { color: var(--c-muted); }

.checkin-qr { background: #fff; padding: var(--sp-2); }