@charset "UTF-8";
:root {
  --ink: #1a1611;
  --ink-soft: #3d3730;
  --muted: #6b6559;
  --forest: #0F3D2E;
  --forest-deep: #082218;
  --forest-soft: #1b5240;
  --cream: #F5EEDF;
  --cream-light: #FAF5EA;
  --paper: #FBF7EE;
  --gold: #A67B3D;
  --gold-light: #C8A165;
  --gold-soft: #E8D5B0;
  --red: #8B2B1E;
  --ink-2: var(--ink-soft);
  --cream-2: var(--cream-light);
  --cream-3: var(--cream);
  --ochre: var(--gold);
  --ochre-deep: #805F2E;
  --brick: var(--red);
  --moss: #4f8368;
  /* Functional state tokens (rare). Required as light-mode defaults so
     inline var(--success-soft) styles in magic-link-sent and similar
     confirmation states have a value to fall through to. The PaletteSettings
     manuscript theme emits OKLCH values for these on top via the
     <style id="palette-overrides"> block; these are the safety net. */
  --success: oklch(0.55 0.10 155);
  --success-soft: oklch(0.92 0.04 155);
  --warning: oklch(0.65 0.13 70);
  --danger: oklch(0.50 0.16 25);
  --paper-deep: oklch(0.88 0.015 70);
  --paper-edge: oklch(0.82 0.02 65);
  /* ink-faint deepened from L=0.62 to L=0.50 so accidental text use
     still passes WCAG AA against paper (~5.5:1 vs prior 3.05:1).
     Visual hierarchy ink → ink-soft (0.42) → ink-faint (0.50) is
     preserved; the latter two are intentionally close so disabled-state
     text and placeholder text don't read as "broken". */
  --ink-faint: oklch(0.50 0.02 270);
  --vermillion: oklch(0.55 0.18 32);
  --vermillion-deep: oklch(0.45 0.16 30);
  --vermillion-soft: oklch(0.92 0.06 32);
  /* Vermillion-on-paper at L=0.55 contrasts at ~4.07:1, below WCAG AA
     for body text (4.5:1). Use --vermillion-text (L=0.48) for any
     text usage; reserve the brighter --vermillion for fills (button
     backgrounds, icon backgrounds where contrast is on the foreground
     glyph against the fill, not against paper). */
  --vermillion-text: oklch(0.48 0.17 32);
  --sepia: oklch(0.50 0.05 50);
  --sepia-soft: oklch(0.66 0.04 55);
  --gold-leaf: oklch(0.75 0.10 75);
  --gold-leaf-bright: oklch(0.85 0.13 80);
  --rule: oklch(from var(--ink) l c h / 0.14);
  --shadow: 0 2px 12px oklch(from var(--ink) l c h / 0.08);
  --line: oklch(from var(--ink) l c h / 0.14);
  --line-dark: oklch(from var(--paper) l c h / 0.18);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --fs-eyebrow: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.8rem + 2.4vw, 3.75rem);
  --fs-display: clamp(2.75rem, 2rem + 3.4vw, 4.75rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-loose: 1.75;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(from var(--ink) l c h / 0.06);
  --shadow-md: 0 6px 16px oklch(from var(--ink) l c h / 0.08);
  --shadow-lg: 0 18px 48px oklch(from var(--ink) l c h / 0.16);
  --container-max: 1240px;
  --nav-height: 72px;
  /* Height of the optional utility bar that sits above the main nav.
     Required by the body padding + nav-top calc rules at lines 483-505;
     without this token the calc() falls through and the nav covers
     the body content + the utility bar covers the wordmark. */
  --utility-bar-height: 36px;
  --scroll-offset: calc(var(--nav-height) + var(--utility-bar-height) + 8px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;
  --font-en-display: "Inria Serif", "EB Garamond", Georgia, serif;
  --font-en-body: "IBM Plex Sans", "Inter Tight", system-ui, sans-serif;
  --font-bn: "Hind Siliguri", system-ui, sans-serif;
  --font-ar-display: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
  --font-ar-body: "Tajawal", system-ui, sans-serif;
}


html {
  font-synthesis: style weight;
  font-family: var(--font-en-body);
}

body {
  font-family: var(--font-en-body);
}

body.lang-en {
  font-family: var(--font-en-body);
}

body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en .hero__headline,
body.lang-en .about-tile__headline,
body.lang-en .appeal__title,
body.lang-en .donate-preview__title {
  font-family: var(--font-en-display);
}

body.lang-bn {
  font-family: var(--font-bn);
}

body.lang-bn h1, body.lang-bn h2, body.lang-bn h3 {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar {
  font-family: var(--font-ar-body);
}

body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .hero__headline {
  font-family: var(--font-ar-display);
}

[dir="rtl"] .donate-preview__see-all::after,
[dir="rtl"] .about-tile__link::after,
[dir="rtl"] .btn--arrow::after {
  transform: scaleX(-1);
}



html {
  font-synthesis: style weight;
  font-family: var(--font-en-body);
}

body {
  font-family: var(--font-en-body);
}

body.lang-en {
  font-family: var(--font-en-body);
}

body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en .hero__headline,
body.lang-en .about-tile__headline,
body.lang-en .appeal__title,
body.lang-en .donate-preview__title {
  font-family: var(--font-en-display);
}

body.lang-bn {
  font-family: var(--font-bn);
}

body.lang-bn h1, body.lang-bn h2, body.lang-bn h3 {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar {
  font-family: var(--font-ar-body);
}

body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .hero__headline {
  font-family: var(--font-ar-display);
}

[dir="rtl"] .donate-preview__see-all::after,
[dir="rtl"] .about-tile__link::after,
[dir="rtl"] .btn--arrow::after {
  transform: scaleX(-1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Guarantee the HTML `hidden` attribute always hides the element,
   even when other rules set an explicit `display` value. Without
   this, a rule like `.foo { display: flex; }` overrides the user
   agent's `[hidden] { display: none; }` and the element stays
   visible: which broke the dedication accordion on the basket
   checkout. `until-found` is left visible so search-in-page keeps
   working when we adopt that newer collapsible pattern. */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height, 72px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--vermillion-text, var(--gold));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--forest);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-tight);
  color: var(--ink);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  color: var(--vermillion-text, var(--gold));
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[id] {
  scroll-margin-top: var(--scroll-offset);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  /* `--cta-bg` is theme-defined per-theme: see tokens.css and
     PaletteSettings._THEME_TOKENS. Manuscript routes this to
     vermillion; Paddy/Maghrib/Forest-Classic route it to the brand
     primary (--forest); Dawn routes it to saffron. Components that
     used to override .btn--primary to var(--gold) (e.g.
     .quick-donate .btn--primary) now inherit this directly so
     "Donate" is the same colour everywhere on the page. */
  background: var(--cta-bg, var(--forest));
  color: var(--cta-fg, var(--cream));
}

.btn--primary:hover {
  background: var(--cta-bg-hover, var(--forest-deep));
  color: var(--cta-fg, var(--cream));
}

.btn--gold {
  background: var(--gold);
  color: var(--forest-deep);
}

.btn--gold:hover {
  background: var(--gold-light);
  color: var(--forest-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--line);
}

.btn--ghost:hover {
  background: var(--cream);
  color: var(--forest-deep);
}

.btn--full {
  width: 100%;
}

/* Opacity-only reveal (DESIGN.md: no movement on reveal). */
.reveal {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.toast {
  position: fixed;
  inset-inline: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%) translateY(120%);
  background: var(--forest-deep);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  pointer-events: none;
  z-index: 60;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



html {
  font-synthesis: style weight;
  font-family: var(--font-en-body);
}

body {
  font-family: var(--font-en-body);
}

body.lang-en {
  font-family: var(--font-en-body);
}

body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en .hero__headline,
body.lang-en .about-tile__headline,
body.lang-en .appeal__title,
body.lang-en .donate-preview__title {
  font-family: var(--font-en-display);
}

body.lang-bn {
  font-family: var(--font-bn);
}

body.lang-bn h1, body.lang-bn h2, body.lang-bn h3 {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar {
  font-family: var(--font-ar-body);
}

body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .hero__headline {
  font-family: var(--font-ar-display);
}

[dir="rtl"] .donate-preview__see-all::after,
[dir="rtl"] .about-tile__link::after,
[dir="rtl"] .btn--arrow::after {
  transform: scaleX(-1);
}

.skip-link {
  position: absolute;
  top: -40px;
  inset-inline-start: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-md);
  text-decoration: none;
  z-index: 100;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-3);
}

/* ------------------------------------------------------------------
   Utility bar: slim rotating strip above the main site header.
   Text is intentionally quiet: the brief calls for "calm and premium,
   not casino ticker". Fixed-positioned so it pairs with the fixed nav;
   the nav shifts down by --utility-bar-height when the bar is visible.
   ------------------------------------------------------------------ */



.site-utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;  /* above .site-nav (z 40) so the scroll-in animation is clean */
  height: var(--utility-bar-height);
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  overflow: hidden;
  border-bottom: 1px solid transparent;
}

.site-utility-bar[hidden] {
  display: none !important;
}

/* Reserve space for the bar + nav on body, and push the nav below it.
   Using :has() so we automatically zero the offset when the bar is
   hidden (responsive toggles, JS fetch failure, editor switch off). */
body:has(.site-utility-bar:not([hidden])) {
  padding-top: calc(var(--nav-height) + var(--utility-bar-height));
}

body:has(.site-utility-bar:not([hidden])) .site-nav {
  top: var(--utility-bar-height);
}

/* Responsive show/hide: editor can toggle per device class. */
@media (max-width: 767.98px) {
  .site-utility-bar--hide-mobile { display: none !important; }
  body:has(.site-utility-bar--hide-mobile) {
    padding-top: var(--nav-height);
  }
  body:has(.site-utility-bar--hide-mobile) .site-nav { top: 0; }
}

@media (min-width: 768px) {
  .site-utility-bar--hide-desktop { display: none !important; }
  body:has(.site-utility-bar--hide-desktop) {
    padding-top: var(--nav-height);
  }
  body:has(.site-utility-bar--hide-desktop) .site-nav { top: 0; }
}

/* When the mobile menu is open the utility bar is visual clutter above
   an already-busy overlay. nav.js sets body.body--nav-open on toggle -
   drop the bar and reclaim its vertical slot for the menu. */
body.body--nav-open .site-utility-bar {
  display: none !important;
}

body.body--nav-open {
  padding-top: var(--nav-height) !important;
}

body.body--nav-open .site-nav {
  top: 0 !important;
}

/* Theme variants ------------------------------------------------- */

.site-utility-bar--dark {
  background: var(--forest-deep);
  color: var(--cream-light);
  border-bottom-color: oklch(from var(--paper) l c h / 0.08);
}

.site-utility-bar--light {
  background: var(--cream-light);
  color: var(--forest-deep);
  border-bottom-color: var(--line);
}

/* Inner layout --------------------------------------------------- */

.site-utility-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
}

.site-utility-bar__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.site-utility-bar__slide {
  margin: 0;
  padding: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.site-utility-bar__slide.is-active {
  opacity: 1;
  transform: translateY(0);
}

.site-utility-bar__placeholder {
  display: inline-block;
  min-width: 1px;
}

/* Slide-specific inline elements -------------------------------- */

.site-utility-bar__meta {
  opacity: 0.72;
  font-weight: 400;
}

.site-utility-bar__sep {
  opacity: 0.4;
  padding: 0 0.15em;
  font-weight: 400;
}

.site-utility-bar__prayer {
  opacity: 0.85;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.site-utility-bar__prayer.is-next {
  opacity: 1;
  font-weight: 700;
  color: var(--gold-light);
}

.site-utility-bar--light .site-utility-bar__prayer.is-next {
  color: var(--vermillion-text, var(--gold));
}

.site-utility-bar__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.site-utility-bar__rel {
  opacity: 0.7;
  font-weight: 400;
}

.site-utility-bar__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 0.92;
  transition: opacity var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

/* Must re-declare `color: inherit` on hover/focus: the site-wide
   `a:hover { color: var(--forest) }` rule otherwise wins and turns the
   link forest-green, which disappears into the dark theme's forest-deep
   background. Gold-tinted underline replaces the color shift so the
   hover signal is clear without fighting the bar's palette. */
.site-utility-bar__link:hover,
.site-utility-bar__link:focus-visible {
  color: inherit;
  opacity: 1;
  outline: none;
  border-bottom-color: var(--gold-light);
}

.site-utility-bar--light .site-utility-bar__link:hover,
.site-utility-bar--light .site-utility-bar__link:focus-visible {
  border-bottom-color: var(--vermillion-text, var(--gold));
}

/* Controls: prev/next. Hidden until hover/focus on desktop; always
   hidden on small screens (swipe takes over). */

.site-utility-bar__controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.site-utility-bar:hover .site-utility-bar__controls,
.site-utility-bar:focus-within .site-utility-bar__controls {
  opacity: 1;
}

.site-utility-bar__ctrl {
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  width: 24px;
  height: 24px;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.site-utility-bar--dark .site-utility-bar__ctrl:hover {
  opacity: 1;
  background: oklch(from var(--paper) l c h / 0.08);
  border-color: oklch(from var(--paper) l c h / 0.18);
}

.site-utility-bar--light .site-utility-bar__ctrl:hover {
  opacity: 1;
  background: oklch(from var(--ink) l c h / 0.06);
  border-color: oklch(from var(--ink) l c h / 0.18);
}

.site-utility-bar__ctrl:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 1px;
  opacity: 1;
}

@media (max-width: 600px) {
  .site-utility-bar {
    font-size: 0.75rem;
  }
  .site-utility-bar__controls {
    display: none;  /* swipe replaces buttons on phones */
  }
}

/* Respect reduced motion: instant swap, no fade/slide. */
@media (prefers-reduced-motion: reduce) {
  .site-utility-bar__slide {
    transition: none;
    transform: none;
  }
}

/* position: fixed (not sticky) because html/body have `overflow-x: clip`
   to suppress page-level horizontal scroll; on iOS Safari that combo
   stops `position: sticky` from pinning: the header scrolls away with
   the page. `fixed` anchors to the viewport regardless of any ancestor
   overflow setting, which is what we actually want here. The offsetting
   padding lives on <body> (see body.has-sticky-nav below). */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Reserve the header's own height so the first paint of content doesn't
   hide under the fixed bar. Matches --nav-height defined on :root. */
body {
  padding-top: var(--nav-height);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-height);
  position: relative;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--forest);
  text-decoration: none;
}

.site-nav__brand:hover {
  color: var(--forest-deep);
}

.site-nav__brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.site-nav__brand-mark--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-soft) 100%);
  color: var(--gold-light);
  padding: 6px;
  box-shadow: var(--shadow-sm);
}

.site-nav__brand-mark--placeholder svg {
  width: 100%;
  height: 100%;
}

.site-nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-nav__brand-line {
  font-family: var(--font-en-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--forest);
  white-space: nowrap;
}

.site-nav__brand-est {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

.site-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--forest);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.site-nav__toggle:hover {
  background: var(--cream-light);
  border-color: var(--gold-soft);
}

.site-nav__toggle-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
  align-items: stretch;
}

.site-nav__toggle-icon span {
  display: block;
  height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  transform-origin: center;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
  padding-block: var(--space-2);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__list a:hover {
  color: var(--forest);
}

.site-nav__list a:hover::after {
  transform: scaleX(1);
}

.site-nav__donate {
  padding: 0.55rem 1.1rem;
  font-size: 0.9375rem;
}

.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-toggle {
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  padding-block: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__dropdown-toggle::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__dropdown-toggle svg,
.site-nav__dropdown-chevron {
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
  /* The chevron sits at the same colour as the label and uses a
     slightly bolder stroke so it reads clearly even in the soft-grey
     resting state. */
  stroke: currentColor;
  vertical-align: middle;
  /* Nudge it down a hair so the chevron's optical centre lines up
     with the lowercase letters of "Appeals". */
  margin-block-start: 1px;
}

.site-nav__dropdown-toggle:hover, .site-nav__dropdown-toggle[aria-expanded="true"] {
  color: var(--forest);
}

.site-nav__dropdown-toggle:hover::after, .site-nav__dropdown-toggle[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.site-nav__dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-nav__dropdown-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: -0.5rem;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);
  z-index: 20;
}

/* Hover bridge: fills the gap between the toggle and the menu so the
   cursor can travel from the button down into the menu without crossing
   "empty" space and dropping the LI's :hover state. Without this, the
   menu would close mid-traversal and items would be unclickable. */
.site-nav__dropdown-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(-1 * var(--space-2) - 2px);
  height: calc(var(--space-2) + 4px);
  background: transparent;
}

.site-nav__dropdown-menu a {
  display: block;
  padding: 0.65rem var(--space-4);
  color: var(--forest);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.site-nav__dropdown-menu a::after {
  display: none;
}

.site-nav__dropdown-menu a:hover, .site-nav__dropdown-menu a:focus-visible {
  background: oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.12);
  color: var(--forest-deep);
  outline: none;
}

.site-nav__dropdown-menu__divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--line);
  list-style: none;
}

/* Grouped variant: appeals dropdown becomes a mega-menu on desktop:
   wide panel with each group rendering as its own column (4 across).
   Below 900px we collapse back to a single stack so phones get the
   familiar accordion-style reading order, with each section as a
   labelled block. */
.site-nav__dropdown-menu--grouped {
  /* Mega-menu panel: wider than the trigger. JS in nav.js measures
     viewport + trigger position on every open and sets an inline
     `left` value so the panel never overflows either edge. The CSS
     default (`left: 0; right: auto`) is the no-JS fallback and
     extends the panel rightward from the trigger. */
  min-width: 600px;
  max-width: min(800px, calc(100vw - 32px));
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-4);
  left: 0;
  right: auto;
}
.site-nav__dropdown-group {
  list-style: none;
  margin: 0;
}
.site-nav__dropdown-group-details {
  /* On desktop the <details> is always open (synced via nav.js) so the
     summary acts as a static section heading. The native disclosure
     marker is suppressed and our own chevron is hidden via the desktop
     CSS rules below. */
}
.site-nav__dropdown-group-details > summary {
  /* Strip the native disclosure marker: we use our own chevron span
     for finer control + locale-aware rotation. */
  list-style: none;
  cursor: default;
}
.site-nav__dropdown-group-details > summary::-webkit-details-marker {
  display: none;
}
.site-nav__dropdown-group-details > summary::marker {
  display: none;
  content: "";
}
.site-nav__dropdown-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.92;
  border-bottom: 1px solid oklch(from var(--gold) l c h / 0.3);
  margin-bottom: var(--space-2);
}
.site-nav__dropdown-group-label-text {
  /* Wraps the icon glyph + section title so they sit side-by-side
     and the chevron stays anchored on the opposite end of the
     summary via the parent's space-between. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.donate-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.85;
}
.site-nav__dropdown-group-chevron {
  /* Hidden on desktop where the accordion is always open and the
     chevron would be misleading. Shown on mobile where the user
     taps to reveal section items. */
  display: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--vermillion-text, var(--gold));
  transition: transform 0.2s var(--ease-out);
}
.site-nav__dropdown-group-details[open] > summary .site-nav__dropdown-group-chevron {
  transform: rotate(180deg);
}
.site-nav__dropdown-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.site-nav__dropdown-group ul li {
  list-style: none;
}
.site-nav__dropdown-group ul a {
  /* Tighter padding inside columns so 4-5 items per group stay
     compact in the grid layout. Override the default dropdown a
     padding which is sized for a single-column list. */
  padding: 6px var(--space-2) !important;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.site-nav__dropdown-group ul a:hover,
.site-nav__dropdown-group ul a:focus-visible {
  background: oklch(from var(--gold) l c h / 0.08);
}
.site-nav__dropdown-menu__divider {
  /* In grid mode this becomes a full-width divider between groups
     and the "All ways to give" footer link. */
  grid-column: 1 / -1;
  height: 1px;
  background: oklch(from var(--gold) l c h / 0.18);
  margin-block: var(--space-2) var(--space-2);
}
.site-nav__dropdown-all {
  /* Footer "All ways to give" link spans full width below the grid. */
  grid-column: 1 / -1;
  font-weight: 600 !important;
  color: var(--vermillion-text, var(--gold)) !important;
}

/* 601 – 900px (tablet / medium): keep the mega-menu layout but
   collapse from 4 columns to 2. Sections stay expanded: no accordion
   tap needed at this width. Halfway-house between full desktop and
   the small-phone accordion below. */
@media (min-width: 601px) and (max-width: 900px) {
  .site-nav__dropdown-menu--grouped {
    min-width: 480px;
    max-width: min(640px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
}

/* Below 600px (phone): collapse mega-menu to a single stacked accordion
   so the dropdown fits on a phone. Each group becomes a <details> that
   the user taps to reveal its items: handy on small screens where 16
   stacked links would feel like a long scroll. nav.js syncs
   <details>.open=false here so each section starts collapsed; the
   chevron rotates to mark the open state. */
@media (max-width: 600px) {
  .site-nav__dropdown-menu--grouped {
    min-width: 280px;
    max-width: 360px;
    grid-template-columns: 1fr;
    gap: var(--space-2) 0;
    padding-block: var(--space-3) var(--space-2);
    right: auto;
    left: 0;
  }
  .site-nav__dropdown-group {
    margin-bottom: var(--space-2);
  }
  .site-nav__dropdown-group:last-of-type {
    margin-bottom: 0;
  }
  .site-nav__dropdown-group-details > summary {
    cursor: pointer;
  }
  .site-nav__dropdown-group-chevron {
    /* Reveal the chevron: phone users need the affordance to know
       each section is tap-to-expand. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vermillion-text, var(--gold));
  }
  .site-nav__dropdown-group-label {
    /* Tap target gets a touch more padding on phone so it's
       comfortable with thumbs. */
    padding-block: 8px;
  }
}

.site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu, .site-nav__dropdown:hover .site-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

/* Breakpoint is 1100px (not 900px) because the inline menu has ~8 links
   plus search, basket, donate, and the language switcher. On common
   laptop widths (1280–1440px at the browser's default zoom) the row
   would crowd and some items would fall off the right edge. Collapsing
   to the hamburger at 1100px gives every viewport below a 13" laptop
   the roomier drawer layout. */
@media (max-width: 1100px) {
  .site-nav {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-nav__toggle {
    display: inline-flex;
  }
  .site-nav__basket {
    margin-inline-start: auto;
  }
  .site-nav__menu {
    position: fixed;
    top: var(--nav-height);
    inset-inline: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-4);
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: var(--space-4) var(--space-5) var(--space-5);
    box-shadow: var(--shadow-lg);
    margin-inline-start: 0;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    /* Override the desktop-nav `align-items: center` so LIs stretch to
       the drawer's full width: otherwise the appeals dropdown's mega-
       menu panel inherits a content-sized parent (~190px) instead of
       the 700-800px the drawer affords on tablets. */
    align-items: stretch;
    width: 100%;
  }
  .site-nav__list li + li {
    border-top: 1px solid var(--line);
  }
  .site-nav__list a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--forest);
  }
  .site-nav__list a::after {
    display: none;
  }
  .site-nav__dropdown-toggle {
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--forest);
    justify-content: space-between;
  }
  .site-nav__dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 var(--space-2);
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
  }
  .site-nav__dropdown-menu a {
    padding: 0.65rem 0 0.65rem var(--space-4);
    font-size: 1rem;
    font-weight: 500;
  }
  .site-nav__dropdown-menu__divider {
    display: none;
  }
  .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu {
    display: block;
  }
  /* For the grouped (mega-menu) variant, keep CSS grid layout when open
     inside the drawer: the medium-tier media query below specifies a
     2-column grid which only takes effect if `display: grid` survives
     this drawer-mode override. The plain `display: block` above wipes
     it out, so re-state the grid display for the .--grouped flavour
     with higher selector specificity. */
  .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu--grouped {
    display: grid;
  }
  .site-nav__donate {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    text-align: center;
    flex: 0 0 auto;
  }
  .site-nav--open .site-nav__menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
  }
  .site-nav--open .site-nav__toggle-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .site-nav--open .site-nav__toggle-icon span:nth-child(2) {
    opacity: 0;
  }
  .site-nav--open .site-nav__toggle-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ------------------------------------------------------------------
   Narrow-mobile fixes (iPhone SE 320×568, Galaxy Fold cover 280×653).
   Without these overrides the layout at ≤360px overflowed: the brand
   block ("Al Anwar (charity)" + "EST. 1971 · SYLHET") plus three
   42px icon buttons (search, basket, hamburger) totalled ~340-360px
   before container padding. The hamburger sits last in DOM order so
   it was first to fall past the viewport edge, leaving the donor
   with no way to open the navigation menu on small phones.

   Strategy: at ≤420px shrink the brand tagline + icon buttons, at
   ≤340px drop the wordmark entirely so the brand mark + three icons
   always fit. Search stays visible because it's NOT inside the
   slide-out drawer: hiding it would orphan the feature.
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
  .site-nav__inner {
    gap: var(--space-2);
  }
  .site-nav__brand {
    gap: 8px;
    min-width: 0;
  }
  .site-nav__brand-text {
    min-width: 0;
  }
  .site-nav__brand-est {
    display: none;
  }
  .site-nav__brand-line {
    font-size: 0.92rem;
  }
  .site-nav__basket,
  .site-nav__search {
    width: 38px;
    height: 38px;
  }
  .site-nav__basket svg,
  .site-nav__search svg {
    width: 18px;
    height: 18px;
  }
  .site-nav__toggle {
    width: 40px;
    height: 40px;
  }
  .site-nav__brand-mark {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 340px) {
  /* Galaxy Fold cover-display territory. Even after the shrink above
     the wordmark eats the available width: hide it so the mark + 3
     icons survive. The mark is recognisable on its own and the page
     <title> still announces the site. */
  .site-nav__brand-text {
    display: none;
  }
  .site-nav__inner {
    padding-inline: var(--space-2);
  }
  .site-nav__basket,
  .site-nav__search {
    width: 36px;
    height: 36px;
  }
  .site-nav__toggle {
    width: 38px;
    height: 38px;
  }
}

body.body--nav-open {
  overflow: hidden;
}

.lang-switcher {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream-light);
  box-shadow: inset 0 1px 2px oklch(from var(--ink) l c h / 0.04);
}

.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.lang-switcher__btn:hover:not(.is-active) {
  color: var(--forest);
  background: oklch(from var(--ink) l c h / 0.06);
}

.lang-switcher__btn.is-active {
  background: var(--forest);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}

.lang-switcher__label {
  font-family: var(--font-en-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Matches the nav's 1100px breakpoint: below that the switcher lives
   inside the hamburger drawer and wants the full-width stretch style. */
@media (max-width: 1100px) {
  .lang-switcher {
    width: 100%;
    justify-content: stretch;
  }
  .lang-switcher__btn {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
  }
}

body.lang-bn .lang-switcher__label[lang="bn"],
.lang-switcher__label[lang="bn"] {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar .lang-switcher__label[lang="ar"],
.lang-switcher__label[lang="ar"] {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-size: 1rem;
}

.page-crumbs {
  padding-block: var(--space-4) 0;
}

.page-crumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.page-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.page-crumbs li::after {
  content: "/";
  color: var(--gold-soft);
  padding-inline-start: var(--space-2);
}

.page-crumbs li:last-child::after {
  content: "";
}

.page-crumbs li[aria-current="page"] {
  color: var(--forest);
  font-weight: 600;
}

.page-crumbs li a {
  color: var(--muted);
  text-decoration: none;
}

.page-crumbs li a:hover {
  color: var(--forest);
}

.page-hero {
  position: relative;
  background: var(--forest-deep);
  background-image: radial-gradient(circle at 20% 0%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.15), transparent 55%), radial-gradient(circle at 90% 100%, rgba(27, 82, 64, 0.6), transparent 60%), linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream);
  padding-block: var(--space-8) var(--space-8);
  margin-bottom: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__geometry {
  position: absolute;
  inset-inline-end: -60px;
  top: -40px;
  width: 360px;
  height: 360px;
  color: var(--gold-light);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

.page-hero__geometry svg {
  width: 100%;
  height: 100%;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.page-hero__eyebrow {
  color: var(--gold-light);
  margin-bottom: var(--space-4);
}

.page-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold-light);
  margin-inline-end: var(--space-3);
  vertical-align: middle;
}

.page-hero__title {
  font-family: var(--font-en-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  color: var(--cream);
}

.page-hero__intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: oklch(from var(--paper) l c h / 0.82);
  max-width: 65ch;
}

.page-hero__intro p {
  margin: 0 0 var(--space-3);
}

.page-hero__intro p:last-child {
  margin-bottom: 0;
}

.page-hero__intro strong, .page-hero__intro b {
  color: var(--cream);
  font-weight: 600;
}

.page-hero__intro a {
  color: var(--gold-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-hero__intro a:hover {
  color: var(--cream);
}

@media (max-width: 760px) {
  .page-hero {
    padding-block: var(--space-7);
  }
  .page-hero__geometry {
    width: 220px;
    height: 220px;
    inset-inline-end: -80px;
    top: -60px;
  }
}

[dir="rtl"] .page-hero__geometry {
  inset-inline-end: auto;
  inset-inline-start: -60px;
  transform: scaleX(-1);
}

[dir="rtl"] .page-hero__eyebrow::before {
  margin-inline-end: 0;
  margin-inline-start: var(--space-3);
}

.page-body {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block: 0 var(--space-8);
}

.page-body > * + * {
  margin-top: var(--space-5);
}

.page-body p {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
}

.page-body h2 {
  font-family: var(--font-en-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--forest);
  margin: var(--space-7) 0 var(--space-4);
  letter-spacing: -0.015em;
}

.page-body h3 {
  font-family: var(--font-en-display);
  font-size: var(--fs-h3);
  color: var(--forest);
  margin: var(--space-6) 0 var(--space-3);
}

.page-body ul, .page-body ol {
  padding-inline-start: var(--space-5);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}

.page-body ul li, .page-body ol li {
  margin-bottom: var(--space-2);
}

.page-body ul li::marker, .page-body ol li::marker {
  color: var(--vermillion-text, var(--gold));
}

.page-body blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-inline-start: 3px solid var(--gold);
  background: var(--cream-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--ink);
  font-style: italic;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  line-height: var(--lh-normal);
}

.page-body blockquote p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.page-body blockquote cite, .page-body blockquote footer {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-family: var(--font-en-body);
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-body a:not(.btn) {
  color: var(--forest);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-body a:not(.btn):hover {
  color: var(--vermillion-text, var(--gold));
}

.page-body img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-block: var(--space-6);
}

.page-body .cta-button,
.page-body [class*="cta-button"] {
  display: inline-flex;
  margin-block: var(--space-4);
}

body.lang-ar .page-body p, body.lang-ar .page-body ul, body.lang-ar .page-body ol,
body.lang-bn .page-body p,
body.lang-bn .page-body ul,
body.lang-bn .page-body ol {
  line-height: 1.85;
}

body.lang-ar .page-body p, body.lang-ar .page-body ul, body.lang-ar .page-body ol {
  font-size: 1.1875rem;
}

.page-children {
  background: var(--cream);
  padding-block: var(--space-8);
  margin-block: var(--space-8);
}

.page-children__head {
  text-align: center;
  margin-bottom: var(--space-7);
}

.page-children__head h2 {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  color: var(--forest);
  margin: var(--space-2) 0 0;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
}

.page-children__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.page-child-card {
  list-style: none;
}

.page-child-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.page-child-card__link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-soft);
}

.page-child-card__mark {
  width: 48px;
  height: 48px;
  color: var(--vermillion-text, var(--gold));
  margin-bottom: var(--space-2);
}

.page-child-card__mark svg {
  width: 100%;
  height: 100%;
}

.page-child-card__title {
  font-family: var(--font-en-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--forest);
  margin: 0;
  line-height: var(--lh-snug);
}

.page-child-card__excerpt {
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin: 0;
  font-size: 0.9375rem;
  flex-grow: 1;
}

.page-child-card__arrow {
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  font-size: 0.9375rem;
}

body.lang-ar .page-child-card__title,
body.lang-ar .page-children__head h2 {
  font-family: var(--font-ar-display);
}

body.lang-bn .page-child-card__title,
body.lang-bn .page-children__head h2 {
  font-family: var(--font-bn);
}

.page-cta {
  background: var(--forest);
  background-image: radial-gradient(circle at 100% 0%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.18), transparent 50%), radial-gradient(circle at 0% 100%, rgba(27, 82, 64, 0.5), transparent 60%);
  color: var(--cream);
  padding-block: var(--space-8);
  margin-top: var(--space-8);
  position: relative;
  overflow: hidden;
}

.page-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, transparent 0%, transparent 49%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.18) 50%, transparent 51%, transparent 100%);
  background-size: 60px 60px;
  opacity: 0.08;
  pointer-events: none;
}

.page-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
}

.page-cta__eyebrow {
  color: var(--gold-light);
}

.page-cta__headline {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--cream);
  margin: var(--space-3) 0 var(--space-4);
  letter-spacing: -0.015em;
}

.page-cta__lead {
  color: oklch(from var(--paper) l c h / 0.82);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-6);
}

.page-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.page-cta__ghost {
  background: transparent;
  color: var(--cream);
  border-color: oklch(from var(--paper) l c h / 0.3);
}

.page-cta__ghost:hover {
  background: oklch(from var(--paper) l c h / 0.08);
  color: var(--cream);
}

body.lang-ar .page-cta__headline,
body.lang-bn .page-cta__headline {
  font-family: var(--font-ar-display);
}

body.lang-bn .page-cta__headline {
  font-family: var(--font-bn);
}

.site-footer {
  margin-top: 0;
  padding-block: var(--space-7) var(--space-5);
  background: var(--forest-deep);
  color: var(--cream);
}

.site-footer__grid {
  /* Five explicit columns for the five children (brand, appeals,
     newsletter, about, donate). The previous 4-column grid caused
     the donate column to orphan-wrap onto a second row. */
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1fr 1.2fr;
  gap: var(--space-5) var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid oklch(from var(--paper) l c h / 0.12);
  align-items: start;
}

/* Laptop / small desktop: drop to 3 columns and give the brand
   column the full width of the first row so the tagline has room. */
@media (max-width: 1200px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* Tablet: two columns. */
@media (max-width: 820px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Phone: single column. */
@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 340px;
}

.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.site-footer__brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-footer__mark {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
}

.site-footer__mark--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--forest-soft) 0%, var(--forest) 100%);
  color: var(--gold-light);
  padding: 10px;
}

.site-footer__mark--placeholder svg {
  width: 100%;
  height: 100%;
}

.site-footer__name {
  font-family: var(--font-en-display);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--cream);
  margin: 0;
}

.site-footer__est {
  color: oklch(from var(--paper) l c h / 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.site-footer__tagline {
  color: oklch(from var(--paper) l c h / 0.75);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.site-footer__social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(from var(--paper) l c h / 0.08);
  color: var(--cream);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.site-footer__social a:hover {
  background: var(--gold);
  color: var(--forest-deep);
  transform: translateY(-2px);
}

.site-footer__heading {
  font-family: var(--font-en-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
  margin: 0 0 var(--space-4);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__col a {
  color: oklch(from var(--paper) l c h / 0.82);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__col a:hover {
  color: var(--gold-light);
}

.site-footer__donate-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__newsletter-copy {
  color: oklch(from var(--paper) l c h / 0.75);
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-footer__newsletter-form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.site-footer__newsletter-form input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid oklch(from var(--paper) l c h / 0.25);
  background: oklch(from var(--paper) l c h / 0.08);
  color: var(--cream);
  border-radius: 6px;
  font: inherit;
}

.site-footer__newsletter-form input[type="email"]::placeholder {
  color: oklch(from var(--paper) l c h / 0.45);
}

.site-footer__newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.site-footer__newsletter-form .btn {
  flex: 0 0 auto;
}

/* .btn--ghost is designed for light backgrounds (forest text on cream
   border). The footer is dark forest, so we re-theme the ghost here
   to a light outline that actually shows up. */
.site-footer__newsletter-form .btn--ghost {
  color: var(--cream);
  border-color: oklch(from var(--paper) l c h / 0.55);
  background: oklch(from var(--paper) l c h / 0.08);
}
.site-footer__newsletter-form .btn--ghost:hover,
.site-footer__newsletter-form .btn--ghost:focus-visible {
  background: var(--gold);
  border-color: var(--vermillion-text, var(--gold));
  color: var(--forest-deep);
}

.site-footer__manage {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
}

.site-footer__manage a {
  color: oklch(from var(--paper) l c h / 0.75);
  text-decoration: underline;
}

/* Zakat shortcut: slim link card sitting under the Donate button. */
.site-footer__zakat-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 12px var(--space-3);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.site-footer__zakat-link:hover {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.5);
  transform: translateY(-1px);
}
.site-footer__zakat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-sm);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
  color: var(--vermillion-text, var(--gold));
}
.site-footer__zakat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.site-footer__zakat-copy strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: oklch(from var(--paper) l c h / 0.95);
  line-height: 1.2;
}
.site-footer__zakat-copy small {
  font-size: 0.75rem;
  color: oklch(from var(--paper) l c h / 0.65);
  line-height: 1.4;
}
.site-footer__zakat-arrow {
  color: var(--vermillion-text, var(--gold));
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

/* Inline arrow icon: sized to match the surrounding text, sits with
   a small leading gap, inherits the link's currentColor. Used to
   replace the bare "→" character in CTAs and link tails so every
   arrow is the same hand-drawn monoline glyph from the sprite, not
   the system font's chunky rendering. Use as:
       <svg class="icon-arrow-inline" aria-hidden="true">
         <use href="#icon-arrow-right"/>
       </svg>
*/
.icon-arrow-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  margin-inline-start: 0.25em;
  stroke-width: 1.6;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
a:hover > .icon-arrow-inline,
button:hover > .icon-arrow-inline {
  transform: translateX(2px);
}
[dir="rtl"] .icon-arrow-inline {
  transform: scaleX(-1);
}
[dir="rtl"] a:hover > .icon-arrow-inline,
[dir="rtl"] button:hover > .icon-arrow-inline {
  transform: scaleX(-1) translateX(2px);
}
.site-footer__zakat-link:hover .site-footer__zakat-arrow {
  transform: translateX(2px);
}

/* Compact variant of the Zakat shortcut: single line, no sub-copy.
   Used in the footer Donate column where vertical real-estate is
   expensive. The dedicated /donate/zakat/ page sells the calculator
   in detail; the footer just needs the entry point. */
.site-footer__zakat-link--compact {
  margin-top: 0;
  padding: 8px 12px;
  gap: 10px;
}
.site-footer__zakat-link--compact .site-footer__zakat-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
.site-footer__zakat-link--compact .site-footer__zakat-copy strong {
  font-size: 0.875rem;
}

.site-footer__total-raised {
  text-align: center;
  padding: var(--space-5) 0 var(--space-4);
  border-top: 1px solid oklch(from var(--paper) l c h / 0.15);
  margin-top: var(--space-5);
}
.site-footer__total-raised-label {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(from var(--paper) l c h / 0.6);
}
.site-footer__total-raised-amount {
  margin: 0.25rem 0;
  font-family: var(--font-en-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: -0.01em;
}
.site-footer__total-raised-note {
  margin: 0;
  font-size: 0.9rem;
  color: oklch(from var(--paper) l c h / 0.7);
  font-style: italic;
}

.site-footer__cookie-link {
  background: none;
  border: none;
  padding: 0;
  margin-inline-start: 0.5em;
  color: oklch(from var(--paper) l c h / 0.65);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.site-footer__cookie-link:hover {
  color: var(--gold-light);
}

/* Cookie consent bar -------------------------------------------------
   Fixed to the bottom of the viewport, slides up when open. Respects
   reduced-motion via the `prefers-reduced-motion` query.
----------------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  /* Hardcoded forest-deep + cream values so the banner stays as a
     dark bar with cream text in BOTH themes. Using var(--ink) made
     the banner flip to a near-white surface in dark mode (because
     --ink rescopes for body text) which crashed the cream text into
     light-on-light. The banner is a fixed UI element where contrast
     matters more than theme parity. */
  background: oklch(0.16 0.025 175);
  color: oklch(0.94 0.01 80);
  border-top: 1px solid oklch(0.94 0.01 80 / 0.18);
  box-shadow: 0 -14px 40px oklch(0.05 0.02 175 / 0.45);
  transform: translateY(100%);
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease-out);
}
.cookie-consent--open {
  transform: translateY(0);
}
.cookie-consent__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
}
.cookie-consent__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.94 0.01 80 / 0.08);
  border: 1px solid oklch(0.94 0.01 80 / 0.22);
  border-radius: 50%;
  color: var(--gold, #d8b26b);
}
.cookie-consent__text {
  min-width: 0;
}
.cookie-consent__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.cookie-consent__desc {
  margin: 0;
  font-size: 0.875rem;
  color: oklch(0.94 0.01 80 / 0.82);
  line-height: 1.5;
}
.cookie-consent__desc strong {
  color: oklch(0.97 0.01 80);
  font-weight: 600;
}
.cookie-consent__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cookie-consent__decline,
.cookie-consent__accept {
  min-width: 110px;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
/* The cookie banner is a fixed-dark overlay: the surrounding bar
   uses `--cookie-bar-bg` / `--cookie-bar-fg` (set on .cookie-consent
   itself) so the inner Decline button can read from the same tokens
   and stay coherent across themes without hardcoding cream/oklch. */
.cookie-consent__decline.btn--ghost {
  color: var(--cookie-bar-fg, oklch(0.94 0.01 80));
  border-color: oklch(from var(--cookie-bar-fg, oklch(0.94 0.01 80)) l c h / 0.4);
  background: transparent;
}
.cookie-consent__decline.btn--ghost:hover,
.cookie-consent__decline.btn--ghost:focus-visible {
  background: oklch(from var(--cookie-bar-fg, oklch(0.94 0.01 80)) l c h / 0.1);
  border-color: oklch(from var(--cookie-bar-fg, oklch(0.94 0.01 80)) l c h / 0.6);
  color: oklch(from var(--cookie-bar-fg, oklch(0.97 0.01 80)) l c h / 1);
}

@media (max-width: 780px) {
  .cookie-consent__inner {
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
  }
  .cookie-consent__actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .cookie-consent__decline,
  .cookie-consent__accept {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .cookie-consent__inner {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    /* Inline padding bumped up so the banner doesn't feel edge-to-edge
       on a phone: the .container's 1.5rem alone wasn't enough for a
       button stack at narrow widths. Vertical padding lifted to give
       the bottom of the banner some breathing room above the safe area. */
    padding: 1.1rem 0.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
  .cookie-consent__icon {
    display: none;
  }
  .cookie-consent__title {
    font-size: 0.95rem;
  }
  .cookie-consent__desc {
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .cookie-consent__actions {
    margin-top: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    transition: none;
  }
}

.site-footer__donate-copy {
  color: oklch(from var(--paper) l c h / 0.75);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.site-footer__donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.75rem 1.6rem;
  font-weight: 600;
}

.site-footer__badges {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-footer__badges li {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: oklch(from var(--paper) l c h / 0.7);
}

.site-footer__badge-label {
  color: oklch(from var(--paper) l c h / 0.55);
}

.site-footer__badge-value {
  color: var(--cream);
  font-weight: 600;
}

.site-footer__legal {
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: oklch(from var(--paper) l c h / 0.6);
  font-size: 0.8125rem;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__copyright {
  max-width: 70ch;
}

.site-footer__flourish {
  font-family: var(--font-ar-display);
  font-size: 1.125rem;
  color: var(--gold-light);
}

.site-footer__currency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: oklch(from var(--paper) l c h / 0.75);
  font-size: 0.82rem;
}

.site-footer__currency-label {
  margin: 0;
}

.site-footer__currency-select {
  background: oklch(from var(--paper) l c h / 0.06);
  color: inherit;
  border: 1px solid oklch(from var(--paper) l c h / 0.18);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 0.82rem;
  cursor: pointer;
}

.site-footer__currency-select option {
  color: #111;
}

/* Inline display of a canonical price + its converted local-currency echo. */
.price {
  white-space: nowrap;
}

.price__alt {
  margin-inline-start: 4px;
  color: var(--ink-muted, #6b7280);
  font-size: 0.85em;
  font-weight: 400;
}

.site-footer__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding-block: var(--space-4);
  border-bottom: 1px solid oklch(from var(--paper) l c h / 0.12);
  color: var(--cream);
}

.site-footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__contact-item svg {
  flex: 0 0 auto;
  color: var(--gold-light);
}

.site-footer__contact-item:hover {
  color: var(--gold-light);
}

.site-footer__contact-sep {
  color: oklch(from var(--paper) l c h / 0.35);
  font-weight: 300;
  font-size: 1.25rem;
  user-select: none;
}



html {
  font-synthesis: style weight;
  font-family: var(--font-en-body);
}

body {
  font-family: var(--font-en-body);
}

body.lang-en {
  font-family: var(--font-en-body);
}

body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en .hero__headline,
body.lang-en .about-tile__headline,
body.lang-en .appeal__title,
body.lang-en .donate-preview__title {
  font-family: var(--font-en-display);
}

body.lang-bn {
  font-family: var(--font-bn);
}

body.lang-bn h1, body.lang-bn h2, body.lang-bn h3 {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar {
  font-family: var(--font-ar-body);
}

body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .hero__headline {
  font-family: var(--font-ar-display);
}

[dir="rtl"] .donate-preview__see-all::after,
[dir="rtl"] .about-tile__link::after,
[dir="rtl"] .btn--arrow::after {
  transform: scaleX(-1);
}

/* Vertical rhythm: the user requested tighter spacing (2026-05).
   Was var(--space-7) (3rem top + 3rem bottom = 6rem between blocks);
   reduced to var(--space-5) (1.5rem each = 3rem between blocks).
   Hero keeps slightly more breathing room since it sets the page's
   first impression. */
.home-block {
  padding-block: var(--space-5);
}

.home-block--hero {
  padding-block: var(--space-6) var(--space-5);
}

.home-block--geometry_divider {
  padding-block: var(--space-3);
}

/* Featured documentary band brings its own dark-forest background and
   internal padding, so the wrapper's home-block padding-block produces
   double whitespace around it and a visual gap above + below the band.
   Suppress the home-block padding here, and let the band break out of
   the .home-leaf 1240px container so it reads as a real full-bleed
   surface (matching the gallery hub's placement). */
.home-block--featured_documentary {
  padding-block: 0;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

@media (max-width: 760px) {
  .home-block {
    padding-block: var(--space-4);
  }
  .home-block--hero {
    padding-block: var(--space-4);
  }
  .home-block--geometry_divider {
    padding-block: var(--space-2);
  }
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-7);
  align-items: start;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  top: -20px;
  width: 280px;
  height: 280px;
  background-image: radial-gradient(circle at 50% 50%, oklch(from var(--vermillion, var(--gold)) l c h / 0.18), transparent 62%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero__text {
  max-width: 620px;
}

.hero__headline {
  /* Headline-specific clamp: the global --fs-display tops out at
     ~76px which crushes the layout on narrow desktop widths and
     hyphenates words mid-syllable ("se-/nior"). 3.25rem (~52px) keeps
     impact without bullying the rest of the hero. text-wrap: balance
     spreads characters across lines evenly; hyphens: manual stops the
     browser from breaking words on its own. */
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
  color: var(--ink);
  /* pretty, not balance: balance left the first word alone on its own
     line at phone widths ("Supporting / Islamic education, ..."). */
  text-wrap: pretty;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.hero__headline em, .hero__headline i {
  font-style: italic;
  color: var(--vermillion-text, var(--gold));
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
  max-width: 52ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__ctas .btn--primary::after {
  content: "→";
  margin-inline-start: var(--space-2);
}

/* Hero quick-jumps row: three tertiary links to the most-used giving
   pages, sitting between the buttons and the trust band. */
.hero__quick-jumps {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}
.hero__quick-jumps a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hero__quick-jumps a span {
  color: var(--vermillion-text, var(--gold));
  opacity: 0.65;
  transition: transform 0.15s ease;
}
.hero__quick-jumps a:hover {
  border-bottom-color: var(--vermillion-text, var(--gold));
}
.hero__quick-jumps a:hover span {
  transform: translateX(3px);
  opacity: 1;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.hero__trust span, .hero__trust strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__trust span::before, .hero__trust strong::before {
  content: "✓";
  color: var(--vermillion-text, var(--gold));
  font-weight: 700;
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero::before {
    display: none;
  }
  .hero__text {
    max-width: none;
  }
}

.quick-donate {
  background: var(--forest);
  background-image: radial-gradient(circle at 100% 0%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.16), transparent 50%), radial-gradient(circle at 0% 100%, rgba(27, 82, 64, 0.55), transparent 60%);
  color: var(--cream);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.quick-donate__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.quick-donate__title {
  font-family: var(--font-en-display);
  font-size: clamp(1.5rem, calc(1.3rem + 0.9vw), 1.875rem);
  line-height: var(--lh-snug);
  color: var(--cream);
  margin: 0 0 var(--space-5);
  font-weight: 500;
}

.quick-donate__presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quick-donate__preset {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  color: var(--cream);
  padding: var(--space-4) var(--space-5);
  text-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.quick-donate__preset:hover {
  background: oklch(from var(--paper) l c h / 0.06);
  border-color: var(--gold-light);
  transform: translateY(-1px);
}

.quick-donate__preset.is-active {
  background: oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.12);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 1px var(--gold) inset;
}

.quick-donate__preset-amount {
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.1;
}

.quick-donate__preset-label {
  font-size: 0.8125rem;
  color: oklch(from var(--paper) l c h / 0.72);
  letter-spacing: 0.02em;
}

.quick-donate__custom {
  display: block;
  margin-bottom: var(--space-4);
}

.quick-donate__custom input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: oklch(from var(--ink) l c h / 0.35);
  color: var(--cream);
  font-size: 1rem;
  font-family: inherit;
}

.quick-donate__custom input::placeholder {
  color: oklch(from var(--paper) l c h / 0.5);
}

.quick-donate__custom input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* `.quick-donate .btn--primary` deliberately has NO background/color
   override: it inherits `.btn--primary`, which routes through
   `--cta-bg` / `--cta-fg`. Earlier this widget hardcoded gold; that
   was correct in MANUSCRIPT (where gold = vermillion) but rendered
   the Donate button as brass in PADDY while every other Donate on
   the page was paddy emerald. The override is gone: every Donate
   CTA on every theme reads from `--cta-bg`. */

.quick-donate .btn--primary svg {
  margin-inline-end: var(--space-2);
}

.quick-donate__methods {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.method-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 8px;
  /* Fixed light chip in both themes: brand marks are dark glyphs and
     vanish on the candlelight surface. */
  background: oklch(0.97 0.005 80);
  border-radius: var(--radius-sm);
}

.method-tile img, .method-tile svg {
  display: block;
  max-height: 16px;
  width: auto;
}

.home-block--impact_stats {
  background: var(--cream);
  padding-block: var(--space-8);
  /* margin-block: var(--space-5) matches trust_pillars, sponsor_tiers,
     alumni_spotlight, money_split, scholar_anchor, sadaqah_jariyah -
     all the other heavy bands on the home page. Was --space-6, which
     made this one section visually float with ~0.5rem more breathing
     room than its neighbours. */
  margin-block: var(--space-5);
}

@media (max-width: 760px) {
  .home-block--impact_stats {
    padding-block: var(--space-6);
    margin-block: var(--space-4);
  }
}

.impact__eyebrow {
  text-align: center;
  margin-bottom: var(--space-6);
}

.impact__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Six stats fit one row on desktop. Cascading breakpoints reflow at
     intermediate widths so cells never get cramped. align-items: end
     anchors every stat at the bottom of its row, so the FOUNDED eyebrow
     on stat 5 doesn't push its number out of line with the other
     numbers: eyebrow sits ABOVE the shared number baseline instead. */
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5) var(--space-4);
  align-items: end;
}

@media (max-width: 1100px) {
  .impact__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 540px) {
  .impact__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-3);
  }
}

.impact__stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0; /* let long labels wrap inside narrow cells */
}

.impact__scope {
  color: var(--vermillion-text, var(--gold));
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.impact__number {
  font-family: var(--font-en-display);
  font-size: clamp(2.25rem, calc(1.8rem + 2vw), 3.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--forest);
}

.impact__suffix {
  color: var(--vermillion-text, var(--gold));
  font-size: 0.6em;
  top: -0.4em;
  margin-inline-start: 0.05em;
}

.impact__label {
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.appeal {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 960px) {
  .appeal {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

.appeal__title {
  font-size: var(--fs-h1);
  color: var(--forest);
  margin: var(--space-3) 0 var(--space-4);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.appeal__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
  line-height: var(--lh-normal);
}

.appeal__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: appeal;
}

.appeal__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.appeal__item:last-child {
  border-bottom: 0;
}

.appeal__num {
  font-family: var(--font-en-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.05em;
}

.appeal__item-title {
  font-size: var(--fs-h3);
  color: var(--forest);
  margin: 0 0 var(--space-2);
}

.appeal__item-desc {
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin: 0;
}

.progress-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.progress-card__label, .progress-card__prelaunch-label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.progress-card__amount {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, calc(1.6rem + 1.4vw), 2.5rem);
  color: var(--forest);
  margin: 0 0 var(--space-4);
  line-height: 1;
}

.progress-card__goal {
  display: block;
  font-size: 0.9375rem;
  font-family: var(--font-en-body);
  color: var(--muted);
  margin-top: var(--space-2);
  font-weight: 400;
}

.progress-card__bar {
  position: relative;
  height: 8px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.progress-card__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--forest), var(--gold));
  border-radius: inherit;
  transition: width var(--duration-slow) var(--ease-out);
}

.progress-card__meta {
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin: 0 0 var(--space-4);
}

.progress-card__urgency {
  display: inline-block;
  background: rgba(139, 43, 30, 0.1);
  color: var(--red);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 var(--space-5);
}

.progress-card__prelaunch-title {
  font-family: var(--font-en-display);
  font-size: var(--fs-h3);
  color: var(--forest);
  margin: 0 0 var(--space-3);
}

.progress-card__prelaunch-copy {
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-5);
}

.home-block--donate_preview {
  background: var(--forest-deep);
  background-image: radial-gradient(circle at 0% 0%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.12), transparent 60%), radial-gradient(circle at 100% 100%, rgba(27, 82, 64, 0.6), transparent 60%);
  color: var(--cream);
  padding-block: var(--space-9);
  margin-block: var(--space-7);
}

@media (max-width: 760px) {
  .home-block--donate_preview {
    padding-block: var(--space-7);
    margin-block: var(--space-5);
  }
}

.donate-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.donate-preview__title {
  font-size: var(--fs-h1);
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.015em;
}

.donate-preview__see-all {
  color: var(--gold-light);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
}

.donate-preview__see-all:hover {
  color: var(--cream);
}

.donate-preview__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .donate-preview__grid {
    grid-template-columns: 1fr;
  }
}

.donate-card {
  background: oklch(from var(--paper) l c h / 0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* Imageless cards get a subtle concentric ring + radial glow so they don't
   look empty next to siblings that show a real product photo. */
.donate-card:not(:has(.donate-card__cover))::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, transparent 12%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.10) 12.5%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.10) 13.5%, transparent 14%),
    radial-gradient(circle at 50% 0%, transparent 22%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.06) 22.5%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.06) 23.5%, transparent 24%),
    radial-gradient(ellipse at 50% -10%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.donate-card > * { position: relative; z-index: 1; }

.donate-card:hover {
  border-color: var(--vermillion-text, var(--gold));
  transform: translateY(-2px);
}

.donate-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 0 var(--gold-light));
}

/* Editor-set image for a DonationProduct. Banner at the top of the
   home-page donate-preview card, pulled flush with the card edges. */
.donate-card__cover {
  display: block;
  width: calc(100% + var(--space-6) * 2);
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-3);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.donate-card__name {
  font-family: var(--font-en-display);
  font-size: var(--fs-h3);
  color: var(--cream);
  margin: 0;
}

.donate-card__desc {
  color: oklch(from var(--paper) l c h / 0.72);
  line-height: var(--lh-normal);
  margin: 0;
  flex-grow: 1;
  font-size: 0.9375rem;
}

.donate-card__price {
  font-family: var(--font-en-display);
  font-size: 2rem;
  color: var(--gold-light);
  margin: var(--space-2) 0;
  font-weight: 500;
}

.donate-card__placeholder-msg {
  color: oklch(from var(--paper) l c h / 0.6);
  font-style: italic;
  margin: 0;
}

.donate-card--placeholder {
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-column: 1 / -1;
}

.monthly-callout {
  background: var(--gold);
  color: var(--forest-deep);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}

@media (max-width: 640px) {
  .monthly-callout {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.monthly-callout__label {
  grid-column: 1;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--forest-deep);
}

.monthly-callout__copy {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-en-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.monthly-callout .btn {
  grid-column: 2;
  grid-row: 1 / 3;
  background: var(--forest-deep);
  color: var(--cream);
}

.monthly-callout .btn:hover {
  background: var(--forest);
}

@media (max-width: 640px) {
  .monthly-callout .btn {
    grid-column: 1;
    grid-row: auto;
  }
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--space-4);
}

.section-label::before, .section-label::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

body.lang-ar .section-label {
  letter-spacing: 0.05em;
}

body.lang-bn .section-label {
  letter-spacing: 0.1em;
}

.offerings {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

@media (max-width: 640px) {
  .offerings {
    grid-template-columns: 1fr;
  }
}

.offerings li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.offerings__tick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: oklch(from var(--ink) l c h / 0.08);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.offerings__tick svg {
  width: 12px;
  height: 12px;
}

.about-tile__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-7);
  align-items: center;
}

@media (max-width: 900px) {
  .about-tile__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.about-tile__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-light) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.about-tile__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.1), transparent 60%);
  pointer-events: none;
}

.about-tile__pattern {
  position: relative;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.about-tile__pattern svg {
  width: 78%;
  height: auto;
  max-width: 280px;
  filter: drop-shadow(0 4px 16px oklch(from var(--vermillion, var(--gold)) l c h / 0.2));
}

.about-tile__caption {
  position: relative;
  text-align: center;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gold-soft);
}

.about-tile__arabic {
  font-family: var(--font-ar-display);
  font-size: clamp(1.25rem, calc(1.05rem + 0.9vw), 1.6rem);
  line-height: 1.6;
  color: var(--forest);
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.about-tile__translation {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.about-tile__reference {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillion-text, var(--gold));
  font-style: normal;
  font-weight: 600;
}

.about-tile__headline {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  color: var(--forest-deep);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 400;
}

.about-tile__headline em {
  font-style: italic;
  color: var(--vermillion-text, var(--gold));
}

.about-tile__headline p {
  margin: 0;
}

.about-tile__body {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-5);
}

.about-tile__body p {
  margin: 0 0 var(--space-3);
}

.about-tile__body p:last-child {
  margin-bottom: 0;
}

.about-tile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: gap var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.about-tile__link:hover {
  color: var(--forest-deep);
  gap: var(--space-3);
}

.about-two-col {
  padding-block: var(--space-8);
  background: var(--paper);
}

.about-two-col__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .about-two-col__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-8);
  }
}

.about-two-col__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-light) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.about-two-col__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.12), transparent 60%);
  pointer-events: none;
}

.about-two-col__pattern {
  position: relative;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.about-two-col__pattern svg {
  width: 82%;
  height: auto;
  max-width: 320px;
  filter: drop-shadow(0 6px 20px oklch(from var(--vermillion, var(--gold)) l c h / 0.22));
}

.about-two-col__caption {
  position: relative;
  text-align: center;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gold-soft);
}

.about-two-col__arabic {
  font-family: var(--font-ar-display);
  font-size: clamp(1.4rem, calc(1.15rem + 1vw), 1.8rem);
  color: var(--forest);
  margin: 0 0 var(--space-2);
  line-height: 1.6;
  font-weight: 700;
}

.about-two-col__translation {
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
}

.about-two-col__headline {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  color: var(--forest-deep);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  font-weight: 400;
}

.about-two-col__headline em {
  font-style: italic;
  color: var(--vermillion-text, var(--gold));
}

.about-two-col__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-6);
  max-width: 54ch;
}

body.lang-bn .about-two-col__headline,
body.lang-bn .about-tile__headline {
  font-family: var(--font-bn);
  font-weight: 600;
  line-height: 1.3;
}

body.lang-ar .about-two-col__headline,
body.lang-ar .about-tile__headline {
  font-family: var(--font-ar-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.about-timeline {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-8);
}

.about-timeline__head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}

.about-timeline__title {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  color: var(--forest-deep);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  font-weight: 400;
}

.about-timeline__title em {
  font-style: italic;
  color: var(--vermillion-text, var(--gold));
}

.about-timeline__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}

.about-timeline__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: grid;
  gap: var(--space-5);
}

.about-timeline__list::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-soft) 0%, transparent 100%);
}

@media (min-width: 760px) {
  .about-timeline__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-7);
  }
  .about-timeline__list::before {
    inset-inline-start: 50%;
    margin-inline-start: -1px;
  }
}

.about-timeline__item {
  position: relative;
  padding-inline-start: var(--space-6);
  padding-block: var(--space-2);
}

.about-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--cream);
}

.about-timeline__item.is-current::before {
  background: var(--forest);
  border-color: var(--forest);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px oklch(from var(--vermillion, var(--gold)) l c h / 0.35);
}

@media (min-width: 760px) {
  .about-timeline__item {
    padding-inline-start: var(--space-7);
  }
  .about-timeline__item:nth-child(even) {
    grid-column: 2;
    padding-inline-start: var(--space-7);
  }
  .about-timeline__item:nth-child(even)::before {
    inset-inline-start: -8px;
  }
  .about-timeline__item:nth-child(odd) {
    grid-column: 1;
    text-align: end;
    padding-inline-end: var(--space-7);
    padding-inline-start: 0;
  }
  .about-timeline__item:nth-child(odd)::before {
    inset-inline-start: auto;
    inset-inline-end: -8px;
  }
}

.about-timeline__year {
  display: inline-block;
  font-family: var(--font-en-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--vermillion-text, var(--gold));
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.about-timeline__item-title {
  font-family: var(--font-en-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--forest-deep);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

.about-timeline__desc {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

.about-timeline__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: gap var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.about-timeline__more:hover {
  color: var(--forest-deep);
  gap: var(--space-3);
}

body.lang-bn .about-timeline__title,
body.lang-bn .about-timeline__item-title {
  font-family: var(--font-bn);
  font-weight: 600;
}

body.lang-ar .about-timeline__title,
body.lang-ar .about-timeline__item-title {
  font-family: var(--font-ar-display);
  font-weight: 700;
  letter-spacing: 0;
}

.home-block--testimonial {
  background: var(--cream);
  padding-block: var(--space-8);
}

@media (max-width: 760px) {
  .home-block--testimonial {
    padding-block: var(--space-6);
  }
}

.testimonial {
  max-width: 760px;
  text-align: center;
  margin-inline: auto;
}

.testimonial__mark {
  color: var(--vermillion-text, var(--gold));
  margin-bottom: var(--space-4);
}

.testimonial__quote {
  font-family: var(--font-en-display);
  font-size: clamp(1.25rem, calc(1.1rem + 0.9vw), 1.75rem);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-5);
  font-style: italic;
  quotes: "“" "”";
}

.testimonial__quote::before {
  content: open-quote;
}

.testimonial__quote::after {
  content: close-quote;
}

.testimonial__quote--placeholder {
  font-style: italic;
  color: var(--muted);
  font-family: var(--font-en-body);
  font-size: 1rem;
}

.testimonial__cite {
  color: var(--muted);
  font-size: 0.9375rem;
}

.testimonial__author {
  font-weight: 600;
  color: var(--ink);
}

.home-block--geometry_divider {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gold-soft);
  opacity: 0.7;
}

.home-block--geometry_divider svg {
  width: 64px;
  height: 64px;
}

.hero__trust {
  align-items: center;
}



html {
  font-synthesis: style weight;
  font-family: var(--font-en-body);
}

body {
  font-family: var(--font-en-body);
}

body.lang-en {
  font-family: var(--font-en-body);
}

body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en .hero__headline,
body.lang-en .about-tile__headline,
body.lang-en .appeal__title,
body.lang-en .donate-preview__title {
  font-family: var(--font-en-display);
}

body.lang-bn {
  font-family: var(--font-bn);
}

body.lang-bn h1, body.lang-bn h2, body.lang-bn h3 {
  font-family: var(--font-bn);
  font-weight: 700;
}

body.lang-ar {
  font-family: var(--font-ar-body);
}

body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .hero__headline {
  font-family: var(--font-ar-display);
}

[dir="rtl"] .donate-preview__see-all::after,
[dir="rtl"] .about-tile__link::after,
[dir="rtl"] .btn--arrow::after {
  transform: scaleX(-1);
}

.content-page {
  padding-block: var(--space-6);
  max-width: 960px;
}

.content-page__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.content-page__intro {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.6;
}

.content-page__body > * + * {
  margin-block-start: var(--space-4);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
  margin-block-end: var(--space-2);
}

.section-heading {
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  margin-block-end: var(--space-4);
  color: var(--forest);
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li + li {
  border-top: 1px solid var(--line);
}

.link-list li a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--ink);
  text-decoration: none;
}

.link-list li a:hover {
  color: var(--vermillion-text, var(--gold));
}

.placeholder {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}

.placeholder svg {
  width: 42%;
  opacity: 0.55;
}

.about-index__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.about-index__card {
  display: block;
  padding: var(--space-4);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.about-index__card h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en-display);
  color: var(--forest);
}

.about-index__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px oklch(from var(--ink) l c h / 0.08);
}

.about-index__card-more {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.timeline {
  list-style: none;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 72px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold-soft);
}

.timeline__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-3);
}

.timeline__year {
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.timeline__title {
  margin: 0 0 var(--space-1);
  color: var(--forest);
}

.timeline__desc {
  color: var(--ink-soft);
  margin: 0;
}

.team-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.pill {
  display: inline-block;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--cream-light);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  border: 1px solid var(--line);
}

.pill.is-active {
  background: var(--forest);
  color: var(--cream);
  border-color: transparent;
}

/* 2026-05 founder feedback: with auto-fit + 1fr, a single-card role
   group (e.g. only one Principal) would stretch the card to the full
   container width, leaving the 220px photo floating in a giant empty
   card. Switched to auto-fill + minmax(min,max) so each track is
   220–280px wide max: cards never stretch beyond their natural
   width, even when alone in a row. justify-content keeps them at
   the start so a single card lives on the left, not centered with
   silly leading whitespace. */
.team-page__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  justify-content: start;
  margin-block-end: var(--space-6);
}

.team-page__featured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  justify-content: start;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.team-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-card--featured {
  background: var(--forest);
  color: var(--cream);
  border-color: transparent;
}

/* Photo (or placeholder rendering through the same class). Capped at
   220px max-height so the photo anchors the card without dominating
   it: was rendering at full card width × 1:1, which on narrow grids
   produced a giant square that pushed all the meta text out of view.
   The placeholder include uses this class too via `extra=` so both
   real photos and the CMS placeholder share the same dimensions. */
.team-card__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-3);
  align-self: center;
  /* When a portrait photo is wider than 220px square it caps height; the
     auto margin + max-width: 100% keeps it centered. */
  max-width: 220px;
}
/* When the placeholder include lands inside .team-card it picks up
   the class above via `extra="team-card__photo"`. Make sure the
   inline aspect-ratio it sets via style="" wins over the rule above
   while still respecting our max-width cap. */
.team-card .cms-photo-placeholder.team-card__photo {
  max-width: 220px;
}

.team-card__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-en-display);
  font-size: 1.1rem;
  color: inherit;
}

.team-card__role {
  margin: 0 0 var(--space-1);
  font-size: 0.9rem;
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.team-card__location {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  color: var(--muted);
}

.team-card__bio {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: inherit;
}

.team-card__subjects {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Featured-card text overrides: the dark forest background needs
   warmer/lighter foreground colors than the cream-light card. */
.team-card--featured .team-card__role {
  color: oklch(from var(--gold) calc(l + 0.18) c h);
}
.team-card--featured .team-card__location,
.team-card--featured .team-card__subjects {
  color: oklch(from var(--cream) calc(l - 0.05) c h / 0.85);
}
.team-card--featured .team-card__name,
.team-card--featured .team-card__bio {
  color: var(--cream);
}

.chairman-page__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
}

@media (max-width: 800px) {
  .chairman-page__grid {
    grid-template-columns: 1fr;
  }
}

.chairman-page__card {
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  position: sticky;
  top: 100px;
  align-self: start;
}

.chairman-page__names {
  display: grid;
  gap: 2px;
  color: var(--ink-soft);
}

.chairman-page__role {
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.chairman-page__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-block-end: var(--space-3);
}

.chairman-page__meta {
  margin-block-end: var(--space-3);
}

.chairman-page__meta dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.chairman-page__meta dd {
  margin: 0 0 var(--space-2);
}

.article-index__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.article-card {
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.article-card a {
  color: inherit;
  text-decoration: none;
}

.article-card__cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.article-card__title {
  margin: var(--space-3) var(--space-3) var(--space-1);
  font-family: var(--font-en-display);
}

.article-card__meta, .article-card__lead, .article-card__authors {
  padding-inline: var(--space-3);
}

.article-card__meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.article-card__lead {
  margin-block: var(--space-2);
}

.article-card__authors {
  margin-block: var(--space-2);
  padding-bottom: var(--space-3);
  color: var(--vermillion-text, var(--gold));
  font-size: 0.88rem;
}

.article-page__header {
  max-width: 700px;
  margin-block-end: var(--space-5);
}

.article-page__lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
}

.article-page__cover {
  margin-block-end: var(--space-5);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.article-page__tags ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
}

.tag-chip {
  background: var(--cream-light);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  color: var(--forest);
  text-decoration: none;
  font-size: 0.82rem;
}

.projects-index__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.project-card {
  display: block;
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.project-card__cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-card h3 {
  margin: var(--space-3) var(--space-3) var(--space-1);
  font-family: var(--font-en-display);
}

.project-card__meta, .project-card__summary {
  padding-inline: var(--space-3);
}

.project-card__meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.project-card__summary {
  padding-bottom: var(--space-3);
  color: var(--ink-soft);
}

.chip {
  display: inline-block;
  padding: 0.15em 0.7em;
  font-size: 0.72rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--cream);
  color: var(--ink);
}

.chip--in_progress {
  background: var(--gold-soft);
}

.chip--complete {
  background: #d5e8d4;
  color: #2e6b3a;
}

.chip--planned {
  background: var(--cream-light);
  color: var(--muted);
}

.contact-page__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 800px) {
  .contact-page__grid {
    grid-template-columns: 1fr;
  }
}

.contact-form__row {
  margin-block-end: var(--space-3);
}

.contact-form__row label {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.82rem;
  margin-block-end: 4px;
}

.contact-form__row input,
.contact-form__row textarea {
  width: 100%;
  border: 1px solid var(--line);
  padding: 0.6em 0.8em;
  border-radius: 6px;
  font: inherit;
  background: var(--paper);
}

.contact-form__row textarea {
  min-height: 140px;
}

.contact-form__error {
  color: var(--red);
  font-size: 0.82rem;
  margin: 4px 0 0;
}

.contact-card {
  background: var(--cream-light);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-3);
}

.contact-card h3 {
  margin-top: 0;
  color: var(--forest);
  font-family: var(--font-en-display);
}

.contact-card dl {
  margin: 0;
}

.contact-card dt {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-start: var(--space-2);
}

.contact-card dd {
  margin: 0;
}

.prayer-index__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block-end: var(--space-5);
}

.prayer-index__city-link {
  display: block;
  padding: var(--space-3);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.prayer-index__city-link:hover {
  background: var(--cream);
}

.prayer-index__city-pending {
  display: block;
  padding: var(--space-3);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.prayer-city {
  background: var(--paper);
}

.prayer-city__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 55%, var(--forest-soft) 100%);
  color: var(--cream);
  padding-block: clamp(var(--space-5), 6vw, var(--space-7));
}

.prayer-city__hero-bg {
  position: absolute;
  inset: 0;
  color: var(--gold-light);
  opacity: 0.25;
  pointer-events: none;
}

.prayer-city__hero-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.prayer-city__hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 860px) {
  .prayer-city__hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
    gap: var(--space-6);
  }
}

.prayer-city__hero-heading {
  max-width: 640px;
}

.eyebrow--light {
  color: var(--gold-light);
}

.prayer-city__title {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.prayer-city__subtitle {
  color: var(--gold-soft);
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
}

.prayer-city__method {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.prayer-city__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--cream);
  background: oklch(from var(--paper) l c h / 0.10);
  /* Decorative blur removed per brand spec (blur reserved for chrome
     only: sticky nav, sticky pay bar, modal backdrops). */
}

.prayer-city__date-card {
  background: var(--cream-light);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: 0 20px 40px -24px oklch(from var(--ink) l c h / 0.45);
  position: relative;
  overflow: hidden;
}

.prayer-city__date-card::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.prayer-city__clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

.prayer-city__clock-time {
  font-family: var(--font-en-display);
  font-size: 2.25rem;
  color: var(--forest);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.prayer-city__clock-zone {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.prayer-city__date-gregorian {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 600;
}

.prayer-city__date-big {
  font-family: var(--font-en-display);
  font-size: 1.75rem;
  color: var(--forest);
  margin: 0 0 4px;
  font-weight: 500;
}

.prayer-city__date-hijri {
  color: var(--vermillion-text, var(--gold));
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.prayer-city__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

.prayer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.prayer-pill strong {
  font-family: var(--font-en-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.prayer-pill--warm {
  background: var(--gold);
  color: var(--forest-deep);
}

.prayer-city__grid-wrap {
  padding-block: var(--space-6);
}

.prayer-city__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-end: var(--space-4);
}

@media (min-width: 620px) {
  .prayer-city__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .prayer-city__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.prayer-tile {
  position: relative;
  background: var(--cream-light);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.prayer-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, oklch(from var(--ink) l c h / 0.03) 100%);
  pointer-events: none;
}

.prayer-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -18px oklch(from var(--ink) l c h / 0.4);
}

.prayer-tile__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--forest);
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 75%);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.prayer-tile__icon svg {
  width: 26px;
  height: 26px;
}

.prayer-tile__label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.prayer-tile__time {
  font-family: var(--font-en-display);
  font-size: 1.55rem;
  color: var(--forest);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.prayer-tile__badge {
  min-height: 18px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillion-text, var(--gold));
  position: relative;
  z-index: 1;
}

.prayer-tile.is-next {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 16px 32px -18px oklch(from var(--vermillion, var(--gold)) l c h / 0.55);
}

.prayer-tile.is-next .prayer-tile__icon {
  color: var(--gold-light);
  background: radial-gradient(circle, oklch(from var(--vermillion, var(--gold)) l c h / 0.35) 0%, transparent 75%);
}

.prayer-tile.is-next .prayer-tile__label {
  color: var(--gold-soft);
}

.prayer-tile.is-next .prayer-tile__time {
  color: var(--cream);
}

.prayer-tile.is-next .prayer-tile__badge {
  color: var(--gold-light);
}

.prayer-tile.is-next .prayer-tile__badge::before {
  content: "Next";
}

.prayer-tile.is-past {
  opacity: 0.6;
}

.prayer-tile.is-past .prayer-tile__time {
  color: var(--muted);
}

.prayer-city__countdown {
  text-align: center;
  font-family: var(--font-en-display);
  font-size: 1.15rem;
  color: var(--forest);
  margin: 0 0 var(--space-5);
}

.prayer-city__countdown strong {
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.prayer-city__countdown:empty {
  display: none;
}

/* DST/timezone reassurance line. Added 2026-05 after editor feedback
   that "BST is broken": the times are correct, the page was just
   silent about the timezone. */
.prayer-city__tz-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto var(--space-5);
  padding: 0.65rem 1rem;
  max-width: 640px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.prayer-city__tz-note svg {
  flex: 0 0 auto;
  color: var(--forest);
  opacity: 0.7;
}
.prayer-city__clock-dst {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.prayer-city__empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto var(--space-5);
}

.prayer-city__empty svg {
  color: var(--forest);
  margin-bottom: var(--space-3);
}

.prayer-city__empty h2 {
  font-family: var(--font-en-display);
  color: var(--forest);
  margin: 0 0 var(--space-2);
  font-weight: 500;
}

.prayer-city__empty p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
}

.prayer-city__empty p:last-child {
  margin-bottom: 0;
}

.prayer-city__intro {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.prayer-city__upcoming {
  padding-block: var(--space-5) var(--space-7);
}

.prayer-city__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: var(--cream-light);
  box-shadow: 0 8px 24px -20px oklch(from var(--ink) l c h / 0.3);
}

.prayer-city__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.94rem;
}

.prayer-city__table th, .prayer-city__table td {
  padding: 0.7em 0.85em;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.prayer-city__table thead th {
  background: var(--forest);
  color: var(--cream);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.prayer-city__table tbody th {
  font-weight: 500;
  color: var(--ink);
}

.prayer-city__table tbody tr:hover {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
}

.prayer-city__table tbody tr.is-today {
  background: var(--gold-soft);
  font-weight: 600;
}

.prayer-city__table tbody tr.is-today th, .prayer-city__table tbody tr.is-today td {
  color: var(--forest-deep);
}

.prayer-city__table-day {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prayer-city__table-date {
  display: block;
  font-family: var(--font-en-display);
  font-size: 1.05rem;
  color: var(--forest);
}

.prayer-city__table tr.is-today .prayer-city__table-day {
  color: var(--forest);
}

.prayer-city__table tr.is-today .prayer-city__table-date {
  color: var(--forest-deep);
}

.qa-index__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  align-items: end;
  margin-block-end: var(--space-5);
}

.qa-index__filters label {
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--muted);
}

.qa-index__filters select, .qa-index__filters input[type="text"] {
  padding: 0.55em 0.7em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font: inherit;
}

.qa-index__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.qa-card {
  background: var(--cream-light);
  border-radius: var(--radius-sm);
}

.qa-card a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: var(--space-4);
}

.qa-card__question {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en-display);
  color: var(--forest);
}

.qa-card__summary {
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
}

.qa-card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.qa-card__category {
  display: inline-block;
  padding: 2px 8px;
  background: var(--forest);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.qa-card--empty {
  padding: var(--space-4);
  color: var(--muted);
}

.qa-index__category-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-block-end: var(--space-5);
}

.qa-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.qa-chip:hover {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--gold-soft);
}

.qa-chip--active {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}

.qa-chip__count {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Category cloud "+N more" expander.
   The <details> element is a chip when collapsed, and opens to reveal
   the rest of the chips in a flex row below. Native semantics, no JS. */
.qa-index__category-more {
  display: contents;
}
.qa-chip--toggle {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  color: var(--forest);
  background: var(--paper);
  border-style: dashed;
}
.qa-chip--toggle::-webkit-details-marker {
  display: none;
}
.qa-chip--toggle:hover {
  background: var(--cream);
}
.qa-index__category-more[open] .qa-chip--toggle {
  border-style: solid;
}
.qa-index__category-more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  flex-basis: 100%;
  margin-block-start: 6px;
}

.qa-page__attribution {
  color: var(--muted);
  font-size: 0.92rem;
}

.qa-page__answer {
  display: grid;
  gap: var(--space-5);
  margin-block-end: var(--space-5);
}

.qa-page__sources {
  background: var(--cream-light);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-5);
}

.qa-page__tags ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.qa-page__next-steps {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
}

.qa-answer {
  display: block;
}

.qa-answer--text {
  line-height: 1.65;
}

.qa-answer__sources {
  background: var(--cream);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-block-start: var(--space-3);
  font-size: 0.9rem;
}

.qa-answer__sources summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--forest);
}

.qa-answer__caption {
  font-family: var(--font-en-display);
  font-size: 1.1rem;
  color: var(--forest);
  margin: 0 0 var(--space-2);
}

.qa-answer__player {
  aspect-ratio: 16 / 9;
  background: var(--forest-deep);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qa-answer__player iframe, .qa-answer__player video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.qa-answer__meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-block-start: var(--space-1);
}

.qa-answer__transcript {
  margin-block-start: var(--space-2);
}

.qa-answer__transcript summary {
  cursor: pointer;
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
}

.qa-answer--link {
  display: block;
  padding: var(--space-4);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
  transition: transform 0.18s, box-shadow 0.18s;
}

.qa-answer--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px oklch(from var(--ink) l c h / 0.08);
}

.qa-answer-link__label {
  font-family: var(--font-en-display);
  font-size: 1.15rem;
  color: var(--forest);
  margin-block-end: var(--space-1);
}

.qa-answer-link__desc {
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
}

.qa-answer-link__source {
  margin: 0;
  color: var(--vermillion-text, var(--gold));
  font-weight: 600;
  font-size: 0.88rem;
}

.qa-ask__form {
  max-width: 640px;
}

.qa-ask__thanks {
  background: var(--cream-light);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  max-width: 640px;
}

/* ========== Education: courses + workshops ========== */
.course-card,
.workshop-card {
  position: relative;
}

.workshop-card.is-live {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.workshop-card__live-badge {
  position: absolute;
  top: var(--space-3);
  inset-inline-start: var(--space-3);
  background: var(--red);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

.course-page__meta,
.workshop-page__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
}

.course-page__meta dt,
.workshop-page__meta dt {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.course-page__meta dd,
.workshop-page__meta dd {
  margin: 0;
  color: var(--ink);
}

.workshop-page__live {
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin-inline-start: 8px;
  vertical-align: middle;
}

.workshop-hero {
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding-block: var(--space-6) var(--space-5);
  border-block-end: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.workshop-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  inset-inline-end: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 60%);
  opacity: 0.45;
  pointer-events: none;
}

.workshop-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  position: relative;
}

@media (min-width: 880px) {
  .workshop-hero--has-poster .workshop-hero__grid {
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
  }
}

.workshop-hero__copy {
  max-width: 620px;
}

.workshop-hero__title {
  font-family: var(--font-en-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--forest);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.1;
}

.workshop-hero__lead {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-block-end: var(--space-4);
}

.workshop-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.workshop-hero__seats {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.workshop-hero__closed {
  margin: 0;
  padding: 10px 16px;
  background: var(--cream-light);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.95rem;
}

.workshop-hero__poster {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px oklch(from var(--ink) l c h / 0.45), 0 0 0 1px var(--line);
  aspect-ratio: 3 / 4;
  background: var(--cream-light);
}

.workshop-hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn--large {
  padding-block: 14px;
  padding-inline: 28px;
  font-size: 1rem;
  font-weight: 600;
}

.workshop-page {
  padding-block: var(--space-6) var(--space-7);
}

.workshop-page__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 880px) {
  .workshop-page__details {
    grid-template-columns: minmax(280px, 360px) 1fr;
  }
}

.workshop-page__body {
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.02rem;
}

.workshop-page__body p {
  margin: 0 0 var(--space-3);
}

.workshop-meta {
  margin: 0;
  padding: var(--space-4);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: 88px;
  align-self: start;
}

.workshop-meta__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px 14px;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--line);
}

.workshop-meta__row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.workshop-meta__row dt {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.workshop-meta__row dt svg {
  color: var(--vermillion-text, var(--gold));
}

.workshop-meta__row dd {
  grid-column: 1 / -1;
  margin: 0;
  padding-inline-start: 26px;
  color: var(--ink);
  line-height: 1.5;
}

.workshop-meta__row dd strong {
  font-family: var(--font-en-display);
  color: var(--forest);
  font-size: 1.05rem;
  font-weight: 500;
}

.workshop-meta__map-link {
  color: var(--vermillion-text, var(--gold));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-size: 0.9rem;
}

.course-page__modules,
.course-page__lesson-list {
  list-style: decimal inside;
}

.course-page__modules li,
.course-page__lesson-list li {
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-2);
}

.course-page__modules li h3,
.course-page__lesson-list li h3 {
  font-family: var(--font-en-display);
  font-size: 1.15rem;
  margin: 0 0 var(--space-1);
  color: var(--forest);
}

.course-page__enrol,
.workshop-page__register {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}

.education-index__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

/* ========== Course leaf: manuscript-page redesign (2026-05) ==========
   Replaces the old .course-page__* pattern (cream cards + forest-green
   headings + decimal-list chrome) with an asymmetric two-column leaf:
   marginalia (instructor / format / duration / language / price)
   running down a wide left margin in small-caps sepia, body column
   carrying lead + prose + a sequence of vermillion roman-numeralled
   chapters, closed with an 8-point gold-leaf ornament and a single
   left-aligned vermillion CTA. No cards, no shadows, no forest, no
   gold-as-fill. Hairlines do the dividing. */
.course-leaf {
    background: var(--paper, #fbf7ee);
    color: var(--ink, #1f2540);
    padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
}

.course-leaf__wrap {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

@media (min-width: 900px) {
    .course-leaf__wrap {
        grid-template-columns: 220px minmax(0, 65ch);
        column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
        align-items: start;
    }
}

/* ── Marginalia column ── */
.course-leaf__margin {
    font-size: 0.78rem;
}

@media (min-width: 900px) {
    .course-leaf__margin {
        position: sticky;
        top: clamp(5rem, 4rem + 2vw, 7rem);
        align-self: start;
    }
}

.course-leaf__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.course-leaf__meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding-block: 0.7rem;
    border-top: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.4);
}

.course-leaf__meta-row:last-child {
    border-bottom: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.4);
}

.course-leaf__meta-label {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
}

.course-leaf__meta-value {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink, #1f2540);
    font-feature-settings: "ss01", "cv11";
}

.course-leaf__meta-value--chairman {
    color: var(--vermillion, #b9532a);
    font-weight: 600;
}

.course-leaf__meta-value--price {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink, #1f2540);
}

.course-leaf__cover {
    margin: clamp(1.25rem, 0.75rem + 2vw, 2rem) 0 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.course-leaf__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) contrast(1.02);
}

/* ── Body column ── */
.course-leaf__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.course-leaf__head {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.1rem);
}

.course-leaf__eyebrow {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.course-leaf__eyebrow span {
    color: var(--vermillion, #b9532a);
    font-size: 1.1rem;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    line-height: 1;
}

.course-leaf__title {
    margin: 0;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 300;
    font-size: clamp(2.4rem, 1.8rem + 3vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink, #1f2540);
    text-wrap: balance;
}

.course-leaf__lead {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    line-height: 1.5;
    color: var(--ink-soft, #4a5070);
    max-width: 60ch;
}

.course-leaf__lead p {
    margin: 0;
}

.course-leaf__lead p + p {
    margin-top: 0.6em;
}

.course-leaf__prose {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink, #1f2540);
    max-width: 65ch;
}

.course-leaf__prose > * + * {
    margin-top: 1em;
}

/* ── Chapter sequence (syllabus + lessons share this pattern) ── */
.course-leaf__chapters {
    margin: 0;
}

.course-leaf__chapters-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
}

.course-leaf__chapters-eyebrow {
    flex: 0 0 auto;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
}

.course-leaf__chapters-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        oklch(from var(--gold-leaf, #c9a96a) l c h / 0.55) 0%,
        oklch(from var(--gold-leaf, #c9a96a) l c h / 0) 100%
    );
}

.course-leaf__chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: leaf-chapter;
    display: flex;
    flex-direction: column;
}

.course-leaf__chapter {
    counter-increment: leaf-chapter;
    position: relative;
    padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) 0;
    padding-inline-start: clamp(2.75rem, 2rem + 2vw, 4.25rem);
    border-top: 1px solid oklch(from var(--ink, #1f2540) l c h / 0.08);
}

.course-leaf__chapter:last-child {
    border-bottom: 1px solid oklch(from var(--ink, #1f2540) l c h / 0.08);
}

.course-leaf__chapter-mark {
    position: absolute;
    inset-inline-start: 0;
    top: clamp(1.45rem, 1.05rem + 1vw, 1.95rem);
    width: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
    text-align: end;
    padding-inline-end: clamp(0.5rem, 0.3rem + 0.5vw, 0.85rem);
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--vermillion, #b9532a);
    font-feature-settings: "smcp", "c2sc";
    font-variant-caps: small-caps;
}

.course-leaf__chapter-mark::before {
    content: counter(leaf-chapter, upper-roman);
}

.course-leaf__chapter-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink, #1f2540);
    text-wrap: balance;
}

.course-leaf__chapter-body {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft, #4a5070);
    max-width: 58ch;
}

.course-leaf__chapter-body p {
    margin: 0;
}

.course-leaf__chapter-body p + p {
    margin-top: 0.55em;
}

.course-leaf__chapter-meta {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
    font-variant-numeric: tabular-nums;
}

.course-leaf__chapter-link {
    margin: 0.65rem 0 0;
    font-size: 0.92rem;
}

.course-leaf__chapter-link a {
    color: var(--vermillion, #b9532a);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid oklch(from var(--vermillion, #b9532a) l c h / 0.3);
    padding-bottom: 1px;
    transition: border-color var(--duration-fast, 160ms) var(--ease-out, ease);
}

.course-leaf__chapter-link a:hover {
    border-bottom-color: var(--vermillion, #b9532a);
}

/* ── Chapter end (ornament + CTA) ── */
.course-leaf__end {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
}

.course-leaf__ornament {
    color: var(--gold-leaf-bright, var(--gold-leaf, #c9a96a));
    width: 96px;
    height: 24px;
    display: inline-block;
}

.course-leaf__ornament svg {
    width: 100%;
    height: 100%;
}

/* Use the theme-stable --cta-bg / --cta-fg tokens (manuscript theme
   routes these to vermillion / cream). This keeps the CTA cream-on-
   vermillion in BOTH light and dark themes: the manuscript Donate
   button colour everywhere on the site. */
.course-leaf__cta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65em;
    padding: 0.95rem 1.65rem;
    background: var(--cta-bg, var(--vermillion, #b9532a));
    color: var(--cta-fg, #fbf7ee);
    text-decoration: none;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 4px;
    border: 1px solid var(--cta-bg, var(--vermillion, #b9532a));
    transition: background var(--duration-fast, 160ms) var(--ease-out, ease),
                transform var(--duration-fast, 160ms) var(--ease-out, ease);
}

.course-leaf__cta:hover {
    background: var(--cta-bg-hover, var(--vermillion-deep, oklch(0.45 0.16 30)));
    border-color: var(--cta-bg-hover, var(--vermillion-deep, oklch(0.45 0.16 30)));
    color: var(--cta-fg, #fbf7ee);
}

.course-leaf__cta:focus-visible {
    outline: 2px solid var(--vermillion, #b9532a);
    outline-offset: 3px;
}

.course-leaf__cta-arrow {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-style: italic;
    font-size: 1.05em;
    line-height: 1;
    transition: transform var(--duration-fast, 160ms) var(--ease-out, ease);
}

.course-leaf__cta:hover .course-leaf__cta-arrow {
    transform: translateX(3px);
}

.course-leaf__cta-note {
    margin: 0;
    max-width: 48ch;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-soft, #4a5070);
    font-style: italic;
}

.course-leaf__cta-closed {
    margin: 0;
    max-width: 48ch;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft, #4a5070);
    font-style: italic;
}

/* ── Mobile (<900px): marginalia collapses to a horizontal ledger
   above the title, sticky removed, hairlines wrap differently ── */
@media (max-width: 899px) {
    .course-leaf__margin {
        order: -1;
    }
    .course-leaf__meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    .course-leaf__meta-row {
        padding-inline-end: 1rem;
    }
    .course-leaf__meta-row:nth-last-child(2) {
        border-bottom: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.4);
    }
    .course-leaf__meta-row--price {
        grid-column: 1 / -1;
    }
    .course-leaf__cover {
        aspect-ratio: 16 / 9;
    }
}

/* ========== Alumni leaf: manuscript chapter listing graduates =====
   The roll of scholars who studied at Anwarul Uloom and went on to
   become Maulanas, Muhaddiths and Muftis. Three structural moves:
     1. Illuminated headpiece (gold-leaf 8-point star band) above the
        title so the page opens like a kitab chapter.
     2. Featured first-row treatment for whichever scholar sorts first
        (currently the chairman) so the page opens with a person, not
        a list. Larger vermillion roman "I", display-serif name,
        small-caps village tag, separated by a deeper hairline.
     3. Tighter ledger below for the remaining 44, with deceased rows
        getting a small gold crescent in the marginalia next to the
        ordinal in place of the cluttered "(rahimahullah)" suffix on
        the name line. The honorific moves below the name on its own
        small-caps line so it reads as a marker, not a parenthesis.
   Same vocabulary as the course leaf so the two pages feel like
   adjacent leaves of the same book. */
.alumni-leaf {
    background: var(--paper, #fbf7ee);
    color: var(--ink, #1f2540);
    padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
}

.alumni-leaf__wrap {
    /* Wider than the course leaf so the multi-column roll has room to
       breathe without collapsing back to single column. The head and
       featured chairman block are individually capped so they don't
       stretch to this width. */
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.4rem + 2vw, 3rem);
}

@media (min-width: 1180px) {
    .alumni-leaf__wrap {
        max-width: 1280px;
    }
}

.alumni-leaf__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.1rem);
    padding-bottom: clamp(0.5rem, 0.3rem + 0.5vw, 1rem);
    /* Cap the head independent of the wrap so the lead never reads
       too wide on the 1080px multi-column layout. */
    max-width: 60ch;
    margin-inline: auto;
}

.alumni-leaf__crown {
    display: inline-block;
    width: clamp(180px, 120px + 12vw, 260px);
    height: auto;
    color: var(--gold-leaf-bright, var(--gold-leaf, #c9a96a));
    margin-bottom: clamp(0.25rem, 0.15rem + 0.4vw, 0.6rem);
}

.alumni-leaf__crown svg {
    width: 100%;
    height: auto;
    display: block;
}

.alumni-leaf__eyebrow {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.alumni-leaf__eyebrow-sep {
    color: var(--vermillion, #b9532a);
    font-size: 1rem;
    line-height: 0.5;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0 -0.1rem;
}

.alumni-leaf__title {
    margin: 0;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 300;
    font-size: clamp(2.4rem, 1.8rem + 3.5vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--ink, #1f2540);
    text-wrap: balance;
}

.alumni-leaf__lead {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-soft, #4a5070);
    max-width: 56ch;
    margin-inline: auto;
}

.alumni-leaf__lead p {
    margin: 0;
}

.alumni-leaf__lead p + p {
    margin-top: 0.6em;
}

/* ── Featured first row (the chairman) ──
   Capped at a narrower width than the multi-column roll so he reads
   as the page anchor (one person), while the columns below read as
   community (the chain). Centered with auto margins. */
.alumni-leaf__featured {
    display: grid;
    grid-template-columns: clamp(3rem, 2.4rem + 2vw, 4.5rem) minmax(0, 1fr);
    column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    align-items: baseline;
    padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) 0
             clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
    border-top: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.55);
    border-bottom: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.55);
    margin-block: clamp(1rem, 0.6rem + 1vw, 1.5rem) 0;
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
}

.alumni-leaf__featured-mark {
    align-self: start;
    text-align: end;
    padding-top: 0.35rem;
    color: var(--vermillion, #b9532a);
}

.alumni-leaf__featured-numeral {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-caps: small-caps;
    display: inline-block;
}

.alumni-leaf__featured-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.alumni-leaf__featured-tag {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
}

.alumni-leaf__featured-name {
    margin: 0;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.95rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--ink, #1f2540);
    text-wrap: balance;
}

.alumni-leaf__featured-name[lang="bn"] {
    font-family: "Hind Siliguri", "Galada", system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.3;
}

.alumni-leaf__featured-name[lang="ar"] {
    font-family: "Amiri", "Reem Kufi", serif;
    font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem);
    line-height: 1.35;
}

.alumni-leaf__featured-translit {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sepia, #7a6850);
    letter-spacing: 0.015em;
}

.alumni-leaf__featured-translit[lang="bn"] {
    font-family: "Hind Siliguri", system-ui, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0;
}

/* ── The roll itself (everything after the featured row) ──
   Multi-column flow so 44 names don't read as a vertical phone book.
   Native CSS multicol keeps the <ol> counter behavior intact (rows
   number top-to-bottom in column 1, then column 2, etc.) and reflows
   automatically as the viewport narrows. Mobile drops to single
   column; desktop opens to 2 cols at >=720px and 3 at >=1180px. */
.alumni-leaf__roll {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Counter starts at 1 so the first row increments to 2: the
       featured row above is implicitly entry I. */
    counter-reset: alumni 1;

    column-count: 1;
    column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    column-rule: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.25);
}

@media (min-width: 720px) {
    .alumni-leaf__roll {
        column-count: 2;
    }
}

@media (min-width: 1180px) {
    .alumni-leaf__roll {
        column-count: 3;
    }
}

.alumni-leaf__row {
    counter-increment: alumni;
    position: relative;
    padding: clamp(0.7rem, 0.55rem + 0.5vw, 1rem) 0;
    padding-inline-start: clamp(2.75rem, 2rem + 2vw, 4rem);
    border-bottom: 1px solid oklch(from var(--ink, #1f2540) l c h / 0.07);
    /* Don't split a row across columns: a name half in col 1 and
       half in col 2 reads as broken type. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* Every row carries a bottom hairline (including the last) so each
   column ends with a clean ledger-rule beneath its final entry -
   CSS multicol doesn't expose per-column :first-child / :last-child
   so we can't conditionally cap top/bottom per column. */

.alumni-leaf__mark {
    position: absolute;
    inset-inline-start: 0;
    top: clamp(0.8rem, 0.65rem + 0.5vw, 1.15rem);
    width: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
    text-align: end;
    padding-inline-end: clamp(0.5rem, 0.3rem + 0.5vw, 0.8rem);
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--vermillion, #b9532a);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.alumni-leaf__mark::before {
    content: counter(alumni);
    order: 2;
}

/* Tiny gold crescent rendered next to the ordinal on rows where the
   scholar has passed away. Replaces the inline "(rahimahullah)"
   suffix that used to sit on the same line as the name. */
.alumni-leaf__crescent {
    width: 11px;
    height: 11px;
    color: var(--gold-leaf-bright, var(--gold-leaf, #c9a96a));
    flex-shrink: 0;
    order: 1;
}

.alumni-leaf__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alumni-leaf__name-primary {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.3;
    color: var(--ink, #1f2540);
    letter-spacing: -0.005em;
}

.alumni-leaf__name-primary[lang="bn"] {
    font-family: "Hind Siliguri", "Galada", system-ui, sans-serif;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.45;
}

.alumni-leaf__name-primary[lang="ar"] {
    font-family: "Amiri", "Reem Kufi", serif;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.45;
}

.alumni-leaf__name-secondary {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sepia, #7a6850);
    letter-spacing: 0.01em;
}

.alumni-leaf__name-secondary[lang="bn"] {
    font-family: "Hind Siliguri", system-ui, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0;
}

.alumni-leaf__rh {
    display: block;
    margin-top: 2px;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--sepia, #7a6850);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.alumni-leaf__rh [lang="bn"],
.alumni-leaf__rh [lang="ar"] {
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 1.1em;
    font-weight: 500;
}

.alumni-leaf__village {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia, #7a6850);
    margin-top: 4px;
}

/* No tonal change to the name itself for deceased rows; the gold
   crescent in the marginalia + the small-caps marker line below the
   name carry the meaning. Muting the name read as "less important",
   which is exactly the wrong signal for someone we are remembering. */

.alumni-leaf__empty {
    margin: 0;
    padding: 1.5rem 0;
    color: var(--ink-soft, #4a5070);
    font-style: italic;
}

.alumni-leaf__closing {
    color: var(--sepia, #7a6850);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.1rem);
    margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
}

.alumni-leaf__closing p {
    margin: 0;
}

.alumni-leaf__ornament {
    color: var(--gold-leaf-bright, var(--gold-leaf, #c9a96a));
    width: 96px;
    height: 24px;
    display: inline-block;
}

.alumni-leaf__ornament svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========== Counselling ========== */
.counselling-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.counselling-card {
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.counselling-card__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-2);
  background: var(--forest-soft);
}

.counselling-card__photo.placeholder {
  display: block;
  background: linear-gradient(135deg, var(--forest-soft), var(--forest-deep));
}

.counselling-card__name {
  font-family: var(--font-en-display);
  font-size: 1.18rem;
  color: var(--forest);
  margin: 0;
}

.counselling-card__role {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.counselling-card__bio {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.counselling-card .btn {
  margin-inline: auto;
}

.counselling-page__confidentiality,
.counselling-page__safeguarding,
.counselling-page__pricing {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--gold);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
}

.counselling-book {
  padding-block: var(--space-6) var(--space-8);
  max-width: 760px;
  margin-inline: auto;
}

.counselling-book .content-page__header {
  margin-block-end: var(--space-5);
}

.counselling-book__notice {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-5);
  border-inline-start: 4px solid var(--gold);
  box-shadow: var(--shadow-sm);
}

.counselling-book__notice .section-heading {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--forest-deep);
}

.counselling-book__notice p:last-child {
  margin-bottom: 0;
}

/* Form wraps in a warm off-paper card so the booking feels considered
   rather than a bare sequence of inputs: this is a first contact with
   a counsellor and the visual tone matters. */
.counselling-book__form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .counselling-book__form {
    padding: var(--space-6) var(--space-7);
  }
}

/* Scope the form-field polish to this page so we don't accidentally
   restyle the contact/Q&A forms that share the .contact-form class. */
.counselling-book__form .contact-form__row {
  margin-block-end: 0;
}

.counselling-book__form label {
  display: block;
  color: var(--forest-deep);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  margin-block-end: 6px;
}

.counselling-book__form input,
.counselling-book__form select,
.counselling-book__form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cream-light);
  border: 1.5px solid transparent;
  padding: 0.75em 0.9em;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.counselling-book__form input::placeholder,
.counselling-book__form textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.counselling-book__form input:hover,
.counselling-book__form select:hover,
.counselling-book__form textarea:hover {
  background: var(--cream);
}

.counselling-book__form input:focus,
.counselling-book__form select:focus,
.counselling-book__form textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.16);
}

.counselling-book__form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Native select on cream gets a custom chevron so it matches inputs. */
.counselling-book__form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230F3D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-inline-end: 2.25em;
}

[dir="rtl"] .counselling-book__form select {
  background-position: left 1em center;
  padding-inline-end: 0.9em;
  padding-inline-start: 2.25em;
}

/* Radio group (session format): cards rather than raw radios. */
.counselling-book__form ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.counselling-book__form ul li label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 0.9em;
  background: var(--cream-light);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--forest-deep);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.counselling-book__form ul li label:hover {
  background: var(--cream);
  border-color: var(--gold-soft);
}

.counselling-book__form ul li input[type="radio"] {
  width: auto;
  accent-color: var(--forest);
  flex-shrink: 0;
}

.counselling-book__form .contact-form__row--checkbox {
  background: var(--cream-light);
  padding: 0.85em 1em;
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--gold-soft);
}

.counselling-book__form .contact-form__row--checkbox label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-block-end: 0;
  text-transform: none;
  letter-spacing: 0;
}

.counselling-book__form .contact-form__row--checkbox input[type="checkbox"] {
  accent-color: var(--forest);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-block-start: 2px;
}

.counselling-book__form .contact-form__help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.counselling-book__form button[type="submit"] {
  align-self: flex-start;
  margin-top: var(--space-3);
  padding-inline: var(--space-6);
}

/* Layout: short fields (name + email) sit side by side on wider screens. */
@media (min-width: 640px) {
  .counselling-book__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-4);
  }
  .counselling-book__form > .contact-form__row:nth-of-type(1),  /* counsellor */
  .counselling-book__form > .contact-form__row:nth-of-type(4),  /* preferred slots */
  .counselling-book__form > .contact-form__row:nth-of-type(5),  /* format */
  .counselling-book__form > .contact-form__row:nth-of-type(6),  /* reason */
  .counselling-book__form > .contact-form__row--checkbox,
  .counselling-book__form > button[type="submit"] {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   Payment status: used by donations/cancel.html (and shareable with
   any future "something went wrong" flow). Reassurance-first layout:
   big icon + empathetic copy + obvious "Try again" route + softer
   "Need help" section below so donors don't feel stuck.
   ------------------------------------------------------------------ */

.payment-status {
  max-width: 680px;
  margin: 0 auto;
  padding-block: var(--space-8);
  text-align: center;
}

.payment-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-block-end: var(--space-4);
  background: color-mix(in srgb, var(--red) 10%, var(--paper));
  color: var(--red);
}

.payment-status__icon svg {
  width: 44px;
  height: 44px;
}

.payment-status--success .payment-status__icon {
  /* Success uses the rare functional green token (only place green appears
     in the brand). The checkmark icon glows softly in success-soft on the
     paper, with a darker success outline. Per DESIGN.md, this is the ONE
     surface where green is permitted: payment confirmed. */
  background: var(--success-soft, oklch(0.92 0.04 155));
  color: var(--success, oklch(0.55 0.10 155));
}

.payment-status__eyebrow {
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  margin-block-end: var(--space-3);
}

.payment-status--success .payment-status__eyebrow {
  color: var(--success, oklch(0.55 0.10 155));
}

.payment-status__headline {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  color: var(--forest-deep);
  margin: 0 0 var(--space-4);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.payment-status__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 auto var(--space-5);
  max-width: 540px;
}

.payment-status__reassure {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  text-align: start;
  margin-block-end: var(--space-6);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.payment-status__reassure strong {
  display: block;
  color: var(--forest-deep);
  margin-block-end: 4px;
  font-size: 1rem;
}

/* Donation-number block, lifted out of the dl below so it reads as
   the success page's anchor: the one piece of text the donor will
   write down or paste into an email. Small-caps sepia label sits
   above a large monospace number. user-select: all so a tap on
   mobile selects the whole number for copying. */
.payment-status__number {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-3) 0 var(--space-4);
  padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.1rem) clamp(1rem, 0.7rem + 1vw, 1.4rem);
  background: oklch(from var(--paper, #fbf7ee) calc(l - 0.04) c h);
  border-radius: var(--radius-sm);
  border: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.4);
  text-align: start;
}

.payment-status__number-label {
  font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia, var(--muted));
}

.payment-status__number-value {
  font-family: "DejaVu Sans Mono", "SF Mono", "Menlo", "Consolas", monospace;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
  font-weight: 600;
  color: var(--ink, #1f2540);
  letter-spacing: 0.06em;
  user-select: all;
  -webkit-user-select: all;
}

/* Receipt-style definition list for the success page. Two columns:
   label on the left (muted, uppercase-ish), value on the right (ink). */
.payment-status__receipt {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: var(--space-3) 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.payment-status__receipt dt {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: center;
}

.payment-status__receipt dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.payment-status__receipt code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 0.85rem;
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.payment-status__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.payment-status__primary {
  min-width: 220px;
  /* Bigger download button on the success page so it reads as the
     primary action, not a secondary "by the way" link. Stays inline
     on desktop (sits beside the manage / back-home secondary), goes
     full-width on mobile so the tap target is obvious. */
  padding-block: clamp(0.75rem, 0.55rem + 0.6vw, 1rem);
  padding-inline: clamp(1.1rem, 0.85rem + 1vw, 1.7rem);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
}

@media (max-width: 599px) {
  .payment-status__primary {
    width: 100%;
  }
}

.payment-status__help {
  text-align: center;
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--line);
}

.payment-status__help-heading {
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  color: var(--forest-deep);
  margin: 0 0 var(--space-3);
  font-weight: 500;
}

.payment-status__help p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-inline: auto;
  max-width: 520px;
}

.payment-status__help-link {
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
}

.payment-status__help-link:hover {
  color: var(--forest-deep);
  border-bottom-color: var(--vermillion-text, var(--gold));
}

.contact-form__row--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.contact-form__row--checkbox input[type="checkbox"] {
  margin-block-start: 4px;
  flex-shrink: 0;
}

.contact-form__help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.donate-index {
  padding-block: var(--space-6) var(--space-7);
}

.donate-index__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}

.donate-index__header h1 {
  font-family: var(--font-en-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--forest);
  margin: 0 0 var(--space-3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.donate-index__intro {
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.6;
}

.donate-index__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--space-4) auto 0;
  max-width: 960px;
}

.donate-index__chips .chip {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.18));
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.donate-index__chips .chip:hover {
  border-color: var(--vermillion-text, var(--gold));
  color: var(--forest);
}

.donate-index__chips .chip--active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.donate-index__chips .chip--active:hover {
  background: var(--forest-deep);
  color: var(--paper);
}

.donate-index__chips .chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.donate-index__campaigns {
  margin-block-end: var(--space-7);
}

.donate-index__campaign-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.donate-index__products {
  margin-block-end: var(--space-6);
}

.donate-index__products .section-heading {
  text-align: center;
  margin-block-end: var(--space-5);
  font-family: var(--font-en-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--forest);
  font-weight: 500;
}

.donate-index__products-wrap {
  margin-block-end: var(--space-7);
}

.donate-index__products-wrap-header {
  text-align: center;
  margin-block-end: var(--space-5);
}

.donate-index__products-wrap-header .section-heading {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  color: var(--forest);
  font-weight: 500;
}

.donate-index__products-hint {
  color: var(--ink-soft);
  margin: var(--space-2) auto 0;
  max-width: 52ch;
  font-size: 0.9375rem;
}

.donate-index__products-subheading {
  font-family: var(--font-en-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--forest);
  margin: var(--space-6) 0 var(--space-3);
}

.donate-index__products-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--line, oklch(from var(--ink) l c h / 0.14));
  border-radius: var(--radius-sm);
  margin-block-start: var(--space-5);
}

.donate-index__group {
  margin-block-end: var(--space-6);
}

.donate-index__group:last-child {
  margin-block-end: 0;
}

.donate-index__group-heading {
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 var(--space-3);
  padding-block-end: 10px;
  border-block-end: 1px solid var(--line);
  letter-spacing: -0.005em;
}

.donate-index__group-heading::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  margin-inline-end: 10px;
  vertical-align: middle;
}

.donate-index__product-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Two-up on mid-phones (most modern devices are 360-414px wide). Lets a
   long product list, Ramadan 30-days × 4 categories, fit in half the
   vertical scroll. Below 460px we still drop to 1-up so cards stay
   tap-friendly. The override happens at 580px so even the smallest
   tablets pre-empt the auto-fill 240px breakpoint and we get a
   predictable 2-up layout instead of an awkward 1.5-card width. */
@media (min-width: 460px) and (max-width: 580px) {
  .donate-index__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

.donate-index__empty {
  color: var(--muted);
  text-align: center;
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.donate-index__monthly {
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius: var(--radius-sm);
  color: var(--forest-deep);
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-block: var(--space-6) 0;
  box-shadow: 0 16px 32px -20px oklch(from var(--vermillion, var(--gold)) l c h / 0.6);
}

.donate-index__monthly h3 {
  font-family: var(--font-en-display);
  font-size: 1.75rem;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.donate-index__monthly p {
  margin: 0 0 var(--space-3);
  color: var(--forest-deep);
  opacity: 0.85;
}

.donate-index__monthly-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
}

.donate-index__monthly-form input[type="email"] {
  flex: 1 1 220px;
  padding: 10px 14px;
  border: 2px solid var(--forest-deep);
  border-radius: var(--radius-sm);
  background: var(--cream-light);
  font: inherit;
  color: var(--ink);
}

.donate-index__alt-methods {
  margin-block-start: var(--space-6);
  text-align: center;
}

/* Campaign card: manuscript-panel pattern. The legacy dark
   forest-green gradient + heavy shadows + decorative radial blurs
   were a SaaS-template smell that survived the brand reset (the
   --forest alias kept the gradient working but as a dark indigo
   wall against cream paper). Migrated to: paper-deep tint, hairline
   above + below, vermillion eyebrow + Inria Serif title, ink-soft
   body. The progress meter inside (existing markup) renders in
   vermillion against the cream tint. */
.campaign-card {
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
  color: var(--ink);
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
  position: relative;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  transition: background 240ms var(--ease-out, ease-out);
}

.campaign-card::before,
.campaign-card::after {
  content: none; /* drop the radial decorative blurs */
}

.campaign-card:hover {
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.7);
}

.campaign-card__title {
  font-family: var(--font-en-display);
  color: var(--ink);
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  position: relative;
  padding-inline-end: 90px;
}

.campaign-card__body {
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
  position: relative;
  font-size: 0.95rem;
}

.campaign-card__stats {
  color: var(--cream);
  font-size: 0.9rem;
  margin: 2px 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.campaign-card__stats strong {
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1;
}

.campaign-card__stats-label {
  color: var(--ink-soft);
  font-family: var(--font-en-body);
  font-size: 0.85rem;
}

.campaign-card__stats-dots {
  display: inline-flex;
  gap: 10px;
  margin-inline-start: auto;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.campaign-card__stats-dots span + span::before {
  content: "·";
  margin-inline-end: 10px;
  color: var(--ink-faint);
}

.campaign-card__prelaunch {
  color: var(--sepia, var(--ink-soft));
  font-style: italic;
  margin: 0;
}

.campaign-card__cta {
  margin-block-start: auto;
  align-self: flex-start;
  position: relative;
  /* Sit above the stretched-link overlay so button clicks feel distinct
     (the navigation target is the same, but hover/focus styles trigger). */
  z-index: 2;
}

/* Invisible overlay that makes the whole campaign card one big link.
   Covers the card surface, sits under the explicit CTA button and any
   future interactive children. aria-hidden + tabindex=-1 because the
   visible CTA is the accessible entry point. */
.campaign-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  /* No visible styling: the card's own :hover lift provides feedback. */
  text-indent: -9999px;
  overflow: hidden;
}
.campaign-card__stretched-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -3px;
}

.campaign-card.is-primary {
  /* Primary campaign gets a slightly stronger paper-deep tint and a
     vermillion top hairline (in place of the legacy heavy box-shadow)
     to mark it as the most important on the index. */
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.7);
  border-top: 2px solid var(--vermillion-text, var(--vermillion, var(--gold)));
  box-shadow: none;
}

.campaign-card--project {
  /* The "Projects you can fund" variant inherits the same manuscript
     surface as the appeal cards. The legacy dark gradient created a
     visual wall halfway down the donate index which the brand reset
     wasn't supposed to keep. */
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
}

.campaign-card--project .campaign-card__title {
  color: var(--ink);
}

.campaign-card .urgency-banner {
  align-self: flex-start;
  margin: 4px 0 0;
}

.progress-bar {
  height: 8px;
  /* Manuscript progress: ink-soft track + vermillion fill, tighter and
     calmer than the gold gradient. The legacy paper-tinted track was
     designed for the dark forest card; against the new paper-deep tint
     it was nearly invisible. */
  background: oklch(from var(--ink) l c h / 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--space-2) 0;
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  background: var(--vermillion-text, var(--vermillion, var(--gold)));
  border-radius: 999px;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.urgency-banner {
  display: inline-block;
  margin: var(--space-2) 0 var(--space-3);
  padding: 6px 12px;
  background: var(--red);
  color: var(--cream);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
}

.product-card {
  background: var(--paper, var(--cream-light));
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid var(--rule, var(--line));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
  position: relative;
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--vermillion-text, var(--vermillion, var(--gold)));
  box-shadow: 0 14px 28px -20px oklch(from var(--ink) l c h / 0.35);
}

/* Compact variant: auto-applied when there's no cover image, so the
   header sits right at the top with no negative-margin bleed. Tighter
   gap because we lost the cover's visual weight. */
.product-card--no-cover {
  gap: 10px;
}

/* Editor-supplied product banner. Sits above the card body; negative
   margins pull it flush with the card's rounded top so the image isn't
   orphaned inside the padding box.

   4:3 frame (was 16:9): livestock photos for Qurbani products were
   getting cropped into a sliver of legs at 16:9. 4:3 keeps enough
   vertical room for the animal's body and head, and still works for
   buildings/students. object-position: center 35% biases the crop
   slightly above centre so faces/heads survive when the editor
   uploads a portrait-orientation photo.

   Margins recompute against the new 16px padding (was -18px -18px 12px).
*/
.product-card__cover {
  display: block;
  width: calc(100% + 32px);
  max-width: none;
  margin: -16px -16px 10px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Legacy placeholder cover: kept for any old templates still referencing
   it, but the new _product_tile.html omits the cover entirely when no
   image is set, so this rarely renders. When it does, manuscript-grade
   paper-deep tint replaces the heavy forest gradient. */
.product-card__cover--placeholder {
  display: grid;
  place-items: center;
  background: oklch(from var(--paper-deep, var(--cream-light)) l c h / 0.55);
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  overflow: hidden;
  position: relative;
}
.product-card__cover--placeholder::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid var(--gold-leaf, oklch(0.75 0.10 75 / 0.45));
  border-radius: 4px;
  pointer-events: none;
}
.product-card__cover-glyph {
  display: block;
  width: 28%;
  max-width: 80px;
  aspect-ratio: 1 / 1;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  opacity: 0.55;
  position: relative;
  z-index: 1;
}
.product-card__cover-glyph svg {
  width: 100%;
  height: 100%;
}

.product-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.product-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  color: var(--vermillion-text, var(--vermillion, var(--forest)));
  background: oklch(from var(--paper-deep, var(--gold-soft)) l c h / 0.6);
  border-radius: var(--radius-sm);
}

.product-card__icon svg {
  width: 20px;
  height: 20px;
  max-width: 100%;
  max-height: 100%;
  display: block;
  color: currentColor;
}
/* Editors sometimes paste SVG whose inner paths hardcode fills that blend
   into the gold tile. Let CSS win: if a path uses `currentColor` it
   picks up the wrapper's --forest; if it uses `fill="none"` the stroke
   takes over. Explicit hex fills are left alone so multi-colour SVGs
   (e.g. brand logos) still render as authored. */
.product-card__icon svg [fill="currentColor"] {
  fill: currentColor;
}
.product-card__icon svg [stroke="currentColor"] {
  stroke: currentColor;
}

.product-card__title {
  font-family: var(--font-en-display);
  color: var(--ink, var(--forest));
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.25;
}

.product-card__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  flex-grow: 1;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0 0;
  font-family: var(--font-en-display);
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 600;
}

.product-card__currency {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.product-card__amount {
  font-size: 1.75rem;
  font-weight: 600;
}

.product-card__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--rule, var(--line));
}

.product-card__form input[type="email"],
.product-card__form input[type="number"] {
  padding: 7px 10px;
  border: 1px solid var(--rule, var(--line));
  border-radius: 6px;
  background: var(--paper);
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
}

.product-card__form input[type="email"]:focus,
.product-card__form input[type="number"]:focus {
  outline: 2px solid var(--vermillion, var(--gold));
  outline-offset: 1px;
  border-color: var(--vermillion-text, var(--vermillion, var(--gold)));
}

.product-card__form .btn {
  width: 100%;
  margin-block-start: 2px;
  padding-block: 8px;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
}

.product-card__recurring {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.product-card__recurring input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--forest);
}

/* Qurbani name-collection block. Sits inside the add-to-basket form so
   the donor enters all the names, then a single click commits the line +
   names to the basket together. The fieldset border is intentionally
   subtle: it groups visually without competing with the card's own
   border. */
.product-card__shares {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in srgb, var(--gold-soft) 35%, var(--paper) 65%);
}
.product-card__shares-legend {
  /* Native <legend> sits at the top-left edge of the fieldset border;
     padding lifts it cleanly off the dashed line. */
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-transform: uppercase;
}
.product-card__shares-hint {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.product-card__share-name {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 6px;
}
.product-card__share-name-num {
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: right;
}
.product-card__share-name input[type="text"] {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  width: 100%;
}
.product-card__share-name input[type="text"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--vermillion-text, var(--gold));
}

/* Echo of the dedication names on the basket drawer line. Keeps the
   names compact (no wide list bullets): donors are scanning to spot
   typos, not reading a checklist. */
.basket-drawer__dedication-names {
  list-style: none;
  margin: 4px 0 6px;
  padding: 6px 8px;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
  border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.basket-drawer__dedication-names li::before {
  content: "•";
  margin-right: 6px;
  color: var(--vermillion-text, var(--gold));
}

.campaign-card__badge {
  display: inline-block;
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  padding: 4px 12px;
  background: var(--gold);
  color: var(--forest-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 10px -4px oklch(from var(--vermillion, var(--gold)) l c h / 0.6);
}

.campaign-card__badge--project {
  background: var(--gold-soft);
  color: var(--forest-deep);
}

.donate-index__product-grid .product-card:only-child {
  max-width: 360px;
  margin-inline: auto;
}

.donate-index__monthly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  text-align: start;
  max-width: none;
}

.donate-index__monthly-copy {
  flex: 1 1 260px;
}

.donate-index__monthly-form {
  flex: 1 1 260px;
}

.quick-donate__urgency {
  margin: 0 0 12px;
  padding: 6px 10px;
  background: rgba(139, 43, 30, 0.14);
  color: var(--red);
  border-inline-start: 3px solid var(--red);
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

.campaign-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 72, 58, 0.08);
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.campaign-countdown__icon {
  flex: 0 0 auto;
}
.campaign-countdown--urgent {
  background: rgba(204, 143, 39, 0.16);
  color: #8a6300;
}
.campaign-countdown--final {
  background: rgba(139, 43, 30, 0.12);
  color: var(--red);
  animation: campaign-countdown-pulse 1.6s ease-in-out infinite;
}
.campaign-countdown--closed {
  background: oklch(from var(--ink) l c h / 0.06);
  color: var(--muted);
}
@keyframes campaign-countdown-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.product-card__amount-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.product-card__amount-input > span {
  font-family: var(--font-en-display);
  color: var(--forest);
  font-weight: 600;
}

.product-card__amount-input input[type="number"] {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}

.donate-index__basket-chip {
  margin: var(--space-3) auto 0;
}

.donate-index__basket-chip .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.basket-floater {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--forest);
  color: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 28px -12px oklch(from var(--ink) l c h / 0.45);
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.basket-floater:hover {
  transform: translateY(-2px);
  background: var(--forest-deep);
  box-shadow: 0 18px 34px -12px oklch(from var(--ink) l c h / 0.55);
}

.basket-floater__icon {
  display: inline-flex;
}

.basket-floater__count {
  background: var(--gold);
  color: var(--forest-deep);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
}

@media (max-width: 640px) {
  .basket-floater {
    padding: 10px 12px;
  }
  .basket-floater__label {
    display: none;
  }
}

.basket-page {
  padding-block: var(--space-6) var(--space-7);
  max-width: 1180px;
}

.basket-page__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}

.basket-page__header h1 {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--forest);
  margin: 0 0 var(--space-2);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.basket-page__lead {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}

/* Mixed-frequency warning: shown when basket has BOTH one-off and
   recurring lines. Stripe rejects mixed-mode line items in a single
   Checkout, so the basket silently runs as one-off. Donor needs to
   know: vermillion warning rule + clear copy. */
.basket-page__mixed-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: var(--space-4) 0 0;
  padding: 14px 16px;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.4);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.basket-page__mixed-warning svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
}
.basket-page__mixed-warning-body strong {
  display: block;
  margin-block-end: 4px;
  font-family: var(--font-en-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.basket-page__mixed-warning-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Currency-swap notice: shown when basket is recurring + donor was
   browsing in a non-subscription currency (BDT). Quiet info pill
   under the lead, manuscript-grade hairline rule, gold-leaf icon. */
.basket-page__currency-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-3) auto 0;
  max-width: 560px;
  padding: 10px 14px;
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.55);
  border: 1px solid var(--rule, var(--line));
  border-radius: var(--radius-sm);
  text-align: start;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.basket-page__currency-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
}

/* 404 cross-locale hint: sits between the lead copy and the action
   buttons, prompting BN/AR donors to try the English version. */
.gateway-status__locale-hint {
  margin: var(--space-3) auto 0;
  max-width: 520px;
  padding: 10px 14px;
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
  border: 1px solid var(--rule, var(--line));
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: start;
}

/* Q&A index empty-state polish: when there are no Q&As at all (vs.
   "no matches under filters"), surface the ask-form directly with a
   clear invitation. Manuscript-grade calm: no card chrome, just a
   focused vertical column with vermillion CTA. */
.qa-card__empty-headline {
  font-family: var(--font-en-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink, var(--forest));
  margin: 0 0 8px;
}
.qa-card__empty-body {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto var(--space-3);
  line-height: 1.55;
}
.qa-card--empty {
  text-align: center;
  padding: var(--space-5) var(--space-4);
}

.basket-page__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .basket-page__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .basket-page__grid--checkout {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  }
}

.basket-page__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: 96px;
}

.basket-page__empty {
  text-align: center;
  padding: var(--space-6);
  background: var(--cream-light);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
}

.basket-page__empty p {
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.basket-page__receipt {
  max-width: 560px;
  margin: 0 auto var(--space-5);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.basket-page__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.basket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Container query: switch to a stacked layout based on the basket-list's
   own width, not the viewport. On the basket page the items column is
   ~58% of the viewport once the aside appears at 960px, so a viewport
   media query gets it wrong: at 960-1100 we get a desktop 5-col layout
   in a 524px column, which squeezes the qty controls to ~10px wide and
   wraps "2 shares of a cow (boy)" to one word per line. */
.basket-list {
  container-type: inline-size;
}

.basket-list__item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto auto auto;
  gap: 14px 18px;
  align-items: center;
  padding: 14px 18px;
  border-block-end: 1px solid var(--line);
}

.basket-list__item:last-child {
  border-block-end: none;
}

@container (max-width: 640px) {
  .basket-list__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title total" "unit  qty" "remove remove";
    align-items: start;
  }
}

.basket-list__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1rem;
}

.basket-list__title strong {
  color: var(--forest);
  font-family: var(--font-en-display);
  font-weight: 500;
  font-size: 1.05rem;
}

@container (max-width: 640px) {
  .basket-list__title {
    grid-area: title;
  }
}

.basket-list__unit {
  color: var(--ink-soft);
  font-size: 0.88rem;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.basket-list__unit strong {
  color: var(--ink);
  font-family: var(--font-en-display);
}

@container (max-width: 640px) {
  .basket-list__unit {
    grid-area: unit;
  }
}

.basket-list__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}

.basket-list__qty button {
  background: none;
  border: none;
  width: 32px;
  cursor: pointer;
  color: var(--forest);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background 0.12s ease;
}

.basket-list__qty button:hover {
  background: var(--cream);
}

.basket-list__qty input[type="number"] {
  width: 52px;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--line);
  background: transparent;
  padding: 6px 0;
  font: inherit;
  -moz-appearance: textfield;
}

.basket-list__qty input[type="number"]::-webkit-inner-spin-button, .basket-list__qty input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.basket-list__qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 10px;
  border-inline: 1px solid var(--line);
  background: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--forest);
}

@container (max-width: 640px) {
  .basket-list__qty {
    grid-area: qty;
    justify-self: end;
  }
}

.basket-list__total {
  font-family: var(--font-en-display);
  color: var(--forest);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: end;
  min-width: 90px;
}

@container (max-width: 640px) {
  .basket-list__total {
    grid-area: total;
    justify-self: end;
  }

  .basket-list__remove {
    grid-area: remove;
    justify-self: end;
  }
}

.basket-list__footer {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: oklch(from var(--paper) l c h / 0.5);
  border-block-start: 1px solid var(--line);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--vermillion-text, var(--gold));
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:hover {
  color: var(--forest);
}

.link-button--muted {
  color: var(--muted);
}

.inline-form {
  display: inline;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill--gold {
  background: var(--gold);
  color: var(--forest-deep);
}

.maximise-impact {
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-light) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.maximise-impact__heading {
  font-family: var(--font-en-display);
  color: var(--forest);
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 600;
}

.maximise-impact__lead {
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.maximise-impact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.maximise-impact__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.maximise-impact__tile h3 {
  margin: 0;
  font-family: var(--font-en-display);
  color: var(--forest);
  font-size: 1rem;
  font-weight: 600;
}

.maximise-impact__tile p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.maximise-impact__tile.is-active {
  border-color: var(--vermillion-text, var(--gold));
  background: var(--gold-soft);
  box-shadow: 0 10px 20px -14px oklch(from var(--vermillion, var(--gold)) l c h / 0.4);
}

.maximise-impact__body {
  flex: 1;
  min-width: 0;
}

.maximise-impact__amount {
  display: inline-block;
  margin-block-start: 6px;
  font-weight: 700;
  color: var(--vermillion-text, var(--gold));
  font-size: 0.88rem;
}

.maximise-impact__empty {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.88rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.basket-totals {
  background: var(--forest-deep);
  color: var(--cream);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: 0 18px 36px -20px oklch(from var(--ink) l c h / 0.6);
  position: relative;
  overflow: hidden;
}

.basket-totals::before {
  content: "";
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
}

.basket-totals__heading {
  margin: 0 0 12px;
  font-family: var(--font-en-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cream);
}

.basket-totals__items {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.basket-totals__items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-block-end: 1px solid oklch(from var(--paper) l c h / 0.1);
  font-size: 0.9rem;
  color: oklch(from var(--paper) l c h / 0.85);
}

.basket-totals__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.basket-totals__rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.9rem;
  color: oklch(from var(--paper) l c h / 0.88);
}

.basket-totals__rows div dt, .basket-totals__rows div dd {
  margin: 0;
}

.basket-totals__grand {
  margin-block-start: 6px;
  padding-block-start: 10px !important;
  border-block-start: 1px solid oklch(from var(--paper) l c h / 0.2);
  font-size: 1.05rem !important;
  color: var(--cream) !important;
}

.basket-totals__grand strong {
  font-family: var(--font-en-display);
  font-size: 1.35rem;
  color: var(--gold-light);
  font-weight: 600;
}

.basket-totals .btn {
  margin-block-start: 16px;
}

.basket-totals__trust {
  color: oklch(from var(--paper) l c h / 0.65);
  font-size: 0.78rem;
  text-align: center;
  margin: 10px 0 0;
}

.basket-checkout__security {
  list-style: none;
  padding: 12px 14px;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  background: color-mix(in srgb, var(--forest) 5%, var(--paper) 95%);
  border: 1px solid color-mix(in srgb, var(--forest) 12%, transparent 88%);
  border-radius: var(--radius-sm);
}
.basket-checkout__security-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--forest);
  font-weight: 500;
}
.basket-checkout__security-item svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--vermillion-text, var(--gold));
}
.basket-checkout__pay-lock {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}

.basket-checkout__form {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream-light) 100%);
  border: 1px solid oklch(from var(--ink) l c h / 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: 0 18px 40px oklch(from var(--ink) l c h / 0.08);
}

.basket-checkout__field {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card aesthetic: applied to the simple fieldsets only.
   Dedication has its own card style + special button-as-toggle in
   the legend and breaks if double-wrapped, so we exclude it. */
.basket-checkout__field:not(.basket-checkout__dedication):not(.basket-checkout__gift-aid):not(.basket-checkout__gateway) {
  padding: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px solid oklch(from var(--ink) l c h / 0.06);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.basket-checkout__field:not(.basket-checkout__dedication):not(.basket-checkout__gift-aid):not(.basket-checkout__gateway):focus-within {
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.4);
  box-shadow: 0 6px 20px oklch(from var(--ink) l c h / 0.06);
}

/* Section titles inside a basket-checkout field card. Replaces the old
   .basket-checkout__field legend selector (the form's been migrated
   from fieldset+legend to div+h2 because legend rendering was
   inconsistent across browsers + platforms). The legend selector is
   kept as a fallback so any non-migrated section still renders the
   same. */
.basket-checkout__field-title,
.basket-checkout__field:not(.basket-checkout__dedication) > legend {
  font-family: var(--font-en-display);
  color: var(--forest);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0 0 10px 0;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.005em;
  border-bottom: 1px solid oklch(from var(--ink) l c h / 0.08);
  width: 100%;
  display: block;
}

.basket-checkout__field label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.basket-checkout__field label span {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.9rem;
}

.basket-checkout__field label input,
.basket-checkout__field label textarea,
.basket-checkout__field label select {
  padding: 12px 14px;
  border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.basket-checkout__field label input:hover:not(:focus),
.basket-checkout__field label textarea:hover:not(:focus),
.basket-checkout__field label select:hover:not(:focus) {
  border-color: oklch(from var(--ink) l c h / 0.24);
}

.basket-checkout__field label input::placeholder,
.basket-checkout__field label textarea::placeholder {
  color: oklch(from var(--ink) l c h / 0.36);
}

.basket-checkout__field label input:focus,
.basket-checkout__field label textarea:focus,
.basket-checkout__field label select:focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

.basket-checkout__checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
}

.basket-checkout__checkbox input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-block-start: 2px;
  accent-color: var(--forest);
}

.basket-checkout__checkbox span {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.basket-checkout__gift-aid {
  border: 1px solid oklch(from var(--ink) l c h / 0.08);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: rgba(255, 253, 247, 0.6);
}

.basket-checkout__gift-aid-intro {
  margin: 0 0 10px;
  padding: var(--space-3) var(--space-4);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
  border-inline-start: 3px solid var(--gold);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: var(--lh-normal);
}

.basket-checkout__gift-aid-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 6px 0 14px;
  padding-block-start: var(--space-2);
  border-block-start: 1px dashed var(--line);
}

.basket-checkout__gift-aid-fields[hidden] {
  display: none;
}

.basket-checkout__gift-aid-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.basket-checkout__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.basket-checkout__row .basket-checkout__col-small {
  max-width: 110px;
}

.basket-checkout__row > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

.basket-checkout__row > label > span {
  font-weight: 500;
  color: var(--ink);
}

.basket-checkout__row input,
.basket-checkout__row select {
  padding: 12px 14px;
  border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.basket-checkout__row input:hover:not(:focus),
.basket-checkout__row select:hover:not(:focus) {
  border-color: oklch(from var(--ink) l c h / 0.24);
}

.basket-checkout__row input:focus,
.basket-checkout__row select:focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

.basket-checkout__alert {
  border: 1px solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.basket-checkout__alert ul {
  margin: 0;
  padding-inline-start: 18px;
}

/* Gateway picker: radio cards for Card / bKash / Nagad on the checkout. */
.basket-checkout__gateway {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--cream, #f5eedf);
  border: 1px solid oklch(from var(--ink) l c h / 0.06);
}

.basket-checkout__gateway legend {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0 6px;
}

.basket-checkout__gateway-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Premium gateway-option card. Layout (desktop):
     [brand]  [body / label + help]  [check]
   Hidden native radio + custom .gateway-radio circle. Selected
   state: gold border + tinted bg + visible green checkmark.
   The double class is needed to beat .basket-checkout__field label
   from upstream which sets display:flex column on every nested label. */
label.basket-checkout__gateway-option {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1.5px solid oklch(from var(--ink) l c h / 0.10);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.basket-checkout__gateway-option:hover {
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.50);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.04);
}
.basket-checkout__gateway-option:active {
  transform: scale(0.998);
}
/* Hide native radio: replaced visually by the custom circle. */
.basket-checkout__gateway-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.basket-checkout__gateway-option:has(input:checked) {
  border-color: var(--vermillion-text, var(--gold));
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
  box-shadow: 0 0 0 2px oklch(from var(--vermillion, var(--gold)) l c h / 0.22),
              0 8px 24px -16px oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}

/* Custom radio circle. Empty by default, gold dot when selected. */
.basket-checkout__gateway-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid oklch(from var(--ink) l c h / 0.30);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.15s ease;
}
.basket-checkout__gateway-option:has(input:checked) .basket-checkout__gateway-radio {
  border-color: var(--vermillion-text, var(--gold));
}
.basket-checkout__gateway-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s ease;
}
.basket-checkout__gateway-option:has(input:checked) .basket-checkout__gateway-radio::after {
  transform: scale(1);
}

/* Brand block: fixed-size container holding the brand logo(s). */
.basket-checkout__gateway-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 60px;
  padding: 6px 8px;
  background: var(--paper);
  border: 1px solid oklch(from var(--ink) l c h / 0.06);
  border-radius: var(--radius-sm);
}
.basket-checkout__gateway-brand img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
/* Stripe variant: 2 rows of 3+2 small icons stacked. */
.basket-checkout__gateway-brand--stripe {
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.basket-checkout__gateway-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.basket-checkout__gateway-cards img {
  height: 16px;
  width: auto;
  object-fit: contain;
}
/* bKash brand pink tint when selected. */
.basket-checkout__gateway-option--bkash:has(input:checked) {
  border-color: #e2136e;
  box-shadow: 0 0 0 2px rgba(226, 19, 110, 0.20),
              0 8px 24px -16px rgba(226, 19, 110, 0.40);
  background: rgba(226, 19, 110, 0.04);
}
.basket-checkout__gateway-option--bkash:has(input:checked) .basket-checkout__gateway-radio {
  border-color: #e2136e;
}
.basket-checkout__gateway-option--bkash:has(input:checked) .basket-checkout__gateway-radio::after {
  background: #e2136e;
}
.basket-checkout__gateway-option--bkash:has(input:checked) .basket-checkout__gateway-check {
  color: #e2136e;
}
/* Nagad brand orange tint when selected. */
.basket-checkout__gateway-option--nagad:has(input:checked) {
  border-color: #ec1c24;
  box-shadow: 0 0 0 2px rgba(236, 28, 36, 0.20),
              0 8px 24px -16px rgba(236, 28, 36, 0.40);
  background: rgba(236, 28, 36, 0.04);
}
.basket-checkout__gateway-option--nagad:has(input:checked) .basket-checkout__gateway-radio {
  border-color: #ec1c24;
}
.basket-checkout__gateway-option--nagad:has(input:checked) .basket-checkout__gateway-radio::after {
  background: #ec1c24;
}
.basket-checkout__gateway-option--nagad:has(input:checked) .basket-checkout__gateway-check {
  color: #ec1c24;
}

.basket-checkout__gateway-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.basket-checkout__gateway-label {
  font-family: var(--font-en-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1.2;
}
.basket-checkout__gateway-help {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Green checkmark on the right: visible only when selected. */
.basket-checkout__gateway-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.basket-checkout__gateway-option:has(input:checked) .basket-checkout__gateway-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 540px) {
  /* Mobile layout: drop the check column (gold ring + radio dot
     already signal selection clearly) and shrink the brand block
     so the body text gets enough room to breathe. */
  label.basket-checkout__gateway-option {
    grid-template-columns: auto 60px 1fr;
    column-gap: 10px;
    padding: 12px;
  }
  .basket-checkout__gateway-brand {
    width: 60px;
    height: 44px;
    padding: 4px;
  }
  .basket-checkout__gateway-cards {
    gap: 2px;
  }
  .basket-checkout__gateway-cards img {
    height: 11px;
  }
  .basket-checkout__gateway-label {
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .basket-checkout__gateway-help {
    font-size: 0.82rem;
  }
  .basket-checkout__gateway-check {
    display: none;
  }
}

/* Dark mode */
html[data-theme="dark"] .basket-checkout__gateway-option {
  background: oklch(from var(--paper) l c h / 0.04);
  border-color: var(--line);
}
html[data-theme="dark"] .basket-checkout__gateway-option:hover {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.50);
}
html[data-theme="dark"] .basket-checkout__gateway-option:has(input:checked) {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
}
html[data-theme="dark"] .basket-checkout__gateway-radio {
  border-color: oklch(from var(--paper) l c h / 0.35);
}
html[data-theme="dark"] .basket-checkout__gateway-label {
  color: var(--ink);
}
html[data-theme="dark"] .basket-checkout__gateway-help {
  color: var(--ink-soft);
}
html[data-theme="dark"] .basket-checkout__gateway-check {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

/* ----------------------------------------------------------------------
   /donate/card/: simple direct-to-Stripe gift form. Was unstyled
   raw label+input pairs; now a clean two-column responsive grid.
   ---------------------------------------------------------------------- */
.donate-card-page {
  padding-block: var(--space-6) var(--space-7);
  max-width: 640px;
  margin: 0 auto;
}
.donate-card-page h1 {
  font-family: var(--font-en-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--forest-deep);
  margin: 0 0 var(--space-2);
}
.donate-card-page__intro {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0 0 var(--space-5);
}
.donate-card-page__form {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* Sibling label+input pattern: tight gap between a label and its
   following input, then breathing room before the next label. */
.donate-card-page__form > label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.donate-card-page__form > label + input {
  margin-bottom: var(--space-3);
}
.donate-card-page__form label.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin: var(--space-2) 0 var(--space-3);
}
.donate-card-page__form label.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vermillion-text, var(--gold));
  margin: 0;
}
.donate-card-page__form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]) {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.donate-card-page__form input:not([type="hidden"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}
.donate-card-page__form .btn {
  margin-top: var(--space-2);
}

@media (max-width: 540px) {
  .donate-card-page__form {
    padding: var(--space-4);
  }
}

html[data-theme="dark"] .donate-card-page h1 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-card-page__form {
  background: var(--cream-light);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-card-page__form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]) {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   /donate/confirm/: bank transfer confirmation form. Two-step
   layout (About you / About the transfer) with a numbered step
   indicator inside each fieldset legend.
   ---------------------------------------------------------------------- */
.donate-confirm-page {
  padding-block: var(--space-6) var(--space-7);
  max-width: 720px;
  margin: 0 auto;
}
.donate-confirm-page h1 {
  font-family: var(--font-en-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--forest-deep);
  margin: 0 0 var(--space-3);
}
.donate-confirm-page > div {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0 0 var(--space-5);
}
.manual-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.manual-form__errors {
  padding: var(--space-3) var(--space-4);
  background: rgba(212, 95, 95, 0.08);
  border: 1px solid rgba(212, 95, 95, 0.30);
  border-radius: var(--radius-sm);
  color: #a73838;
  font-size: 0.92rem;
}
.manual-form__errors ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: 1.25rem;
}
.manual-form__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  background: var(--cream-light);
}
.manual-form__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-2);
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest-deep);
}
.manual-form__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest-deep);
  font-size: 0.85rem;
  font-weight: 700;
}
.manual-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
.manual-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.manual-form__field--span2 {
  grid-column: 1 / -1;
}
.manual-form__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.manual-form__optional {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
}
.manual-form__hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 4px;
}
.manual-form__field input,
.manual-form__field select,
.manual-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.manual-form__field input:focus,
.manual-form__field select:focus,
.manual-form__field textarea:focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}
.manual-form__field textarea {
  min-height: 80px;
  resize: vertical;
}
.manual-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
}
.manual-form__submit {
  min-width: 240px;
}
.manual-form__assurance {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (max-width: 540px) {
  .manual-form__fieldset {
    padding: var(--space-3) var(--space-4);
  }
  .manual-form__grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .donate-confirm-page h1 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .manual-form__fieldset {
  background: var(--cream-light);
  border-color: var(--line);
}
html[data-theme="dark"] .manual-form__legend {
  color: var(--ink);
}
html[data-theme="dark"] .manual-form__field input,
html[data-theme="dark"] .manual-form__field select,
html[data-theme="dark"] .manual-form__field textarea {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .manual-form__errors {
  background: rgba(212, 95, 95, 0.16);
  color: #ff8a8a;
  border-color: rgba(212, 95, 95, 0.35);
}

/* Old gateway-option style block removed: replaced by the
   premium grid-based design above. The previous version used
   var(--primary, #1f6feb) blue rings which clashed with the rest
   of the gold/forest accent palette. */

.btn--small {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
}

.btn--full {
  width: 100%;
}

.photo-gallery {
  background: var(--cream, var(--paper));
  padding-block: clamp(44px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.photo-gallery__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(24px, 3vw, 36px);
}

.photo-gallery__header .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.photo-gallery__heading {
  font-family: var(--font-en-display);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  color: var(--forest-deep, var(--ink));
  margin: 0 0 10px;
  line-height: 1.15;
}

.photo-gallery__lead {
  color: var(--ink-soft, var(--ink-soft));
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.photo-gallery__slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 6px 18px;
  scrollbar-width: thin;
}

.photo-gallery__slider.slick-initialized {
  display: block;
  overflow: visible;
}

.photo-gallery__slide {
  flex: 0 0 calc(33.333% - 12px);
  min-width: 260px;
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 14px 40px -24px oklch(from var(--ink) l c h / 0.45);
  margin: 0 9px;
}

@media (max-width: 640px) {
  .photo-gallery__slide {
    flex-basis: 86%;
    min-width: 0;
  }
}

.photo-gallery__slide-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.photo-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.photo-gallery__caption {
  padding: 14px 18px 18px;
  font-size: 0.92rem;
  color: var(--ink-soft, var(--ink-soft));
  line-height: 1.45;
  text-align: left;
  border-top: 1px solid var(--line, oklch(from var(--ink) l c h / 0.12));
}

.photo-gallery .slick-prev,
.photo-gallery .slick-next {
  width: 44px;
  height: 44px;
  background: var(--forest-deep, var(--ink));
  border-radius: 50%;
  z-index: 2;
  transition: background 0.18s ease;
}

.photo-gallery .slick-prev:hover, .photo-gallery .slick-prev:focus,
.photo-gallery .slick-next:hover,
.photo-gallery .slick-next:focus {
  background: var(--forest, var(--ink));
}

.photo-gallery .slick-prev::before,
.photo-gallery .slick-next::before {
  font-size: 22px;
  color: var(--gold-light, var(--vermillion-soft, var(--gold-light)));
  opacity: 1;
  line-height: 1;
}

.photo-gallery .slick-prev {
  inset-inline-start: -8px;
}

.photo-gallery .slick-next {
  inset-inline-end: -8px;
}

.photo-gallery .slick-dots {
  bottom: -32px;
}

.photo-gallery .slick-dots li button::before {
  font-size: 10px;
  color: var(--forest, var(--ink));
  opacity: 0.35;
}

.photo-gallery .slick-dots li.slick-active button::before {
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  opacity: 1;
}

.donate-index__campaign-tiles {
  scroll-margin-top: 96px;
  padding-block: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--line, oklch(from var(--ink) l c h / 0.14));
  margin-top: clamp(24px, 3vw, 44px);
}

.donate-index__campaign-tiles:first-of-type {
  border-top: 0;
  margin-top: 0;
}

.donate-index__campaign-tiles-header {
  max-width: 820px;
  margin-bottom: clamp(16px, 2vw, 26px);
}

.donate-index__campaign-tiles-header .eyebrow {
  color: var(--vermillion-text, var(--gold));
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.donate-index__campaign-tiles-header h3 {
  font-family: var(--font-en-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--forest-deep, var(--ink));
  margin: 0 0 8px;
}

.donate-index__campaign-tiles-header p {
  color: var(--ink-soft, var(--ink-soft));
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.policy-strip {
  /* Editor brief: shrink: was occupying too much vertical real estate.
     Halved icon + tightened padding + reduced vertical margin. */
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  align-items: center;
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.5vw, 20px);
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  margin-block: clamp(12px, 1.2vw, 18px);
  box-shadow: none;
  position: relative;
}

.policy-strip__icon {
  position: relative;
  flex: 0 0 auto;
  width: 44px; /* was 72px: shrunk per editor brief */
  height: 44px; /* was 72px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.policy-strip__icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 10px oklch(from var(--ink) l c h / 0.22));
}

.policy-strip__stat {
  display: none;
}

.policy-strip__body {
  flex: 1 1 auto;
}

.policy-strip__body h2 {
  font-family: var(--font-en-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* Small-caps eyebrow above the policy heading: does the work the
   side-stripe used to do, in manuscript grammar. */
.policy-strip__body::before {
  content: 'Our promise';
  display: block;
  font-family: var(--font-en-body);
  font-size: var(--fs-marginalia, 0.78rem);
  font-weight: 600;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 6px;
}

.policy-strip__body p {
  margin: 0;
  color: var(--ink-soft, var(--ink-soft));
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
  max-width: 64ch;
}

@media (max-width: 560px) {
  .policy-strip {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding-inline-start: clamp(22px, 5vw, 28px);
  }
  .policy-strip__icon {
    width: 60px;
    height: 60px;
  }
}

.maximise-impact__tile--admin-fee {
  border: 1.5px solid var(--vermillion, var(--gold));
  background: linear-gradient(180deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.06) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0) 45%), var(--cream-light, var(--paper));
  position: relative;
}

/* Only show the tick when the admin-fee add-on is actually toggled on.
   Previously this fired for every admin-fee tile (active or not), so a
   donor saw both a tick badge AND an "Add" button: confusing. */
.maximise-impact__tile--admin-fee.is-active::before {
  content: "✓";
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--forest, var(--ink));
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 700;
}

.maximise-impact__tile--admin-fee.is-active .maximise-impact__amount {
  color: var(--forest-deep, var(--ink));
}

.maximise-impact__recommended {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--forest-deep, var(--ink));
  color: var(--gold-light, var(--vermillion-soft, var(--gold-light)));
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: middle;
  line-height: 1.4;
}

.gateway-status {
  padding-block: clamp(32px, 6vw, 72px);
  display: flex;
  justify-content: center;
}

.gateway-status__card {
  position: relative;
  max-width: 640px;
  width: 100%;
  /* Manuscript panel: subtle paper-deep tint, gold-leaf hairlines top +
     bottom only. No card border, no heavy shadow, no rounded corners. */
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.4);
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px);
  text-align: center;
  box-shadow: none;
  overflow: visible;
}

.gateway-status__card h1 {
  font-family: var(--font-en-display);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  color: var(--ink);
  margin: 0.1em 0 0.45em;
  line-height: 1.18;
}

.gateway-status__card .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.gateway-status__card--error .gateway-status__icon {
  color: var(--red, var(--danger, var(--red)));
  background: rgba(139, 43, 30, 0.08);
}

.gateway-status__card--unavailable .gateway-status__icon {
  color: var(--forest, var(--ink));
  background: oklch(from var(--ink) l c h / 0.08);
}

.gateway-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: 1em;
}

.gateway-status__icon svg {
  width: 36px;
  height: 36px;
}

.gateway-status__lead {
  color: var(--ink-soft, var(--ink-soft));
  font-size: 1rem;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 auto 1.75em;
}

.gateway-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1.25em;
}

.gateway-status__actions .btn {
  min-width: 180px;
}

.gateway-status__reassure {
  color: var(--muted, var(--ink-soft));
  font-size: 0.88rem;
  margin: 0;
}

.gateway-status__reassure a {
  color: var(--forest);
  font-weight: 600;
}

.gateway-status__debug {
  margin-top: 2em;
  text-align: left;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.85rem;
  border: 1px solid oklch(from var(--paper) l c h / 0.14);
}

.gateway-status__debug summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-light, var(--vermillion-soft, var(--gold-light)));
}

.gateway-status__debug pre {
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: oklch(from var(--paper) l c h / 0.06);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--paper);
}

.gateway-status__debug-note {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: oklch(from var(--paper) l c h / 0.6);
  font-style: italic;
}

.partner-strip {
  padding-block: var(--space-6, 3rem);
  text-align: center;
}

.partner-strip__heading {
  font-size: clamp(1.1rem, calc(0.8rem + 1vw), 1.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest, var(--ink));
  margin: 0;
}

.partner-strip__subtitle {
  margin: 0.25rem 0 var(--space-4, 1.5rem);
  color: color-mix(in oklab, var(--forest, var(--ink)) 70%, transparent);
  font-size: 0.95rem;
}

.partner-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 2.5rem);
}

.partner-strip__item {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.partner-strip__item a {
  display: inline-flex;
  align-items: center;
}

.partner-strip__item img {
  max-height: 56px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(1);
  transition: opacity 160ms ease, filter 160ms ease;
}

.partner-strip__item a:hover img {
  opacity: 1;
  filter: none;
}

.partner-strip__name {
  padding: 0.4rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--forest, var(--ink)) 30%, transparent);
  border-radius: 999px;
  color: var(--forest, var(--ink));
  font-weight: 500;
  font-size: 0.92rem;
}

.faq-block {
  padding-block: var(--space-6, 3rem);
}

.faq-block__heading {
  font-size: clamp(1.4rem, calc(1rem + 1vw), 1.9rem);
  color: var(--forest, var(--ink));
  margin: 0 0 var(--space-4, 1.5rem);
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.faq-list__item {
  border: 1px solid color-mix(in oklab, var(--forest, var(--ink)) 12%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--gold-light, var(--vermillion-soft, var(--gold-light))) 6%, transparent);
}

.faq-list__item details {
  padding: 0.9rem 1.1rem;
}

.faq-list__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--forest, var(--ink));
  list-style: none;
  position: relative;
  padding-inline-end: 1.5rem;
}

.faq-list__item summary::-webkit-details-marker {
  display: none;
}

.faq-list__item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
  transition: transform 160ms ease;
}

.faq-list__item details[open] summary::after {
  content: "−";
}

.faq-list__answer {
  padding-block-start: 0.6rem;
  color: color-mix(in oklab, var(--forest, var(--ink)) 80%, var(--ink) 0%);
  line-height: 1.6;
}

.faq-list__answer p {
  margin: 0 0 0.5rem;
}

.faq-list__answer p:last-child {
  margin-bottom: 0;
}

.donate-index__faq {
  margin-block-start: var(--space-6, 3rem);
}

.donate-index__faq .section-heading {
  margin-bottom: var(--space-4, 1.5rem);
}

.site-nav__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__basket,
.site-nav__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold-soft, rgba(216, 178, 107, 0.35));
  border-radius: var(--radius-md);
  /* Subtle tinted fill so the icons read as real buttons next to the
     solid Donate CTA instead of looking like thin ghost squares. */
  background: rgba(216, 178, 107, 0.1);
  color: var(--forest);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.site-nav__search {
  text-decoration: none;
  margin-inline-end: var(--space-2);
}

.site-nav__basket svg,
.site-nav__search svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.site-nav__basket:hover, .site-nav__basket:focus-visible,
.site-nav__search:hover, .site-nav__search:focus-visible {
  background: var(--gold);
  border-color: var(--vermillion-text, var(--gold));
  color: var(--forest-deep);
  transform: translateY(-1px);
}

.site-nav__basket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-nav__basket-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--forest-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px oklch(from var(--ink) l c h / 0.18);
  transform: scale(1);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.site-nav__basket-count.is-empty {
  transform: scale(0);
  opacity: 0;
}

.basket-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.basket-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(from var(--ink) l c h / 0.48);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.basket-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(420px, 100vw);
  max-width: 100%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -20px 0 60px oklch(from var(--ink) l c h / 0.28);
  transform: translateX(110%);
  transition: transform var(--duration-base) var(--ease-out);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
}

[dir="rtl"] .basket-drawer__panel {
  transform: translateX(-110%);
}

.basket-drawer.is-open {
  pointer-events: auto;
}

.basket-drawer.is-open .basket-drawer__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.basket-drawer.is-open .basket-drawer__panel {
  transform: translateX(0);
}

.basket-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.basket-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--forest-deep);
  color: var(--cream);
  position: sticky;
  top: 0;
  z-index: 2;
}

.basket-drawer__eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.basket-drawer__title {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.5rem;
  color: var(--cream);
}

.basket-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 0;
  background: oklch(from var(--paper) l c h / 0.08);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.basket-drawer__close:hover, .basket-drawer__close:focus-visible {
  background: oklch(from var(--paper) l c h / 0.2);
}

.basket-drawer__empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: center;
}

.basket-drawer__empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--forest);
}

.basket-drawer__empty h3 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  color: var(--forest-deep);
}

.basket-drawer__empty p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 280px;
}

.basket-drawer__empty .btn {
  margin-top: var(--space-3);
}

.basket-drawer__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.basket-drawer__line {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.basket-drawer__line-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.basket-drawer__line-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9375rem;
}

.basket-drawer__line-title strong {
  font-weight: 600;
  color: var(--ink);
}

.basket-drawer__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--forest-deep);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.basket-drawer__remove {
  margin: 0;
}

.basket-drawer__remove button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.basket-drawer__remove button:hover {
  background: rgba(139, 43, 30, 0.1);
  color: var(--red);
}

.basket-drawer__line-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.basket-drawer__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  overflow: hidden;
  margin: 0;
}

.basket-drawer__qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--forest);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.basket-drawer__qty button:hover {
  background: var(--cream);
}

.basket-drawer__qty-value {
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  border-inline: 1px solid var(--line);
}

.basket-drawer__line-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.8125rem;
}

.basket-drawer__line-price .muted {
  color: var(--muted);
}

.basket-drawer__line-price strong {
  font-size: 1rem;
  color: var(--forest-deep);
  font-weight: 700;
}

.basket-drawer__addons {
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.basket-drawer__section-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-en-display);
  font-size: 1.0625rem;
  color: var(--forest-deep);
}

.basket-drawer__addon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.basket-drawer__addon-form {
  margin: 0;
}

.basket-drawer__addon-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.basket-drawer__addon-btn:hover {
  border-color: var(--gold-soft);
  background: var(--cream-light);
}

.basket-drawer__addon-check {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

/* Checkmark: short-bottom + long-right L rotated 45° around its own
   centre so it sits visually balanced inside the 20×20 box. The
   slight upward nudge (top: 1px) compensates for the way a tick's
   visual mass leans low after rotation. */
.basket-drawer__addon-check::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: translateX(-50%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-out);
}

.basket-drawer__addon.is-on .basket-drawer__addon-check {
  background: var(--forest);
  border-color: var(--forest);
}

.basket-drawer__addon.is-on .basket-drawer__addon-check::after {
  transform: translateX(-50%) rotate(45deg) scale(1);
}

.basket-drawer__addon.is-on .basket-drawer__addon-btn {
  border-color: var(--forest);
  background: oklch(from var(--ink) l c h / 0.04);
}

.basket-drawer__addon-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
}

.basket-drawer__addon-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.basket-drawer__addon-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.basket-drawer__addon-amount {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--forest-deep);
  white-space: nowrap;
}

.basket-drawer__totals {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--cream-light);
}

.basket-drawer__totals dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.basket-drawer__totals div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9375rem;
}

.basket-drawer__totals div dt {
  color: var(--ink-soft);
}

.basket-drawer__totals div dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.basket-drawer__grand {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.basket-drawer__grand dt {
  font-family: var(--font-en-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--forest-deep) !important;
}

.basket-drawer__grand dd {
  font-family: var(--font-en-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--forest-deep) !important;
}

.basket-drawer__actions {
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.basket-drawer__actions .btn {
  width: 100%;
}

.basket-drawer__trust {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.basket-drawer__foot {
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.8125rem;
  background: var(--paper);
}

.basket-drawer__foot-link {
  background: transparent;
  border: 0;
  color: var(--forest);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.basket-drawer__foot-link:hover {
  color: var(--forest-deep);
  text-decoration: underline;
}

.basket-drawer__foot-link--muted {
  color: var(--muted);
}

.basket-drawer__foot-link--muted:hover {
  color: var(--red);
}

body.basket-drawer-open {
  overflow: hidden;
}

.btn--small {
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
}

.btn--large {
  padding: 0.95rem 1.5rem;
  font-size: 1rem;
}

.donate-category-hero,
.donate-monthly-hero {
  background: linear-gradient(180deg, var(--cream-light) 0%, var(--paper) 100%);
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--line);
}

/* Backdrop variant: when the editor has set both a quick-donate widget
   AND a hero photo, the photo renders as a dim full-bleed background
   so donors get warmth from the image AND a working conversion path.
   The text + widget overlay on a paper-tinted scrim that keeps body
   contrast above WCAG AA. */
.donate-category-hero--with-backdrop {
  position: relative;
  isolation: isolate;
  /* Override the gradient: the photo + scrim does the surface work. */
  background: var(--paper, var(--cream-light));
  border-bottom: 1px solid var(--rule, var(--line));
}
.donate-category-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.donate-category-hero__backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
/* Paper-tinted scrim: readable text contrast over any image. */
.donate-category-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(from var(--paper) l c h / 0.78) 0%,
    oklch(from var(--paper) l c h / 0.92) 100%
  );
}
html[data-theme="dark"] .donate-category-hero__backdrop::after {
  background: linear-gradient(
    180deg,
    oklch(from var(--paper) l c h / 0.84) 0%,
    oklch(from var(--paper) l c h / 0.96) 100%
  );
}

.donate-category-hero__inner,
.donate-monthly-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

@media (max-width: 900px) {
  .donate-category-hero__inner,
.donate-monthly-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.donate-category-hero__copy .eyebrow,
.donate-monthly-hero__copy .eyebrow {
  color: var(--vermillion-text, var(--gold));
}

.donate-category-hero__copy h1,
.donate-monthly-hero__copy h1 {
  font-family: var(--font-en-display);
  font-size: var(--fs-h1);
  color: var(--forest-deep);
  margin-bottom: var(--space-4);
}

.donate-category-hero__body,
.donate-monthly-hero__body {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  max-width: 52ch;
}

.donate-category-hero__figure,
.donate-monthly-hero__figure {
  margin: 0;
}

.donate-category-hero__image,
.donate-monthly-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.donate-category-hero__placeholder,
.donate-monthly-hero__placeholder {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-soft) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  box-shadow: var(--shadow-md);
}

.donate-category {
  padding-block: var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.donate-category__featured {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}

.donate-category__grid-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

.donate-category__grid-head .section-heading {
  font-family: var(--font-en-display);
  font-size: var(--fs-h2);
  color: var(--forest-deep);
  margin-bottom: var(--space-3);
}

.donate-category__grid-sub {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}

.donate-category__footer {
  max-width: 62ch;
  margin-inline: auto;
  padding-block: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  text-align: center;
}

.donate-category__empty {
  text-align: center;
  color: var(--muted);
  padding-block: var(--space-7);
}

.donate-category__alt {
  text-align: center;
}

/* ----------------------------------------------------------------------
   Hero CTAs + image placeholder
   ---------------------------------------------------------------------- */
.donate-category-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.donate-category-hero__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, oklch(from var(--ink) l c h / 0.06) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 100%);
  border: 2px dashed oklch(from var(--ink) l c h / 0.18);
  border-radius: var(--radius-sm);
  color: oklch(from var(--ink) l c h / 0.55);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.donate-category-hero__figure--placeholder {
  margin: 0;
}

/* ----------------------------------------------------------------------
   "About this charity" 4-up explainer (What / Who / When / How much)
   Mirrors the layout pattern used by major UK Islamic charities so
   donors can scan the rules at a glance before choosing an amount.
   ---------------------------------------------------------------------- */
.donate-explainer {
  padding-block: var(--space-7);
}
.donate-explainer__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-5);
}
.donate-explainer__head .section-heading {
  margin-bottom: var(--space-2);
  color: var(--forest-deep);
}
.donate-explainer__sub {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0;
}
.donate-explainer__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.donate-explainer__card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.donate-explainer__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.35);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}
.donate-explainer__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.12);
  color: var(--vermillion-text, var(--gold));
  flex-shrink: 0;
}
.donate-explainer__card h3 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest);
}
.donate-explainer__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.donate-explainer__body p {
  margin: 0 0 var(--space-2);
}
.donate-explainer__body p:last-child {
  margin-bottom: 0;
}
.donate-explainer__body ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}
.donate-explainer__body strong {
  color: var(--forest-deep);
}
.donate-explainer__card--amount {
  background: linear-gradient(160deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.10) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.04) 100%);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}
.donate-explainer__card--amount h3 {
  color: var(--vermillion-text, var(--gold));
}

/* ----------------------------------------------------------------------
   Hero donation widget: al-khair-style preset/custom/frequency picker
   embedded in the right column of the donate-category-hero. Replaces
   the image placeholder on pages that opt in via show_hero_widget.
   ---------------------------------------------------------------------- */
.hero-widget {
  position: relative;
  background: var(--cream-light);
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.32);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  box-shadow: 0 24px 48px -32px oklch(from var(--ink) l c h / 0.45);
  width: 100%;
  max-width: 480px;
  justify-self: end;
}
.hero-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-widget__head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-2);
}
.hero-widget__head h2 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1.1;
}
.hero-widget__pill {
  display: inline-block;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--cream);
  border-radius: 999px;
}

/* Single / Regular toggle: pill switch with active state in forest. */
.hero-widget__frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  background: oklch(from var(--ink) l c h / 0.06);
  border-radius: var(--radius-sm);
}
.hero-widget__freq-btn {
  padding: 10px var(--space-3);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* Active toggle: invert ink/paper for guaranteed contrast in BOTH light
   AND dark (candlelight) themes: neither --forest nor --cream were
   theme-stable, which produced the cream-on-cream "empty pill" bug
   visible on the Sadaqah hero widget in dark mode. ink/paper swap as
   a pair, so the active pill is always the inverse of the page. */
.hero-widget__freq-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 10px -4px oklch(from var(--ink) l c h / 0.4);
}

/* 4-up preset chips: 2x2 on the smallest widget widths, single
   row on wider widget surfaces. */
.hero-widget__presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.hero-widget__preset {
  padding: 14px 8px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  background: var(--paper);
  color: var(--forest-deep);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-widget__preset:hover {
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.55);
}
.hero-widget__preset.is-active {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.hero-widget__preset:active {
  transform: scale(0.98);
}

.hero-widget__custom-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 -4px;
}
.hero-widget__custom {
  position: relative;
}
.hero-widget__currency {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--forest);
  font-size: 1rem;
  pointer-events: none;
}
.hero-widget__custom input {
  width: 100%;
  padding: 14px var(--space-3) 14px 36px;
  font: inherit;
  font-size: 1rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-widget__custom input:focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

.hero-widget__submit {
  margin-top: 4px;
  padding: 14px var(--space-3);
  font-weight: 700;
  font-size: 1rem;
  /* Theme-stable Donate colour. --cta-bg / --cta-fg resolve to
     vermillion + cream on the manuscript theme and to the right
     equivalents on the alt themes (Forest-Classic, Dawn etc.): far
     more reliable than the old --forest / --cream pair, which produced
     a faded beige-on-vermillion text in candlelight dark mode. */
  background: var(--cta-bg, var(--vermillion, #b9532a));
  color: var(--cta-fg, var(--paper, #fbf7ee));
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.hero-widget__submit:hover {
  background: var(--cta-bg-hover, var(--vermillion-deep, oklch(0.45 0.16 30)));
  color: var(--cta-fg, var(--paper, #fbf7ee));
}

.hero-widget__trust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  justify-content: center;
}
.hero-widget__trust svg {
  flex-shrink: 0;
  color: var(--vermillion-text, var(--gold));
}

/* Replaces the Single/Regular toggle when display currency can't run a
   subscription (e.g. BDT). Quiet info pill, points the donor at the
   currency picker. */
.hero-widget__recurring-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.6);
  border: 1px solid var(--rule, var(--line));
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft, var(--muted));
}
.hero-widget__recurring-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vermillion-text, var(--vermillion, var(--gold)));
}

/* Mobile: widget takes the full hero width below the copy, presets
   stay 4-up on viewports ≥ 360px (single row); collapse to 2x2 below. */
@media (max-width: 760px) {
  .hero-widget {
    max-width: 100%;
    justify-self: stretch;
    padding: var(--space-4);
  }
  .hero-widget__head h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem);
  }
}
@media (max-width: 360px) {
  .hero-widget__presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-theme="dark"] .hero-widget {
  background: var(--cream);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.32);
  box-shadow: 0 24px 48px -32px oklch(from var(--ink) l c h / 0.6);
}
html[data-theme="dark"] .hero-widget__head h2 {
  color: var(--ink);
}
html[data-theme="dark"] .hero-widget__frequency {
  background: oklch(from var(--paper) l c h / 0.06);
}
html[data-theme="dark"] .hero-widget__freq-btn {
  color: var(--ink);
}
/* Re-assert the active state in dark theme: without this, the
   higher-specificity dark rule above overrode the active rule's
   color, leaving the pill cream-on-cream (the empty-pill bug). */
html[data-theme="dark"] .hero-widget__freq-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme="dark"] .hero-widget__preset {
  background: var(--cream-light);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .hero-widget__preset.is-active {
  background: var(--gold);
  color: var(--forest-deep);
  border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .hero-widget__custom input {
  background: var(--cream-light);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .hero-widget__currency {
  color: var(--vermillion-text, var(--gold));
}
/* Dark theme: drop the gold-as-fill banishment + the forest-deep
   text colour. The base rule's --cta-bg / --cta-fg pair already
   resolves correctly per active palette, so we don't need an
   override at all: leaving these rules in would re-introduce the
   faded text the user flagged on the Sadaqah Donate button. */

/* Aqiqah-variant additions: total card + child-name input. The base
   widget styles already handle the toggles, so we only need to add
   the bits that are unique to this variant. */
.hero-widget__aq-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px var(--space-4);
  background: linear-gradient(135deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.18) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 100%);
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.hero-widget__aq-price-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-widget__aq-price-value {
  font-family: var(--font-en-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--forest-deep);
  font-variant-numeric: tabular-nums;
}
.hero-widget__aq-name-input {
  width: 100%;
  padding: 12px var(--space-3);
  font: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.hero-widget__aq-name-input:focus {
  outline: none;
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

html[data-theme="dark"] .hero-widget__aq-price {
  background: linear-gradient(135deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.20) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 100%);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}
html[data-theme="dark"] .hero-widget__aq-price-value {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .hero-widget__aq-name-input {
  background: var(--cream-light);
  border-color: var(--line);
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   Products variant: a sidebar list of specific fundable items instead
   of preset chips. Reuses .hero-widget for the outer card chrome; adds
   .hero-widget-products* for the inner list rows. Each row is a tile
   with name + short description + price + "Add" button that POSTs to
   donations:basket_add (same mechanism as the donate-grid product
   tiles, so the basket/checkout integration is free).
   ---------------------------------------------------------------------- */
.hero-widget--products {
  padding: var(--space-4);
}
.hero-widget-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-widget-products__item {
  border-bottom: 1px solid oklch(from var(--gold-leaf, var(--gold-soft, var(--line))) l c h / 0.45);
}
.hero-widget-products__item:last-child {
  border-bottom: none;
}
.hero-widget-products__form {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  margin: 0;
}
.hero-widget-products__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-widget-products__name {
  font-family: var(--font-en-display);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.hero-widget-products__desc {
  font-family: var(--font-en-body, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.hero-widget-products__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.hero-widget-products__price {
  font-family: var(--font-en-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--vermillion, var(--vermillion-text, var(--ink)));
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hero-widget-products__add {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}
.hero-widget-products__custom {
  margin-top: var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px dashed oklch(from var(--gold-leaf, var(--gold-soft, var(--line))) l c h / 0.5);
}
.hero-widget-products__custom-label {
  display: block;
  font-family: var(--font-en-body, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.hero-widget-products__custom-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.hero-widget-products__custom-cur {
  font-family: var(--font-en-body, system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-left: 4px;
}
.hero-widget-products__custom-input {
  min-width: 0;
  padding: 8px 12px;
  font-family: var(--font-en-body, system-ui, sans-serif);
  font-size: 0.95rem;
  background: var(--paper, var(--cream-light));
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
}
.hero-widget-products__custom-input:focus {
  outline: 2px solid var(--vermillion, var(--vermillion-text, var(--gold)));
  outline-offset: 2px;
  border-color: var(--vermillion, var(--vermillion-text, var(--gold)));
}
.hero-widget-products__custom-btn {
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}
.hero-widget-products__empty {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
}
.hero-widget-products__empty--staff {
  background: oklch(from var(--warning, var(--gold-soft)) l c h / 0.15);
  border: 1px dashed oklch(from var(--warning, var(--gold-soft)) l c h / 0.5);
  border-radius: 6px;
  padding: var(--space-3);
  font-size: 0.82rem;
  text-align: left;
}

.hero-widget__secure {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid oklch(from var(--ink) l c h / 0.08);
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.hero-widget__secure-icon {
  flex: 0 0 auto;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .hero-widget-products__form {
    grid-template-columns: 1fr auto;
    column-gap: var(--space-2);
  }
  .hero-widget-products__name {
    font-size: 0.92rem;
  }
  .hero-widget-products__desc {
    font-size: 0.74rem;
  }
}

html[data-theme="dark"] .hero-widget-products__item {
  border-color: oklch(from var(--gold-leaf, var(--gold-soft, var(--line))) l c h / 0.30);
}
html[data-theme="dark"] .hero-widget-products__custom-input {
  background: oklch(from var(--paper) l c h / 0.06);
  border-color: var(--line);
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   bKash / Nagad "switch to BDT" hint: surfaced when the donor's
   display currency isn't BDT so they know mobile wallets exist for
   Bangladesh donors.
   ---------------------------------------------------------------------- */
.basket-totals__wallets-hint,
.basket-drawer__wallets-hint {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
  border: 1px dashed oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
  border-radius: var(--radius-sm);
  text-align: center;
}
.basket-totals__wallets-hint p,
.basket-drawer__wallets-hint span {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.basket-drawer__wallets-hint a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.basket-drawer__wallets-hint a:hover {
  border-bottom-color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .basket-totals__wallets-hint,
html[data-theme="dark"] .basket-drawer__wallets-hint {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}

/* ----------------------------------------------------------------------
   Scripture band: Qur'anic verse / hadith with decorative quotation
   marks. Adopted from al-khair's giving-page pattern.
   ---------------------------------------------------------------------- */
.donate-scripture {
  position: relative;
  margin-block: var(--space-6);
  padding: var(--space-6) clamp(var(--space-4), 7vw, var(--space-7));
  background:
    radial-gradient(circle at 0% 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.10), transparent 55%),
    linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
  border-radius: var(--radius-sm);
  text-align: center;
  overflow: hidden;
}
.donate-scripture__mark {
  position: absolute;
  font-family: var(--font-en-display);
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: 1;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.35;
  font-style: italic;
}
.donate-scripture__mark--open {
  top: 8px;
  left: 16px;
}
.donate-scripture__mark--close {
  bottom: -16px;
  right: 16px;
}
.donate-scripture__quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 760px;
  margin-inline: auto;
}
.donate-scripture__quote p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-en-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  font-style: italic;
  font-weight: 500;
  color: var(--forest-deep);
}
.donate-scripture__quote cite {
  display: block;
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.04em;
}

html[data-theme="dark"] .donate-scripture {
  background:
    radial-gradient(circle at 0% 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.14), transparent 55%),
    linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
}
html[data-theme="dark"] .donate-scripture__quote p {
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   2-up "Distribution model" + "How we deliver" cards. Concrete
   mechanics: al-khair-style trust signals that explain not just
   WHAT the donation does, but HOW it gets there.
   ---------------------------------------------------------------------- */
.donate-mechanics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-block: var(--space-6);
}
.donate-mechanics__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.donate-mechanics__card:hover {
  transform: translateY(-2px);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.25);
}
.donate-mechanics__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  margin-bottom: 4px;
}
.donate-mechanics__card h2 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.25;
}
.donate-mechanics__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.donate-mechanics__body p {
  margin: 0 0 var(--space-2);
}
.donate-mechanics__body p:last-child { margin-bottom: 0; }
.donate-mechanics__body ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: 1.25rem;
}
.donate-mechanics__body li {
  margin-bottom: 6px;
}
.donate-mechanics__body strong {
  color: var(--forest-deep);
}

html[data-theme="dark"] .donate-mechanics__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-mechanics__card h2 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-mechanics__body strong {
  color: var(--ink);
}
html[data-theme="dark"] .donate-mechanics__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}

/* ----------------------------------------------------------------------
   "Where your gift lands": impact callout with placeholder image.
   ---------------------------------------------------------------------- */
.donate-impact {
  margin-block: var(--space-6);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: var(--radius-sm);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.donate-impact::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, oklch(from var(--vermillion, var(--gold)) l c h / 0.30) 0%, transparent 65%);
  pointer-events: none;
}
.donate-impact__inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 820px) {
  .donate-impact__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.donate-impact__copy .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.donate-impact__copy h2 {
  font-family: var(--font-en-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 0 0 var(--space-3);
  color: var(--cream);
  font-weight: 500;
}
.donate-impact__body {
  font-size: 1.02rem;
  line-height: 1.6;
  color: oklch(from var(--paper) l c h / 0.9);
}
.donate-impact__body p {
  margin: 0 0 var(--space-2);
}
.donate-impact__body p:last-child { margin-bottom: 0; }
.donate-impact__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: oklch(from var(--paper) l c h / 0.06);
  border: 2px dashed oklch(from var(--paper) l c h / 0.25);
  border-radius: var(--radius-sm);
  color: oklch(from var(--paper) l c h / 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.donate-impact__figure {
  margin: 0;
}

/* ----------------------------------------------------------------------
   FAQ accordion: same visual language as the Qurbani / Zakat FAQs so
   the whole donate section feels like one product.
   ---------------------------------------------------------------------- */
.donate-faqs {
  padding-block: var(--space-6) var(--space-7);
  max-width: 820px;
  margin-inline: auto;
}
.donate-faqs__head {
  text-align: center;
  margin-bottom: var(--space-4);
}
.donate-faqs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.donate-faqs__item {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.donate-faqs__item[open] {
  border-color: var(--vermillion-text, var(--gold));
}
.donate-faqs__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--forest-deep);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.donate-faqs__item summary::-webkit-details-marker {
  display: none;
}
.donate-faqs__item summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vermillion-text, var(--gold));
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.donate-faqs__item[open] summary::after {
  content: "−";
}
.donate-faqs__answer {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--ink);
  line-height: 1.6;
}
.donate-faqs__answer p {
  margin: 0 0 var(--space-2);
}
.donate-faqs__answer p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   "Related ways to give" link grid: lets donors hop between Aqiqah,
   Sadaqah, Lillah etc. without going back to the donate hub.
   ---------------------------------------------------------------------- */
.donate-related {
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  margin-top: var(--space-5);
}
.donate-related__head {
  text-align: center;
  margin-bottom: var(--space-4);
}
.donate-related__sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}
.donate-related__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.donate-related__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  padding-inline-end: calc(var(--space-4) + 22px);
}
.donate-related__card:hover {
  transform: translateY(-2px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 12px 24px -18px oklch(from var(--ink) l c h / 0.25);
}
.donate-related__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermillion-text, var(--gold));
}
.donate-related__title {
  font-family: var(--font-en-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest);
}
.donate-related__arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--vermillion-text, var(--gold));
  transition: transform 0.18s ease;
}
.donate-related__card:hover .donate-related__arrow {
  transform: translateY(-50%) translateX(4px);
}

/* Dark mode rescopes for all donate-category subsections. */
html[data-theme="dark"] .donate-category-hero__placeholder {
  background: linear-gradient(135deg, oklch(from var(--paper) l c h / 0.04) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.06) 100%);
  border-color: oklch(from var(--paper) l c h / 0.18);
  color: oklch(from var(--paper) l c h / 0.55);
}
html[data-theme="dark"] .donate-explainer__head .section-heading {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-explainer__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-explainer__card h3 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-explainer__body strong {
  color: var(--ink);
}
html[data-theme="dark"] .donate-explainer__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}
html[data-theme="dark"] .donate-explainer__card--amount {
  background: linear-gradient(160deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.18) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.06) 100%);
  border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}
html[data-theme="dark"] .donate-impact__copy h2,
html[data-theme="dark"] .donate-impact__body {
  color: var(--cream);
}
html[data-theme="dark"] .donate-faqs__item {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-faqs__item summary {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-faqs__answer {
  color: var(--ink);
}
html[data-theme="dark"] .donate-related {
  border-top-color: var(--line);
}
html[data-theme="dark"] .donate-related__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-related__title {
  color: var(--ink);
}
html[data-theme="dark"] .donate-category-hero h1,
html[data-theme="dark"] .donate-monthly-hero h1 {
  color: var(--ink);
}
html[data-theme="dark"] .donate-category-hero__body,
html[data-theme="dark"] .donate-category-hero__body p,
html[data-theme="dark"] .donate-monthly-hero__body,
html[data-theme="dark"] .donate-monthly-hero__body p {
  color: var(--ink-soft);
}
html[data-theme="dark"] .donate-category__grid-head .section-heading {
  color: var(--vermillion-text, var(--gold));
}

/* ----------------------------------------------------------------------
   "Ways to Give": bucketed grid of dedicated giving-type pages.
   Sits near the top of the donate hub so donors who know what they
   want (Zakat / Aqiqah / Fidya) skip straight to the right page.
   ---------------------------------------------------------------------- */
.donate-ways {
  padding-block: var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.donate-ways__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.donate-ways__head .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.donate-ways__head .section-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: var(--space-2);
  color: var(--forest-deep);
}
.donate-ways__sub {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0;
}
.donate-ways__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.donate-ways__group-head {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent 70%);
}
.donate-ways__group-head h3 {
  margin: 0 0 4px;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest);
}
.donate-ways__group-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.donate-ways__cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.donate-ways__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  padding-inline-end: calc(var(--space-4) + 24px);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.donate-ways__card:hover {
  transform: translateY(-3px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.32);
}
.donate-ways__card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermillion-text, var(--gold));
}
.donate-ways__card-title {
  font-family: var(--font-en-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
}
.donate-ways__card-lead {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.donate-ways__card-arrow {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  font-size: 1.25rem;
  color: var(--vermillion-text, var(--gold));
  transition: transform 0.18s ease;
}
.donate-ways__card:hover .donate-ways__card-arrow {
  transform: translateX(4px);
}

html[data-theme="dark"] .donate-ways__head .section-heading {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-ways__group-head h3 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .donate-ways__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-ways__card-title {
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   Trust signals row: four reassurance pillars on the donate hub.
   ---------------------------------------------------------------------- */
.donate-trust {
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.donate-trust__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.donate-trust__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}
.donate-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  margin-bottom: 4px;
  flex-shrink: 0;
}
.donate-trust__item strong {
  font-family: var(--font-en-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1.25;
}
.donate-trust__item span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

html[data-theme="dark"] .donate-trust {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%);
  border-color: var(--line);
}
html[data-theme="dark"] .donate-trust__item strong {
  color: var(--ink);
}
html[data-theme="dark"] .donate-trust__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}

/* ----------------------------------------------------------------------
   About page upgrades: brand promise band + three pillars CTA strip
   ---------------------------------------------------------------------- */
.about-index__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.about-promise {
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: var(--radius-sm);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.about-promise::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, oklch(from var(--vermillion, var(--gold)) l c h / 0.32) 0%, transparent 65%);
  pointer-events: none;
}
.about-promise__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 820px;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .about-promise__inner {
    flex-direction: column;
    text-align: center;
  }
}
.about-promise__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
  color: var(--vermillion-text, var(--gold));
  border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}
.about-promise__quote {
  margin: 0;
  flex: 1;
}
.about-promise__quote p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cream);
}
.about-promise__quote cite {
  display: block;
  font-style: normal;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: oklch(from var(--paper) l c h / 0.75);
}

.about-pillars {
  margin-block: var(--space-7);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.about-pillars__head {
  text-align: center;
  margin-bottom: var(--space-5);
  max-width: 640px;
  margin-inline: auto;
}
.about-pillars__head .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.about-pillars__head h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--forest-deep);
}
.about-pillars__head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}
.about-pillars__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.about-pillars__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.about-pillars__card:hover {
  transform: translateY(-3px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.32);
}
.about-pillars__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  margin-bottom: var(--space-2);
}
.about-pillars__card h3 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest);
}
.about-pillars__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.about-pillars__link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--space-2);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--vermillion-text, var(--gold));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.about-pillars__link:hover {
  border-bottom-color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .about-pillars__head h2 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .about-pillars__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .about-pillars__card h3 {
  color: var(--ink);
}
html[data-theme="dark"] .about-pillars__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}
html[data-theme="dark"] .about-promise {
  background: linear-gradient(135deg, var(--forest-deep) 0%, #051712 100%);
}
html[data-theme="dark"] .about-pillars {
  border-top-color: var(--line);
}

/* ----------------------------------------------------------------------
   Counselling page upgrades: hero CTAs + trust badges row
   ---------------------------------------------------------------------- */
.counselling-page__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.counselling-trust {
  margin-block: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.counselling-trust__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.counselling-trust__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}
.counselling-trust__icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  flex-shrink: 0;
}
.counselling-trust__list li strong {
  font-family: var(--font-en-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1.25;
}
.counselling-trust__list li span:not(.counselling-trust__icon) {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

html[data-theme="dark"] .counselling-trust {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%);
  border-color: var(--line);
}
html[data-theme="dark"] .counselling-trust__list li strong {
  color: var(--ink);
}
html[data-theme="dark"] .counselling-trust__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}

/* ----------------------------------------------------------------------
   Education page upgrades: 3-pillar curriculum band + sponsor CTA strip
   ---------------------------------------------------------------------- */
.education-index__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.education-pillars {
  margin-block: var(--space-6);
}
.education-pillars__head {
  text-align: center;
  margin-bottom: var(--space-5);
  max-width: 720px;
  margin-inline: auto;
}
.education-pillars__head .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.education-pillars__head h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--forest-deep);
}
.education-pillars__head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}
.education-pillars__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.education-pillars__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  padding-top: calc(var(--space-5) + 24px);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.education-pillars__card:hover {
  transform: translateY(-3px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.32);
}
.education-pillars__num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-en-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.5;
  line-height: 1;
}
.education-pillars__card h3 {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest);
}
.education-pillars__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.education-pillars__card ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.education-index__grid-section {
  margin-block: var(--space-6);
}
.education-index__grid-head {
  text-align: center;
  margin-bottom: var(--space-4);
}
.education-index__grid-head h2 {
  margin: 0 0 var(--space-2);
}
.education-index__grid-head p {
  margin: 0;
  color: var(--ink-soft);
}

.education-sponsor {
  margin-block: var(--space-7) var(--space-5);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: var(--radius-sm);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.education-sponsor::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, oklch(from var(--vermillion, var(--gold)) l c h / 0.30) 0%, transparent 65%);
  pointer-events: none;
}
.education-sponsor__inner {
  position: relative;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 760px) {
  .education-sponsor__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.education-sponsor__copy .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.education-sponsor__copy h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-en-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--cream);
  font-weight: 500;
}
.education-sponsor__copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: oklch(from var(--paper) l c h / 0.88);
}
.education-sponsor__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.education-sponsor__price {
  font-size: 0.9rem;
  color: oklch(from var(--paper) l c h / 0.7);
}

html[data-theme="dark"] .education-pillars__head h2 {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .education-pillars__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .education-pillars__card h3 {
  color: var(--ink);
}
html[data-theme="dark"] .education-sponsor {
  background: linear-gradient(135deg, var(--forest-deep) 0%, #051712 100%);
}
html[data-theme="dark"] .education-sponsor__copy h2,
html[data-theme="dark"] .education-sponsor__copy p {
  color: var(--cream);
}

/* ----------------------------------------------------------------------
   Contact page upgrades: quick-route cards above the form
   ---------------------------------------------------------------------- */
.contact-page__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.contact-routes {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-block: var(--space-5);
}
.contact-routes__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-routes__card:hover {
  transform: translateY(-2px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 12px 24px -18px oklch(from var(--ink) l c h / 0.25);
}
.contact-routes__icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
  color: var(--vermillion-text, var(--gold));
  flex-shrink: 0;
  align-self: center;
}
.contact-routes__card strong {
  font-family: var(--font-en-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-deep);
}
.contact-routes__card span:not(.contact-routes__icon) {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

html[data-theme="dark"] .contact-routes__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .contact-routes__card strong {
  color: var(--ink);
}
html[data-theme="dark"] .contact-routes__icon {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}

/* ----------------------------------------------------------------------
   Q&A index: popular questions rail + improved hero CTAs
   ---------------------------------------------------------------------- */
.qa-index__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.qa-index__hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.qa-popular {
  margin-block: var(--space-6);
}
.qa-popular__head {
  text-align: center;
  margin-bottom: var(--space-4);
  max-width: 640px;
  margin-inline: auto;
}
.qa-popular__head .eyebrow {
  color: var(--vermillion-text, var(--gold));
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.qa-popular__head .section-heading {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--forest-deep);
}
.qa-popular__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.qa-popular__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.qa-popular__card:hover {
  transform: translateY(-3px);
  border-color: var(--vermillion-text, var(--gold));
  box-shadow: 0 16px 32px -22px oklch(from var(--ink) l c h / 0.32);
}
.qa-popular__category {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermillion-text, var(--gold));
  padding: 4px 10px;
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.12);
  border-radius: 999px;
}
.qa-popular__question {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.3;
}
.qa-popular__summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.qa-popular__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .qa-popular__head .section-heading {
  color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qa-popular__card {
  background: var(--cream);
  border-color: var(--line);
}
html[data-theme="dark"] .qa-popular__question {
  color: var(--ink);
}
html[data-theme="dark"] .qa-popular__category {
  background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}

/* ----------------------------------------------------------------------
   Mobile sticky donate bar: appears on the 8 Islamic giving pages
   (and any DonateCategoryPage). Same pattern as the Qurbani sticky
   bar but routes to the page's local #donate-grid + opens the basket
   drawer rather than the basket page.
   ---------------------------------------------------------------------- */
.donate-sticky-bar {
  display: none;
}
body.basket-drawer-open .donate-sticky-bar {
  display: none !important;
}

@media (max-width: 900px) {
  body:has(.donate-sticky-bar) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  }
  .donate-sticky-bar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
    box-shadow: 0 -4px 12px oklch(from var(--ink) l c h / 0.10);
  }
  .donate-sticky-bar__primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 14px var(--space-3);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: var(--forest-deep);
    transition: transform 0.1s ease;
    line-height: 1.2;
  }
  .donate-sticky-bar__primary:active {
    transform: scale(0.98);
  }
  /* "from £X" hint: quieter font weight + slight transparency so the
     CTA reads "Give Aqiqah" first, price second. */
  .donate-sticky-bar__from {
    font-weight: 600;
    font-size: 0.82rem;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .donate-sticky-bar__secondary {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--cream-light);
    color: var(--forest);
    cursor: pointer;
  }
  .donate-sticky-bar__icon {
    display: inline-flex;
  }
  .donate-sticky-bar__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--forest-deep);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid var(--paper);
  }
  .donate-sticky-bar__count.is-empty {
    display: none;
  }
}

html[data-theme="dark"] .donate-sticky-bar {
  background: var(--paper);
  border-top-color: var(--line);
}
html[data-theme="dark"] .donate-sticky-bar__secondary {
  background: var(--cream);
  color: var(--vermillion-text, var(--gold));
  border-color: var(--line);
}

/* ----------------------------------------------------------------------
   Mobile UX polish: donate-category-hero stack + tighter explainer
   grid + collapsible related-pages on small screens. Spec these only
   below 760px so desktop layout is untouched.
   ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  .donate-category-hero__inner {
    grid-template-columns: 1fr;
  }
  .donate-category-hero__copy h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1.15;
  }
  .donate-category-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .donate-category-hero__ctas .btn {
    width: 100%;
    text-align: center;
  }
  .donate-category-hero__figure--placeholder {
    aspect-ratio: 16 / 10;
  }

  /* Tighter explainer cards on mobile: single-column with less padding
     so the four sections aren't a vertical wall of text. */
  .donate-explainer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .donate-explainer__card {
    padding: var(--space-4) var(--space-3);
  }
  .donate-explainer__card h3 {
    font-size: 1.05rem;
  }

  /* Impact callout: placeholder shrinks to landscape so the copy
     gets full width above. */
  .donate-impact {
    padding: var(--space-4);
  }
  .donate-impact__placeholder {
    aspect-ratio: 16 / 9;
  }

  /* FAQ cards: tap target hits min 44px even with small font. */
  .donate-faqs__item summary {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
  }

  /* Related-pages grid: single column on mobile to make the cards
     fully tappable rather than half-width and cramped. */
  .donate-related__grid {
    grid-template-columns: 1fr;
  }
}

/* Donate hub mobile polish: sub-760px tightening so the four buckets
   + trust pillars + campaign cards don't scroll forever. */
@media (max-width: 760px) {
  /* Trust pillars: 2×2 grid instead of 1×4 vertical wall. Each pillar
     becomes a compact icon + label + tiny sub-text card. */
  .donate-trust {
    padding: var(--space-4) var(--space-3);
  }
  .donate-trust__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .donate-trust__icon {
    width: 38px;
    height: 38px;
  }
  .donate-trust__icon svg {
    width: 20px;
    height: 20px;
  }
  .donate-trust__item strong {
    font-size: 0.92rem;
  }
  .donate-trust__item span {
    font-size: 0.78rem;
  }

  /* Ways-to-Give buckets: tighter section gaps and slightly lower
     padding inside cards so the four buckets fit closer together. */
  .donate-ways {
    gap: var(--space-4);
  }
  .donate-ways__groups {
    gap: var(--space-4);
  }
  .donate-ways__head .section-heading {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
  }
  .donate-ways__group-head h3 {
    font-size: 1.1rem;
  }
  .donate-ways__cards {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .donate-ways__card {
    padding: var(--space-3) var(--space-4);
    padding-inline-end: calc(var(--space-3) + 24px);
  }
  .donate-ways__card-title {
    font-size: 1.05rem;
  }
  .donate-ways__card-lead {
    font-size: 0.86rem;
  }

  /* Hide the "Donate" page eyebrow + match heading rhythm to other pages */
  .donate-index__header {
    text-align: center;
  }
}

@media (max-width: 420px) {
  /* On the smallest screens collapse the trust pillars to single
     column: 2×2 still cramped at <420px width. */
  .donate-trust__list {
    grid-template-columns: 1fr;
  }
}

.donate-monthly {
  padding-block: var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.donate-monthly__chooser {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

@media (max-width: 700px) {
  .donate-monthly__chooser {
    padding: var(--space-5) var(--space-4);
  }
}

.donate-monthly__chooser-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

.donate-monthly__chooser-head .section-heading {
  font-family: var(--font-en-display);
  font-size: var(--fs-h2);
  color: var(--forest-deep);
  margin-bottom: var(--space-3);
}

.donate-monthly__chooser-sub {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  max-width: 52ch;
  margin: 0 auto;
}

.donate-monthly__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.donate-monthly__presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.donate-monthly__preset {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-5) var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--forest-deep);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.donate-monthly__preset input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.donate-monthly__preset:hover {
  border-color: var(--gold-soft);
  background: var(--cream);
}

.donate-monthly__preset.is-selected {
  border-color: var(--forest);
  background: var(--paper);
  box-shadow: 0 0 0 4px oklch(from var(--ink) l c h / 0.08);
}

.donate-monthly__preset-currency {
  font-size: 0.9375rem;
  color: var(--muted);
}

.donate-monthly__preset-value {
  font-family: var(--font-en-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.donate-monthly__preset-period {
  font-size: 0.8125rem;
  color: var(--muted);
}

.donate-monthly__preset-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--forest-deep);
}

.donate-monthly__preset--custom {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
}

.donate-monthly__preset-custom-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.35rem var(--space-3);
}

.donate-monthly__preset-custom-input span {
  color: var(--muted);
  font-weight: 600;
}

.donate-monthly__preset-custom-input input {
  width: 100px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--forest-deep);
  outline: none;
}

.donate-monthly__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.donate-monthly__contact label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.donate-monthly__contact input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}

.donate-monthly__contact input:focus {
  border-color: var(--forest);
  outline: 2px solid oklch(from var(--ink) l c h / 0.16);
  outline-offset: 0;
}

.donate-monthly__summary {
  background: var(--paper);
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.donate-monthly__summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 520px) {
  .donate-monthly__summary dl {
    grid-template-columns: 1fr;
  }
}

.donate-monthly__summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.donate-monthly__summary dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.donate-monthly__summary dd {
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--forest-deep);
}

.donate-monthly__trust {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.donate-monthly__benefits {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.donate-monthly__benefits .section-heading {
  font-family: var(--font-en-display);
  font-size: var(--fs-h2);
  color: var(--forest-deep);
}

.donate-monthly__benefits-body {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}

.donate-cta-block {
  position: relative;
  background: var(--forest-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.donate-cta-block::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.22) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.donate-cta-block__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 820px) {
  .donate-cta-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.donate-cta-block__eyebrow {
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.donate-cta-block__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-en-display);
  font-size: var(--fs-h2);
  color: var(--cream);
}

.donate-cta-block__body {
  color: oklch(from var(--paper) l c h / 0.82);
  font-size: var(--fs-lead);
  margin: 0 0 var(--space-4);
}

.donate-cta-block__body :last-child {
  margin-bottom: 0;
}

.donate-cta-block__form {
  background: oklch(from var(--paper) l c h / 0.06);
  border: 1px solid oklch(from var(--paper) l c h / 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.donate-cta-block__presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.donate-cta-block__preset {
  flex: 0 1 calc(33.333% - var(--space-2));
  min-width: 80px;
  text-align: center;
}

.donate-cta-block__preset {
  position: relative;
  padding: 0.85rem 0.3rem;
  background: oklch(from var(--paper) l c h / 0.06);
  border: 1.5px solid oklch(from var(--paper) l c h / 0.22);
  border-radius: var(--radius-md);
  color: var(--cream);
  font-family: var(--font-en-display);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.donate-cta-block__preset input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.donate-cta-block__preset:hover {
  background: oklch(from var(--paper) l c h / 0.12);
  border-color: var(--gold-light);
}

.donate-cta-block__preset.is-selected {
  background: var(--gold);
  border-color: var(--vermillion-text, var(--gold));
  color: var(--forest-deep);
}

.donate-cta-block__custom-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.donate-cta-block__custom-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem var(--space-3);
  background: oklch(from var(--paper) l c h / 0.06);
  border: 1px solid oklch(from var(--paper) l c h / 0.22);
  border-radius: var(--radius-md);
  color: var(--cream);
  font-weight: 600;
}

.donate-cta-block__custom-row input[type="number"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  outline: none;
}

.donate-cta-block__custom-row input[type="number"]::placeholder {
  color: oklch(from var(--paper) l c h / 0.5);
}

.donate-cta-block__monthly {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--cream);
  padding: var(--space-2) 0;
}

.donate-cta-block__monthly input {
  accent-color: var(--vermillion-text, var(--gold));
}

.donate-cta-block__email {
  width: 100%;
  padding: 0.85rem var(--space-3);
  background: oklch(from var(--paper) l c h / 0.06);
  border: 1px solid oklch(from var(--paper) l c h / 0.22);
  border-radius: var(--radius-md);
  color: var(--cream);
  font: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.donate-cta-block__email::placeholder {
  color: oklch(from var(--paper) l c h / 0.5);
}

.donate-cta-block__email:hover {
  background: oklch(from var(--paper) l c h / 0.09);
}

.donate-cta-block__email:focus-visible {
  border-color: var(--gold-light);
  background: oklch(from var(--paper) l c h / 0.1);
  box-shadow: 0 0 0 3px oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.25);
}

.donate-cta-block__custom-row label:focus-within {
  border-color: var(--gold-light);
  background: oklch(from var(--paper) l c h / 0.1);
  box-shadow: 0 0 0 3px oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.25);
}

.donate-cta-block__submit {
  background: var(--gold);
  color: var(--forest-deep);
  border: 0;
  padding: 1rem 1.25rem;
  margin-top: var(--space-1);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 16px oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.25);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.donate-cta-block__submit:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.35);
}

.donate-cta-block__submit:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
}

.donate-cta-block__trust {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: oklch(from var(--paper) l c h / 0.62);
}

@media (max-width: 480px) {
  .donate-cta-block {
    padding: var(--space-6) var(--space-4);
  }
  .donate-cta-block__presets {
    gap: var(--space-1);
  }
  .donate-cta-block__preset {
    flex: 0 1 calc(33.333% - var(--space-1));
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
  }
}

.home-block--donate_paths {
  padding-block: var(--space-8);
  background: var(--paper);
}

.donate-paths__head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--space-6);
}

.donate-paths__eyebrow {
  color: var(--vermillion-text, var(--gold));
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.donate-paths__heading {
  font-family: var(--font-en-display);
  color: var(--forest-deep);
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.donate-paths__lead {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0 auto;
}

.donate-paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.donate-paths__foot {
  margin-top: var(--space-6);
  text-align: center;
}

.donate-path-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.donate-path-card:hover, .donate-path-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-md);
}

.donate-path-card__image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--cream-light);
}

.donate-path-card__image--placeholder {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.18) 38.5%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.18) 39.5%, transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 56%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.12) 56.5%, oklch(from var(--vermillion-soft, var(--gold-light)) l c h / 0.12) 57.5%, transparent 58%),
    linear-gradient(135deg, var(--forest-soft) 0%, var(--forest) 60%, var(--forest-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.donate-path-card__image--placeholder::after {
  content: "";
  width: 64px;
  height: 64px;
  background-color: var(--vermillion-text, var(--gold));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L14.5 9 L22 9 L16 13.5 L18 21 L12 16.5 L6 21 L8 13.5 L2 9 L9.5 9 Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L14.5 9 L22 9 L16 13.5 L18 21 L12 16.5 L6 21 L8 13.5 L2 9 L9.5 9 Z'/></svg>") center / contain no-repeat;
  opacity: 0.85;
  filter: drop-shadow(0 4px 14px oklch(from var(--ink) l c h / 0.25));
}

.donate-path-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.donate-path-card__eyebrow {
  color: var(--vermillion-text, var(--gold));
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

.donate-path-card__title {
  font-family: var(--font-en-display);
  color: var(--forest-deep);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.donate-path-card__body-text {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0;
}

.donate-path-card__cta {
  margin-top: auto;
  color: var(--vermillion-text, var(--gold));
  font-weight: 700;
  font-size: 0.9375rem;
  padding-top: var(--space-3);
}

.donate-path-card--monthly {
  background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
  color: var(--paper);
  border-color: transparent;
}

.donate-path-card--monthly .donate-path-card__title {
  color: var(--gold-light);
}

.donate-path-card--monthly .donate-path-card__body-text {
  color: oklch(from var(--paper) l c h / 0.84);
}

.donate-path-card--monthly .donate-path-card__cta {
  color: var(--vermillion-text, var(--gold));
}

.payment-icons {
  list-style: none;
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.payment-icons__item {
  display: inline-flex;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.08);
  background: var(--paper);
}

/* ------------------------------------------------------------------
   Site search results page (/search/)
   ------------------------------------------------------------------ */

.site-search {
  padding: var(--space-8) 0 var(--space-9);
}

.site-search__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.site-search__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display, inherit);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--forest-deep);
}

.site-search__form {
  display: flex;
  gap: var(--space-2);
  margin: 0 auto var(--space-6);
}

.site-search__form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--forest-deep);
}

.site-search__form input[type="search"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.site-search__summary {
  max-width: 720px;
  margin: 0 auto var(--space-5);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.site-search__error {
  display: inline-block;
  margin-inline-start: var(--space-2);
  color: var(--ink-soft);
  font-style: italic;
}

.site-search__results {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.site-search__result {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.site-search__result:hover {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-sm);
}

.site-search__result-link {
  display: block;
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
}

.site-search__result-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--forest-deep);
}

.site-search__result-desc {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.site-search__result-path {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  word-break: break-all;
}

.site-search__pagination {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-search__page-link {
  color: var(--forest-deep);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  background: var(--paper);
}

.site-search__page-link:hover, .site-search__page-link:focus-visible {
  border-color: var(--gold-soft);
  background: var(--cream-light);
}

.site-search__page-indicator {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-search__empty,
.site-search__hint {
  max-width: 720px;
  margin: var(--space-4) auto 0;
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------------------------------------------------------------
   Bangladeshi mobile-wallet buttons (bKash, Nagad)
   Only surfaced in basket actions when the donor is browsing in BDT.
   Brand colours are from each wallet's official guidelines so the
   buttons are instantly recognisable to BD donors.
   --------------------------------------------------------------- */
.btn--wallet {
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 oklch(from var(--ink) l c h / 0.05);
}
.btn--wallet:hover,
.btn--wallet:focus-visible {
  color: var(--paper);
  filter: brightness(0.95);
  text-decoration: none;
}
.btn--wallet--bkash {
  background: #E2136E;
  border-color: #C91163;
}
.btn--wallet--nagad {
  background: #EC1C24;
  border-color: #C61319;
}

/* Icon-prefixed buttons: used on basket totals to add a lock for
   the Stripe checkout button and brand logos for the bKash/Nagad
   wallet buttons. The icon sits to the left of the label and any
   trailing arrow. */
.btn.btn--with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.btn--with-icon > .btn__icon {
  flex-shrink: 0;
}
/* Wallet logos arrive as PNGs with a coloured background already, so
   we round the corners and add a subtle white panel underneath so the
   bKash pink and Nagad red don't clash with the button background. */
.btn.btn--with-icon > .btn__icon--logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--paper);
  padding: 1px;
  object-fit: contain;
}


/* --- Donation thank-you pages (single + basket success) -------------- */
/* Compiled from content.scss .donate-thanks block. Keep in sync when
   regenerating main.css. Provides the Islamic-themed confirmation card,
   fixes the basket receipt contrast bug, and decorates both pages. */
.donate-thanks {
  padding-block: var(--space-6) var(--space-7);
  display: flex;
  justify-content: center;
}
.donate-thanks__card {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background:
    radial-gradient(circle at 50% 0%, var(--gold-soft) 0%, transparent 55%),
    var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 48px -24px oklch(from var(--ink) l c h / 0.22);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.donate-thanks__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.04) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.04) 0 1px, transparent 1px 14px);
  pointer-events: none;
  opacity: 0.65;
}
.donate-thanks__card > * { position: relative; }
.donate-thanks__ornament,
.payment-status__ornament {
  color: var(--vermillion-text, var(--gold));
  margin: 0 auto var(--space-3);
  width: 140px;
  height: auto;
  opacity: 0.85;
}
.donate-thanks__ornament svg,
.payment-status__ornament svg { width: 100%; height: auto; display: block; }
.donate-thanks__icon {
  color: var(--forest);
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-3);
}
.donate-thanks__icon svg { width: 100%; height: 100%; display: block; }
.donate-thanks__eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillion-text, var(--gold));
  margin: 0 0 var(--space-2);
}
.donate-thanks__headline {
  font-family: var(--font-en-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--forest);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.donate-thanks__message {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto var(--space-4);
}
.donate-thanks__receipt-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 auto var(--space-4);
}
.donate-thanks__receipt-icon {
  display: inline-flex;
  color: var(--vermillion-text, var(--gold));
  width: 18px;
  height: 18px;
}
.donate-thanks__receipt-icon svg { width: 100%; height: 100%; display: block; }
.donate-thanks__quote,
.payment-status__quote {
  margin: 0 auto var(--space-4);
  max-width: 48ch;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: oklch(from var(--ink) l c h / 0.04);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  text-align: start;
  position: relative;
}
.donate-thanks__quote p,
.payment-status__quote p {
  margin: 0 0 8px;
  font-family: var(--font-en-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--forest);
}
.donate-thanks__quote cite,
.payment-status__quote cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.donate-thanks__quote-mark,
.payment-status__quote-mark {
  position: absolute;
  top: 4px;
  inset-inline-start: 10px;
  font-family: var(--font-en-display);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--vermillion-text, var(--gold));
  opacity: 0.35;
  pointer-events: none;
}
.donate-thanks__receipt {
  margin: var(--space-4) auto var(--space-4);
  max-width: 480px;
  text-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: 0 6px 16px -10px oklch(from var(--ink) l c h / 0.12);
}
.donate-thanks__receipt-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-en-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest);
}
.donate-thanks__receipt-heading .donate-thanks__receipt-icon {
  width: 22px;
  height: 22px;
  color: var(--forest);
}
.donate-thanks__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.donate-thanks__items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-block-end: 1px dashed oklch(from var(--ink) l c h / 0.14);
  font-size: 0.95rem;
  color: var(--ink);
}
.donate-thanks__items li:last-child { border-block-end: none; }
.donate-thanks__items-label {
  color: var(--ink);
  font-weight: 500;
}
.donate-thanks__items-amount {
  color: var(--forest);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Donation row redesign (2026-05): each row is now two stacked
   tiers: a top header with product + amount, then a receipt block
   carrying a prominent monospace donation number and a full-width
   vermillion download CTA. The tiny inline 'Receipt PDF' text link
   read as quiet metadata; donors missed it on mobile. ── */
.donate-thanks__items li.donate-thanks__items-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.15rem);
  padding: clamp(0.95rem, 0.7rem + 0.7vw, 1.4rem) 0;
  border-block-end: 1px solid oklch(from var(--gold-leaf, #c9a96a) l c h / 0.35);
}
.donate-thanks__items li.donate-thanks__items-row:last-child {
  border-block-end: none;
}
.donate-thanks__items-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

/* Receipt block: number stack on the left, vermillion download CTA
   on the right at desktop; stacks on mobile with the button going
   full-width so it's a clean tap target. */
.donate-thanks__items-receipt-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

.donate-thanks__items-number-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.donate-thanks__items-number-label {
  font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia, #7a6850);
}

.donate-thanks__items-number-value {
  font-family: "DejaVu Sans Mono", "SF Mono", "Menlo", "Consolas", monospace;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  color: var(--ink, #1f2540);
  letter-spacing: 0.06em;
  /* user-select: all so a tap on mobile selects the whole number */
  user-select: all;
  -webkit-user-select: all;
}

/* The vermillion download CTA. Theme-stable --cta-bg / --cta-fg pair
   so it stays cream-on-vermillion in both light + candlelight dark. */
.donate-thanks__items-receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85rem 1.25rem;
  background: var(--cta-bg, var(--vermillion, #b9532a));
  color: var(--cta-fg, #fbf7ee);
  text-decoration: none;
  font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cta-bg, var(--vermillion, #b9532a));
  transition: background var(--duration-fast, 160ms) var(--ease-out, ease),
              transform var(--duration-fast, 160ms) var(--ease-out, ease);
  width: 100%;
}

.donate-thanks__items-receipt-btn:hover,
.donate-thanks__items-receipt-btn:focus-visible {
  background: var(--cta-bg-hover, var(--vermillion-deep, oklch(0.45 0.16 30)));
  border-color: var(--cta-bg-hover, var(--vermillion-deep, oklch(0.45 0.16 30)));
  color: var(--cta-fg, #fbf7ee);
  outline: none;
}

.donate-thanks__items-receipt-btn:focus-visible {
  outline: 2px solid var(--cta-bg, var(--vermillion, #b9532a));
  outline-offset: 3px;
}

.donate-thanks__items-receipt-btn svg {
  flex-shrink: 0;
}

@media (min-width: 640px) {
  /* On wider screens, place the number stack and the button side by
     side so the receipt block doesn't take more vertical room than
     the donation row above it. */
  .donate-thanks__items-receipt-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .donate-thanks__items-receipt-btn {
    width: auto;
  }
}
.donate-thanks__manage {
  margin: 0 auto var(--space-4);
  max-width: 48ch;
}
.donate-thanks__manage p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.donate-thanks__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
}
.donate-thanks__share {
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--gold-soft) 18%, var(--paper) 82%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent 78%);
  border-radius: var(--radius-sm);
  text-align: center;
}
.donate-thanks__share-heading {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest);
}
.donate-thanks__share-sub {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.donate-thanks__share-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.donate-thanks__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.donate-thanks__share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px oklch(from var(--ink) l c h / 0.1);
}
.donate-thanks__share-btn svg {
  width: 18px;
  height: 18px;
}
.donate-thanks__share-btn--whatsapp { color: #25D366; border-color: rgba(37, 211, 102, 0.35); }
.donate-thanks__share-btn--facebook { color: #1877F2; border-color: rgba(24, 119, 242, 0.35); }
.donate-thanks__share-btn--copy { color: var(--forest); border-color: color-mix(in srgb, var(--forest) 20%, transparent 80%); }
.donate-thanks__share-btn--copy.is-copied { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.basket-page--success {
  padding-block: var(--space-6) var(--space-7);
}
.basket-page--success .donate-thanks__card { margin-top: 0; }

/* --- Monthly giving preset amount (post display-currency refactor) --- */
/* Replaces the old .donate-monthly__preset-currency + __preset-value
   stack with a single .donate-monthly__preset-amount span that wraps
   the {% display_price %} output. Matches the size/weight of the
   previous layout so the tiles still read well in any currency. */
.donate-monthly__preset-amount {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-en-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--forest-deep);
  letter-spacing: -0.01em;
}
.donate-monthly__preset-amount .price {
  display: inline-block;
}

/* ==========================================================================
   Wave 2: CMS-driven home blocks. Compiled equivalents of the SCSS added
   to components.scss in the same commit. Keep in sync when editing.
   ========================================================================== */

/* --- Trust pillars ------------------------------------------------------- */
.home-block--trust_pillars { padding-block: var(--space-8); margin-block: var(--space-5); background: var(--cream); }
@media (max-width: 760px) {
  .home-block--trust_pillars { padding-block: var(--space-6); margin-block: var(--space-3); }
}
.trust-pillars__head { text-align: center; max-width: 56ch; margin: 0 auto var(--space-6); }
.trust-pillars__title { font-family: var(--font-en-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 500; color: var(--forest); margin: 0 0 var(--space-2); }
.trust-pillars__lead { color: var(--muted); margin: 0; }
.trust-pillars__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.trust-pillars__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.trust-pillars__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.trust-pillars__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .trust-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-pillars__grid { grid-template-columns: 1fr; } }
.trust-pillar { text-align: center; padding: var(--space-5); background: var(--paper); border-radius: var(--radius-sm); box-shadow: 0 1px 3px oklch(from var(--ink) l c h / 0.06); }
.trust-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-3); color: var(--vermillion-text, var(--gold)); }
.trust-pillar__icon svg { width: 40px; height: 40px; }
.trust-pillar__headline { font-family: var(--font-en-display); font-size: 1.125rem; font-weight: 500; color: var(--forest); margin: 0 0 var(--space-2); }
.trust-pillar__body { color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* --- Sponsor tiers ------------------------------------------------------- */
.home-block--sponsor_tiers { padding-block: var(--space-8); margin-block: var(--space-5); }
@media (max-width: 760px) { .home-block--sponsor_tiers { padding-block: var(--space-6); margin-block: var(--space-3); } }
.sponsor-tiers__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-6); }
.sponsor-tiers__eyebrow { margin-bottom: var(--space-2); }
.sponsor-tiers__title { font-family: var(--font-en-display); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); font-weight: 500; color: var(--forest); margin: 0 0 var(--space-3); }
.sponsor-tiers__lead { color: var(--muted); margin: 0; }
.sponsor-tiers__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 960px) { .sponsor-tiers__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.sponsor-tiers__footnote { text-align: center; color: var(--muted); font-size: 0.875rem; margin-top: var(--space-5); max-width: 56ch; margin-inline: auto; }
.sponsor-tier { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sponsor-tier:hover { transform: translateY(-2px); box-shadow: 0 6px 20px oklch(from var(--ink) l c h / 0.08); }
.sponsor-tier--featured { border-color: var(--vermillion-text, var(--gold)); box-shadow: 0 4px 20px rgba(198, 156, 75, 0.15); }
.sponsor-tier__ribbon { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--gold); color: var(--paper); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 4px 10px; border-radius: 4px; z-index: 1; box-shadow: 0 2px 6px rgba(198, 156, 75, 0.35); }
/* When the ribbon overlays an imageless (placeholder) card, the body sits at
   the very top: make room so the title doesn't collide with the ribbon. */
.sponsor-tier--placeholder.sponsor-tier--featured .sponsor-tier__body { padding-top: calc(var(--space-5) + 1.25rem); }
.sponsor-tier__image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.sponsor-tier__image--placeholder { background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.sponsor-tier__image--placeholder svg { width: 60px; height: 60px; }
.sponsor-tier__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.sponsor-tier__title { font-family: var(--font-en-display); font-size: 1.25rem; font-weight: 500; color: var(--forest); margin: 0; }
.sponsor-tier__price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.sponsor-tier__amount { font-family: var(--font-en-display); font-size: 2.5rem; font-weight: 500; color: var(--forest); line-height: 1; }
.sponsor-tier__period { color: var(--muted); font-size: 0.9375rem; }
.sponsor-tier__one-off { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.sponsor-tier__summary { color: var(--ink); margin: 0; line-height: 1.55; }
.sponsor-tier__covers { font-size: 0.9rem; color: var(--muted); }
.sponsor-tier__covers ul { margin: 0; padding-left: var(--space-4); }
.sponsor-tier__covers li { margin-bottom: 4px; }
.sponsor-tier__hint { font-size: 0.8125rem; color: var(--muted); font-style: italic; margin: 0; }
.sponsor-tier__form { margin-top: auto; }

/* --- Alumni spotlight ---------------------------------------------------- */
.home-block--alumni_spotlight { padding-block: var(--space-8); margin-block: var(--space-5); }
@media (max-width: 760px) { .home-block--alumni_spotlight { padding-block: var(--space-6); margin-block: var(--space-3); } }
.alumni-spotlight__head { text-align: center; max-width: 56ch; margin: 0 auto var(--space-6); }
.alumni-spotlight__eyebrow { margin-bottom: var(--space-2); }
.alumni-spotlight__title { font-family: var(--font-en-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 500; color: var(--forest); margin: 0 0 var(--space-2); }
.alumni-spotlight__lead { color: var(--muted); margin: 0; }
.alumni-spotlight__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.alumni-spotlight__grid--grid { grid-template-columns: repeat(3, 1fr); }
.alumni-spotlight__grid--carousel { grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.alumni-spotlight__grid--carousel > li { scroll-snap-align: start; }
@media (max-width: 960px) { .alumni-spotlight__grid--grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.alumni-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.alumni-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.alumni-card__photo--placeholder { background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.alumni-card__photo--placeholder svg { width: 72px; height: 72px; }
.alumni-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.alumni-card__year { color: var(--vermillion-text, var(--gold)); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin: 0; }
.alumni-card__name { font-family: var(--font-en-display); font-size: 1.125rem; font-weight: 500; color: var(--forest); margin: 0; }
.alumni-card__role { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.alumni-card__quote { margin: var(--space-3) 0 0; font-style: italic; color: var(--ink); font-size: 0.9375rem; line-height: 1.55; border-top: 1px dashed var(--line); padding-top: var(--space-3); }

/* --- Money split --------------------------------------------------------- */
.home-block--money_split { padding-block: var(--space-8); margin-block: var(--space-5); background: var(--cream); }
@media (max-width: 760px) { .home-block--money_split { padding-block: var(--space-6); margin-block: var(--space-3); } }
.money-split__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-6); }
.money-split__eyebrow { margin-bottom: var(--space-2); }
.money-split__title { font-family: var(--font-en-display); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); font-weight: 500; color: var(--forest); margin: 0 0 var(--space-3); }
.money-split__lead { color: var(--muted); margin: 0; }
.money-split__bar { display: flex; width: 100%; height: 44px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px oklch(from var(--ink) l c h / 0.08); margin-bottom: var(--space-5); }
.money-split__segment { display: flex; align-items: center; justify-content: center; color: var(--paper); font-weight: 600; font-size: 0.8125rem; transition: flex 0.3s ease; }
.money-split__segment--forest { background: var(--forest); }
.money-split__segment--gold { background: var(--gold); color: var(--ink); }
.money-split__segment--moss { background: var(--moss, #4b8358); }
.money-split__segment--ink { background: var(--ink); }
.money-split__segment--brick { background: #b5532c; }
.money-split__segment-label { padding: 0 4px; }
.money-split__legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); }
@media (max-width: 640px) { .money-split__legend { grid-template-columns: 1fr; } }
.money-split__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "swatch category percent" "swatch desc desc"; align-items: center; column-gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.money-split__swatch { grid-area: swatch; width: 16px; height: 16px; border-radius: 3px; }
.money-split__swatch--forest { background: var(--forest); }
.money-split__swatch--gold { background: var(--gold); }
.money-split__swatch--moss { background: var(--moss, #4b8358); }
.money-split__swatch--ink { background: var(--ink); }
.money-split__swatch--brick { background: #b5532c; }
.money-split__category { grid-area: category; font-weight: 600; color: var(--ink); }
.money-split__percent { grid-area: percent; font-family: var(--font-en-display); font-weight: 500; color: var(--forest); }
.money-split__desc { grid-area: desc; font-size: 0.875rem; color: var(--muted); margin-top: 2px; }
.money-split__footnote { text-align: center; color: var(--muted); font-size: 0.8125rem; margin-top: var(--space-5); font-style: italic; }

/* --- Scholar anchor ------------------------------------------------------ */
.home-block--scholar_anchor { padding-block: var(--space-8); margin-block: var(--space-5); }
@media (max-width: 760px) { .home-block--scholar_anchor { padding-block: var(--space-6); margin-block: var(--space-3); } }
.scholar-anchor__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items: center; }
@media (max-width: 860px) { .scholar-anchor__grid { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; } }
.scholar-anchor__photo { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 4px 20px oklch(from var(--ink) l c h / 0.1); }
@media (max-width: 860px) { .scholar-anchor__photo { margin-inline: auto; } }
.scholar-anchor__photo--placeholder { background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.scholar-anchor__photo--placeholder svg { width: 96px; height: 96px; }
.scholar-anchor__eyebrow { margin-bottom: var(--space-2); }
.scholar-anchor__name { font-family: var(--font-en-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 500; color: var(--forest); margin: 0 0 var(--space-1); }
.scholar-anchor__role { color: var(--vermillion-text, var(--gold)); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin: 0 0 var(--space-4); }
.scholar-anchor__blurb { color: var(--ink); line-height: 1.65; margin-bottom: var(--space-5); }
.scholar-anchor__blurb p { margin: 0 0 var(--space-3); }
.scholar-anchor__blurb p:last-child { margin-bottom: 0; }

/* --- Sadaqah Jariyah anchor --------------------------------------------- */
.home-block--sadaqah_jariyah { padding-block: var(--space-8); margin-block: var(--space-5); color: var(--ink); }
@media (max-width: 760px) { .home-block--sadaqah_jariyah { padding-block: var(--space-6); margin-block: var(--space-3); } }
.sadaqah-jariyah__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 860px) { .sadaqah-jariyah__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.sadaqah-jariyah__eyebrow { color: var(--vermillion-text, var(--gold)); margin-bottom: var(--space-2); }
.sadaqah-jariyah__title { font-family: var(--font-en-display); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 500; margin: 0 0 var(--space-4); line-height: 1.25; }
.sadaqah-jariyah__body { line-height: 1.65; margin-bottom: var(--space-5); opacity: 0.92; }
.sadaqah-jariyah__body p { margin: 0 0 var(--space-3); }
.sadaqah-jariyah__body p:last-child { margin-bottom: 0; }
.sadaqah-jariyah__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sadaqah-jariyah__quote { text-align: center; }
.sadaqah-jariyah__figure { margin: 0; padding: var(--space-5); background: var(--paper); border: 1px solid var(--rule, oklch(from var(--ink) l c h / 0.12)); border-radius: var(--radius-sm); }
.sadaqah-jariyah__arabic { font-family: var(--font-ar-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.8; margin: 0 0 var(--space-4); color: var(--vermillion-text, var(--gold)); }
.sadaqah-jariyah__translation { font-size: 0.9375rem; line-height: 1.55; opacity: 0.9; }
.sadaqah-jariyah__reference { display: block; margin-top: var(--space-2); color: var(--vermillion-text, var(--gold)); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.sadaqah-jariyah__pattern { color: var(--gold-soft); opacity: 0.5; display: flex; align-items: center; justify-content: center; }
.sadaqah-jariyah__pattern svg { width: 100%; max-width: 280px; height: auto; }

/* Trust Signals Row (Wave 3) */
.trust-signals-row { padding: var(--space-6) 0; }
.trust-signals-row--bg-cream { background: var(--cream); }
.trust-signals-row--bg-sand { background: var(--sand, #f4ead5); }
.trust-signals-row--bg-ink { background: var(--ink); color: var(--cream); }
.trust-signals-row--bg-forest { background: var(--forest); color: var(--cream); }
.trust-signals-row--bg-none { background: transparent; }
.trust-signals-row__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.trust-signals-row--align-left .trust-signals-row__inner { align-items: flex-start; }
.trust-signals-row--align-right .trust-signals-row__inner { align-items: flex-end; }
.trust-signals-row__heading { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin: 0; color: var(--ink); opacity: 0.7; }
.trust-signals-row--bg-ink .trust-signals-row__heading,
.trust-signals-row--bg-forest .trust-signals-row__heading { color: var(--cream); opacity: 0.85; }
.trust-signals-row__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); }
.trust-signals-row--align-left .trust-signals-row__list { justify-content: flex-start; }
.trust-signals-row--align-right .trust-signals-row__list { justify-content: flex-end; }
.trust-signal { display: inline-flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-2) * 0.75) var(--space-3); background: oklch(from var(--paper) l c h / 0.6); border: 1px solid oklch(from var(--ink) l c h / 0.06); border-radius: 999px; font-size: 0.875rem; line-height: 1.25; }
.trust-signals-row--bg-ink .trust-signal,
.trust-signals-row--bg-forest .trust-signal { background: oklch(from var(--paper) l c h / 0.08); border-color: oklch(from var(--paper) l c h / 0.15); }
.trust-signal__link { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.trust-signal__link:hover, .trust-signal__link:focus-visible { color: var(--vermillion-text, var(--gold)); }
.trust-signal__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--vermillion-text, var(--gold)); display: inline-flex; }
.trust-signal__icon svg { width: 100%; height: 100%; }
.trust-signal__body { display: inline-flex; flex-direction: column; gap: 0; }
.trust-signal__label { font-weight: 600; color: inherit; }
.trust-signal__detail { font-size: 0.75rem; opacity: 0.75; }
@media (max-width: 640px) {
    .trust-signals-row__list { justify-content: flex-start; gap: var(--space-2) var(--space-3); }
    .trust-signal { font-size: 0.8125rem; padding: calc(var(--space-2) * 0.6) var(--space-3); }
}

/* Basket Checkout: Dedication + Fund designation (Wave 3) */
.basket-checkout__fund, .basket-checkout__dedication { margin-top: var(--space-4); }
.basket-checkout__field-help { display: block; margin-top: calc(var(--space-1) * 0.75); font-size: 0.8125rem; color: var(--ink); opacity: 0.65; }

/* ----------------------------------------------------------------------
   Dedication card: premium collapsible disclosure with type-card
   picker and live preview. Designed to feel like a thoughtful, optional
   add-on rather than a generic form field.
   ---------------------------------------------------------------------- */
.basket-checkout__dedication {
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.32);
    border-radius: var(--radius-sm);
    padding: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 5%, var(--cream-light)) 0%,
        var(--cream) 100%);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.basket-checkout__dedication[data-dedication-open] {
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 12px 28px -20px oklch(from var(--vermillion, var(--gold)) l c h / 0.50);
}

.basket-checkout__dedication-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--ink);
    transition: background 0.15s ease;
}
.basket-checkout__dedication-toggle:hover {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
}
.basket-checkout__dedication-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.basket-checkout__dedication-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    color: var(--vermillion-text, var(--gold));
}
.basket-checkout__dedication-icon svg {
    width: 20px;
    height: 20px;
}

.basket-checkout__dedication-textblock {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.basket-checkout__dedication-label {
    font-family: var(--font-en-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--forest-deep);
    line-height: 1.2;
}
.basket-checkout__dedication-sublabel {
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

.basket-checkout__dedication-chevron {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--vermillion-text, var(--gold));
    transition: transform 0.2s ease;
}
.basket-checkout__dedication[data-dedication-open] .basket-checkout__dedication-chevron {
    transform: rotate(180deg);
}

.basket-checkout__dedication-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
    margin-top: var(--space-2);
    animation: dedication-slide-down 0.25s ease;
}
@keyframes dedication-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3-card type picker (In memory / In honour / On behalf). */
.basket-checkout__dedication-picker {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.basket-checkout__dedication-type {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--paper);
    border: 1.5px solid oklch(from var(--ink) l c h / 0.10);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.basket-checkout__dedication-type:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}
.basket-checkout__dedication-type:active {
    transform: scale(0.99);
}
.basket-checkout__dedication-type.is-selected {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
    box-shadow: 0 0 0 2px oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}
.basket-checkout__dedication-type input[type="radio"] {
    /* Replace the native radio with the gold-ringed card itself. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.basket-checkout__dedication-type-emoji {
    grid-row: span 2;
    font-size: 1.5rem;
    line-height: 1;
}
.basket-checkout__dedication-type-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.basket-checkout__dedication-type-body strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--forest-deep);
    line-height: 1.2;
}
.basket-checkout__dedication-type-body span {
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.3;
}

/* Inputs inside the dedication body. */
.basket-checkout__dedication-name-field input,
.basket-checkout__dedication-body textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
}
.basket-checkout__dedication-name-field input:focus,
.basket-checkout__dedication-body textarea:focus {
    outline: none;
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}
.basket-checkout__dedication-body label > span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}
.basket-checkout__dedication-body label > span small {
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* Live preview card: appears once both type + name are filled. */
.basket-checkout__dedication-preview {
    margin-top: 4px;
    padding: var(--space-3) var(--space-4);
    background: var(--forest);
    border-radius: var(--radius-sm);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.basket-checkout__dedication-preview::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, oklch(from var(--vermillion, var(--gold)) l c h / 0.30) 0%, transparent 65%);
    pointer-events: none;
}
.basket-checkout__dedication-preview-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vermillion-text, var(--gold));
    margin-bottom: 6px;
}
.basket-checkout__dedication-preview p {
    margin: 0;
    font-family: var(--font-en-display);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--cream);
    position: relative;
}
.basket-checkout__dedication-preview strong {
    color: var(--vermillion-text, var(--gold));
    font-style: normal;
}

/* Mobile polish: tighten paddings, single-column type picker. */
@media (max-width: 540px) {
    .basket-checkout__dedication-toggle {
        padding: var(--space-3);
        gap: var(--space-2);
    }
    .basket-checkout__dedication-icon {
        width: 32px;
        height: 32px;
    }
    .basket-checkout__dedication-icon svg {
        width: 18px;
        height: 18px;
    }
    .basket-checkout__dedication-label {
        font-size: 0.95rem;
    }
    .basket-checkout__dedication-sublabel {
        font-size: 0.78rem;
    }
    .basket-checkout__dedication-body {
        padding: var(--space-2) var(--space-3) var(--space-3);
    }
    .basket-checkout__dedication-picker {
        grid-template-columns: 1fr;
    }
}

/* Dark mode rescopes. */
html[data-theme="dark"] .basket-checkout__dedication {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
    background: linear-gradient(180deg,
        oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 0%,
        var(--cream) 100%);
}
html[data-theme="dark"] .basket-checkout__dedication[data-dedication-open] {
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 16px 32px -20px oklch(from var(--ink) l c h / 0.55);
}
html[data-theme="dark"] .basket-checkout__dedication-label {
    color: var(--ink);
}
html[data-theme="dark"] .basket-checkout__dedication-toggle:hover {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
}
html[data-theme="dark"] .basket-checkout__dedication-icon {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
}
html[data-theme="dark"] .basket-checkout__dedication-body {
    border-top-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.25);
}
html[data-theme="dark"] .basket-checkout__dedication-type {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-checkout__dedication-type:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}
html[data-theme="dark"] .basket-checkout__dedication-type.is-selected {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .basket-checkout__dedication-type-body strong {
    color: var(--ink);
}
html[data-theme="dark"] .basket-checkout__dedication-name-field input,
html[data-theme="dark"] .basket-checkout__dedication-body textarea {
    background: var(--cream-light);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .basket-checkout__dedication-preview {
    background: linear-gradient(135deg, var(--forest-deep) 0%, #051712 100%);
}

/* Qurbani dedicated page (Wave 3) */
/* Qurbani hero: manuscript treatment matching Zakat hero (cream paper,
   ink type, vermillion eyebrow, gold-leaf hairlines). Replaces the
   legacy dark forest-green ribbon which after the brand reset rendered
   as a heavy dark indigo wall and bled through the semi-transparent
   fixed nav. The hero now matches the rest of the site's manuscript
   register; the section ends with a gold-leaf hairline before the
   pricing strip below. */
.qurbani-hero {
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-7) 0 var(--space-6);
    border-bottom: 1px solid var(--rule);
}
.qurbani-hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-6);
    align-items: center;
}
.qurbani-hero__eyebrow {
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    margin-bottom: var(--space-2);
}
.qurbani-hero__headline {
    font-family: var(--font-en-display);
    font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-3);
    color: var(--ink);
}
.qurbani-hero__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: var(--space-4);
}
.qurbani-hero__body p { margin: 0 0 var(--space-2); }

/* Date tiles: manuscript-panel pattern: hairlines top + bottom, paper-deep
   tint, no border-radius. Three pieces of date info that the Birmingham
   donor needs to glance at to know "is this the year I'm giving for, and
   when does it close?". */
.qurbani-hero__dates {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}
@media (max-width: 480px) {
    .qurbani-hero__dates { grid-template-columns: 1fr; }
}
.qurbani-hero__dates li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
    border: 0;
    border-block: 1px solid var(--rule);
    border-radius: 0;
}
.qurbani-hero__date-label {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.75rem);
    font-weight: 600;
    color: var(--sepia, var(--ink-soft));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.qurbani-hero__date-value {
    font-family: var(--font-en-display);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.2;
}
.qurbani-hero__cta { margin-top: var(--space-3); }
.qurbani-hero__trust {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: center;
}
.qurbani-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--ink-soft);
}
.qurbani-hero__trust-item svg {
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    flex: 0 0 auto;
}
.qurbani-hero__trust-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--vermillion-text, var(--gold));
}
.qurbani-hero__figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.4);
}
.qurbani-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder when no hero photo is uploaded: quiet manuscript ornament
   on the same paper-deep wash. Editor uploads via Wagtail; the placeholder
   is replaced automatically. */
.qurbani-hero__figure--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    padding: var(--space-5);
    position: relative;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
}
.qurbani-hero__figure--placeholder::before {
    /* Single quiet gold-leaf hairline ring centred. Manuscript-page calm,
       not flooded-gold heraldry. */
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid var(--gold-leaf, oklch(0.75 0.10 75 / 0.45));
    pointer-events: none;
}
.qurbani-hero__figure--placeholder svg {
    width: 36%;
    height: auto;
    max-width: 200px;
    position: relative;
    z-index: 1;
    opacity: 0.55;
}
/* "Upload Qurbani photo" badge so editor sees a clear CMS prompt. */
.qurbani-hero__figure--placeholder::after {
    content: 'Add a Qurbani photo in CMS';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: oklch(from var(--paper) l c h / 0.95);
    color: var(--sepia, var(--ink-soft));
    font-family: var(--font-en-body);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}
/* Pricing strip: sits immediately under the hero. Manuscript-panel
   pattern: hairlines instead of card borders, paper-deep tint, no shadow.
   The donor needs to see a price ASAP (conversion rule: amounts visible
   in first scroll), so this section runs FULL WIDTH not constrained
   to the hero column. */
.qurbani-pricing {
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--rule);
}
.qurbani-pricing__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
}
.qurbani-pricing__tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) var(--space-3);
    background: transparent;
    border: 0;
    border-inline-end: 1px solid var(--rule);
    border-radius: 0;
    text-align: center;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.qurbani-pricing__tier:last-child {
    border-inline-end: 0; /* don't draw a hairline past the last tier */
}
.qurbani-pricing__tier:hover {
    background: oklch(from var(--paper) l c h / 0.6);
}
.qurbani-pricing__label {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sepia, var(--ink-soft));
}
.qurbani-pricing__price {
    font-family: var(--font-en-display);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    letter-spacing: -0.012em;
    line-height: 1.1;
}
.qurbani-campaign { padding: var(--space-6) 0; margin-top: var(--space-6); }
.qurbani-order { padding: var(--space-8) 0; }
.qurbani-order__head { text-align: center; margin-bottom: var(--space-5); }
.qurbani-order__sub { margin: var(--space-2) auto 0; max-width: 640px; color: var(--ink); opacity: 0.8; }
/* Tablet (≈600–959px): force 2x2 instead of 3+1 so a 4-product Qurbani
   row doesn't strand the last card on its own line. */
@media (min-width: 600px) and (max-width: 959px) {
    .qurbani-order .donate-index__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.qurbani-order__empty { text-align: center; padding: var(--space-6); background: var(--cream); border-radius: var(--radius-sm); color: var(--ink); opacity: 0.7; }
.qurbani-order__dedication { margin-top: var(--space-6); padding: var(--space-5); background: var(--cream); border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */ border-radius: 0 10px 10px 0; }
.qurbani-order__dedication-title { margin: 0 0 var(--space-2); font-size: 1.125rem; font-weight: 600; }
.qurbani-order__dedication-copy { margin: 0; line-height: 1.6; color: var(--ink); opacity: 0.85; }
.qurbani-process {
    background:
        radial-gradient(1200px 500px at 80% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%),
        var(--forest, #0f5132);
    color: var(--cream, #f7f1e1);
    padding: var(--space-9, 96px) 0;
    position: relative;
    overflow: hidden;
}
.qurbani-process::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
    opacity: 0.5;
}
.qurbani-process__inner { max-width: 1080px; }
.qurbani-process__header {
    text-align: center;
    margin: 0 auto var(--space-5);
    max-width: 720px;
}
.qurbani-process__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 22%, transparent 78%);
    color: var(--vermillion-text, var(--gold));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.qurbani-process__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent 70%);
}
.qurbani-process__heading {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    margin: 0 0 var(--space-2);
    color: var(--cream);
    line-height: 1.15;
}
.qurbani-process__subtitle {
    margin: 0;
    color: color-mix(in srgb, var(--cream) 78%, transparent 22%);
    font-size: 1.0625rem;
    line-height: 1.55;
}
.qurbani-process__body { font-size: 1.0625rem; line-height: 1.7; }
.qurbani-process__body p { margin: 0 0 var(--space-3); }
.qurbani-process__body ol, .qurbani-process__body ul { padding-left: 1.25em; margin: 0 0 var(--space-3); }
.qurbani-footer { padding: var(--space-6) var(--space-4); color: var(--ink); opacity: 0.8; font-size: 0.9375rem; }
.qurbani-back { padding: var(--space-5) var(--space-4) var(--space-8); }

/* Public share board: populated automatically as Qurbani donations
   are confirmed. Each tile is one share: animal icon (or photo when the
   editor has uploaded one), the C101-style code, and the donor's name.
   The grid uses auto-fill so it gracefully scales from 1-2 shares (in
   season-opening week) to 100+ at peak. */
.qurbani-board {
    padding: var(--space-7) var(--space-4);
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    border-radius: var(--radius-sm);
    margin-top: var(--space-6);
}
.qurbani-board__head { text-align: center; margin-bottom: var(--space-5); }
.qurbani-board__sub { margin: var(--space-2) auto 0; max-width: 640px; color: var(--ink); opacity: 0.8; }
.qurbani-board__section { margin-top: var(--space-6); }
.qurbani-board__section:first-of-type { margin-top: var(--space-3); }
.qurbani-board__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent 70%);
}
.qurbani-board__section-head {
    flex-wrap: wrap;
}
.qurbani-board__section-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--forest); }
.qurbani-board__count { font-size: 0.85rem; color: var(--ink-soft); }
.qurbani-board__impact {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--forest);
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.85;
}
.qurbani-board__impact svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--vermillion-text, var(--gold));
}
.qurbani-board__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
}
.qurbani-board__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3);
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--forest) 8%, transparent 92%);
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qurbani-board__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px oklch(from var(--ink) l c h / 0.08);
}
.qurbani-board__visual {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest);
    margin-bottom: var(--space-2);
}
.qurbani-board__icon { width: 100%; height: 100%; }
.qurbani-board__photo { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); }
.qurbani-board__code {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vermillion-text, var(--gold));
    margin: 0 0 calc(var(--space-1) * 0.5);
}
.qurbani-board__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.qurbani-board__name--anon { font-style: italic; opacity: 0.6; }
.qurbani-board__father {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin: calc(var(--space-1) * 0.5) 0 0;
    line-height: 1.2;
}

/* ----------------------------------------------------------------------
   Qurbani animal tiles (pre-allocated inventory grid)
   ----------------------------------------------------------------------
   Replaces the per-share tile (.qurbani-board__tile) with a per-animal
   tile (.qurbani-animal). Every active QurbaniAnimal renders as one
   tile from day zero; available shares get a CTA, filled shares
   contribute to the donor-list popover. Filled vs available is a
   visual state toggle (.is-full / .is-available).
   ---------------------------------------------------------------------- */
.qurbani-board__animal-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-3);
}
/* When a section only has one tile (e.g. single sheep), don't leave four
   empty grid cells stretched beside it. Use flex so the lone tile sits
   at its natural width without dragging out the row. */
.qurbani-board__animal-grid--single {
    display: flex;
    flex-wrap: wrap;
}
.qurbani-board__animal-grid--single .qurbani-board__animal-wrap {
    width: 240px;
}
.qurbani-animal {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--forest) 10%, transparent 90%);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.qurbani-animal.is-available:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px oklch(from var(--ink) l c h / 0.14);
    border-color: color-mix(in srgb, var(--gold) 40%, transparent 60%);
}
.qurbani-animal.is-full {
    background: color-mix(in srgb, var(--forest) 4%, var(--paper) 96%);
    border-color: color-mix(in srgb, var(--forest) 18%, transparent 82%);
}

/* Banner header: full-width gradient strip with the animal icon centred,
   the C-code badge top-left, and the X/N progress pill top-right. Replaces
   the old circular avatar so each tile feels like a card not a sticker. */
.qurbani-animal__visual {
    position: relative;
    width: 100%;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--gold-soft) 38%, var(--paper) 62%) 0%,
        color-mix(in srgb, var(--gold-soft) 14%, var(--paper) 86%) 100%);
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--forest) 8%, transparent 92%);
    border-radius: 13px 13px 0 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.qurbani-animal.is-full .qurbani-animal__visual {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--forest) 14%, var(--paper) 86%) 0%,
        color-mix(in srgb, var(--forest) 6%, var(--paper) 94%) 100%);
}
.qurbani-animal__visual:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -4px;
}
.qurbani-animal__visual .qurbani-board__icon {
    width: 70px;
    height: 70px;
}
.qurbani-animal__progress-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    background: var(--paper);
    color: var(--forest);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--forest) 14%, transparent 86%);
    box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.06);
}
.qurbani-animal.is-full .qurbani-animal__progress-pill {
    background: var(--forest);
    color: var(--paper);
    border-color: var(--forest);
}
.qurbani-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) auto 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--gold-soft) 35%, var(--paper) 65%),
        color-mix(in srgb, var(--gold-soft) 12%, var(--paper) 88%));
    border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent 80%);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.04);
}
.qurbani-social__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--vermillion-text, var(--gold));
    box-shadow: 0 1px 3px oklch(from var(--ink) l c h / 0.08);
}
.qurbani-social__icon svg {
    width: 20px;
    height: 20px;
}
.qurbani-social__text {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.4;
}
.qurbani-social__text strong { color: var(--forest); }
.qurbani-social__season {
    display: inline-block;
    margin-left: 6px;
    color: var(--ink-soft);
    font-size: 0.875rem;
}
.qurbani-animal__progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: color-mix(in srgb, var(--forest) 8%, var(--paper) 92%);
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}
.qurbani-animal__progress-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, var(--forest) 30%) 100%);
    transition: opacity 0.4s ease;
}
.qurbani-animal.is-full .qurbani-animal__progress-bar-fill {
    background: var(--forest);
}
.qurbani-animal__code {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--forest);
    margin: var(--space-2) var(--space-3) 0;
}
.qurbani-animal__status {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin: 2px var(--space-3) var(--space-3);
}
.qurbani-animal__status--full {
    color: var(--forest);
    font-weight: 600;
    font-style: normal;
}
.qurbani-animal__ctas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding: 0 var(--space-3) var(--space-3);
}
.qurbani-animal__cta { margin: 0; }
.qurbani-animal__cta .btn--sm {
    width: 100%;
    font-size: 0.8rem;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    line-height: 1.25;
    /* Override the default .btn inline-flex so label + price wrap as one
       text block. Otherwise the price (own flex item) gets pushed to the
       right while the label wraps awkwardly to a second line. */
    display: block;
    text-align: center;
}
.qurbani-animal__cta .btn--sm .price { white-space: nowrap; }
/* Secondary CTAs (Top up / Sponsor full <animal>) sit below the primary
   gold button. Quieter ghost treatment so the donor's eye lands on
   "Take 1 share" first: the natural starting unit for most donors. */
.qurbani-animal__ctas .qurbani-animal__cta:nth-child(n+2) .btn--sm {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--forest) 20%, transparent 80%);
    color: var(--forest);
    font-weight: 600;
    font-size: 0.76rem;
    padding: 7px 10px;
}
.qurbani-animal__ctas .qurbani-animal__cta:nth-child(n+2) .btn--sm:hover {
    background: color-mix(in srgb, var(--forest) 6%, transparent 94%);
    border-color: color-mix(in srgb, var(--forest) 32%, transparent 68%);
}
/* Donor-list popover: desktop shows on hover (CSS only), touch /
   keyboard activates via aria-expanded toggle. Anchored above the
   tile, with an invisible bridge (padding-bottom + ::before strip)
   so the donor can move the cursor up to read it without the
   parent LI losing its :hover state. */
.qurbani-animal__popover {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 200px;
    max-width: 280px;
    z-index: 5;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px oklch(from var(--ink) l c h / 0.18);
    font-size: 0.82rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
/* Hoverable bridge: fills the 8px gap between tile and popover so
   moving the cursor up to read the popover doesn't break :hover. */
.qurbani-animal__popover::before {
    content: "";
    position: absolute;
    inset: 100% 0 -8px 0;
    pointer-events: auto;
}
.qurbani-animal__popover[hidden] { display: block; }
.qurbani-animal:hover .qurbani-animal__popover,
.qurbani-animal:focus-within .qurbani-animal__popover,
.qurbani-animal__popover:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}
.qurbani-animal__popover-title {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--gold) 70%, var(--paper) 30%);
}
.qurbani-animal__donor-list {
    list-style: decimal;
    padding: 0 0 0 16px;
    margin: 0;
}
.qurbani-animal__donor-list li { margin: 2px 0; }
.qurbani-animal__donor-list-empty,
.qurbani-animal__popover-empty {
    margin: 6px 0 0;
    font-size: 0.76rem;
    opacity: 0.85;
    font-style: italic;
}

/* Replacement note on the product tile: the input fieldset moved to
   checkout, so the tile just hints at where names will be collected.
   Same dashed border treatment as the old fieldset for visual continuity. */
.product-card__shares-note {
    margin: 4px 0 0;
    padding: 8px 10px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--gold-soft) 25%, var(--paper) 75%);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* Basket-drawer Qurbani hint: replaces the per-share name list that
   used to live on each line. Soft pill that tells the donor names will
   be asked at checkout. */
.basket-drawer__qurbani-hint {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--gold-soft) 30%, transparent 70%);
    border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

/* Checkout-page Qurbani fieldset: one block per Qurbani basket line,
   each containing a numbered list of donor + father pairs. The fieldset
   border + legend mirror the rest of the checkout form so it doesn't
   stand out as alien, but the gold accent strip flags it as a section
   the donor has to fill in. */
.basket-checkout__qurbani {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--gold-soft) 15%, var(--paper) 85%);
}
.basket-checkout__qurbani-legend {
    padding: 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--forest);
}
.basket-checkout__qurbani-intro {
    margin: 0 0 var(--space-3);
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.basket-checkout__qurbani-line {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.basket-checkout__qurbani-line:first-of-type { margin-top: 0; }
.basket-checkout__qurbani-line-head { margin: 0 0 var(--space-3); }
.basket-checkout__qurbani-line-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--forest);
}
.basket-checkout__qurbani-line-sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.basket-checkout__qurbani-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.basket-checkout__qurbani-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2);
    background: color-mix(in srgb, var(--gold-soft) 15%, var(--paper) 85%);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.basket-checkout__qurbani-row-num {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vermillion-text, var(--gold));
    padding: 0 6px;
}
.basket-checkout__qurbani-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.basket-checkout__qurbani-field { display: flex; flex-direction: column; gap: 4px; }
.basket-checkout__qurbani-field > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}
.basket-checkout__qurbani-field input[type="text"] {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    width: 100%;
}
.basket-checkout__qurbani-field input[type="text"]:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--vermillion-text, var(--gold));
}
.basket-checkout__qurbani-field input[aria-invalid="true"] {
    border-color: var(--danger, #c0392b);
    background: #fff7f5;
}
.basket-checkout__qurbani-field-error {
    font-size: 0.78rem;
    color: var(--danger, #c0392b);
    margin: 2px 0 0;
}
.basket-checkout__qurbani-required { color: var(--danger, #c0392b); }
.basket-checkout__qurbani-field-optional {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-2, #666);
    margin-left: 4px;
}

/* Per-LINE privacy choice: one decision per animal. Card-style radios
   so the donor can see all three options side by side and instantly
   tell which is selected (gold border + soft background on the chosen
   option). Lives BELOW the per-share name list, inside the Qurbani
   line wrapper. */
.basket-checkout__qurbani-privacy {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--cream) 50%, var(--paper) 50%);
}
/* Heading for the Qurbani privacy section. Uses a plain <h4> + flex
   layout instead of the old <fieldset><legend> pattern: legend
   rendering was inconsistent and broke on mobile. role="radiogroup"
   + aria-labelledby on the inner div preserves accessibility. */
.basket-checkout__qurbani-privacy-heading {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 0;
    margin: 0 0 var(--space-3);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--forest);
    line-height: 1.4;
}
.basket-checkout__qurbani-privacy-heading span {
    flex: 1;
    min-width: 0;
}
.basket-checkout__qurbani-privacy-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--vermillion-text, var(--gold));
    /* Seat the icon on the cap-line of the heading text. */
    margin-top: 1px;
}

@media (max-width: 760px) {
    .basket-checkout__qurbani-privacy {
        padding: var(--space-3);
    }
    .basket-checkout__qurbani-privacy-heading {
        font-size: 0.92rem;
        gap: 8px;
    }
    .basket-checkout__qurbani-privacy-icon {
        width: 18px;
        height: 18px;
    }
}
.basket-checkout__qurbani-privacy-opts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.basket-checkout__qurbani-privacy-opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.basket-checkout__qurbani-privacy-opt:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: color-mix(in srgb, var(--gold-soft) 25%, var(--paper) 75%);
}
.basket-checkout__qurbani-privacy-opt input[type="radio"] {
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: var(--vermillion-text, var(--gold));
}
.basket-checkout__qurbani-privacy-opt.is-selected {
    border-color: var(--vermillion-text, var(--gold));
    background: color-mix(in srgb, var(--gold-soft) 35%, var(--paper) 65%);
    box-shadow: 0 0 0 1px var(--gold) inset;
}
.basket-checkout__qurbani-privacy-opt-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.basket-checkout__qurbani-privacy-opt-body strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}
.basket-checkout__qurbani-privacy-opt-eg {
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    letter-spacing: 0.02em;
}
.basket-checkout__qurbani-privacy-help {
    margin: var(--space-2) 0 0;
    font-size: 0.76rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

/* Receipt + thank-you Qurbani lists. Subtle, just to confirm what the
   donor entered without dominating the receipt area. */
.payment-status__qurbani-list,
.donate-thanks__items-qurbani-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.payment-status__qurbani-list li,
.donate-thanks__items-qurbani-list li {
    font-size: 0.92rem;
    color: var(--ink);
}
.payment-status__qurbani-father,
.donate-thanks__items-qurbani-father {
    color: var(--ink-soft);
    font-size: 0.85rem;
}
.donate-thanks__items-qurbani {
    flex-direction: column;
    align-items: flex-start;
}
.donate-thanks__items-qurbani-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

/* ==========================================================================
   Qurbani: additional UI introduced by the expert-suggestion rebuild
   --------------------------------------------------------------------------
   Adds: jump-links nav, summary bar, kind tabs + status chips, load-more
   collapse state, "Help complete these animals" feature row, privacy
   reassurance aside, 4-step process list, updates placeholder, FAQ
   accordion, mobile sticky checkout bar.
   ========================================================================== */

/* Jump-links nav: anchors to each main section. Sticky horizontal scroll
   on mobile so the donor can always tap a section name. */
.qurbani-jump {
    margin: var(--space-5) auto;
    padding: 0 var(--space-4);
}
.qurbani-jump__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    background: var(--cream);
    border-radius: 999px;
    border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
}
.qurbani-jump__link {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--forest);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.qurbani-jump__link:hover,
.qurbani-jump__link:focus-visible {
    background: color-mix(in srgb, var(--gold-soft) 60%, transparent 40%);
    outline: none;
}

/* Privacy reassurance aside on the order section. Sits between products
   and the dedication note so donors see it before checkout. */
.qurbani-order__privacy {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--moss, #eef3ea) 60%, var(--paper) 40%);
    border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
    border-radius: 0 10px 10px 0;
}
.qurbani-order__privacy-title {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
    font-weight: 700;
    color: var(--forest);
}
.qurbani-order__privacy p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.85;
}

/* "Help complete these animals" feature row. Visual emphasis (gold halo,
   bigger tile) so it reads as a stronger CTA than the main grid. */
.qurbani-nearly {
    padding: var(--space-7) var(--space-4);
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--gold-soft) 40%, transparent) 0%, transparent 60%),
        var(--paper);
    border-radius: var(--radius-sm);
    margin: var(--space-6) auto;
}
.qurbani-nearly__head {
    text-align: center;
    margin-bottom: var(--space-5);
}
.qurbani-nearly__sub {
    margin: var(--space-2) auto 0;
    max-width: 640px;
    color: var(--ink);
    opacity: 0.85;
    line-height: 1.55;
}
.qurbani-nearly__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}
/* Subtle highlight to differentiate from the main tracker. */
.qurbani-nearly__grid .qurbani-animal {
    box-shadow: 0 0 0 2px var(--gold), 0 4px 12px oklch(from var(--ink) l c h / 0.06);
}

/* Tracker summary bar: quick-glance progress numbers above the grid. */
.qurbani-board__summary {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--cream);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.06));
}
.qurbani-board__summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.qurbani-board__summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background: var(--paper);
    border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
    border-radius: 6px;
}
.qurbani-board__summary-item--meta {
    border-left-color: var(--forest);
}
.qurbani-board__summary-label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    opacity: 0.65;
}
.qurbani-board__summary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--forest);
}
.qurbani-board__summary-remaining {
    font-size: 0.8125rem;
    color: var(--ink);
    opacity: 0.7;
}

/* Tracker controls: two grouped filters (kind + status), side-by-side
   on desktop, stacked on mobile. Each group has a small uppercase label
   so donors immediately understand what each row of pills filters. */
.qurbani-board__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.06));
    box-shadow: 0 1px 3px oklch(from var(--ink) l c h / 0.04);
}
.qurbani-board__filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.qurbani-board__filter-group:first-child {
    padding-right: var(--space-4);
    border-right: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
}
.qurbani-board__filter-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.55;
}
.qurbani-board__tabs,
.qurbani-board__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.qurbani-board__tab,
.qurbani-board__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.14));
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease;
}
.qurbani-board__tab:hover,
.qurbani-board__chip:hover {
    border-color: var(--vermillion-text, var(--gold));
    color: var(--forest);
}
.qurbani-board__tab:focus-visible,
.qurbani-board__chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.qurbani-board__tab:active,
.qurbani-board__chip:active {
    transform: translateY(1px);
}
.qurbani-board__tab.is-active {
    background: var(--forest);
    color: var(--cream);
    border-color: var(--forest);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--forest) 35%, transparent);
}
.qurbani-board__chip.is-active {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Coloured dots on the status chips give the donor an at-a-glance
   legend that matches the colours used on the tiles themselves. */
.qurbani-board__chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px oklch(from var(--ink) l c h / 0.08);
}
.qurbani-board__chip-dot--available { background: var(--gold); }
.qurbani-board__chip-dot--nearly { background: #d97706; }
.qurbani-board__chip-dot--complete { background: var(--forest); }
/* When a chip is active, its dot stays distinguishable on the gold field. */
.qurbani-board__chip.is-active .qurbani-board__chip-dot {
    box-shadow: 0 0 0 1px oklch(from var(--ink) l c h / 0.18);
}

/* Animal wrapper: drives the status filter and load-more collapse. */
.qurbani-board__animal-wrap {
    display: contents;
}
.qurbani-board__animal-wrap[hidden] {
    display: none !important;
}
.qurbani-board__animal-wrap.is-collapsed {
    display: none;
}

.qurbani-board__load-more {
    display: block;
    margin: var(--space-4) auto 0;
}

/* Process section: editor-managed step cards on the dark forest band.
   The wider ``.qurbani-process`` wrapper is styled above. The grid uses
   one of three explicit column counts based on the step count so 3 / 4 /
   5 cards always render in a balanced row instead of leaving an orphan
   tile floating. ``--N`` modifier mirrors the editor's choice. */
.qurbani-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    counter-reset: qurbani-step;
}
.qurbani-process__steps--3 { grid-template-columns: repeat(3, 1fr); }
.qurbani-process__steps--4 { grid-template-columns: repeat(2, 1fr); }
.qurbani-process__steps--5 { grid-template-columns: repeat(5, 1fr); }
.qurbani-process__steps--6 { grid-template-columns: repeat(3, 1fr); }
.qurbani-process__step {
    position: relative;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--paper, var(--paper));
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 30px oklch(from var(--ink) l c h / 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.qurbani-process__step:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px oklch(from var(--ink) l c h / 0.22);
}
.qurbani-process__step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 60%, var(--forest) 40%) 100%);
    border-radius: 14px 14px 0 0;
}
.qurbani-process__step-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-3);
}
.qurbani-process__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--gold) 18%, var(--paper) 82%);
    color: var(--forest);
}
.qurbani-process__step-icon svg {
    width: 24px;
    height: 24px;
}
.qurbani-process__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--forest);
    color: var(--cream);
    font-weight: 800;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.qurbani-process__step-num::before {
    content: "STEP\00A0";
    font-weight: 600;
    opacity: 0.7;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}
.qurbani-process__step-title {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    color: var(--forest);
    font-weight: 700;
    line-height: 1.3;
}
.qurbani-process__step p {
    margin: 0;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.85;
    font-size: 0.9375rem;
}
@media (max-width: 900px) {
    .qurbani-process { padding: var(--space-7) 0; }
    .qurbani-process__steps,
    .qurbani-process__steps--3,
    .qurbani-process__steps--4,
    .qurbani-process__steps--5,
    .qurbani-process__steps--6 {
        grid-template-columns: 1fr;
    }
}

/* Updates / proof placeholder. Soft tile so it doesn't read as missing. */
.qurbani-updates {
    padding: var(--space-7) 0;
    background: var(--cream);
}
.qurbani-updates__placeholder {
    margin: var(--space-3) auto 0;
    max-width: 640px;
    text-align: center;
    padding: var(--space-5);
    border: 2px dashed var(--line, oklch(from var(--ink) l c h / 0.12));
    border-radius: var(--radius-sm);
    color: var(--ink);
    opacity: 0.7;
    line-height: 1.55;
}

/* FAQ accordion: native ``<details>`` styled to match the rest of the
   page. Soft expand affordance via the rotation indicator. */
.qurbani-faq {
    padding: var(--space-7) var(--space-4);
}
.qurbani-faq__list {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.qurbani-faq__item {
    background: var(--paper);
    border: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.qurbani-faq__item[open] {
    border-color: var(--vermillion-text, var(--gold));
}
.qurbani-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
    color: var(--forest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9375rem;
}
.qurbani-faq__item summary::-webkit-details-marker {
    display: none;
}
.qurbani-faq__item summary::after {
    content: "+";
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--vermillion-text, var(--gold));
    transition: transform 0.2s ease;
}
.qurbani-faq__item[open] summary::after {
    content: "−";
}
.qurbani-faq__item p {
    margin: 0;
    padding: 0 var(--space-4) var(--space-4);
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.85;
}

/* Mobile sticky checkout bar: hidden on desktop, pinned to the viewport
   bottom on small screens. Reveal handled in the mobile media query.
   Also force-hidden whenever the basket drawer is open so its CTAs don't
   bleed over the drawer's pay buttons. */
.qurbani-sticky-bar {
    display: none;
}
body.basket-drawer-open .qurbani-sticky-bar {
    display: none !important;
}

/* ============================================================
   MOBILE: Qurbani hero: compact dates strip, full-width CTA,
   inline trust pills, hide decorative figure. The conversion
   path (eyebrow → title → dates → countdown → CTA) should fit
   above the fold on a 6.1" phone.
   ============================================================ */

/* Full/short date variants. On desktop only the full form renders.
   Mobile media query below hides full + shows short. */
.qurbani-hero__date-value--short { display: none; }

@media (max-width: 640px) {
    .qurbani-hero {
        padding: clamp(1.2rem, 4vw, 2rem) 0;
    }

    /* The hero copy column needs min-width: 0 so its grid/flex
       children can shrink below their content min-width. Without this
       any nowrap child forces the whole column wider than the viewport
       and (because html { overflow-x: clip }) clips invisibly. */
    .qurbani-hero__copy,
    .qurbani-hero__inner {
        min-width: 0;
    }

    /* Hide the long date format, show the short one. */
    .qurbani-hero__date-value--full { display: none; }
    .qurbani-hero__date-value--short { display: inline; }

    /* Dates: collapse 3 stacked cards into one tight horizontal strip.
       minmax(0, 1fr) lets each cell shrink BELOW its content's natural
       min-width (which '1fr' alone refuses to do). Combined with the
       short date format and ellipsis below, cells fit any viewport. */
    .qurbani-hero__dates {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        margin: 0.85rem 0 1rem;
        border-radius: var(--radius-sm);
        border: 1px solid color-mix(in srgb, var(--forest, #15613b) 18%, transparent);
        overflow: hidden;
        background: var(--paper, #fbf6e9);
    }

    .qurbani-hero__dates li {
        padding: 0.55rem 0.4rem;
        background: transparent;
        border: 0;
        border-radius: 0;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .qurbani-hero__dates li + li {
        border-left: 1px solid color-mix(in srgb, var(--forest, #15613b) 14%, transparent);
    }

    .qurbani-hero__date-label {
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.1;
        color: var(--ink-soft, oklch(0.42 0.02 270));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qurbani-hero__date-value {
        font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.15;
        color: var(--forest, #15613b);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Headline: allow word wrap and let it break a too-long word
       rather than overflowing. Was being forced onto one line because
       the dates grid above made its parent wider than the viewport;
       even after the grid fix, defensive in case future content sets
       a min-width upstream. */
    .qurbani-hero__headline {
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
    }

    /* Countdown: keep but tighten lead text + tighter padding.
       grid-template-columns uses minmax(0, 1fr) so number cells
       can shrink rather than forcing the parent wider than viewport.
       Separators stay 'auto' (their content is one ':' character). */
    .qurbani-countdown {
        margin: 0.85rem 0;
        padding: 0.85rem 0.85rem;
        max-width: none;
        min-width: 0;
    }

    .qurbani-countdown__lead {
        font-size: 0.82rem;
        line-height: 1.35;
        overflow-wrap: break-word;
    }

    .qurbani-countdown__clock {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.25rem 0.4rem;
    }

    .qurbani-countdown__unit {
        min-width: 0;
    }

    .qurbani-countdown__num {
        font-size: 1.6rem;
    }

    .qurbani-countdown__sep {
        font-size: 1.2rem;
    }

    .qurbani-countdown__label {
        font-size: 0.56rem;
        letter-spacing: 0.08em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* CTA: full-width, bigger tap target, more visual weight. */
    .qurbani-hero__cta {
        margin-top: 0;
    }

    .qurbani-hero__cta .btn {
        display: flex;
        width: 100%;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        justify-content: center;
        border-radius: var(--radius-sm);
    }

    /* Trust signals: stack one per row at small mobile, so the long
       text wraps naturally and nothing gets clipped. 2-col grid was
       forcing each cell to fit ~30-char content inside ~170px which
       was clipping on narrow phones. */
    .qurbani-hero__trust {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin: 0.85rem 0 0;
        padding: 0;
        list-style: none;
    }

    .qurbani-hero__trust-item {
        font-size: 0.78rem;
        line-height: 1.35;
        gap: 0.5rem;
        align-items: flex-start;
        min-width: 0;
    }

    .qurbani-hero__trust-item svg {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .qurbani-hero__trust-item span {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Hide the decorative hero figure entirely on small screens.
       It's not load-bearing content; the typography + countdown +
       CTA carry the page. Saves ~280px of scroll height. */
    .qurbani-hero__figure {
        display: none;
    }

    /* Jump nav: was 'flex-wrap: nowrap; overflow-x: auto' which
       silently clipped 'Our process' off the right because html has
       overflow-x: clip. Switch to wrap so all tabs are visible across
       2 rows on narrow phones. */
    .qurbani-jump__list {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
    }

    .qurbani-jump__link {
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 5px 12px;
    }
}

@media (max-width: 900px) {
    .qurbani-hero { padding: var(--space-6) 0; }
    .qurbani-hero__inner { grid-template-columns: 1fr; gap: var(--space-4); }
    .qurbani-hero__figure--placeholder { aspect-ratio: 16 / 10; }
    .qurbani-board__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .qurbani-board__visual { width: 64px; height: 64px; }
    .qurbani-board__photo { width: 64px; height: 64px; }
    .qurbani-board__animal-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .qurbani-animal__visual { height: 96px; }
    .qurbani-animal__visual .qurbani-board__icon { width: 56px; height: 56px; }
    .qurbani-animal__cta .btn--sm { font-size: 0.74rem; padding: 8px 6px; }
    .qurbani-animal__ctas .qurbani-animal__cta:nth-child(n+2) .btn--sm {
        font-size: 0.7rem;
        padding: 6px 6px;
    }
    /* On mobile the popover has nowhere good to go above a tile near the
       top of the section, so it pins to the viewport. Sits above the sticky
       checkout bar and caps its height so a long sponsor list scrolls
       internally instead of bleeding off the screen. */
    .qurbani-animal__popover {
        position: fixed;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
        left: 16px;
        right: 16px;
        transform: none;
        max-width: none;
        min-width: 0;
        width: auto;
        max-height: 50vh;
        overflow-y: auto;
        z-index: 100;
    }
    .qurbani-animal__popover::before {
        content: none;
    }
    .basket-checkout__qurbani-row {
        grid-template-columns: 1fr;
    }
    .basket-checkout__qurbani-row-num {
        text-align: left;
        padding: 0 0 4px;
    }
    .basket-checkout__qurbani-row-fields {
        grid-template-columns: 1fr;
    }
    .basket-checkout__qurbani-privacy-opts {
        grid-template-columns: 1fr;
    }

    /* Mobile-only: show the sticky checkout bar pinned to the bottom of
       the viewport so the donor can always reach Order / Basket without
       scrolling back up the long landing page. The page reserves matching
       bottom padding so the bar never covers the last row of CTAs. */
    body:has(.qurbani-sticky-bar) {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    }
    .qurbani-sticky-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
        background: var(--paper);
        border-top: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
        box-shadow: 0 -4px 12px oklch(from var(--ink) l c h / 0.06);
    }
    .qurbani-sticky-bar__primary,
    .qurbani-sticky-bar__secondary {
        flex: 1;
        text-align: center;
        padding: 12px var(--space-3);
        font-weight: 700;
        font-size: 0.9375rem;
        text-decoration: none;
        border-radius: var(--radius-sm);
    }
    .qurbani-sticky-bar__primary {
        background: var(--gold);
        color: var(--ink);
    }
    .qurbani-sticky-bar__secondary {
        background: transparent;
        color: var(--forest);
        border: 1px solid var(--forest);
    }

    /* Mobile-friendly stack for the new feature row + smaller summary. */
    .qurbani-nearly__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .qurbani-board__summary-list {
        grid-template-columns: 1fr 1fr;
    }
    /* Stack the two filter groups vertically: the divider border
       only makes sense in the side-by-side desktop layout. */
    .qurbani-board__controls {
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }
    .qurbani-board__filter-group:first-child {
        padding-right: 0;
        border-right: none;
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--line, oklch(from var(--ink) l c h / 0.08));
    }
    .qurbani-jump__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
    }
    .qurbani-jump__link {
        white-space: nowrap;
    }

    /* Don't let the sticky bar cover the page footer when it's visible. */
    .qurbani-back {
        padding-bottom: calc(var(--space-8) + 64px);
    }
}

/* Wave 4: Zakat calculator (home-page block)
   ----------------------------------------------------------------------
   The compact home-page Zakat calculator. Lives in the homepage flow as
   a conversion tile, NOT a full landing page, so it has to read as
   confident-but-not-overwhelming and immediately invite a value-entry.
   Polished in Round 7 from a flat utility look to a softly-textured
   forest-and-gold card with a clearly elevated "Zakat due" hero number,
   a sticky summary, and gold-accent rail tying inputs to result. */
.zakat-calc {
    position: relative;
    padding: var(--space-8) 0;
    background:
        radial-gradient(1100px 420px at 50% -100px,
                        oklch(from var(--vermillion, var(--gold)) l c h / 0.10) 0%,
                        oklch(from var(--vermillion, var(--gold)) l c h / 0) 65%),
        linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    border-block: 1px solid oklch(from var(--ink) l c h / 0.08);
    overflow: hidden;
}
/* Subtle decorative chevron pulled from the brand pattern, anchored top-
   right so it never competes with the card. Pure cosmetic flourish. */
.zakat-calc::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%,
                                oklch(from var(--ink) l c h / 0.06) 0%,
                                oklch(from var(--ink) l c h / 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.zakat-calc__inner { position: relative; z-index: 1; max-width: 1080px; }
.zakat-calc__head { text-align: center; margin-bottom: var(--space-6); }
.zakat-calc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 12px;
    margin-bottom: var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vermillion-text, var(--gold));
    background: linear-gradient(135deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.16) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.06) 100%);
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
    border-radius: 999px;
    box-shadow: 0 2px 8px oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
}
.zakat-calc__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}
.zakat-calc__heading {
    margin-bottom: var(--space-2);
    color: var(--forest);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.18;
}
.zakat-calc__intro {
    max-width: 640px;
    margin: 0 auto;
    color: var(--ink);
    opacity: 0.85;
    line-height: 1.6;
}

/* The card itself: wrapping the inputs + summary. Layered shadow + tinted
   border give it more visual weight than a flat utility tile. */
.zakat-calc__body {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-6);
    background: var(--paper);
    border-radius: 22px;
    box-shadow:
        0 1px 0 oklch(from var(--paper) l c h / 0.6) inset,
        0 6px 18px rgba(15, 53, 50, 0.06),
        0 24px 60px rgba(15, 53, 50, 0.10);
    border: 1px solid oklch(from var(--ink) l c h / 0.10);
}

/* Inputs ---------------------------------------------------------- */
.zakat-calc__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
}
.zakat-calc__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9375rem;
}
.zakat-calc__field-label {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.875rem;
    letter-spacing: 0.005em;
}
.zakat-calc__field-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.16);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s ease,
                box-shadow 0.18s ease,
                background-color 0.18s ease,
                transform 0.18s ease;
    overflow: hidden;
}
.zakat-calc__field-wrap:hover {
    border-color: oklch(from var(--ink) l c h / 0.30);
    background: rgba(247, 244, 236, 0.6);
}
.zakat-calc__field-wrap:focus-within {
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 0 0 4px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    background: var(--paper);
}
.zakat-calc__field-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0 var(--space-2);
    background: linear-gradient(180deg, oklch(from var(--ink) l c h / 0.05) 0%, oklch(from var(--ink) l c h / 0.02) 100%);
    color: var(--forest);
    opacity: 0.85;
    font-weight: 700;
    font-size: 0.9375rem;
    border-right: 1px solid oklch(from var(--ink) l c h / 0.08);
    font-variant-numeric: tabular-nums;
}
.zakat-calc__field-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.zakat-calc__field-wrap input:focus { outline: none; }
.zakat-calc__field--liability .zakat-calc__field-prefix {
    background: linear-gradient(180deg, rgba(212, 95, 95, 0.10) 0%, rgba(212, 95, 95, 0.04) 100%);
    color: #a73838;
    border-right-color: rgba(212, 95, 95, 0.22);
}
.zakat-calc__field--liability .zakat-calc__field-label {
    color: #a73838;
    opacity: 0.92;
}
.zakat-calc__field--liability .zakat-calc__field-label::after { content: ""; }

/* Summary side-panel ---------------------------------------------- */
.zakat-calc__summary {
    padding: var(--space-5);
    background:
        linear-gradient(180deg, #fdfaf2 0%, #f7f1e1 100%);
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
    border-radius: var(--radius-sm);
    position: sticky;
    top: calc(var(--nav-height, 72px) + var(--space-3));
    box-shadow: 0 4px 14px oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
}
.zakat-calc__nisab {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) * 0.5);
    padding-bottom: var(--space-3);
    margin: 0 0 var(--space-3);
    border-bottom: 1px dashed oklch(from var(--ink) l c h / 0.18);
}
.zakat-calc__nisab-label {
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--forest);
    opacity: 0.72;
}
.zakat-calc__nisab-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vermillion-text, var(--gold));
    font-variant-numeric: tabular-nums;
    font-family: var(--font-en-display);
    letter-spacing: -0.01em;
}
.zakat-calc__nisab-note {
    font-size: 0.78rem;
    opacity: 0.72;
    color: var(--ink);
}
.zakat-calc__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.zakat-calc__rows > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.9375rem;
}
.zakat-calc__rows dt {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.78;
}
.zakat-calc__rows dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--forest);
}
.zakat-calc__rows-net {
    padding-top: var(--space-2);
    border-top: 1px dashed oklch(from var(--ink) l c h / 0.20);
}
.zakat-calc__rows-net dt { font-weight: 600; opacity: 1; }
.zakat-calc__rows-net dd {
    color: var(--forest);
    font-weight: 700;
    font-size: 1rem;
}

/* Hero "Zakat due" tile: dark forest with a gold burst behind the
   number to make the answer pop without overpowering the rest of the
   card. Note: this rule overrides the parent ``.zakat-calc__rows > div``
   flex layout (which is row-with-space-between) so the label STACKS on
   top of the number: the single most important figure on the page
   deserves to read like a hero, not like a table row. */
.zakat-calc__rows-result {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-4) var(--space-4);
    margin-top: var(--space-3);
    background:
        radial-gradient(140% 200% at 100% 0%,
                        oklch(from var(--vermillion, var(--gold)) l c h / 0.20) 0%,
                        oklch(from var(--vermillion, var(--gold)) l c h / 0) 55%),
        linear-gradient(135deg, var(--forest) 0%,
                        color-mix(in srgb, var(--forest) 78%, var(--ink) 22%) 100%);
    color: var(--cream);
    border-radius: var(--radius-sm);
    font-size: 1.0625rem;
    box-shadow:
        0 1px 0 oklch(from var(--paper) l c h / 0.08) inset,
        0 8px 24px rgba(15, 53, 50, 0.28);
    overflow: hidden;
}
.zakat-calc__rows-result::before {
    content: "ZAKAT 2.5%";
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: oklch(from var(--vermillion, var(--gold)) l c h / 0.85);
    opacity: 0.9;
}
.zakat-calc__rows-result dt,
.zakat-calc__rows-result dd { color: var(--cream); opacity: 1; }
.zakat-calc__rows-result dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.86;
    margin-bottom: 4px;
}
.zakat-calc__rows-result dd {
    font-variant-numeric: tabular-nums;
}
.zakat-calc__rows-result strong {
    display: inline-block;
    color: var(--vermillion-text, var(--gold));
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-en-display);
    line-height: 1.05;
    text-shadow: 0 2px 12px oklch(from var(--vermillion, var(--gold)) l c h / 0.35);
}

/* Status pill ----------------------------------------------------- */
.zakat-calc__nisab-status {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.zakat-calc__nisab-status--eligible {
    background: rgba(46, 125, 50, 0.12);
    color: #1f5e22;
    border: 1px solid rgba(46, 125, 50, 0.28);
}
.zakat-calc__nisab-status--below {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.16);
    color: #5a4419;
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}

/* CTA + see-more --------------------------------------------------- */
.zakat-calc__cta-form { margin: 0; }
.zakat-calc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    text-align: center;
    margin-top: var(--space-3);
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.zakat-calc__cta:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px oklch(from var(--vermillion, var(--gold)) l c h / 0.36);
}
.zakat-calc__cta:disabled,
.zakat-calc__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    transform: none;
}
.zakat-calc__see-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: var(--space-3);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--forest);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s ease, gap 0.15s ease;
}
.zakat-calc__see-more:hover {
    opacity: 1;
    gap: 8px;
    text-decoration: underline;
}

@media (max-width: 800px) {
    .zakat-calc__body { grid-template-columns: 1fr; padding: var(--space-4); }
    .zakat-calc__summary { position: static; }
    .zakat-calc__inputs { grid-template-columns: 1fr; }
    .zakat-calc__rows-result strong { font-size: 1.75rem; }
}

/* Wave 4: Donation ticker */
.donation-ticker { padding: var(--space-8) 0; background: linear-gradient(180deg, var(--forest) 0%, color-mix(in srgb, var(--forest) 85%, var(--ink) 15%) 100%); color: var(--cream); }
.donation-ticker__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.donation-ticker__copy { padding: var(--space-3) 0; }
.donation-ticker__heading { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 var(--space-3); color: var(--cream); }
.donation-ticker__tagline { font-size: 1rem; line-height: 1.6; opacity: 0.85; margin: 0; }
.donation-ticker__figure { padding: var(--space-5); background: oklch(from var(--paper) l c h / 0.08); border: 1px solid oklch(from var(--paper) l c h / 0.12); border-radius: var(--radius-sm); text-align: center; }
.donation-ticker__total { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); font-variant-numeric: tabular-nums; margin: 0 0 var(--space-2); }
.donation-ticker__currency { font-size: 1rem; opacity: 0.75; letter-spacing: 0.04em; }
.donation-ticker__amount { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--vermillion-text, var(--gold)); line-height: 1; }
.donation-ticker__donors { margin: 0 0 var(--space-4); opacity: 0.85; }
.donation-ticker__goal { margin: var(--space-3) 0; }
.donation-ticker__goal-bar { width: 100%; height: 10px; background: oklch(from var(--paper) l c h / 0.12); border-radius: 999px; overflow: hidden; }
.donation-ticker__goal-fill { display: block; height: 100%; background: var(--gold); transition: opacity 0.6s ease; }
.donation-ticker__goal-label { margin: calc(var(--space-1) * 0.75) 0 0; font-size: 0.875rem; opacity: 0.85; }
.donation-ticker__goal-target { opacity: 0.7; }
.donation-ticker__cta { margin-top: var(--space-3); }
@media (max-width: 800px) {
    .donation-ticker__inner { grid-template-columns: 1fr; }
}

/* Wave 4: Sponsor rotator */
.sponsor-rotator { padding: var(--space-8) 0; }
.sponsor-rotator__head { text-align: center; margin-bottom: var(--space-5); }
.sponsor-rotator__sub { max-width: 540px; margin: var(--space-2) auto 0; opacity: 0.85; line-height: 1.6; }
.sponsor-rotator__list { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.sponsor-rotator__list > li { scroll-snap-align: start; }
.sponsor-rotator__list.slick-initialized { display: block; overflow: visible; padding-bottom: 0; }
.sponsor-rotator__list.slick-initialized .sponsor-card { margin: 0 var(--space-2); }
.sponsor-rotator__cta { margin-top: var(--space-5); text-align: center; }
.sponsor-card { flex: 0 0 auto; width: 280px; padding: var(--space-4); background: var(--cream); border: 1px solid oklch(from var(--ink) l c h / 0.06); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.sponsor-card--placeholder { opacity: 0.7; }
.sponsor-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; overflow: hidden; }
.sponsor-card__photo { width: 100%; height: 100%; object-fit: cover; }
.sponsor-card__name { font-weight: 600; margin: 0; }
.sponsor-card__detail { font-size: 0.875rem; margin: 0; opacity: 0.85; }
.sponsor-card__pledge { display: inline-block; padding: calc(var(--space-1) * 0.5) var(--space-2); background: oklch(from var(--vermillion, var(--gold)) l c h / 0.16); color: var(--vermillion-text, var(--gold)); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; margin: 0; }
.sponsor-card__quote { font-size: 0.875rem; font-style: italic; line-height: 1.5; margin: var(--space-2) 0 0; opacity: 0.9; border-left: 0; }

/* Wave 4: Hijri countdown */
.hijri-countdown { padding: var(--space-8) 0; }
.hijri-countdown--forest { background: var(--forest); color: var(--cream); }
.hijri-countdown--ink { background: var(--ink); color: var(--cream); }
.hijri-countdown--cream { background: var(--cream); color: var(--ink); }
.hijri-countdown__inner { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-5); align-items: center; }
.hijri-countdown__eyebrow { color: var(--vermillion-text, var(--gold)); margin-bottom: var(--space-2); }
.hijri-countdown__heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 var(--space-2); line-height: 1.15; }
.hijri-countdown--forest .hijri-countdown__heading,
.hijri-countdown--ink .hijri-countdown__heading { color: var(--cream); }
.hijri-countdown__hijri { font-size: 1rem; opacity: 0.85; margin: 0 0 var(--space-3); letter-spacing: 0.04em; }
.hijri-countdown__body { font-size: 1rem; line-height: 1.6; opacity: 0.9; margin-bottom: var(--space-4); }
.hijri-countdown__body p { margin: 0 0 var(--space-2); }
.hijri-countdown__cta { margin-top: var(--space-2); }
.hijri-countdown__clock { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-5); background: oklch(from var(--paper) l c h / 0.08); border: 1px solid oklch(from var(--paper) l c h / 0.12); border-radius: var(--radius-sm); text-align: center; }
.hijri-countdown--cream .hijri-countdown__clock { background: var(--paper); border-color: oklch(from var(--ink) l c h / 0.08); }
.hijri-countdown__unit { display: flex; flex-direction: column; gap: calc(var(--space-1) * 0.5); }
.hijri-countdown__value { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; color: var(--vermillion-text, var(--gold)); font-variant-numeric: tabular-nums; line-height: 1; }
.hijri-countdown__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.hijri-countdown__status { grid-column: 1 / -1; margin: 0; padding: var(--space-2); background: var(--gold); color: var(--ink); border-radius: 6px; font-weight: 600; }
.hijri-countdown__date { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; opacity: 0.75; }
@media (max-width: 800px) {
    .hijri-countdown__inner { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Nisab eligibility wizard
   -----------------------------------------------------------------------
   Lives on the Zakat page above the calculator. Five panels animate
   in/out via [data-step] toggles (driven by static/js/nisab-wizard.js).
   Visually a polished card with a step strip on top and a verdict
   panel at the end. Tones match the rest of the donations surface:
   forest + gold accents on cream.
   ----------------------------------------------------------------------- */
.nisab-wizard {
    padding: var(--space-7) 0 var(--space-8);
    background:
        radial-gradient(1200px 400px at 50% -10%, oklch(from var(--vermillion, var(--gold)) l c h / 0.12), transparent 60%),
        linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 100%);
    border-block: 1px solid oklch(from var(--ink) l c h / 0.08);
}

.nisab-wizard__inner {
    max-width: 880px;
}

.nisab-wizard__head {
    text-align: center;
    margin-bottom: var(--space-5);
}

.nisab-wizard__eyebrow {
    display: inline-block;
    padding: 4px 14px;
    margin-bottom: var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.32);
    border-radius: 999px;
}

.nisab-wizard__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-en-display);
    color: var(--forest);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    line-height: var(--lh-snug);
}

.nisab-wizard__lead {
    max-width: 600px;
    margin: 0 auto;
    color: var(--ink-soft);
    line-height: var(--lh-normal);
    font-size: var(--fs-body);
}

/* --- Step strip ---------------------------------------------------- */
/* Four-step progress strip. Each pill carries a step name + a short
   description so the donor can see the whole journey at a glance.
   Pills span the full wizard width so the descriptions get room to
   breathe; on narrow viewports they collapse to a name-only mini
   indicator. */
.nisab-wizard__progress {
    list-style: none;
    margin: 0 auto var(--space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 880px;
    counter-reset: step;
}

.nisab-wizard__progress li {
    counter-increment: step;
    position: relative;
    padding: 12px 12px 12px 48px;
    min-height: 64px;
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.1);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.nisab-wizard__progress li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(from var(--ink) l c h / 0.06);
    color: var(--ink-soft);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__progress-name {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.nisab-wizard__progress-desc {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
    opacity: 0.78;
}

.nisab-wizard__progress li.is-active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--cream);
    box-shadow: 0 6px 18px oklch(from var(--ink) l c h / 0.18);
}

.nisab-wizard__progress li.is-active::before {
    background: var(--gold);
    color: var(--ink);
}

.nisab-wizard__progress li.is-done {
    background: oklch(from var(--ink) l c h / 0.08);
    border-color: oklch(from var(--ink) l c h / 0.2);
    color: var(--forest);
}

.nisab-wizard__progress li.is-done::before {
    content: "✓";
    background: var(--forest);
    color: var(--cream);
}

/* --- Card + panels ------------------------------------------------- */
.nisab-wizard__panels {
    background: var(--paper);
    border-radius: var(--radius-sm);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    box-shadow: 0 16px 40px oklch(from var(--ink) l c h / 0.1);
    padding: var(--space-5);
}

.nisab-wizard__panel {
    display: none;
    animation: nisab-fade 260ms var(--ease-out) both;
}

.nisab-wizard__panel.is-active {
    display: block;
}

@keyframes nisab-fade {
    /* Opacity-only, no transform. Even an identity translateY(0)
       leaves the panel with a non-none transform after the animation
       ends, which creates a containing block and traps any
       position:fixed children (the sticky pay bar) inside the panel
       instead of letting them pin to the viewport. */
    from { opacity: 0; }
    to   { opacity: 1; }
}

.nisab-wizard__panel-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-en-display);
    color: var(--forest);
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem);
    line-height: var(--lh-snug);
    outline: none;
}

.nisab-wizard__panel-hint {
    margin: 0 0 var(--space-4);
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: var(--lh-normal);
}

.nisab-wizard__panel-foot {
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: var(--lh-normal);
}

/* --- Radio choices ------------------------------------------------- */
.nisab-wizard__choices {
    display: grid;
    gap: 10px;
}

.nisab-wizard__choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.nisab-wizard__choice:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.05);
}

.nisab-wizard__choice:has(input:checked) {
    border-color: var(--forest);
    background: oklch(from var(--ink) l c h / 0.04);
    box-shadow: 0 6px 18px oklch(from var(--ink) l c h / 0.1);
}

.nisab-wizard__choice:has(input:focus-visible) {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.nisab-wizard__choice input {
    margin: 4px 0 0;
    accent-color: var(--forest);
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    cursor: pointer;
}

.nisab-wizard__choice-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.nisab-wizard__choice-body strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: var(--lh-snug);
}

.nisab-wizard__choice-body small {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: var(--lh-normal);
}

/* --- Number inputs ------------------------------------------------- */
.nisab-wizard__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95rem;
}

.nisab-wizard__field > span {
    font-weight: 500;
    color: var(--ink);
}

.nisab-wizard__field-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border: 1.5px solid oklch(from var(--ink) l c h / 0.16);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.nisab-wizard__field-wrap:focus-within {
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
}

.nisab-wizard__field-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 var(--space-3);
    background: oklch(from var(--ink) l c h / 0.04);
    color: var(--ink);
    opacity: 0.85;
    font-weight: 600;
    border-right: 1px solid oklch(from var(--ink) l c h / 0.08);
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__field-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__field-wrap input:focus {
    outline: none;
}

/* --- Result panel -------------------------------------------------- */
.nisab-wizard__panel--result {
    text-align: left;
}

/* Verdict panel: manuscript chapter-head treatment (2026-05).
   The previous version used a forest gradient on the .is-due state
   (forest is banished per DESIGN.md) and tinted the amount in
   gold-light against a dark surface, which on mobile + with the
   donor's local theme rendered as a hard red number on green -
   exactly the wrong signal for a positive Zakat-due verdict.

   New treatment: paper surface throughout, vermillion display
   amount, sepia marginalia, gold-leaf hairlines. Vermillion is the
   chapter-head accent the brand reserves for the Zakat-due verdict
   moment, so the amount finally reads as positive emphasis. */
.nisab-wizard__verdict {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
    margin: 0 0 var(--space-4);
    background: var(--paper);
    border: 0;
    border-top: 1px solid oklch(from var(--gold-leaf) l c h / 0.55);
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.55);
    border-radius: 0;
}

/* Zakat-due: the moment vermillion exists for. No surface change,
   just amplify the accents. */
.nisab-wizard__verdict.is-due {
    background: var(--paper);
    color: var(--ink);
    border-top-color: oklch(from var(--vermillion) l c h / 0.5);
    border-bottom-color: oklch(from var(--vermillion) l c h / 0.5);
}
.nisab-wizard__verdict.is-due .nisab-wizard__verdict-title {
    color: var(--ink);
}
.nisab-wizard__verdict.is-due .nisab-wizard__verdict-body {
    color: var(--ink-soft);
}

/* Below-nisab clear state: same paper surface, gold-leaf hairlines. */
.nisab-wizard__verdict.is-clear {
    background: var(--paper);
    border-top-color: oklch(from var(--gold-leaf) l c h / 0.55);
    border-bottom-color: oklch(from var(--gold-leaf) l c h / 0.55);
}

/* Info / pre-calculation: same surface, dimmer hairlines. */
.nisab-wizard__verdict.is-info {
    background: var(--paper);
    border-top-color: oklch(from var(--ink) l c h / 0.1);
    border-bottom-color: oklch(from var(--ink) l c h / 0.1);
}

.nisab-wizard__verdict-emoji {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 4px;
}

/* Title: manuscript display serif in ink (was forest). Sits between
   the small-caps marginalia pill above and the vermillion amount
   below. */
.nisab-wizard__verdict-title {
    margin: 0;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 32rem;
}

/* Mobile breathing room: keep the verdict comfortable on a phone
   without letting the amount overflow horizontally and without
   crushing the pay-mode toggle into a one-line scroll. */
@media (max-width: 540px) {
    .nisab-wizard__verdict {
        padding: 1.5rem 1rem;
        gap: 0.75rem;
    }
    .nisab-wizard__verdict-amount {
        gap: 0.75rem;
    }
    .nisab-wizard__verdict-amount-value {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }
    .nisab-wizard__pay-mode {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 22rem;
    }
    .nisab-wizard__pay-mode-btn {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 0.85rem 1rem;
    }
    .nisab-wizard__pay-mode-btn:last-child {
        border-bottom: 0;
    }
}

.nisab-wizard__verdict-body {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: var(--lh-normal);
    max-width: 560px;
}

/* --- Visual nisab meter -------------------------------------------- */
/* Horizontal track showing the donor's net wealth as a needle, with
   tick markers at the silver and gold nisab thresholds. The fill
   colour shifts from neutral → amber → green as wealth crosses each
   threshold. Tick positions are written by JS as CSS custom
   properties (--nisab-meter-silver, --nisab-meter-gold) so the bar
   re-flows correctly for any currency / spot-price combination. The
   needle's inset-inline-start is set inline by JS and animates
   smoothly via a CSS transition.

   This visual is the wizard's signature "above/below" affordance -
   no other UK Zakat charity offers it. */
.nisab-wizard__meter {
    margin: var(--space-4) 0 var(--space-5);
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream-light) 100%);
    border: 1px solid oklch(from var(--ink) l c h / 0.1);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px oklch(from var(--ink) l c h / 0.06);
}

.nisab-wizard__meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    flex-wrap: wrap;
}

.nisab-wizard__meter-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.nisab-wizard__meter-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--forest);
    font-family: var(--font-en-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.nisab-wizard__meter-track {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background: oklch(from var(--ink) l c h / 0.08);
    margin: 0 0 var(--space-4);
    overflow: visible;
}

.nisab-wizard__meter-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(192, 138, 26, 0.85), rgba(15, 122, 76, 0.85));
    transition: opacity 420ms var(--ease-out), background 240ms var(--ease-out);
}

/* State-driven fill colours. Empty = grey, below silver = soft amber,
   above silver = amber→green ramp, above gold = pure green. */
.nisab-wizard__meter.is-empty .nisab-wizard__meter-fill {
    background: oklch(from var(--ink) l c h / 0.18);
}
.nisab-wizard__meter.is-below-silver .nisab-wizard__meter-fill {
    background: linear-gradient(90deg, rgba(192, 138, 26, 0.85), oklch(from var(--vermillion, var(--gold)) l c h / 0.85));
}
.nisab-wizard__meter.is-above-silver .nisab-wizard__meter-fill {
    background: linear-gradient(90deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.9), rgba(15, 122, 76, 0.85));
}
.nisab-wizard__meter.is-above-gold .nisab-wizard__meter-fill {
    background: linear-gradient(90deg, rgba(15, 122, 76, 0.9), oklch(from var(--ink) l c h / 0.95));
}

/* Silver / gold tick markers: vertical lines on the track with a
   short label hovering above. Position is driven by inline CSS
   custom properties set by JS. */
.nisab-wizard__meter-tick {
    position: absolute;
    inset-block-start: -8px;
    inset-block-end: -8px;
    width: 2px;
    border-radius: 2px;
    pointer-events: none;
}

.nisab-wizard__meter-tick--silver {
    inset-inline-start: var(--nisab-meter-silver, 0%);
    background: #b8b8c4;
    box-shadow: 0 0 0 1px oklch(from var(--paper) l c h / 0.6);
}

.nisab-wizard__meter-tick--gold {
    inset-inline-start: var(--nisab-meter-gold, 100%);
    background: var(--gold);
    box-shadow: 0 0 0 1px oklch(from var(--paper) l c h / 0.6);
}

.nisab-wizard__meter-tick-label {
    /* Position the SILVER / GOLD tick labels BELOW the track, not
       above. The previous `inset-block-end: calc(100% + 4px)` placed
       them in the same vertical band as the meter heading "Where
       your wealth sits", and at narrow widths the badges overlapped
       the heading text. Below-the-track keeps them in the dedicated
       caption space and reads as a tick legend. */
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    background: var(--cream-light);
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid oklch(from var(--ink) l c h / 0.1);
}

.nisab-wizard__meter-tick--silver .nisab-wizard__meter-tick-label {
    color: #6c6c7a;
}
.nisab-wizard__meter-tick--gold .nisab-wizard__meter-tick-label {
    color: #8a6614;
}

/* Needle: the donor's wealth marker. Sits above the track with a
   stem that pierces it, plus a soft halo so it stands out when the
   fill colour matches. */
.nisab-wizard__meter-needle {
    position: absolute;
    inset-block-start: -10px;
    inset-block-end: -10px;
    inset-inline-start: 0;
    width: 0;
    transform: translateX(-50%);
    transition: inset-inline-start 480ms var(--ease-out);
    pointer-events: none;
}

.nisab-wizard__meter-needle::before {
    content: "";
    position: absolute;
    inset-block-start: 12px;
    inset-block-end: 12px;
    inset-inline-start: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--forest);
    border-radius: 2px;
    box-shadow: 0 0 0 2px oklch(from var(--paper) l c h / 0.85);
}

.nisab-wizard__meter-needle-dot {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--forest);
    border: 3px solid var(--paper);
    border-radius: 999px;
    box-shadow: 0 4px 10px oklch(from var(--ink) l c h / 0.32);
}

.nisab-wizard__meter.is-empty .nisab-wizard__meter-needle {
    opacity: 0.35;
}

.nisab-wizard__meter-caption {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: var(--lh-normal);
    text-align: center;
}

.nisab-wizard__meter.is-above-gold .nisab-wizard__meter-caption,
.nisab-wizard__meter.is-above-silver .nisab-wizard__meter-caption {
    color: var(--ink);
}

@media (max-width: 720px) {
    .nisab-wizard__meter {
        padding: var(--space-3);
    }
    .nisab-wizard__meter-amount {
        font-size: 1.2rem;
    }
    .nisab-wizard__meter-tick-label {
        font-size: 0.65rem;
        padding: 1px 5px;
    }
}

/* --- Dual-standard nisab comparison -------------------------------- */
/* Two side-by-side cards (Gold standard / Silver standard) showing how
   the donor's net wealth compares to each threshold. The active card
   (matching page.nisab_basis) carries an "In use" badge. The verdict
   row colours green/red depending on whether the donor is above or
   below that specific threshold; if no figures yet, both cards
   render in a muted "empty" state so the layout stays anchored. */
.nisab-wizard__nisab-compare {
    margin: var(--space-5) 0 var(--space-4);
    padding: var(--space-4);
    background: rgba(245, 240, 226, 0.35);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: var(--radius-sm);
}

.nisab-wizard__nisab-compare-head {
    margin: 0 0 var(--space-3);
}

.nisab-wizard__nisab-compare-head h4 {
    margin: 0 0 6px;
    color: var(--forest);
    font-size: 1.05rem;
    font-weight: 700;
}

.nisab-wizard__nisab-compare-head p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: var(--lh-normal);
    max-width: 720px;
}

.nisab-wizard__nisab-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.nisab-wizard__nisab-card {
    position: relative;
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.12);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px oklch(from var(--ink) l c h / 0.04);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.nisab-wizard__nisab-card.is-above {
    border-color: rgba(15, 122, 76, 0.35);
    box-shadow: 0 6px 18px rgba(15, 122, 76, 0.12);
}

.nisab-wizard__nisab-card.is-below {
    border-color: oklch(from var(--ink) l c h / 0.12);
}

.nisab-wizard__nisab-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.nisab-wizard__nisab-card-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.nisab-wizard__nisab-card-title {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
}

.nisab-wizard__nisab-card-default {
    flex: 0 0 auto;
    background: var(--gold);
    color: var(--ink);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nisab-wizard__nisab-card-formula {
    margin: 0 0 6px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__nisab-card-threshold {
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 8px 12px;
    background: oklch(from var(--ink) l c h / 0.04);
    border-radius: var(--radius-sm);
}

.nisab-wizard__nisab-card-threshold-label {
    font-size: 0.78rem;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.nisab-wizard__nisab-card-threshold-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__nisab-card-verdict {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.nisab-wizard__nisab-card-verdict-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: oklch(from var(--ink) l c h / 0.25);
    flex: 0 0 auto;
}

.nisab-wizard__nisab-card-verdict.is-above {
    color: var(--forest);
    font-weight: 600;
}

.nisab-wizard__nisab-card-verdict.is-above .nisab-wizard__nisab-card-verdict-dot {
    background: var(--ink);
}

.nisab-wizard__nisab-card-verdict.is-below {
    color: var(--ink-soft);
}

.nisab-wizard__nisab-card-verdict.is-below .nisab-wizard__nisab-card-verdict-dot {
    background: #c08a1a;
}

.nisab-wizard__nisab-card-zakat {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 8px 12px;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
}

.nisab-wizard__nisab-card-zakat-label {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.nisab-wizard__nisab-card-zakat strong {
    font-size: 1rem;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.nisab-wizard__nisab-compare-foot {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px dashed oklch(from var(--ink) l c h / 0.12);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-style: italic;
    line-height: var(--lh-normal);
}

@media (max-width: 720px) {
    .nisab-wizard__nisab-cards {
        grid-template-columns: 1fr;
    }
    .nisab-wizard__nisab-compare {
        padding: var(--space-3);
    }
}

/* --- "Where your Zakat goes" allocation tile ---------------------- */
/* Visual breakdown of the calculated Zakat across the madrasa's
   funding categories. Each row carries its share via inline
   --alloc-pct (0–100), so editors can rebalance from the template
   without touching JS. The bar fill width is driven by the same
   variable, which keeps mark-up + visualisation in lock-step. */
.nisab-wizard__allocation {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream-light) 100%);
    border: 1px solid oklch(from var(--ink) l c h / 0.1);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px oklch(from var(--ink) l c h / 0.06);
}

.nisab-wizard__allocation-head {
    margin: 0 0 var(--space-3);
}

.nisab-wizard__allocation-head h4 {
    margin: 0 0 6px;
    color: var(--forest);
    font-size: 1.05rem;
    font-weight: 700;
}

.nisab-wizard__allocation-head p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: var(--lh-normal);
    max-width: 720px;
}

.nisab-wizard__allocation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nisab-wizard__allocation-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.nisab-wizard__allocation-row.is-empty {
    opacity: 0.65;
}

.nisab-wizard__allocation-row:hover {
    box-shadow: 0 6px 16px oklch(from var(--ink) l c h / 0.08);
}

.nisab-wizard__allocation-icon {
    font-size: 1.5rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    border-radius: var(--radius-sm);
}

.nisab-wizard__allocation-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nisab-wizard__allocation-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.25;
}

.nisab-wizard__allocation-meta {
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.2;
}

.nisab-wizard__allocation-bar {
    display: block;
    height: 6px;
    background: oklch(from var(--ink) l c h / 0.08);
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
}

.nisab-wizard__allocation-bar-fill {
    display: block;
    height: 100%;
    width: var(--alloc-pct, 0%);
    background: linear-gradient(90deg, var(--gold) 0%, var(--ink) 100%);
    border-radius: 999px;
    transition: opacity 480ms var(--ease-out);
}

.nisab-wizard__allocation-amount {
    font-weight: 800;
    color: var(--forest);
    font-size: 1rem;
    font-family: var(--font-en-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nisab-wizard__allocation-row.is-empty .nisab-wizard__allocation-amount {
    color: var(--ink-soft);
}

.nisab-wizard__allocation-foot {
    margin: var(--space-3) 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-style: italic;
    line-height: var(--lh-normal);
}

@media (max-width: 540px) {
    .nisab-wizard__allocation-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon body"
            "amount amount";
        gap: 10px;
        padding: 12px;
    }
    .nisab-wizard__allocation-icon { grid-area: icon; }
    .nisab-wizard__allocation-body { grid-area: body; }
    .nisab-wizard__allocation-amount {
        grid-area: amount;
        text-align: right;
        border-top: 1px dashed oklch(from var(--ink) l c h / 0.12);
        padding-top: 8px;
    }
}

/* --- Share button copied state ----------------------------------- */
.nisab-wizard__cta.is-copied {
    background: rgba(15, 122, 76, 0.12);
    border-color: rgba(15, 122, 76, 0.3);
    color: var(--ink);
}

/* --- Breakdown table ---------------------------------------------- */
.nisab-wizard__breakdown {
    display: grid;
    gap: 8px;
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: var(--cream-light);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: var(--radius-sm);
}

.nisab-wizard__breakdown > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.95rem;
}

.nisab-wizard__breakdown dt {
    margin: 0;
    color: var(--ink-soft);
}

.nisab-wizard__breakdown dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ink);
}

.nisab-wizard__breakdown-net {
    padding-top: var(--space-2);
    border-top: 1px dashed oklch(from var(--ink) l c h / 0.2);
    font-weight: 600;
}

.nisab-wizard__breakdown-net dt,
.nisab-wizard__breakdown-net dd {
    color: var(--ink);
    font-weight: 600;
}

.nisab-wizard__breakdown-result {
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-soft) 100%);
    color: var(--cream);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px oklch(from var(--ink) l c h / 0.18);
    font-size: 1.05rem;
}

.nisab-wizard__breakdown-result dt,
.nisab-wizard__breakdown-result dd {
    color: var(--cream);
}

.nisab-wizard__breakdown-result strong {
    color: var(--gold-light);
    font-size: 1.15rem;
    font-family: var(--font-en-display);
    font-weight: 600;
}

/* --- Result CTA buttons ------------------------------------------ */
.nisab-wizard__result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.nisab-wizard__cta {
    flex: 0 1 auto;
    min-width: 240px;
}

/* --- Navigation footer --------------------------------------------- */
.nisab-wizard__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid oklch(from var(--ink) l c h / 0.08);
}

.nisab-wizard__nav-btn {
    min-width: 110px;
}

.nisab-wizard__nav-next {
    margin-inline-start: auto;
}

.nisab-wizard__nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Mobile -------------------------------------------------------- */
@media (max-width: 720px) {
    /* Sticky Back/Next on mobile so donors don't have to scroll
       through the asset list to find them. Pinned to the bottom of
       the viewport with a translucent backdrop. On step 4 the pay
       bar takes over: `:has(.nisab-wizard__panel--result.is-active)`
       drops the stickiness so the nav doesn't fight the pay bar. */
    .nisab-wizard__nav {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin-top: var(--space-3);
        margin-inline: calc(-1 * var(--space-4));
        padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 252, 242, 0.95);
        border-top: 1px solid oklch(from var(--ink) l c h / 0.10);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .nisab-wizard:has(.nisab-wizard__panel--result.is-active) .nisab-wizard__nav {
        position: static;
        margin-inline: 0;
        padding: 0;
        background: transparent;
        border-top: 1px solid oklch(from var(--ink) l c h / 0.08);
        padding-top: var(--space-4);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nisab-wizard__nav-btn {
        min-width: 0;
        flex: 1 1 0;
    }
    .nisab-wizard {
        padding: var(--space-6) 0 var(--space-7);
    }
    .nisab-wizard__panels {
        padding: var(--space-4);
        padding-bottom: 80px;  /* leave room for sticky nav */
    }
    .nisab-wizard__progress {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .nisab-wizard__progress li {
        padding: 10px 6px 10px 34px;
        min-height: 56px;
    }
    .nisab-wizard__progress-name {
        font-size: 0.76rem;
    }
    .nisab-wizard__progress-desc {
        font-size: 0.66rem;
    }
    .nisab-wizard__progress li::before {
        inset-inline-start: 6px;
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    .nisab-wizard__cta {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    /* On phones, the descriptions become fluff: collapse to a
       compact, vertical pill with just the step name above the
       step number. */
    .nisab-wizard__progress li {
        padding: 10px 4px 8px;
        text-align: center;
    }
    .nisab-wizard__progress li::before {
        position: static;
        transform: none;
        margin: 0 auto 4px;
        display: flex;
    }
    .nisab-wizard__progress-desc {
        display: none;
    }
}

/* ==========================================================================
   Wizard: unified calculator extensions (Round 3)
   --------------------------------------------------------------------------
   The wizard now contains the whole zakat calculator step-by-step. Below
   are the styles for the new pieces: paired eligibility radios, category
   checkbox cards, live running totals, per-category asset detail cards,
   the status pill, and the embedded Pay CTA.
   ========================================================================== */

/* The wizard now renders inside the page flow as the primary calculator
   so we let it span wider and align with the page hero. */
.nisab-wizard__inner {
    max-width: 1080px;
}

/* --- Step 1: paired fieldsets ------------------------------------- */
.nisab-wizard__fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-4);
}
.nisab-wizard__fieldset:last-of-type {
    margin-bottom: 0;
}
.nisab-wizard__fieldset-legend {
    display: block;
    margin: 0 0 var(--space-2);
    padding: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: var(--lh-snug);
}

/* --- Step 2: category checkbox cards ------------------------------ */
.nisab-wizard__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.nisab-wizard__category-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px;
    background: var(--paper);
    border: 1.5px solid oklch(from var(--ink) l c h / 0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.nisab-wizard__category-card input {
    /* Visually hidden but still focusable: the visible state lives on
       the card itself via :has(input:checked). Keeps the radio/check
       icon on the right consistent with the MATW reference design. */
    position: absolute;
    inset-inline-start: 8px;
    inset-block-start: 8px;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    appearance: none;
}

.nisab-wizard__category-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    font-size: 1.55rem;
    line-height: 1;
}

.nisab-wizard__category-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nisab-wizard__category-body strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: var(--lh-snug);
}

.nisab-wizard__category-body small {
    font-size: 0.8125rem;
    color: var(--muted);
    line-height: var(--lh-normal);
}

.nisab-wizard__category-check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: oklch(from var(--ink) l c h / 0.06);
    color: transparent;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.nisab-wizard__category-check svg {
    width: 16px;
    height: 16px;
}

.nisab-wizard__category-card:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px oklch(from var(--vermillion, var(--gold)) l c h / 0.18),
                0 0 0 6px oklch(from var(--vermillion, var(--gold)) l c h / 0.08);
}

.nisab-wizard__category-card:has(input:checked):hover {
    box-shadow: 0 12px 24px oklch(from var(--ink) l c h / 0.18),
                0 0 0 6px oklch(from var(--ink) l c h / 0.06);
}

.nisab-wizard__category-card:has(input:checked) {
    border-color: var(--forest);
    background: linear-gradient(180deg, oklch(from var(--ink) l c h / 0.04), oklch(from var(--ink) l c h / 0.08));
    box-shadow: 0 8px 22px oklch(from var(--ink) l c h / 0.12);
}

.nisab-wizard__category-card:has(input:checked) .nisab-wizard__category-check {
    background: var(--forest);
    color: var(--cream);
    transform: scale(1.05);
}

.nisab-wizard__category-card:has(input:checked) .nisab-wizard__category-icon {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.22);
}

.nisab-wizard__category-card:has(input:focus-visible) {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* --- Live running totals (steps 3-5) ------------------------------ */
.nisab-wizard__live-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin: 0 0 var(--space-3);
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-soft, #1a4f3d) 100%);
    color: var(--cream);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 22px oklch(from var(--ink) l c h / 0.18);
    transition: box-shadow 0.18s ease;
}

/* JS-pinned variant. We dropped CSS `position: sticky` in favour of a
   scroll-handler that toggles `.is-pinned` because sticky kept failing
   silently: `overflow-x: clip` on html/body, transformed ancestors,
   nested grid contexts, etc., all break sticky in different browsers.
   JS pin always works.

   When pinned, JavaScript writes inline `width` + `left` so the strip
   keeps its natural width and horizontal position rather than collapsing
   to its fixed-element auto-width. A sibling sentinel (inserted by the
   same JS) fills the strip's vacated layout space so content below
   doesn't jump up. */
.nisab-wizard__live-totals.is-pinned {
    position: fixed;
    /* Stack BELOW both the utility bar (36px) AND the site nav
       (var(--nav-height)). The previous offset only counted the nav,
       leaving the strip hidden behind the utility bar. */
    top: calc(var(--utility-bar-height, 0px) + var(--nav-height, 72px) + 8px);
    /* Below the site-nav (z 40), above category cards / FAQs. */
    z-index: 30;
    /* Same padding as the non-pinned strip: the previous 30px made the
       pinned variant easily 2× the height of the inline one and ate too
       much viewport real-estate, especially on tablet. */
    padding: 10px 16px;
    /* Slightly heavier shadow when floating to give the strip air. */
    box-shadow: 0 14px 32px oklch(from var(--ink) l c h / 0.28);
}

.nisab-wizard__live-totals-sentinel {
    /* Sized via inline style by the pin handler. */
    margin: 0 0 var(--space-4);
}

/* Each row is now an inline pair: label · value, sitting on a single
   horizontal strip. Replaces the previous stacked layout that ate
   60px per row. */
.nisab-wizard__live-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.nisab-wizard__live-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: oklch(from var(--paper) l c h / 0.78);
    line-height: 1;
    white-space: nowrap;
}

.nisab-wizard__live-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-en-display);
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.nisab-wizard__live-row--net .nisab-wizard__live-value {
    color: var(--gold-light, #e8d28e);
}

.nisab-wizard__live-status {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: oklch(from var(--paper) l c h / 0.92);
}
.nisab-wizard__live-status:empty {
    display: none;
}

/* When the math engine (zakat-page.js) flips the status into either the
   "eligible" or "below-nisab" state, it ALSO swaps the className wholesale
   to ``zakat-page__nisab-status zakat-page__nisab-status--eligible``. The
   pale-green/cream pill that styling produces is fine on the white
   ``ZakatPage__summary`` background, but in the wizard it sits inside the
   DARK forest live-totals strip: a pale pill with dark-green text on a
   dark-green parent reads as broken/illegible. We override here so any
   nisab status pill INSIDE the live-totals strip wears a high-contrast
   inverted treatment instead. We also need the layout grid-column rule
   to stick after the className swap, otherwise the pill collapses into
   the totals grid as a stray third column. */
.nisab-wizard__live-totals .zakat-page__nisab-status,
.nisab-wizard__live-totals [data-zakat-page-status] {
    /* Status as a tiny inline pill on the right of the strip. The JS
       writes a short verdict ("Above nisab: Zakat due" / "Below
       nisab") with the full sentence kept in aria-label for SR. */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 10px 3px 8px;
    font-size: 0.7rem;
    line-height: 1.2;
    border-radius: 999px;
    font-weight: 700;
    background: oklch(from var(--paper) l c h / 0.10);
    border: 1px solid oklch(from var(--paper) l c h / 0.20);
    color: oklch(from var(--paper) l c h / 0.95);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
/* Coloured dot prefix: green for above nisab, dim for below. */
.nisab-wizard__live-totals .zakat-page__nisab-status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: oklch(from var(--paper) l c h / 0.50);
    flex: 0 0 6px;
}
.nisab-wizard__live-totals .zakat-page__nisab-status--eligible::before {
    background: var(--gold-light, #f0d98a);
    box-shadow: 0 0 0 2px oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
}
.nisab-wizard__live-totals .zakat-page__nisab-status--below::before {
    background: oklch(from var(--paper) l c h / 0.55);
}
/* When zakat-so-far is hidden (donor below nisab / no figures yet),
   the status pill takes the rightmost slot. */
.nisab-wizard__live-zakat[hidden] + .zakat-page__nisab-status,
.nisab-wizard__live-zakat[hidden] + [data-zakat-page-status] {
    margin-left: auto;
}
.nisab-wizard__live-totals .zakat-page__nisab-status--eligible {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.50);
    color: var(--gold-light, #f0d98a);
    font-weight: 600;
}
.nisab-wizard__live-totals .zakat-page__nisab-status--below {
    background: oklch(from var(--paper) l c h / 0.08);
    border-color: oklch(from var(--paper) l c h / 0.22);
    color: oklch(from var(--paper) l c h / 0.92);
}
/* Empty state: hide the pill chrome so an empty status doesn't show
   as a hollow pill once the class has been swapped by the math engine. */
.nisab-wizard__live-totals .zakat-page__nisab-status:empty,
.nisab-wizard__live-totals [data-zakat-page-status]:empty {
    display: none;
}

/* "Zakat so far" pill: appears in the running-totals strip the moment
   the donor enters any wealth. Gold accent so it reads as the "answer"
   line, distinct from the white-text Net wealth row above it. Inspired
   by Islamic Relief's inline-running calc. */
/* Zakat-so-far inline pill on the right of the strip: same horizontal
   row as the totals. Was a full-width row at 36px tall. */
.nisab-wizard__live-zakat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    margin: 0 0 0 auto;
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.4);
    border-radius: 999px;
    color: var(--gold-light, #e8d28e);
    animation: nisab-zakat-pop 320ms var(--ease-out) both;
}

.nisab-wizard__live-zakat[hidden] {
    display: none;
}

.nisab-wizard__live-zakat-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(from var(--paper) l c h / 0.85);
    line-height: 1;
}

.nisab-wizard__live-zakat-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gold-light, #e8d28e);
    font-family: var(--font-en-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

@keyframes nisab-zakat-pop {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .nisab-wizard__live-totals {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
    }
    /* Don't pin on small viewports: the strip is already short enough,
       and pinning eats too much vertical real estate. */
    .nisab-wizard__live-totals.is-pinned {
        position: static !important;
        box-shadow: 0 8px 22px oklch(from var(--ink) l c h / 0.18);
        width: auto !important;
        left: auto !important;
    }
    .nisab-wizard__live-totals-sentinel {
        display: none !important;
    }
    .nisab-wizard__live-row--net {
        grid-column: 1 / -1;
        padding-top: var(--space-2);
        border-top: 1px solid oklch(from var(--paper) l c h / 0.18);
    }
    .nisab-wizard__live-value {
        font-size: 1.05rem;
    }
}

/* --- Step 3 + 4: per-category asset cards ------------------------- */
.nisab-wizard__asset-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nisab-wizard__asset-group {
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    animation: nisab-fade 220ms var(--ease-out) both;
}

.nisab-wizard__asset-group--liabilities {
    border-color: rgba(185, 83, 42, 0.2);
    background: linear-gradient(180deg, var(--paper), rgba(185, 83, 42, 0.04));
}

.nisab-wizard__asset-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed oklch(from var(--ink) l c h / 0.12);
}

.nisab-wizard__asset-icon {
    font-size: 1.55rem;
    line-height: 1;
    flex: 0 0 auto;
}

.nisab-wizard__asset-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-en-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--forest);
    line-height: 1.2;
}

.nisab-wizard__asset-total {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--forest);
    font-size: 1rem;
    padding: 4px 10px;
    background: oklch(from var(--ink) l c h / 0.08);
    border-radius: 999px;
}
.nisab-wizard__asset-total--neg {
    color: #b9532a;
    background: rgba(185, 83, 42, 0.1);
}

.nisab-wizard__asset-hint {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--muted);
    line-height: var(--lh-normal);
}

.nisab-wizard__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-3);
}
@media (max-width: 600px) {
    .nisab-wizard__fields { grid-template-columns: 1fr; }
}

.nisab-wizard__num-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
}
.nisab-wizard__num-field--span2 {
    grid-column: 1 / -1;
}
.nisab-wizard__num-field > span {
    font-weight: 500;
    color: var(--ink);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.nisab-wizard__num-wrap {
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border: 1.5px solid rgba(15, 53, 50, 0.14);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.nisab-wizard__num-wrap:hover {
    border-color: rgba(15, 53, 50, 0.28);
}
.nisab-wizard__num-wrap:focus-within {
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.22);
    background: #fffdf6;
}
.nisab-wizard__num-prefix,
.nisab-wizard__num-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    background: oklch(from var(--ink) l c h / 0.04);
    color: var(--ink);
    opacity: 0.85;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.nisab-wizard__num-prefix {
    border-right: 1px solid oklch(from var(--ink) l c h / 0.08);
}
.nisab-wizard__num-suffix {
    border-left: 1px solid oklch(from var(--ink) l c h / 0.08);
}
.nisab-wizard__num-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.nisab-wizard__num-wrap input:focus {
    outline: none;
}

/* --- Per-karat gold + silver grid (2026-05) ----------------------
   Most UK Asian donors carry 22k jewellery, not 24k spot. A single
   gold-grams input forced them to either over-value at 24k rates or
   do the 91.6% maths themselves. This grid lets them split weight
   by purity (24k / 22k / 18k / silver .999) and the existing wizard
   JS multiplies each row's grams by its data-zakat-rate-per-gram -
   no JS changes needed.

   Layout: 2-col desktop ledger, 1-col mobile. Each row has the
   karat label (with live per-gram rate as small sepia caption)
   above an input that inherits the .nisab-wizard__num-wrap chrome
   so the karat rows feel identical to other fields. The fallback
   ("Or, if you've already priced it") sits below the grid behind
   a 1px dashed gold-leaf rule: a manuscript paragraph break, not
   a card boundary. */
.nisab-wizard__karat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.nisab-wizard__karat-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    cursor: pointer;
}

.nisab-wizard__karat-label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--ink);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

.nisab-wizard__karat-label strong {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.nisab-wizard__karat-label small {
    margin-inline-start: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sepia, var(--muted));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.nisab-wizard__karat-fallback {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed oklch(from var(--gold-leaf, var(--gold, #c9a96a)) l c h / 0.35);
}

.nisab-wizard__karat-fallback > span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sepia, var(--muted));
}

@media (max-width: 600px) {
    .nisab-wizard__karat-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .nisab-wizard__karat-label {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .nisab-wizard__karat-label small {
        margin-inline-start: auto;
    }
}

/* --- Step 5: verdict pill + amount (manuscript chapter-head pattern) ----
   Verdict pill is now small-caps sepia marginalia, not a coloured chip.
   Amount is vermillion display serif on paper: the chapter-head
   moment vermillion exists for in this brand. */
.nisab-wizard__verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 var(--space-2);
    background: transparent;
    color: var(--sepia);
    border: 0;
    border-radius: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.nisab-wizard__verdict-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.7;
}
.nisab-wizard__verdict-pill.is-due {
    color: var(--vermillion-text);
}
.nisab-wizard__verdict-pill.is-due .nisab-wizard__verdict-pill-dot {
    background: var(--vermillion);
    opacity: 1;
    box-shadow: none;
}
.nisab-wizard__verdict-pill.is-clear {
    color: var(--sepia);
}
.nisab-wizard__verdict-pill.is-clear .nisab-wizard__verdict-pill-dot {
    background: var(--gold-leaf);
    opacity: 1;
}
.nisab-wizard__verdict-pill.is-info {
    color: var(--ink-soft);
}
.nisab-wizard__verdict-pill.is-info .nisab-wizard__verdict-pill-dot {
    background: var(--ink-soft);
    opacity: 0.6;
}
/* The dark-surface override is no longer needed: the surface is
   always paper now, but keep the selectors silent in case other
   templates reference .is-due nesting. */
.nisab-wizard__verdict.is-due .nisab-wizard__verdict-pill.is-due {
    background: transparent;
    color: var(--vermillion-text);
}
.nisab-wizard__verdict.is-due .nisab-wizard__verdict-pill.is-due .nisab-wizard__verdict-pill-dot {
    background: var(--vermillion);
    box-shadow: none;
}

/* Amount block: no card, no border, no fill. Just the number,
   given room to breathe. */
.nisab-wizard__verdict-amount {
    margin-top: var(--space-3);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 32rem;
}
.nisab-wizard__verdict.is-due .nisab-wizard__verdict-amount {
    background: transparent;
}

.nisab-wizard__verdict-amount-label {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--sepia);
}
.nisab-wizard__verdict-amount-value {
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(2.6rem, 1.8rem + 5vw, 4.5rem);
    font-weight: 300;
    color: var(--vermillion-text);
    line-height: 0.98;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.1em;
}
.nisab-wizard__verdict-amount-currency {
    font-size: 0.6em;
    opacity: 0.9;
}
.nisab-wizard__verdict-amount-meta {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-soft);
    text-align: center;
    max-width: 32rem;
}
/* Monthly equivalent: same scale + colour as the annual lump. The
   "/month" suffix sits to the right as ink-soft so the eye still
   anchors on the number. */
.nisab-wizard__verdict-amount-value--monthly .nisab-wizard__verdict-amount-suffix {
    font-size: 0.3em;
    font-weight: 500;
    color: var(--ink-soft);
    margin-inline-start: 0.2em;
    letter-spacing: 0.01em;
    text-transform: lowercase;
}
.nisab-wizard__verdict-amount-meta--monthly [data-nisab-end-date] {
    font-weight: 600;
    color: var(--ink);
}

/* Confidentiality reassurance: quiet sepia caption on paper, no
   pill chrome. The dark-surface version was over-decorated for what
   is essentially a one-line footnote. */
.nisab-wizard__verdict-confidentiality {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 32rem;
    text-align: left;
}
.nisab-wizard__verdict-confidentiality svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--gold-leaf);
    opacity: 0.9;
}
.nisab-wizard__verdict-confidentiality > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Monthly-mode lockup ------------------------------------------ */
/* Replaces the percentage picker (Full / 50% / 25% / 10% / Custom)
   when the donor flips to "12 monthly instalments": paying part of
   your Zakat over twelve charges makes no sense (it's already split),
   so the picker collapses to a single confirmation row that mirrors
   the visual weight of the picker it replaces.

   The lockup sits inside ``.nisab-wizard__pay-sticky`` which is cream
   in light mode and dark green in dark mode, so the default text
   colour has to be DARK (legible on cream) and we rescope to light
   text in the dark-mode block further down. The first published
   version inherited the dark-panel-only colour (rgba(245,238,223,…))
   which made the row invisible on the live light-theme site. */
.nisab-wizard__monthly-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
    border: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
    border-radius: var(--radius-sm);
    color: var(--ink, #1f2a23);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}
.nisab-wizard__monthly-lockup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.20);
    color: var(--gold-dark, #8a6d20);
}
.nisab-wizard__monthly-lockup-text {
    flex: 1 1 auto;
}
@media (max-width: 480px) {
    .nisab-wizard__monthly-lockup {
        padding: 10px 12px;
        font-size: 0.86rem;
    }
}
/* Dark-mode rescope: the pay-sticky bar swaps to a dark green panel,
   so flip the lockup to light cream text + a subtle gold-tinted bg. */
html[data-theme="dark"] .nisab-wizard__monthly-lockup {
    background: rgba(232, 210, 142, 0.08);
    border-color: rgba(232, 210, 142, 0.32);
    color: oklch(from var(--paper) l c h / 0.92);
}
html[data-theme="dark"] .nisab-wizard__monthly-lockup-icon {
    background: rgba(232, 210, 142, 0.18);
    color: var(--gold-light, #e8d28e);
}

/* Pay button suffix: appended after the amount when in monthly
   mode: "Pay £10,417 /mo for 12 months →". */
.nisab-wizard__pay-btn-suffix {
    font-weight: 600;
    opacity: 0.78;
}

/* --- Pay-mode toggle (annual vs monthly) -------------------------- */
/* Two-button pill that swaps the verdict-amount line between the
   annual lump (default) and the 12-monthly equivalent. The actual
   basket-add still POSTs the annual amount; monthly recurrence is
   set up at checkout. */
/* Legacy pay-mode pill rules: superseded by the manuscript-grammar
   version further down. Kept as no-ops so any cached editor preview
   or third-party CSS that pinned the old class set degrades cleanly. */
.nisab-wizard__pay-mode {
    /* Visual handled by the later .nisab-wizard__pay-mode rule below. */
}
.nisab-wizard__pay-mode-detail {
    margin: 0.85rem auto 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.82rem;
    color: var(--ink-soft);
    text-align: center;
    max-width: 32rem;
    line-height: 1.55;
}
.nisab-wizard__pay-mode-detail span {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   Sticky pay panel (step 4)
   --------------------------
   Compact bar pinned full-width to the viewport bottom. Donors choose
   what percentage of their calculated zakat to pay now (Full / 50 / 25
   / 10 / Custom) and tap Pay. Designed to take ~25% of mobile screen,
   not dominate it. Edge-to-edge so it reads as a system-level pay
   bar (think mobile checkout / cart drawer), not a card.
   ---------------------------------------------------------------------- */
/* Mobile (default): full-width bottom sheet pinned to the viewport
   edge. The Birmingham iPhone after Maghrib expects this pattern -
   it matches every native checkout / cart sheet she's seen. */
.nisab-wizard__pay-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 252, 242, 0.97) 0%, rgba(252, 248, 237, 0.97) 100%);
    border: 0;
    border-top: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 22px oklch(from var(--ink) l c h / 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Step 4 needs bottom padding equal to the bar height so the closing
   content (allocation footer, Save/Print actions) isn't permanently
   trapped underneath. ~150px covers the bar + a comfortable gap. */
.nisab-wizard__panel--result {
    padding-bottom: 170px;
}

/* The picker + form should sit inside the page's container width so
   the chips don't stretch edge-to-edge on big monitors, but the
   surrounding bar still fills the viewport. */
.nisab-wizard__pay-sticky > .nisab-wizard__amount-picker,
.nisab-wizard__pay-sticky > .nisab-wizard__pay-form {
    max-width: 720px;
    margin-inline: auto;
}

/* Desktop (≥720px): float the bar: drop the edge-to-edge bottom-sheet
   treatment and detach the bar from the viewport edges. On a 1700px
   monitor the old full-width treatment read as a phone tab bar with
   acres of empty horizontal void around a 600px button. Now the bar
   is a compact 720px floating dock centred above the bottom edge,
   framed by a gold-leaf hairline and lifted with a soft level-2
   shadow. The Pay button drops from 100% width to auto so it sits
   centred inside the bar instead of stretching to the edges.

   The blur backdrop is allowed here per DESIGN.md ("sticky nav blur
   is the only legitimate one"): this IS the chrome that pattern was
   carved out for. */
@media (min-width: 720px) {
    .nisab-wizard__pay-sticky {
        left: 50%;
        right: auto;
        bottom: clamp(16px, 2vw, 28px);
        transform: translateX(-50%);
        width: calc(100% - 48px);
        max-width: 720px;
        padding: 14px 18px;
        border: 1px solid oklch(from var(--gold-leaf) l c h / 0.55);
        border-radius: var(--radius-sm);
        box-shadow:
            0 1px 2px oklch(from var(--ink) l c h / 0.04),
            0 24px 60px oklch(from var(--ink) l c h / 0.18);
    }

    /* Pay button: don't stretch full-width inside the floating bar.
       Constrain so it reads as a button, not a banner. Inherits the
       .btn--primary styling but overrides the .btn--full width:100%. */
    .nisab-wizard__pay-sticky .nisab-wizard__pay-btn {
        width: auto;
        min-width: 280px;
        max-width: 100%;
        margin-inline: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4em;
    }

    /* Tighten the result-panel bottom padding on desktop. The floating
       bar sits 16-28px above the viewport edge + is shorter than the
       mobile version, so 170px of padding is too generous. */
    .nisab-wizard__panel--result {
        padding-bottom: 200px;
    }
}

/* On very wide screens (1280px+) lift the bar a little more so it
   doesn't kiss the bottom of expansive monitors. */
@media (min-width: 1280px) {
    .nisab-wizard__pay-sticky {
        bottom: 32px;
    }
}

/* Amount-picker: single row of 5 small chips + a tiny info disclosure. */
.nisab-wizard__amount-picker {
    margin: 0 0 8px;
}
.nisab-wizard__amount-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0 2px;
}
.nisab-wizard__amount-picker-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nisab-wizard__amount-picker-info {
    position: relative;
    line-height: 1;
}
.nisab-wizard__amount-picker-info > summary {
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    padding: 2px;
}
.nisab-wizard__amount-picker-info > summary::-webkit-details-marker {
    display: none;
}
.nisab-wizard__amount-picker-info > summary:hover {
    color: var(--vermillion-text, var(--gold));
}
.nisab-wizard__amount-picker-info[open] > summary {
    color: var(--vermillion-text, var(--gold));
}
.nisab-wizard__amount-picker-info > p {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    width: min(260px, 80vw);
    margin: 0;
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.16);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px oklch(from var(--ink) l c h / 0.12);
    z-index: 2;
}
.nisab-wizard__amount-chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}
.nisab-wizard__amount-chip {
    padding: 7px 4px;
    border: 1.5px solid oklch(from var(--ink) l c h / 0.18);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--forest-deep);
    cursor: pointer;
    text-align: center;
    line-height: 1.1;
    transition: border-color 0.12s ease, background 0.12s ease;
    min-width: 0;
    /* Without these, "Custom" wraps mid-word at narrow widths and the
       second line sits outside the chip border. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nisab-wizard__amount-chip:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
}
.nisab-wizard__amount-chip.is-active {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    box-shadow: inset 0 0 0 1px var(--gold);
}
.nisab-wizard__amount-custom {
    margin: 8px 0 0;
}
.nisab-wizard__amount-custom-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--paper);
}
.nisab-wizard__amount-custom-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    color: var(--forest-deep);
    font-weight: 600;
    font-size: 0.92rem;
    border-right: 1px solid oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
}
.nisab-wizard__amount-custom input {
    flex: 1 1 auto;
    border: 0;
    padding: 8px 10px;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    width: 100%;
    min-width: 0;
}
.nisab-wizard__amount-custom input:focus {
    outline: none;
}

/* Below ~480px the 5-up chip row gets uncomfortably tight ("Custom"
   needs ~60px and the 5 chips can't share 280px-ish without ellipsing).
   Drop the 10% chip from view; the Custom chip still lets donors enter
   that amount manually. Also tighten font and padding so "Custom" fits
   in a 60-65px chip without clipping. */
@media (max-width: 480px) {
    .nisab-wizard__amount-chips {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .nisab-wizard__amount-chip {
        font-size: 0.78rem;
        padding: 7px 2px;
    }
    .nisab-wizard__amount-chip[data-nisab-amount-fraction="0.1"] {
        display: none;
    }
}

/* Dark-mode rescope for the sticky pay panel + picker. */
html[data-theme="dark"] .nisab-wizard__pay-sticky {
    background: linear-gradient(180deg, rgba(15, 28, 22, 0.92) 0%, rgba(11, 23, 17, 0.92) 100%);
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
    box-shadow: 0 12px 28px oklch(from var(--ink) l c h / 0.45);
}
html[data-theme="dark"] .nisab-wizard__amount-picker-label {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__amount-picker-of {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__amount-picker-of [data-zakat-page-result] {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__amount-chip {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: oklch(from var(--paper) l c h / 0.18);
}
html[data-theme="dark"] .nisab-wizard__amount-chip strong {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__amount-chip:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
}
html[data-theme="dark"] .nisab-wizard__amount-chip.is-active {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__amount-chip.is-active strong {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__amount-custom-wrap {
    background: oklch(from var(--paper) l c h / 0.04);
}
html[data-theme="dark"] .nisab-wizard__amount-custom-prefix {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__amount-custom input {
    color: var(--ink);
}

.nisab-wizard__pay-form {
    margin: 0;
    padding: 0;
}
.nisab-wizard__pay-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    text-align: center;
    border: 0;
    cursor: pointer;
    width: 100%;
    padding: 11px 16px !important;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0 !important;
}
.nisab-wizard__pay-btn-label {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nisab-wizard__pay-btn:disabled,
.nisab-wizard__pay-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.nisab-wizard__pay-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nisab-wizard__pay-supporting {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--muted);
    line-height: var(--lh-normal);
}

/* Tightening the result panel breakdown: the new flow shows per-cat
   rows up top, totals row, then the highlighted "Zakat due" callout.
   Per-cat rows are dimmer so the eye finds the result first. */
.nisab-wizard__breakdown > div[data-nisab-breakdown-row] dt,
.nisab-wizard__breakdown > div[data-nisab-breakdown-row] dd {
    color: var(--ink-soft);
    font-size: 0.875rem;
}
.nisab-wizard__breakdown > div[data-nisab-breakdown-row] dt span[aria-hidden] {
    margin-inline-end: 6px;
}

/* --- Mobile tweaks for the new pieces ----------------------------- */
@media (max-width: 720px) {
    .nisab-wizard__categories {
        grid-template-columns: 1fr;
    }
    .nisab-wizard__category-card {
        grid-template-columns: auto 1fr auto;
        padding: 12px 14px;
    }
    .nisab-wizard__category-icon {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }
    .nisab-wizard__asset-group {
        padding: var(--space-3);
    }
    .nisab-wizard__asset-head {
        gap: var(--space-2);
        flex-wrap: wrap;
    }
    .nisab-wizard__asset-total {
        order: 3;
        margin-inline-start: auto;
    }
    .nisab-wizard__verdict-amount-value {
        font-size: 2rem;
    }
}

/* --- Print styles: Save / print this calculation ----------------- */
@media print {
    body * {
        visibility: hidden;
    }
    .nisab-wizard,
    .nisab-wizard * {
        visibility: visible;
    }
    .nisab-wizard {
        position: absolute;
        inset: 0;
        background: var(--paper) !important;
        padding: 0 !important;
    }
    .nisab-wizard__progress,
    .nisab-wizard__nav,
    .nisab-wizard__panel:not(.is-active),
    .nisab-wizard__result-actions,
    .nisab-wizard__pay-form,
    .nisab-wizard__live-totals {
        display: none !important;
    }
    .nisab-wizard__panels {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .nisab-wizard__verdict {
        background: #f7f4ec !important;
        color: #111 !important;
    }
    .nisab-wizard__verdict.is-due .nisab-wizard__verdict-title {
        color: #111 !important;
    }
}

/* ===================================================================
   Dark theme: activated by data-theme="dark" on <html>.
   "Candlelight reading": deep ink-blue page, cream type, vermillion
   preserved for chapter heads. Manuscript palette inverted, not a
   generic dark-mode flip.
   =================================================================== */
html[data-theme="dark"] {
    /* Type swaps to paper-cream against a deep candlelit indigo page. */
    --ink: oklch(0.94 0.01 80);
    --ink-soft: oklch(0.78 0.012 75);
    --ink-faint: oklch(0.62 0.015 270);
    --muted: oklch(0.66 0.04 55);
    /* Paper variants → candlelight indigo. */
    --paper: oklch(0.18 0.02 265);
    --paper-deep: oklch(0.13 0.02 270);
    --paper-edge: oklch(0.10 0.02 270);
    /* Legacy alias slots: `cream` was a surface; map to elevated candlelight. */
    --cream: oklch(0.22 0.03 268);
    --cream-light: oklch(0.25 0.025 268);
    --cream-2: oklch(0.25 0.025 268);
    --cream-3: oklch(0.22 0.03 268);
    /* `forest` slot stays the brand voice colour: was indigo on light, becomes
       paper-cream on dark so existing text/accent rules (color: var(--forest))
       remain legible against the candlelight ground. */
    --forest: oklch(0.94 0.01 80);
    --forest-deep: oklch(0.78 0.012 75);
    --forest-soft: oklch(0.66 0.04 55);
    /* Vermillion preserved (chapter heads stay loud). Slightly desaturated so
       the contrast against deep indigo doesn't vibrate. */
    --vermillion: oklch(0.62 0.16 32);
    /* Text-weight vermillion for the candlelight surface (~6:1 on paper
       L 0.18). The light value L 0.48 measured ~2.6:1 here. */
    --vermillion-text: oklch(0.70 0.15 32);
    --vermillion-deep: oklch(0.52 0.15 30);
    --vermillion-soft: oklch(0.30 0.10 32);
    /* Legacy `gold` alias also points at vermillion in dark mode. */
    --gold: oklch(0.62 0.16 32);
    --gold-light: oklch(0.30 0.10 32);
    --gold-soft: oklch(0.25 0.08 32);
    --ochre: oklch(0.62 0.16 32);
    --ochre-deep: oklch(0.52 0.15 30);
    /* Sepia + gold-leaf hairlines brighten slightly in candlelight. */
    --sepia: oklch(0.66 0.04 55);
    --sepia-soft: oklch(0.55 0.04 55);
    --gold-leaf: oklch(0.78 0.10 75);
    --gold-leaf-bright: oklch(0.85 0.13 80);
    /* Functional state colours (rare). */
    --success: oklch(0.65 0.12 155);
    --success-soft: oklch(0.30 0.06 155);
    --warning: oklch(0.72 0.12 70);
    --danger: oklch(0.62 0.16 25);
    --red: oklch(0.62 0.16 25);
    --brick: oklch(0.62 0.16 25);
    /* Hairlines + shadows. */
    --rule: oklch(from var(--gold-leaf) l c h / 0.5);
    --line: oklch(from var(--ink) l c h / 0.14);
    --line-dark: oklch(from var(--ink) l c h / 0.22);
    --shadow: 0 2px 16px oklch(0.05 0.02 270 / 0.45);
    --shadow-sm: 0 1px 3px oklch(0.05 0.02 270 / 0.40);
    --shadow-md: 0 6px 18px oklch(0.05 0.02 270 / 0.45);
    --shadow-lg: 0 18px 48px oklch(0.05 0.02 270 / 0.55);
    color-scheme: dark;
}

html, body {
    background: var(--paper);
    color: var(--ink);
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

/* Theme toggle button: sits in the site nav next to the search/cart icons. */
.theme-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
    background: var(--cream);
    border-color: var(--vermillion-text, var(--gold));
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.theme-toggle svg {
    width: 20px;
    height: 20px;
}
.theme-toggle .theme-toggle__icon-sun { display: none; }
.theme-toggle .theme-toggle__icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .theme-toggle__icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-toggle__icon-moon { display: none; }

/* -------------------------------------------------------------------
   Dark theme: structural overrides for elements with hardcoded
   light backgrounds. The token swap above handles anything that
   already references CSS variables; these rules catch the rest.
   ------------------------------------------------------------------- */
html[data-theme="dark"] .site-nav {
    background: rgba(13, 24, 20, 0.92);
}

/* Cards across the site default to white in light mode; lift them
   onto the cream-elevation surface so they read as panels instead
   of cutouts in the dark palette. */
html[data-theme="dark"] .trust-pillar,
html[data-theme="dark"] .sponsor-tier,
html[data-theme="dark"] .alumni-card,
html[data-theme="dark"] .impact-stat,
html[data-theme="dark"] .testimonial,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .donate-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .donor-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .qurbani-share-tile,
html[data-theme="dark"] .qurbani-animal-tile,
html[data-theme="dark"] .product-tile,
html[data-theme="dark"] .basket-drawer__panel,
html[data-theme="dark"] .basket-checkout,
html[data-theme="dark"] .zakat-calculator,
html[data-theme="dark"] .nisab-wizard,
html[data-theme="dark"] .ways-tile,
html[data-theme="dark"] .scholar-anchor,
html[data-theme="dark"] .home-block--about_tile .about-tile,
html[data-theme="dark"] .home-block--money_split,
html[data-theme="dark"] .home-block--sadaqah_jariyah,
html[data-theme="dark"] .home-block--zakat_calculator,
html[data-theme="dark"] .home-block--trust_pillars .trust-pillar,
html[data-theme="dark"] .home-block--sponsor_tiers .sponsor-tier,
html[data-theme="dark"] .home-block--faq .faq-item,
html[data-theme="dark"] .home-block--testimonial,
html[data-theme="dark"] .home-block--scholar_anchor {
    background: var(--cream);
    color: var(--ink);
}

/* Form inputs render as dark trays with light text. */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--cream-light);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
}

/* Lang switcher and utility-bar light variants need lifting too. */
html[data-theme="dark"] .lang-switch,
html[data-theme="dark"] .site-utility-bar--light {
    background: var(--cream);
    color: var(--ink);
}

/* Always-dark surfaces (footer, donate CTA, monthly callout) keep
   their light-on-dark design even in dark theme. Re-scope --cream
   and --ink inside these components to the light cream values so
   every descendant that uses var(--cream) for "text on dark
   surface" keeps reading as light. */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .donate-cta-block,
html[data-theme="dark"] .site-utility-bar--dark,
html[data-theme="dark"] .cookie-consent,
html[data-theme="dark"] .basket-drawer__head,
html[data-theme="dark"] .prayer-city__hero,
html[data-theme="dark"] .prayer-tile.is-next,
html[data-theme="dark"] .about-promise,
html[data-theme="dark"] .education-sponsor,
html[data-theme="dark"] .donate-impact {
    --cream: oklch(0.94 0.01 80);
    --cream-light: oklch(0.96 0.008 80);
    --ink: oklch(0.94 0.01 80);
    /* --ink-soft / --muted are derived from --paper for translucency.
       In dark mode --paper is dark indigo, so the previous derivation
       produced DARK translucent text: invisible against the dark
       surfaces below. Pin both to a translucent CREAM literal so the
       footer / cta-block / about-promise text reads as
       "slightly-dimmer-than-pure-cream" against the dark surface. */
    --ink-soft: oklch(0.94 0.01 80 / 0.82);
    --muted: oklch(0.94 0.01 80 / 0.62);
    /* These surfaces use ``background: var(--forest-deep)`` to render
       as a dark band even in dark mode (the "always-dark" pattern).
       The global dark-mode rescope flips --forest-deep LIGHT so that
       ``color: var(--forest)`` text reads on dark backgrounds, but
       that breaks the surfaces above. Re-pin --forest-deep back to a
       dark value inside these surfaces only, so their background
       stays dark while descendant text using --cream / --ink reads
       light against it. */
    --forest-deep: oklch(0.16 0.02 270);
    --forest: oklch(0.20 0.02 270);
    --forest-soft: oklch(0.30 0.025 270);
}

/* The date card is a light surface that lives INSIDE the dark prayer
   hero, so its descendants would inherit the light-on-dark token
   rescope above. Restore the dark-mode default tokens locally so the
   card's "Asia/Dhaka", "Monday" etc. read properly on its light bg. */
html[data-theme="dark"] .prayer-city__date-card {
    --ink: oklch(0.20 0.015 270);
    --ink-soft: oklch(0.42 0.02 270);
    --muted: oklch(0.50 0.05 50);
    --cream: oklch(0.94 0.01 80);
    --cream-light: oklch(0.96 0.008 80);
    --paper: oklch(0.94 0.01 80);
}

/* The corner sun-burst on the date card uses --gold-soft for a soft
   buttery accent. In dark mode --gold-soft is a dark brown, so on the
   light card it reads as a muddy smudge: easier to just hide it. */
html[data-theme="dark"] .prayer-city__date-card::before {
    display: none;
}

/* Cookie consent: already pinned to dark-forest at the top-level rule
   below (manuscript-voice section). This dark-mode block keeps the
   text + decline button readable inside that pinned bar. */
html[data-theme="dark"] .cookie-consent {
    color: var(--cream);
}
html[data-theme="dark"] .site-utility-bar--dark {
    background: var(--forest-deep);
    color: var(--cream-light);
}

html[data-theme="dark"] .site-footer {
    /* In dark mode the manuscript palette's --forest-deep flips
       LIGHT (oklch 0.78) so cream-on-cream becomes unreadable. The
       footer must stay a dark surface in BOTH modes: donors expect
       a clear visual edge between page body and footer chrome. Hard-
       coded dark-ink value with a hint of brand-hue tint. */
    background: oklch(0.16 0.02 270);
    color: oklch(0.94 0.01 80);
}
/* Three text classes that hard-code ``oklch(from var(--paper) ...)``
   for translucency. In dark mode --paper is dark indigo so those
   resolve to dark-on-dark = invisible. Override with a translucent
   cream literal so taglines, "Est. 1971", and the newsletter copy
   stay readable on the dark footer surface. */
html[data-theme="dark"] .site-footer__tagline,
html[data-theme="dark"] .site-footer__newsletter-copy {
    color: oklch(0.94 0.01 80 / 0.78);
}
html[data-theme="dark"] .site-footer__est {
    color: oklch(0.94 0.01 80 / 0.62);
}
/* .donate-cta-block also has hard-coded text colors that bypass the
   variable rescope. Same fix: cream literals so the eyebrow + trust
   line stay readable on the dark CTA surface. */
html[data-theme="dark"] .donate-cta-block__eyebrow {
    color: oklch(0.85 0.13 80);
}
html[data-theme="dark"] .donate-cta-block__trust {
    color: oklch(0.94 0.01 80 / 0.62);
}
/* Footer column link list items hard-code their color from --paper
   (which goes dark in dark mode). Override to a translucent cream
   so links read on the dark footer surface. */
html[data-theme="dark"] .site-footer__col a {
    color: oklch(0.94 0.01 80 / 0.85);
}
html[data-theme="dark"] .site-footer__col a:hover,
html[data-theme="dark"] .site-footer__col a:focus-visible {
    color: oklch(0.94 0.01 80);
}
/* Same fix for light mode: the legacy --forest-deep token sometimes
   gets overridden to a non-dark value by certain themes. Force a
   dark footer regardless. */
.site-footer {
    background: oklch(0.16 0.02 270);
    color: oklch(0.94 0.01 80);
}

/* Footer newsletter input: keep the translucent on-dark style instead
   of inheriting the generic dark-mode input rule. */
html[data-theme="dark"] .site-footer__newsletter-form input[type="email"] {
    background: oklch(from var(--paper) l c h / 0.08);
    color: var(--cream);
    border-color: oklch(from var(--paper) l c h / 0.25);
}

/* Footer currency select: same translucent on-dark treatment so
   the dropdown reads properly against the dark forest footer. */
html[data-theme="dark"] .site-footer__currency-select {
    background: oklch(from var(--paper) l c h / 0.08);
    color: var(--cream);
    border-color: oklch(from var(--paper) l c h / 0.25);
}
html[data-theme="dark"] .site-footer__currency-select option {
    color: #111;
}

html[data-theme="dark"] .donate-cta-block__preset.is-selected {
    color: var(--forest-deep);
}

/* Nisab / Zakat wizard: every surface is hardcoded white in light
   mode. Re-skin the whole component for dark by overriding the
   panels, progress strip, fields, verdict card, and titles. */
html[data-theme="dark"] .nisab-wizard__panels,
html[data-theme="dark"] .nisab-wizard__field-wrap {
    background: var(--cream);
    border-color: var(--line);
    box-shadow: var(--shadow-md);
}
@media (max-width: 720px) {
    html[data-theme="dark"] .nisab-wizard__nav {
        background: rgba(11, 23, 17, 0.92);
        border-top-color: var(--line);
    }
}
html[data-theme="dark"] .nisab-wizard__progress li {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__progress li::before {
    background: oklch(from var(--paper) l c h / 0.08);
    color: var(--ink-soft);
}
/* Active step: needs an obvious "you are here" treatment in dark
   mode. Light mode has a forest-green pill which the previous
   dark rescope flattened to the same surface as inactive steps,
   leaving no visual cue for the donor's current step. */
html[data-theme="dark"] .nisab-wizard__progress li.is-active {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.12);
    border-color: var(--vermillion-text, var(--gold));
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__progress li.is-active::before {
    background: var(--gold);
    color: var(--forest-deep);
}
/* Done step (donor has moved past): gold accent, but not as
   strong as the active step. */
html[data-theme="dark"] .nisab-wizard__progress li.is-done {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__progress li.is-done::before {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__title {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__field > span {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__field-wrap input {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__field-prefix {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__verdict {
    background: var(--forest-soft);
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__verdict-title {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__category-card {
    background: var(--cream-light);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__category-body strong {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__category-body small {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__category-check {
    background: oklch(from var(--paper) l c h / 0.08);
}
html[data-theme="dark"] .nisab-wizard__category-card:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
}
html[data-theme="dark"] .nisab-wizard__category-card:has(input:checked) {
    border-color: var(--vermillion-text, var(--gold));
    background: linear-gradient(180deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.10), oklch(from var(--vermillion, var(--gold)) l c h / 0.18));
}
html[data-theme="dark"] .nisab-wizard__category-card:has(input:checked) .nisab-wizard__category-check {
    background: var(--gold);
    color: var(--forest-deep);
}

/* Asset-detail cards (step 2) and the liabilities card (step 3).
   Each per-category card was hardcoded white with a dark forest title
   the card lit up like a flashlight on the dark page and the title
   became near-illegible. Re-skin: dark cream surface, light-gold
   title, ink-tone hint and label colours. */
html[data-theme="dark"] .nisab-wizard__asset-group {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__asset-group--liabilities {
    background: linear-gradient(180deg, oklch(from var(--paper) l c h / 0.04), rgba(212, 95, 95, 0.08));
    border-color: rgba(212, 95, 95, 0.30);
}
html[data-theme="dark"] .nisab-wizard__asset-head {
    border-block-end-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__asset-title {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__asset-total {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__asset-total--neg {
    background: rgba(212, 95, 95, 0.16);
    color: #ff8a8a;
}
html[data-theme="dark"] .nisab-wizard__asset-hint {
    color: var(--ink-soft);
}

/* Per-field number inputs: gold-tinged label, dark input chrome,
   tabular-numeric body. The hardcoded white input wrap turned every
   field into a bright box; flip to dark cream + ink. */
html[data-theme="dark"] .nisab-wizard__num-field > span {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__num-wrap {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__num-wrap:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}
html[data-theme="dark"] .nisab-wizard__num-wrap:focus-within {
    background: oklch(from var(--paper) l c h / 0.06);
    border-color: var(--vermillion-text, var(--gold));
    box-shadow: 0 0 0 3px oklch(from var(--vermillion, var(--gold)) l c h / 0.22);
}
html[data-theme="dark"] .nisab-wizard__num-prefix,
html[data-theme="dark"] .nisab-wizard__num-suffix {
    background: oklch(from var(--paper) l c h / 0.06);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__num-wrap input {
    color: var(--ink);
    background: transparent;
}
html[data-theme="dark"] .nisab-wizard__num-wrap input::placeholder {
    color: oklch(from var(--paper) l c h / 0.35);
}

/* Step-panel headings ("What kinds of wealth", "What's it all worth",
   "What do you owe", verdict title): dark forest in light mode is
   illegible against the dark panel surface. */
html[data-theme="dark"] .nisab-wizard__panel-title {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__panel-hint,
html[data-theme="dark"] .nisab-wizard__panel-foot {
    color: var(--ink-soft);
}

/* Step 4: dual-nisab cards, allocation tile, breakdown rows.
   Every card uses #fff in light mode; flip them to dark cream so
   they don't punch white holes in the dark page. Headings flip
   from forest green to gold; amount values to gold or ink. */
html[data-theme="dark"] .nisab-wizard__nisab-compare,
html[data-theme="dark"] .nisab-wizard__allocation,
html[data-theme="dark"] .nisab-wizard__meter {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
    box-shadow: none;
}
/* Meter sub-elements: heading + amount + tick badges + caption all
   need dark-mode rescopes since the light-mode defaults are forest
   green / cream-light and read as muddy / barely-visible against the
   dark surface. */
html[data-theme="dark"] .nisab-wizard__meter-label {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__meter-amount {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__meter-track {
    background: oklch(from var(--paper) l c h / 0.10);
}
html[data-theme="dark"] .nisab-wizard__meter-tick-label {
    background: oklch(from var(--paper) l c h / 0.08);
    border-color: var(--line);
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__meter-tick--silver .nisab-wizard__meter-tick-label {
    color: oklch(from var(--paper) l c h / 0.85);
}
html[data-theme="dark"] .nisab-wizard__meter-tick--gold .nisab-wizard__meter-tick-label {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__meter-caption {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__nisab-compare-head h4,
html[data-theme="dark"] .nisab-wizard__allocation-head h4 {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__nisab-compare-head p,
html[data-theme="dark"] .nisab-wizard__allocation-head p,
html[data-theme="dark"] .nisab-wizard__nisab-compare-foot,
html[data-theme="dark"] .nisab-wizard__allocation-foot {
    color: var(--ink-soft);
}

html[data-theme="dark"] .nisab-wizard__nisab-card {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__nisab-card[data-nisab-card="gold"] {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.35);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-title {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-formula {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-threshold {
    background: oklch(from var(--paper) l c h / 0.06);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-threshold-label {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-threshold-value {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__nisab-card-zakat {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.35);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-zakat-label {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__nisab-card-zakat strong {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__nisab-card-default {
    background: var(--gold);
    color: var(--forest-deep);
}

/* Allocation tile: each row was a white card with a forest title
   and forest amount. Flip to dark surface, gold/ink text. */
html[data-theme="dark"] .nisab-wizard__allocation-row {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .nisab-wizard__allocation-icon {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.14);
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .nisab-wizard__allocation-title {
    color: var(--ink);
}
html[data-theme="dark"] .nisab-wizard__allocation-meta {
    color: var(--ink-soft);
}
html[data-theme="dark"] .nisab-wizard__allocation-bar {
    background: oklch(from var(--paper) l c h / 0.10);
}
html[data-theme="dark"] .nisab-wizard__allocation-amount {
    color: var(--vermillion-text, var(--gold));
}

/* Save / Print / Share + sadaqah-instead row: ghost buttons need
   their dark-mode rescope too. */
html[data-theme="dark"] .nisab-wizard__cta--ghost {
    color: var(--ink);
    border-color: var(--line);
    background: oklch(from var(--paper) l c h / 0.04);
}
html[data-theme="dark"] .nisab-wizard__cta--ghost:hover {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
    color: var(--ink);
}

/* Basket checkout: the wrapping form has a hardcoded white-to-cream
   gradient that lit up the top of the page like an island. Re-skin
   for dark so the whole form sits naturally on the dark page paper. */
html[data-theme="dark"] .basket-checkout__form {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-light) 100%);
    border-color: var(--line);
    box-shadow: 0 18px 40px oklch(from var(--ink) l c h / 0.30);
}
/* The fieldsets sit INSIDE the form, so their default dark-cream-light
   bg now matches one of the gradient stops: bump them slightly darker
   so they're still visually distinct from the form wrapper. */
html[data-theme="dark"] .basket-checkout__field:not(.basket-checkout__dedication):not(.basket-checkout__gift-aid):not(.basket-checkout__gateway) {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}

/* Payment-method radio cards (Card / bKash / Nagad picker). Hardcoded
   white in light mode: needs to flip to a dark surface so the
   options don't punch bright holes in the form layout. */
html[data-theme="dark"] .basket-checkout__gateway-option {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-checkout__gateway-option:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
}
html[data-theme="dark"] .basket-checkout__gateway-option:has(input:checked) {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.10);
    box-shadow: 0 0 0 2px oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
}
html[data-theme="dark"] .basket-checkout__gateway-label {
    color: var(--ink);
}
html[data-theme="dark"] .basket-checkout__gateway-help {
    color: var(--ink-soft);
}

/* ----------------------------------------------------------------------
   Basket checkout mobile polish: sub-760px the existing form was
   tight at the edges and donation summary forced a horizontal
   compromise. Tighten paddings, soften shadows, full-width form.
   ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  .basket-checkout__form {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-sm);
    gap: var(--space-3);
  }
  .basket-checkout__field:not(.basket-checkout__dedication):not(.basket-checkout__gift-aid):not(.basket-checkout__gateway) {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
  }
  .basket-checkout__field:not(.basket-checkout__dedication) legend {
    font-size: 1.02rem;
  }
  .basket-checkout__gateway-option {
    padding: 12px;
    border-radius: var(--radius-sm);
  }
  .basket-checkout__gateway-label {
    font-size: 0.95rem;
  }
  .basket-checkout__gateway-help {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  /* The 2-column page grid (form left, summary right) collapses to
     single-column on mobile: the summary then sits below the form
     so the donor scrolls form → summary → pay. */
  .basket-page__grid--checkout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4);
  }
  /* Position:sticky on the summary aside doesn't make sense on
     small screens: it eats vertical space. Reset to static. */
  .basket-page__aside {
    position: static;
  }
  /* Page header gap tighter on mobile. */
  .basket-page__header {
    margin-bottom: var(--space-4);
  }
  .basket-page__header h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
  }
}
html[data-theme="dark"] .basket-checkout__dedication {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-checkout__qurbani-field input[type="text"] {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-checkout__qurbani-privacy-opt {
    border-color: var(--line);
    background: var(--cream);
}
html[data-theme="dark"] .basket-checkout__qurbani-privacy-opt.is-selected {
    border-color: var(--vermillion-text, var(--gold));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.12);
}
html[data-theme="dark"] .basket-checkout__security {
    background: var(--forest-soft);
    border-color: var(--line);
}

/* Payment success page: headlines hardcode --forest-deep which is
   nearly black in light mode but unreadable on the dark paper. */
html[data-theme="dark"] .payment-status__headline,
html[data-theme="dark"] .payment-status__help-heading {
    color: var(--ink);
}

/* Qurbani 2027 page: pricing tiers, live tracker board, animal cards,
   filter chips and social strip all hardcode #fff in light mode. Re-skin
   the whole component family for dark. */
html[data-theme="dark"] .qurbani-pricing {
    background: var(--paper);
}
html[data-theme="dark"] .qurbani-pricing__tier {
    background: var(--cream);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-pricing__tier:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
    box-shadow: 0 8px 20px oklch(from var(--ink) l c h / 0.35);
}
html[data-theme="dark"] .qurbani-pricing__label {
    color: var(--vermillion-text, var(--gold));
    opacity: 1;
}

html[data-theme="dark"] .qurbani-board {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-light) 100%);
}
html[data-theme="dark"] .qurbani-board__sub {
    color: var(--ink-soft);
}
html[data-theme="dark"] .qurbani-board__section-title {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__count {
    color: var(--ink-soft);
}
html[data-theme="dark"] .qurbani-board__impact {
    color: var(--ink-soft);
}
html[data-theme="dark"] .qurbani-board__summary {
    background: var(--cream);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-board__summary-item {
    background: var(--cream-light);
    border-left-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__summary-item--meta {
    border-left-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__summary-label {
    color: var(--ink-soft);
    opacity: 1;
}
html[data-theme="dark"] .qurbani-board__summary-value {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__summary-remaining {
    color: var(--ink-soft);
    opacity: 1;
}

html[data-theme="dark"] .qurbani-board__controls {
    background: linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 100%);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-board__filter-group:first-child {
    border-right-color: var(--line);
}
html[data-theme="dark"] .qurbani-board__filter-label {
    color: var(--ink-soft);
    opacity: 1;
}
html[data-theme="dark"] .qurbani-board__tab,
html[data-theme="dark"] .qurbani-board__chip {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-board__tab:hover,
html[data-theme="dark"] .qurbani-board__chip:hover {
    border-color: var(--vermillion-text, var(--gold));
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__tab.is-active {
    background: var(--gold);
    color: var(--forest-deep);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__chip.is-active {
    background: var(--gold);
    color: var(--forest-deep);
    border-color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .qurbani-board__tile {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-board__tile:hover {
    box-shadow: 0 6px 20px oklch(from var(--ink) l c h / 0.35);
}
html[data-theme="dark"] .qurbani-board__visual,
html[data-theme="dark"] .qurbani-animal__visual {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-board__name {
    color: var(--ink);
}

html[data-theme="dark"] .qurbani-animal {
    background: var(--cream-light);
    border-color: var(--line);
    box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.25);
}
html[data-theme="dark"] .qurbani-animal.is-available:hover {
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.45);
    box-shadow: 0 14px 28px oklch(from var(--ink) l c h / 0.45);
}
html[data-theme="dark"] .qurbani-animal.is-full {
    background: oklch(from var(--paper) l c h / 0.04);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-animal__visual {
    background: linear-gradient(160deg,
        oklch(from var(--vermillion, var(--gold)) l c h / 0.20) 0%,
        oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 100%);
    border-bottom-color: var(--line);
}
html[data-theme="dark"] .qurbani-animal.is-full .qurbani-animal__visual {
    background: linear-gradient(160deg,
        rgba(42, 107, 84, 0.30) 0%,
        rgba(42, 107, 84, 0.12) 100%);
}
html[data-theme="dark"] .qurbani-animal__progress-pill {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-animal.is-full .qurbani-animal__progress-pill {
    background: var(--gold);
    color: var(--forest-deep);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-animal__progress-bar {
    background: oklch(from var(--paper) l c h / 0.08);
}
html[data-theme="dark"] .qurbani-animal__code {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-animal__status {
    color: var(--ink-soft);
}
html[data-theme="dark"] .qurbani-animal__status--full {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-animal__ctas .qurbani-animal__cta:nth-child(n+2) .btn--sm {
    border-color: var(--line-dark);
    color: var(--ink);
}
html[data-theme="dark"] .qurbani-animal__ctas .qurbani-animal__cta:nth-child(n+2) .btn--sm:hover {
    background: oklch(from var(--paper) l c h / 0.06);
    border-color: var(--vermillion-text, var(--gold));
    color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .qurbani-social {
    background: linear-gradient(90deg,
        oklch(from var(--vermillion, var(--gold)) l c h / 0.18) 0%,
        oklch(from var(--vermillion, var(--gold)) l c h / 0.08) 100%);
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.30);
}
html[data-theme="dark"] .qurbani-social__icon {
    background: oklch(from var(--paper) l c h / 0.10);
    color: var(--vermillion-text, var(--gold));
    box-shadow: none;
}
html[data-theme="dark"] .qurbani-social__text {
    color: var(--ink);
}
html[data-theme="dark"] .qurbani-social__text strong {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-social__season {
    color: var(--ink-soft);
}

html[data-theme="dark"] .qurbani-faq__item {
    background: var(--cream);
    border-color: var(--line);
}
html[data-theme="dark"] .qurbani-faq__item[open] {
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-faq__item summary {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .qurbani-faq__item p {
    color: var(--ink);
    opacity: 0.85;
}

/* Basket drawer: many bits of light-mode text use --forest-deep
   (almost black) which becomes invisible on the dark drawer paper.
   Re-skin every readable surface so the panel reads cleanly in dark. */
html[data-theme="dark"] .basket-drawer__line-price strong,
html[data-theme="dark"] .basket-drawer__section-heading,
html[data-theme="dark"] .basket-drawer__addon-amount,
html[data-theme="dark"] .basket-drawer__grand dt,
html[data-theme="dark"] .basket-drawer__grand dd {
    color: var(--ink) !important;
}
html[data-theme="dark"] .basket-drawer__qty button {
    color: var(--ink);
}
html[data-theme="dark"] .basket-drawer__qty button:hover {
    background: oklch(from var(--paper) l c h / 0.08);
}
html[data-theme="dark"] .basket-drawer__foot-link {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .basket-drawer__foot-link:hover {
    color: var(--gold-light, #e8c97a);
}
html[data-theme="dark"] .basket-drawer__addon-card,
html[data-theme="dark"] .basket-drawer__addon {
    color: var(--ink);
}

/* Basket review page (the dedicated /basket/ page): same family of
   issues as the drawer: --forest and --forest-deep used for headings
   and emphasis text become invisible on the dark page paper. */
html[data-theme="dark"] .basket-page__header h1 {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .policy-strip__body h2 {
    color: var(--ink);
}
html[data-theme="dark"] .section-heading {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .basket-list {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-list__item {
    border-block-end-color: var(--line);
}
html[data-theme="dark"] .basket-list__title strong {
    color: var(--ink);
}
html[data-theme="dark"] .basket-list__qty {
    background: var(--cream);
    border-color: var(--line);
}
html[data-theme="dark"] .basket-list__qty button {
    color: var(--ink);
}
html[data-theme="dark"] .basket-list__qty button:hover {
    background: oklch(from var(--paper) l c h / 0.08);
}
html[data-theme="dark"] .basket-list__qty-value {
    color: var(--ink);
    border-inline-color: var(--line);
}
html[data-theme="dark"] .basket-list__total {
    color: var(--vermillion-text, var(--gold));
}
/* Footer (Continue / Empty basket): the light cream tint reads as a
   washed-out grey strip in dark mode. Drop it for a subtle dark tint
   matching the basket card, with a separator border on top. The muted
   "Empty basket" link gets bumped to ink-soft so it stays legible. */
html[data-theme="dark"] .basket-list__footer {
    background: oklch(from var(--paper) l c h / 0.04);
    border-block-start-color: var(--line);
}
html[data-theme="dark"] .basket-list__footer .link-button--muted {
    color: var(--ink-soft);
}
html[data-theme="dark"] .basket-list__footer .link-button--muted:hover {
    color: var(--vermillion-text, var(--gold));
}

html[data-theme="dark"] .maximise-impact {
    background: linear-gradient(160deg, var(--cream) 0%, var(--cream-light) 100%);
    border-color: var(--line);
}
html[data-theme="dark"] .maximise-impact__heading {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .maximise-impact__tile {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .maximise-impact__tile h3 {
    color: var(--ink);
}
html[data-theme="dark"] .maximise-impact__tile.is-active {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.18);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .maximise-impact__tile.is-active h3 {
    color: var(--ink);
}

/* Home page zakat calculator block: different class set than the
   dedicated /zakat/ page (.zakat-calc__* vs .nisab-wizard__*). The
   light-mode CSS hardcodes #fff backgrounds for the body and every
   field wrap. Re-skin for dark. */
html[data-theme="dark"] .zakat-calc__body {
    background: var(--cream);
    border-color: var(--line);
    box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .zakat-calc__field-wrap {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .zakat-calc__field-wrap:hover {
    background: oklch(from var(--paper) l c h / 0.06);
    border-color: var(--line-dark);
}
html[data-theme="dark"] .zakat-calc__field-wrap:focus-within {
    background: var(--cream-light);
    border-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .zakat-calc__field-prefix {
    background: oklch(from var(--paper) l c h / 0.06);
    color: var(--ink-soft);
    border-right-color: var(--line);
}
html[data-theme="dark"] .zakat-calc__field--liability .zakat-calc__field-prefix {
    background: rgba(212, 95, 95, 0.14);
    color: #ff8a8a;
    border-right-color: rgba(212, 95, 95, 0.30);
}
html[data-theme="dark"] .zakat-calc__field--liability .zakat-calc__field-label {
    color: #ff8a8a;
}
html[data-theme="dark"] .zakat-calc__field-wrap input {
    color: var(--ink);
}
html[data-theme="dark"] .zakat-calc__summary {
    background: linear-gradient(180deg, oklch(from var(--vermillion, var(--gold)) l c h / 0.10) 0%, oklch(from var(--vermillion, var(--gold)) l c h / 0.04) 100%);
    border-color: oklch(from var(--vermillion, var(--gold)) l c h / 0.40);
}
html[data-theme="dark"] .zakat-calc__nisab {
    border-bottom-color: var(--line-dark);
}
html[data-theme="dark"] .zakat-calc__rows-net {
    border-top-color: var(--line-dark);
}
html[data-theme="dark"] .zakat-calc__rows dd,
html[data-theme="dark"] .zakat-calc__rows-net dd {
    color: var(--ink);
}

/* ----------------------------------------------------------------------
   QuoteBlock: used inside content-page bodies. Optional Arabic line
   on top, translation in italic blockquote, attribution underneath.
   Styled as a calm green-tinted callout with a vertical gold accent.
   ---------------------------------------------------------------------- */
.content-quote {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--rule); /* manuscript hairline (was side-stripe; Phase 2.5 sweep) */
    background: oklch(from var(--ink) l c h / 0.04);
    border-radius: 0 12px 12px 0;
}
.content-quote__arabic {
    margin: 0 0 var(--space-2);
    font-family: var(--font-ar-display, "Noto Naskh Arabic", serif);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.7;
    color: var(--forest-deep);
    text-align: right;
}
.content-quote__translation {
    margin: 0;
    padding: 0;
    border: 0;
}
.content-quote__translation p {
    margin: 0;
    font-family: var(--font-en-display);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    font-style: italic;
    color: var(--ink);
}
.content-quote__source {
    margin-top: var(--space-2);
    font-size: 0.88rem;
    color: var(--ink-soft);
    font-style: normal;
}
.content-quote__source span {
    color: var(--vermillion-text, var(--gold));
    margin-right: 4px;
}

html[data-theme="dark"] .content-quote {
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.06);
    border-left-color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .content-quote__arabic {
    color: var(--vermillion-text, var(--gold));
}
html[data-theme="dark"] .content-quote__translation p {
    color: var(--ink);
}
html[data-theme="dark"] .content-quote__source {
    color: var(--ink-soft);
}


/* =========================================================================
   Home leaf: three-slot manuscript page (Phase 2.3 / layout)
   =========================================================================
   Replaces the previous `{% for block in page.body %}` wall. The three
   prime slots ride a manuscript spine: chapter mark in the left margin,
   gold-leaf hairlines between sections, generous vertical breath. Any
   blocks beyond position 3 collapse into a quieter overflow band.
   ========================================================================= */

.home-leaf {
    margin: 0 auto;
    max-width: 1240px;
    padding: 0 max(24px, 4vw);
    position: relative;
}

.home-leaf__slot {
    position: relative;
    padding-block: clamp(2rem, 5vw, 4rem);
}
.home-leaf__slot + .home-leaf__slot {
    border-top: 1px solid var(--rule);
}

/* Slot-specific overrides: let editors' existing block content keep its
   visual identity, but constrain its outer margins so the manuscript spine
   reads. The hero slot gets generous top padding so the page-load reveal
   has breath; subsequent slots are tighter. */
.home-leaf__slot--1 { padding-top: clamp(2.5rem, 6vw, 5rem); }
.home-leaf__slot--2 { padding-block: clamp(3rem, 7vw, 5rem); }
.home-leaf__slot--3 { padding-block: clamp(3rem, 7vw, 5rem); }

/* If a slot's inner block already declares a `.container` (most do), suppress
   double-padding so the spine reads clean. Container queries scope this so
   we only flatten when the immediate child is a container. */
.home-leaf__slot > .container,
.home-leaf__slot > * > .container,
.home-leaf__slot > section > .container {
    padding-inline: 0;
}

/* ----- Overflow band (collapsed by default, lean-home enforcement) ----- */
/* Hard-cap pattern: editor blocks past slot 2 collapse behind a quiet
   <details> toggle. Visitors see one small summary line; editors click
   open during preview to verify their content. The DOM still contains
   everything so search and analytics still find it. */
.home-overflow {
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    border-top: 1px solid var(--rule);
}
.home-overflow__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: clamp(20px, 3vw, 32px) max(24px, 4vw);
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: var(--font-en-body);
    transition: color 200ms var(--ease-out, ease-out);
}
.home-overflow__summary::-webkit-details-marker { display: none; }
.home-overflow__summary:hover { color: var(--ink); }
.home-overflow__summary-eyebrow {
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    color: var(--sepia, var(--ink-soft));
    text-transform: uppercase;
    letter-spacing: 0.10em;
    flex: 0 0 auto;
}
.home-overflow__summary-text {
    font-family: var(--font-en-display);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
    font-weight: 400;
    color: var(--ink);
    flex: 0 0 auto;
}
.home-overflow__summary-icon {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-size: 1.4rem;
    font-weight: 300;
    border: 1px solid var(--rule);
    border-radius: 50%;
    transition: transform 240ms var(--ease-out, ease-out),
                border-color 200ms var(--ease-out, ease-out);
}
.home-overflow[open] .home-overflow__summary-icon {
    transform: rotate(45deg);
    border-color: var(--vermillion-text, var(--vermillion, var(--gold)));
}
.home-overflow__list {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.home-overflow__item {
    /* Quieter weight than the prime slots: desaturate any vermillion the
       block emits, scale type down by ~10%, drop visual emphasis. The
       individual blocks stay functional but stop competing for attention
       with the three prime slots above. */
    font-size: 0.96em;
    color: var(--ink-soft);
}
.home-overflow__item :is(h1, h2) {
    font-size: var(--fs-h3, clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem));
    color: var(--ink-soft);
}
.home-overflow__item :is(h3, h4) {
    font-size: 1.1rem;
    color: var(--ink-soft);
}
/* Suppress side-stripes / heavy borders that the legacy blocks may emit. */
.home-overflow__item [class*="border-left"],
.home-overflow__item [style*="border-left"] {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* Mobile: drop the wide spine, single column. */
@media (max-width: 720px) {
    .home-leaf {
        padding: 0 16px;
    }
    .home-leaf__slot {
        padding-block: clamp(1.5rem, 5vw, 2.5rem);
    }
}

/* Dark-mode rescope: the overflow band's faint paper-deep tint flips
   to a slightly lighter candlelight surface so it reads as elevated
   without breaking the candlelight illusion. */
html[data-theme="dark"] .home-overflow {
    background: oklch(from var(--paper-deep) l c h / 0.6);
}

/* =========================================================================
   Zakat verdict: distilled (Phase 2.4)
   =========================================================================
   Replaces the earlier "9 visible elements" stack with: chapter eyebrow,
   calm title, ONE big vermillion amount, secondary toggle, single meta
   line. The meter, dual-nisab cards, allocation, and breakdown collapse
   behind a manuscript-style <details> "see how this was calculated".
   ========================================================================= */

/* Verdict pill: small chapter eyebrow, NOT a status badge. */
.nisab-wizard__verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.nisab-wizard__verdict-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.nisab-wizard__verdict-pill .is-below ~ &,
.nisab-wizard__verdict.is-below .nisab-wizard__verdict-pill {
    color: var(--ink-soft);
}

/* Verdict title: the calm sentence above the big number. Smaller than
   the amount, deliberately. */
.nisab-wizard__verdict-title {
    font-family: var(--font-en-display);
    font-size: clamp(1.6rem, 1.4rem + 1.2vw, 2.2rem);
    font-weight: 400;
    line-height: var(--lh-snug, 1.15);
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 clamp(20px, 3vw, 32px);
    max-width: 22ch;
}

/* The amount: chapter heading, NOT a metric. Manuscript-grade vermillion
   serif, big, calm. The currency symbol sits just slightly smaller than
   the number, vertically aligned to the top so it reads as "£1,000" not
   "£1,000". */
.nisab-wizard__verdict-amount {
    margin: clamp(8px, 2vw, 16px) 0 0;
}
.nisab-wizard__verdict-amount-value,
.nisab-wizard__verdict-amount-value--monthly {
    display: block;
    font-family: var(--font-en-display);
    font-size: var(--fs-amount, clamp(3.4rem, 2.5rem + 4vw, 5rem));
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    margin: 0;
}
.nisab-wizard__verdict-amount-currency {
    font-size: 0.55em;
    margin-right: 0.08em;
    vertical-align: 0.08em;
    font-weight: 300;
}
.nisab-wizard__verdict-amount-suffix {
    font-family: var(--font-en-body);
    font-size: 0.30em;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0.4em;
    vertical-align: 0.6em;
}

/* Pay-mode segmented control (2026-05 redesign).

   Was two all-caps text labels with a 11px checkmark on the active
   button: invisible at arm's length on Auntie Asma's iPhone after
   Maghrib. Donors missed the monthly-instalment option entirely.

   New design: two buttons each with an icon, title, and one-line
   sub-label. The icons read as iconography (single filled dot vs
   3x3 dot grid: one payment vs many). The active button gets a
   paper-deep fill + vermillion icon, the inactive stays on paper
   with a sepia icon. Container has a gold-leaf hairline border at
   4px radius: manuscript panel anatomy, the maximum corner radius
   DESIGN.md permits.

   Touch target: each button is ~64px tall, comfortably above the
   44px iOS HIG minimum. */
.nisab-wizard__pay-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin: clamp(1.25rem, 3vw, 2rem) auto 0;
    width: 100%;
    max-width: 32rem;
    background: var(--paper);
    border: 1px solid oklch(from var(--gold-leaf) l c h / 0.55);
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    gap: 0;
}
.nisab-wizard__pay-mode-btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: transparent;
    border: 0;
    border-right: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
    padding: 0.85rem 1rem;
    text-align: left;
    cursor: pointer;
    color: var(--ink-soft);
    transition:
        color 200ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 64px;
}
.nisab-wizard__pay-mode-btn:last-child {
    border-right: 0;
}
.nisab-wizard__pay-mode-btn:hover {
    color: var(--ink);
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.35);
}
.nisab-wizard__pay-mode-btn:focus-visible {
    outline: 2px solid var(--vermillion);
    outline-offset: -2px;
}
.nisab-wizard__pay-mode-btn.is-active,
.nisab-wizard__pay-mode-btn[aria-pressed="true"] {
    color: var(--ink);
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.65);
}

/* Icon: sepia by default, vermillion on the active button. The
   single-dot vs 3x3-dot SVG pair carries most of the meaning here;
   donors recognise "one payment" vs "many payments" from the shape
   without reading. */
.nisab-wizard__pay-mode-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--sepia);
    opacity: 0.7;
    transition:
        color 200ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nisab-wizard__pay-mode-btn.is-active .nisab-wizard__pay-mode-icon,
.nisab-wizard__pay-mode-btn[aria-pressed="true"] .nisab-wizard__pay-mode-icon {
    color: var(--vermillion-text);
    opacity: 1;
}

/* Text block: title in body sans bold, sub-label in marginalia
   sepia. Stacks vertically inside the button. */
.nisab-wizard__pay-mode-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nisab-wizard__pay-mode-title {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.005em;
}
.nisab-wizard__pay-mode-sub {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}
.nisab-wizard__pay-mode-btn.is-active .nisab-wizard__pay-mode-sub,
.nisab-wizard__pay-mode-btn[aria-pressed="true"] .nisab-wizard__pay-mode-sub {
    color: var(--sepia);
}

/* Mobile (≤540px): stack vertically with a horizontal hairline
   between rows. Keeps the icon + text rhythm intact, just rotates
   the segmented control to single-column. */
@media (max-width: 540px) {
    .nisab-wizard__pay-mode {
        grid-template-columns: 1fr;
    }
    .nisab-wizard__pay-mode-btn {
        border-right: 0;
        border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
    }
    .nisab-wizard__pay-mode-btn:last-child {
        border-bottom: 0;
    }
}

/* Meta line below the amount + toggle. */
.nisab-wizard__verdict-meta {
    margin: 16px 0 0;
    font-family: var(--font-en-body);
    font-size: var(--fs-caption, 0.85rem);
    color: var(--ink-soft);
    max-width: 56ch;
    line-height: 1.5;
}
.nisab-wizard__verdict-meta [data-nisab-end-date] {
    color: var(--ink);
    font-weight: 500;
}

/* "See how this was calculated" disclosure: folds the meter, dual nisab
   cards, allocation, and breakdown behind a single click. The visual
   defaults: closed, quiet summary line, opens to reveal the full body. */
.nisab-wizard__working {
    margin: clamp(24px, 4vw, 40px) 0 0;
    border-top: 1px solid var(--rule);
}
.nisab-wizard__working-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--duration-fast, 160ms) var(--ease-out, ease-out);
}
.nisab-wizard__working-summary::-webkit-details-marker { display: none; }
.nisab-wizard__working-summary:hover { color: var(--ink); }
.nisab-wizard__working-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    font-weight: 300;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out);
}
.nisab-wizard__working[open] .nisab-wizard__working-summary-icon {
    transform: rotate(45deg); /* + → x */
}
.nisab-wizard__working-body {
    padding: 16px 0 0;
    /* The body holds .nisab-wizard__meter, __nisab-compare, __allocation, __breakdown.
       Each has its own existing styling; we just ensure consistent vertical breath
       between them now they're stacked inside the disclosure. */
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
}

/* The old verdict-body and verdict-amount-meta--monthly are absorbed into
   the new verdict-meta line. Hide any legacy renderings just in case a
   template still emits them somewhere. */
.nisab-wizard__verdict-body {
    display: none;
}
.nisab-wizard__verdict-amount-label {
    display: none; /* "Zakat payable": redundant with the title above */
}
.nisab-wizard__verdict-amount-meta {
    display: none; /* legacy meta lines, replaced by .nisab-wizard__verdict-meta */
}

/* =========================================================================
   SVG icon sprite: base styling (Phase 2.6)
   =========================================================================
   Replaces emoji icons across the site. Icons inherit currentColor for
   stroke, sit on the manuscript hairline weight (1.5px stroke), and
   default to 1em sizing so they flow inline with text.
   ========================================================================= */

.icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em; /* visual alignment with body text baseline */
}
.icon--inline {
    /* Used inline within text and inside legacy emoji-host spans. The
       wrapping span supplies sizing; this just ensures the SVG fills it. */
    width: 1em;
    height: 1em;
}
/* Larger sizes for category cards / icon panels. */
.icon--lg { font-size: 1.5em; }
.icon--xl { font-size: 2em; }

/* Vermillion stroke for chapter-head icons (verdict ornament). */
.icon--vermillion { color: var(--vermillion-text, var(--vermillion, var(--gold))); }
/* Sepia stroke for marginalia (chapter numbers, etc.). */
.icon--sepia { color: var(--sepia, var(--ink-soft)); }

/* The category card emoji-host spans had a circle background. Now they
   host an SVG; bring the circle visual treatment inside the span so the
   icon sits on a soft cream disc (manuscript chapter-marker style). */
.nisab-wizard__category-icon,
.nisab-wizard__asset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.6);
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-size: 18px;
}
.nisab-wizard__category-icon .icon,
.nisab-wizard__asset-icon .icon {
    width: 18px;
    height: 18px;
}

/* =========================================================================
   Polish layer (Phase 2.8 / polish ALL)
   =========================================================================
   The final polish pass after the brand reset. Focus on:
     - Accessibility focus rings (vermillion 2px outline + offset)
     - Manuscript-voice rescopes for surfaces missed by the cascade
     - Conversion-path guardrails (basket / checkout stay plain modern)
     - Subtle shadow downgrade on body content (the cards-die principle)
   ========================================================================= */

/* ---- Focus rings (accessibility: non-negotiable per DESIGN.md) ---- */
/* Visible 2px vermillion outline + 2px offset on EVERY interactive element.
   Override any rule that hid the outline. */
/* Clear the UA ring only where :focus-visible will draw ours. */
*:focus:not(:focus-visible) {
    outline: 0;
}
*:focus-visible {
    outline: 2px solid var(--vermillion, var(--gold));
    outline-offset: 2px;
    border-radius: 2px;
}
/* Dark-mode rescope: focus stays vermillion (it desaturates slightly via
   the candlelight palette, but the contrast against deep indigo holds). */
html[data-theme="dark"] *:focus-visible {
    outline-color: var(--vermillion-text, var(--vermillion, var(--gold)));
}

/* ---- Skip link (visible only on keyboard focus) ---- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 100;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: opacity 200ms var(--ease-out, ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
}

/* ---- Body content shadow downgrade (cards-die principle) ---- */
/* Where the cascade still emits a heavy shadow on body content (cards,
   tiles, panels), tone it down to a subtle hairline-grade soft shadow.
   The sticky pay-bar and basket drawer keep their shadows because those
   are level-1 chrome, not body content. */
.card,
.tile,
.panel,
.section,
.block {
    /* Don't let inherited shadow var() expressions render heavy. */
    box-shadow: none;
}
/* The shared `--shadow-sm` is acceptable on body content; --shadow-md and
   --shadow-lg are chrome-only. */

/* ---- Cookie consent: pinned dark-forest in BOTH themes ---- */
/* The banner is a system-level notification, not page content, so it
   doesn't track the page palette. Hardcoded forest + cream values
   give consistent contrast in light AND dark mode (avoids the flip
   where --ink becomes light + --paper-deep becomes dark, leaving the
   bar as light-on-light). The earlier manuscript-voice rule was too
   aggressive: it forced the bar onto the page surface and crashed
   the contrast. */
.cookie-consent,
[data-cookie-consent] {
    background: oklch(0.18 0.025 175) !important;
    color: oklch(0.94 0.01 80) !important;
    border-top: 1px solid oklch(0.94 0.01 80 / 0.18);
    box-shadow: 0 -14px 40px oklch(0.05 0.02 175 / 0.45);
}
.cookie-consent a,
[data-cookie-consent] a {
    color: var(--gold, oklch(0.78 0.13 75));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Conversion-path voice clamp ---- */
/* Basket / checkout / forms are plain modern, NOT manuscript poetic.
   Override any inherited Inria Serif rules in those spaces so form
   labels read as the donor's iPhone-after-Maghrib expects. */
.basket-page,
.basket-drawer,
.basket-checkout,
.donate-monthly,
.manual-confirm,
form .form-field,
form .field,
form label,
form input,
form select,
form textarea,
form button:not(.btn--primary):not(.nisab-wizard__pay-btn),
.donate-confirm {
    font-family: var(--font-en-body);
}
/* But the page TITLE on these pages can be display serif. */
.basket-page h1,
.basket-checkout h1,
.donate-monthly h1,
.manual-confirm h1,
.donate-confirm h1 {
    font-family: var(--font-en-display);
    font-weight: 400;
    letter-spacing: -0.012em;
}

/* ---- Marginalia helper class (for editors using rich-text) ---- */
.marginalia,
.eyebrow,
[data-marginalia] {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    color: var(--sepia, var(--ink-soft));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* ---- Hairline helper (replacement for old card borders) ---- */
.hairline,
.divider,
hr {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: var(--space-5, 1.5rem) 0;
}

/* ---- Selection color ---- */
::selection {
    /* Pale vermillion wash plus deep ink so selected text stays
       readable regardless of its original color. The previous
       vermillion+paper combo turned vermillion text (chapter heads,
       eyebrows, the green button's pale label) invisible when
       highlighted. */
    background: var(--vermillion-soft, oklch(0.92 0.06 32));
    color: var(--ink, oklch(0.20 0.015 270));
}

/* ---- Body smoothing + nav scroll offset ---- */
html {
    scroll-padding-top: var(--scroll-offset, 80px);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Reduce floating-action noise ---- */
/* The chat-bot widget and back-to-top buttons inherit aggressive shadows;
   tone them down. */
[data-chat-bot],
.back-to-top,
.floating-action {
    box-shadow: var(--shadow-sm) !important;
}

/* ---- Print stylesheet ---- */
/* Manuscript palette is a screen treatment. Print stays clean white paper. */
@media print {
    :root {
        --paper: #ffffff;
        --paper-deep: #f5f5f5;
        --ink: #000000;
        --ink-soft: #444444;
        --vermillion: #6b1d10;
        --rule: #cccccc;
    }
    body {
        background: var(--paper);
        color: #000000;
    }
    .nisab-wizard__pay-sticky,
    .basket-drawer,
    .cookie-consent,
    .skip-link,
    .nav,
    .utility-bar,
    [data-chat-bot],
    .back-to-top {
        display: none !important;
    }
    a {
        color: #000000;
        text-decoration: underline;
    }
    /* Show the link target after the link text on print. */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444444;
    }
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
}

/* =========================================================================
   Chairman anchor (home leaf, slot III / proof)
   =========================================================================
   Pinned manuscript-portrait composition: real shot or CMS-uploadable
   placeholder, with calligraphic name, role, and short bio. The proof
   slot is the brand's most important atom; this layout is asymmetric
   on desktop (portrait left, body right with marginalia chapter), and
   stacks vertically on mobile.
   ========================================================================= */

.home-leaf__slot--proof {
    /* Slot 3 is wider visual breath than slots 1/2 because the chairman
       carries the trust signal. */
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.chairman-anchor {
    display: grid;
    grid-template-columns: 36% 1fr;
    gap: clamp(20px, 4vw, 56px);
    align-items: start;
    position: relative;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--rule);
}

/* Roman numeral chapter mark in the marginalia gutter, calligraphic */
.chairman-anchor__chapter {
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.5rem);
    left: 0;
    transform: translate(-110%, 0);
    font-family: var(--font-en-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    pointer-events: none;
    user-select: none;
}

/* Portrait: real or placeholder, both share the same outer dimensions. */
.chairman-anchor__figure {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 16px 40px oklch(from var(--ink) l c h / 0.16);
    position: relative;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.6);
}
.chairman-anchor__portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chairman-anchor__portrait--placeholder {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
}
.chairman-anchor__portrait-svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Subtle "upload me" badge on the placeholder, bottom-right.
   Stays unobtrusive; editors notice it, donors don't read it as broken. */
.chairman-anchor__portrait-cms-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: oklch(from var(--paper) l c h / 0.92);
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: 0 2px 12px oklch(from var(--ink) l c h / 0.10);
}
.chairman-anchor__portrait-cms-tag svg {
    flex: 0 0 auto;
}
/* Hide the CMS tag for non-staff visitors via :where to keep specificity
   low and not require a body class. We rely on the editor seeing the
   badge during admin preview; donors never see it because we'll surface
   it only when the placeholder renders, and the editor uploads to clear it. */

/* Body column */
.chairman-anchor__body {
    padding-top: 8px;
}
.chairman-anchor__eyebrow {
    display: block;
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 12px;
}
.chairman-anchor__name {
    font-family: var(--font-en-display);
    font-size: clamp(1.6rem, 1.4rem + 1.4vw, 2.4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 6px;
}
.chairman-anchor__role {
    font-family: var(--font-en-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--sepia, var(--ink-soft));
    text-transform: none;
    letter-spacing: 0.02em;
    margin: 0 0 18px;
    font-style: italic;
}
.chairman-anchor__bio {
    font-family: var(--font-en-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 20px;
    max-width: 50ch;
}
.chairman-anchor__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease-out, ease-out);
}
.chairman-anchor__link:hover,
.chairman-anchor__link:focus-visible {
    border-bottom-color: currentColor;
}

/* Mobile: stack vertically, portrait shrinks to inline thumbnail */
@media (max-width: 720px) {
    .chairman-anchor {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .chairman-anchor__figure {
        max-width: 220px;
        margin: 0 auto;
    }
    .chairman-anchor__chapter {
        position: static;
        transform: none;
        display: block;
        margin-bottom: 8px;
        font-size: 2rem;
    }
    .chairman-anchor__body {
        padding-top: 0;
        text-align: left;
    }
}

/* Dark-mode rescope for the placeholder (subtle; portrait silhouette
   already uses semi-tinted strokes that read on both themes). */
html[data-theme="dark"] .chairman-anchor__portrait--placeholder {
    background: oklch(from var(--paper-deep) l c h / 0.4);
}
html[data-theme="dark"] .chairman-anchor__portrait-cms-tag {
    background: oklch(from var(--paper-deep) l c h / 0.92);
}

/* =========================================================================
   Hardening: text overflow + i18n guards (Phase: harden)
   =========================================================================
   Bengali words can run 30% longer than English; Arabic words 20% shorter
   but with deeper subscripts; German-style noun chains can blow out a
   button. These guards prevent layout collapse from extreme content.
   ========================================================================= */

/* Long-word overflow: hyphenate or break long words rather than burst
   container width. Applies to ALL content text containers. */
.zakat-page,
.donate-index,
.basket-page,
.basket-checkout,
.qa-page,
.about-page,
.counselling-page,
.education-page,
.content-page,
.home-leaf,
.gateway-status__card {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

/* Flex/grid items: prevent overflow when content exceeds expected width.
   The min-width:0 is what allows shrinking below content size; without
   it, a long Bengali word inside a flex item bursts the row. */
.home-leaf__slot > *,
.basket-line__body,
.donate-product-tile__body,
.gateway-status__lead,
.chairman-anchor__body,
.nisab-wizard__verdict-title,
.btn,
.basket-line {
    min-width: 0;
}

/* Headlines: gracefully hyphenate when the content language allows.
   English is `hyphens: auto`-friendly (with the `lang` attribute). Bengali
   has different break rules; we hand off to `overflow-wrap: anywhere` for
   safety on Bengali narrow viewports. */
.home-leaf__slot--1 :is(h1, h2),
.zakat-page__headline,
.donate-index__header h1 {
    overflow-wrap: break-word;
    hyphens: manual;
}
body.lang-bn :is(h1, h2, h3),
body.lang-ar :is(h1, h2, h3) {
    /* Bengali / Arabic don't typically hyphenate; let break-word handle
       extreme cases (URL pasted into a heading, etc.). */
    hyphens: none;
    overflow-wrap: anywhere;
}

/* Buttons: long button labels in BN/AR can overflow narrow mobile.
   Allow wrap, cap at 2 lines, ellipsis past that. */
.btn {
    line-height: 1.3;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
}
@media (max-width: 480px) {
    /* On narrow mobile, allow two-line button labels gracefully without
       collapsing button height. */
    .btn--primary,
    .btn--ghost {
        white-space: normal;
        line-height: 1.25;
        padding-block: 14px;
        min-height: 48px;
    }
}

/* Donor name overflow: long names in basket / receipt / order lines.
   Cap to single line with ellipsis on dense list views; multi-line
   ok on the line-item detail row. */
.basket-line__name,
.donor-row__name,
.order-line__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Numerical guards: large amounts (BDT 1,000,000.00) blow out the
   amount-display column. Use `tabular-nums` for steady width and allow
   wrapping at the comma if the column gets very narrow. */
.nisab-wizard__verdict-amount-value,
.basket__total,
.zakat-page__amount-display,
.payment-confirmation__amount {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* RTL safety: text that arbitrarily mixes Latin + Arabic numerals (a
   common case on the Zakat page where £125,000.00 appears in Arabic UI)
   gets explicit `unicode-bidi: plaintext` so the digit cluster doesn't
   reverse. */
[dir="rtl"] .nisab-wizard__verdict-amount-value,
[dir="rtl"] .basket__total,
[dir="rtl"] .nisab-card__threshold-value,
[dir="rtl"] [data-zakat-page-result] {
    unicode-bidi: plaintext;
}

/* Empty / loading state guards. When data is loading or empty, content
   containers shouldn't collapse to zero-height (looks broken). */
.donate-product-grid:empty::before,
.qurbani-board:empty::before,
.basket-line-list:empty::before {
    content: '';
    display: block;
    min-height: clamp(120px, 20vw, 200px);
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.4);
    border-block: 1px solid var(--rule);
    margin-block: var(--space-5);
}

/* Network-failure safety on images: if hero / portrait / impact image
   fails to load, the alt text renders inside the broken-image frame at
   manuscript-typography weight rather than browser-default ugly. Scoped
   to alt-bearing images only so 1px tracking pixels (alt="") and the
   intentionally-tinted chairman placeholder don't get a paper-deep wash
   on top of their own background. */
img:not([alt=""]) {
    font-family: var(--font-en-body);
    font-size: var(--fs-caption, 0.85rem);
    color: var(--ink-soft);
    line-height: 1.4;
}
img:not([alt=""]):not([loading="eager"]) {
    /* Background tint only on lazy-loaded images so they show a paper
       wash before the bytes land, instead of a flash-of-empty space. */
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.3);
}

/* Form validation visible state: vermillion, manuscript voice. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
    border-color: var(--vermillion-text, var(--vermillion, var(--gold)));
    background: oklch(from var(--vermillion, var(--gold)) l c h / 0.04);
}
input:user-invalid + .field-error,
textarea:user-invalid + .field-error {
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =========================================================================
   Onboard: empty-basket first-time CTA (Phase: onboard)
   =========================================================================
   The empty-basket state is the donor's first decision point: what kind
   of charity matches their intention? Three quick-pick paths with eyebrow
   + title + sub-line, plus a "Browse all" primary CTA.
   ========================================================================= */

.basket-page__empty {
    max-width: 600px;
    margin: clamp(40px, 6vw, 80px) auto;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 40px);
    text-align: center;
    border-block: 1px solid var(--rule);
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.4);
}

.basket-page__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: clamp(12px, 2vw, 20px);
    color: var(--ink-soft);
    background: oklch(from var(--paper) l c h / 0.5);
}

.basket-page__empty .eyebrow {
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.78rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 8px;
}

.basket-page__empty h2 {
    font-family: var(--font-en-display);
    font-size: clamp(1.6rem, 1.4rem + 1.2vw, 2.2rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 12px;
}

.basket-page__empty-lead {
    color: var(--ink-soft);
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: 48ch;
    margin: 0 auto clamp(24px, 4vw, 36px);
}

.basket-page__empty-paths {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(24px, 4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}
.basket-page__empty-paths li {
    border-top: 1px solid var(--rule);
}
.basket-page__empty-paths li:last-child {
    border-bottom: 1px solid var(--rule);
}
.basket-page__empty-paths a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px clamp(8px, 2vw, 16px);
    color: var(--ink);
    text-decoration: none;
    transition: background 200ms var(--ease-out, ease-out),
                padding 200ms var(--ease-out, ease-out);
    position: relative;
}
.basket-page__empty-paths a::after {
    content: '→';
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-size: 1.2rem;
    transition: transform 240ms var(--ease-out, ease-out);
}
/* RTL: flip the arrow glyph so it points toward the page-end direction. */
[dir="rtl"] .basket-page__empty-paths a::after {
    content: '←';
}
.basket-page__empty-paths a:hover,
.basket-page__empty-paths a:focus-visible {
    background: oklch(from var(--paper) l c h / 0.5);
    padding-inline-start: clamp(16px, 3vw, 24px);
}
.basket-page__empty-paths a:hover::after {
    transform: translate(4px, -50%);
}
[dir="rtl"] .basket-page__empty-paths a:hover::after {
    transform: translate(-4px, -50%);
}
.basket-page__empty-paths strong {
    font-family: var(--font-en-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
}
.basket-page__empty-paths span {
    font-family: var(--font-en-body);
    font-size: var(--fs-caption, 0.85rem);
    color: var(--ink-soft);
}

@media (max-width: 480px) {
    .basket-page__empty {
        padding: clamp(24px, 6vw, 36px) 16px;
    }
    .basket-page__empty-paths a {
        padding: 14px 12px 14px 12px;
    }
}

/* =========================================================================
   Adapt: touch-target sizing + bottom-thumb-reach (Phase: adapt)
   =========================================================================
   Mobile-first: every interactive icon-only button hits 44×44 minimum
   (WCAG 2.5.5 AAA, Apple HIG, MaterialDesign: all converge on 44px).
   Auntie Asma's iPhone after Maghrib: she doesn't tap precisely.
   ========================================================================= */

/* Icon-only buttons in the nav (search, basket, hamburger, theme toggle). */
.nav__search-toggle,
.nav__basket-toggle,
.nav__menu-toggle,
.theme-toggle,
.basket-drawer__close,
.lang-switch__option {
    min-width: 44px;
    min-height: 44px;
    /* Pad the visual icon so the hit area extends but the icon stays
       at the same size visually (no jumbo icons on mobile). */
    padding: 10px;
    box-sizing: content-box;
}

/* Override above when a class explicitly sets larger size (don't shrink). */
.nav__search-toggle:where([class*="--lg"]),
.nav__basket-toggle:where([class*="--lg"]),
.nav__menu-toggle:where([class*="--lg"]) {
    min-width: 56px;
    min-height: 56px;
}

/* Ensure tap area targets reach 44×44 on link-style interactive elements
   that wrap an icon-only SVG. */
a[aria-label]:where(:not(.btn)):where([class*="icon"]),
button[aria-label]:where(:not(.btn)):where([class*="icon"]) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Form-field inputs on mobile: prevent iOS zoom by ensuring 16px minimum
   font-size (smaller fonts trigger Safari to auto-zoom). */
@media (max-width: 720px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: max(16px, 1rem); /* iOS zoom guard */
        min-height: 44px;
        padding-block: 10px;
        box-sizing: border-box;
    }
    /* Number inputs in the Zakat wizard: tabular-nums + tighter padding so
       digit count doesn't push the prefix glyph off-screen. */
    input[type="number"][inputmode="decimal"] {
        font-variant-numeric: tabular-nums;
    }
}

/* Bottom-thumb-reach: on mobile, primary CTAs should sit in the bottom
   third of the viewport where the thumb naturally lands. The sticky pay
   bar already does this; ensure other primary actions on critical pages
   (basket-checkout submit, donate-confirm submit) also hit thumb-zone
   when the viewport is short. */
@media (max-width: 720px) {
    /* Sticky-bottom primary CTA on conversion pages. The submit button
       on basket-checkout / donate-confirm slides into a sticky bar at
       page bottom on narrow screens, so the donor never has to scroll
       past the form fields to find Pay. */
    .basket-checkout__submit-bar,
    .donate-confirm__submit-bar {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: oklch(from var(--paper) l c h / 0.97);
        border-top: 1px solid var(--rule);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        margin-inline: -16px;
        z-index: 20;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .basket-checkout__submit-bar .btn--primary,
    .donate-confirm__submit-bar .btn--primary {
        width: 100%;
        min-height: 52px;
        font-size: 1.05rem;
    }
}

/* RTL mobile: hamburger and basket toggle should still hit 44×44.
   The flex direction is mirrored so we don't need to swap order. */
[dir="rtl"] @media (max-width: 720px) {
    .nav__search-toggle,
    .nav__basket-toggle,
    .nav__menu-toggle {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
}

/* Narrow-mobile (320px iPhone SE): ensure even the smallest viewport
   doesn't introduce horizontal scroll. */
@media (max-width: 360px) {
    .container,
    .nisab-wizard__inner,
    .home-leaf {
        padding-inline: 12px;
    }
    /* Hero headline on 320px: cap at clamped max so 5rem doesn't overflow. */
    .home-leaf__slot--1 :is(h1, h2),
    .donate-index__header h1,
    .zakat-page__headline {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
        word-break: normal;
        overflow-wrap: break-word;
    }
    /* Q&A card grid: single column at 320px (tablet+ stays 3-col). */
    .qa-page__card-grid,
    .donate-index__product-grid {
        grid-template-columns: 1fr;
    }
}

/* Product card: phone compaction.
   Tightens padding, type and CTA so a 30-day Fidya list (or any long
   product set) doesn't push donors through endless scroll. The 2-up
   grid kicks in at 460-580px via the override above the .product-card
   block; below 460px we stay 1-up but the card itself is much shorter
   thanks to these reductions. */
@media (max-width: 580px) {
    .product-card {
        padding: 12px;
        gap: 6px;
        border-radius: var(--radius-sm);
    }
    .product-card--no-cover {
        gap: 8px;
    }
    .product-card__cover {
        width: calc(100% + 24px);
        margin: -12px -12px 8px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .product-card__head {
        gap: 8px;
        min-height: 32px;
    }
    .product-card__icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border-radius: 6px;
    }
    .product-card__icon svg {
        width: 16px;
        height: 16px;
    }
    .product-card__title {
        font-size: 0.96rem;
        line-height: 1.2;
    }
    .product-card__body {
        font-size: 0.82rem;
        line-height: 1.4;
        /* Cap body to 3 lines so cards in a 2-up grid stay near-equal
           height. Editors writing long descriptions still get the full
           text on tap-through to the dedicated category pages. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card__price {
        font-size: 1.2rem;
    }
    .product-card__form {
        padding-block-start: 6px;
        gap: 4px;
    }
    .product-card__form .btn {
        padding-block: 7px;
        font-size: 0.84rem;
        border-radius: 6px;
    }
    .product-card__recurring {
        font-size: 0.76rem;
    }
    .product-card__shares-note {
        font-size: 0.78rem;
    }
}

/* At the smallest phones (<360px) drop back to a single column so the
   2-up grid doesn't squeeze cards below the comfortable tap zone. */
@media (max-width: 459px) {
    .donate-index__product-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly link spacing on text lists (footer link blocks, Q&A
   in-page nav, etc.): links should not be smaller than 32px tall to
   avoid mis-taps. */
@media (pointer: coarse) {
    .footer-section a,
    .qa-page__answer-list a,
    .home-overflow__list a {
        padding-block: 6px;
        min-height: 32px;
    }
}

/* =========================================================================
   Adapt: touch-target overrides for actual selectors found in the DOM
   ========================================================================= */
/* Top-nav icon buttons (search + basket) and any aria-label-only social
   icon link. These were 36-42px; bump to 44 minimum. The override is
   safe because the buttons are square icon buttons that don't carry
   text. */
.site-nav__search,
.site-nav__basket,
a[aria-label][class=""],
[class*="footer__social"] a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Specific override for the social-icon row (Facebook / Instagram /
   YouTube, etc.): these were 36×36 in the footer. */
.site-footer a[aria-label]:where([href*="facebook"], [href*="instagram"], [href*="youtube"], [href*="twitter"], [href*="x.com"], [href*="whatsapp"]) {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
}

/* Carousel arrow buttons (typography prev/next): 20×20 → 44×44
   minimum. Critical for accessibility on touch. */
button[aria-label*="of "],
.carousel-pager button,
[role="tablist"] button {
    min-width: 44px;
    min-height: 44px;
}

/* =========================================================================
   Campaign card icon slot
   =========================================================================
   56x56 circular icon at the top-left of every campaign-card. Renders the
   editor-uploaded DonationCampaign.image when set (cropped square, lazy-
   loaded); falls back to a manuscript-style SVG (crescent+star for appeals,
   building silhouette for projects) with a small "Add image in CMS" badge
   so the editor sees a clear nudge.

   Sits beside the title in a CSS grid so the title text wraps cleanly
   under the icon when space is tight (mobile) and runs alongside on
   wider cards.
   ========================================================================= */

.campaign-card {
    /* Override the prior column flex with a grid so we can position the
       icon above-left and title above-right, with body / progress / CTA
       flowing across both columns below. */
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
}

.campaign-card__icon {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    flex: 0 0 auto;
    position: relative;
    /* No overflow:hidden here: the CMS badge sits below the circle and
       must not be clipped. Inner image / placeholder handles its own
       circular clip via border-radius + overflow:hidden. */
}
.campaign-card__icon-img,
.campaign-card__icon-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: oklch(from var(--paper) l c h / 0.6);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.campaign-card--project .campaign-card__icon {
    color: var(--ink-soft);
}
.campaign-card__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.campaign-card__icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    position: relative;
}
.campaign-card__icon-placeholder svg {
    width: 60%;
    height: 60%;
    opacity: 0.85;
}

/* "Add image in CMS" badge: appears on hover/focus of the placeholder
   so the editor knows where to upload. Hidden from regular donors via
   opacity until they (or the editor in admin preview) hovers. The
   stretched-link overlay covers the card so the badge isn't directly
   clickable; editor goes through Wagtail Snippets → Appeals. */
.campaign-card__icon-cms-tag {
    position: absolute;
    inset: 100% 0 auto 0;
    margin-top: 6px;
    padding: 3px 8px;
    background: oklch(from var(--paper) l c h / 0.95);
    color: var(--sepia, var(--ink-soft));
    font-family: var(--font-en-body);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out, ease-out);
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}
.campaign-card:hover .campaign-card__icon-cms-tag,
.campaign-card:focus-within .campaign-card__icon-cms-tag {
    opacity: 1;
}

/* Title sits beside the icon. Body / progress / CTA span both columns. */
.campaign-card__badge {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
}
.campaign-card__title {
    grid-column: 2;
    grid-row: 1;
    padding-inline-end: 96px; /* leave room for badge */
}
.campaign-card__body,
.campaign-card__prelaunch,
.progress-bar,
.campaign-card__stats,
.urgency-banner,
.campaign-card__cta {
    grid-column: 1 / -1;
}
.campaign-card__cta {
    justify-self: start;
    margin-top: auto;
}

/* Mobile: flatten the grid to flex column so source order = visual order.
   Grid auto-placement was misordering body/title rows on 1-col grids;
   flexbox gives the predictable top-to-bottom flow we want. The CMS
   badge stays hidden on mobile (the editor sees it via desktop preview,
   donors don't need it). */
@media (max-width: 480px) {
    .campaign-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        grid-template-columns: none;
        grid-template-rows: none;
    }
    .campaign-card__icon {
        align-self: flex-start;
    }
    .campaign-card__badge {
        align-self: flex-start;
    }
    .campaign-card__title {
        padding-inline-end: 0;
    }
    .campaign-card__icon-cms-tag {
        display: none;
    }
}

/* =========================================================================
   CMS photo placeholders: manuscript-grade upload nudges
   =========================================================================
   Editors land on the site and see exactly where every photo could live.
   Donors see a composed manuscript-style block (not "no image" grey).

   Single source for every placeholder slot site-wide. Aspect ratio is set
   inline by the include caller. Ornament variants (default, portrait,
   building, people, landscape, book, tile) are picked per slot.

   The "Add image in CMS" badge stays small + low-key so it does not
   shout in the layout, but it is persistent so the founder spots every
   empty slot on every render until a real photo replaces it.
   ========================================================================= */
.cms-photo-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.55);
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
}

/* Single quiet gold-leaf hairline ring, manuscript-page calm. */
.cms-photo-placeholder::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid var(--gold-leaf, oklch(0.75 0.10 75 / 0.45));
    border-radius: 6px;
    pointer-events: none;
    z-index: 0;
}

/* Ornament: calligraphic SVG, sized relative to wrapper. */
.cms-photo-placeholder__ornament {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38%;
    max-width: 140px;
    color: inherit;
    opacity: 0.55;
}
.cms-photo-placeholder__ornament svg {
    width: 100%;
    height: auto;
    display: block;
}

/* CMS-prompt badge: manuscript-grade, soft + persistent. */
.cms-photo-placeholder__badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: oklch(from var(--paper) l c h / 0.94);
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    font-family: var(--font-en-body);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: 0 2px 10px oklch(from var(--ink) l c h / 0.08);
    z-index: 2;
    white-space: nowrap;
    pointer-events: none;
}
.cms-photo-placeholder__badge svg {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
}

/* Circle variant: used for TeamMember avatars and other round photo slots. */
.cms-photo-placeholder--circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1 !important;
}
.cms-photo-placeholder--circle::before {
    border-radius: 50%;
    inset: 8%;
}
.cms-photo-placeholder--circle .cms-photo-placeholder__ornament {
    width: 50%;
    max-width: 80px;
    opacity: 0.5;
}
.cms-photo-placeholder--circle .cms-photo-placeholder__badge {
    bottom: 6px;
    font-size: 0.58rem;
    padding: 3px 8px;
}

/* Auto-collapse badge text on narrow slots (avatars, small icon tiles)
   so the badge does not overflow. The + icon stays as the affordance. */
@container (max-width: 180px) {
    .cms-photo-placeholder__badge-text {
        display: none;
    }
    .cms-photo-placeholder__badge {
        padding: 4px 6px;
    }
}

/* Hairline corner mark for full-bleed heroes: gives the placeholder a
   composed manuscript edge so it reads as "designed empty state", not
   "broken image". Matches the qurbani-hero treatment. */
.cms-photo-placeholder--hero {
    width: 100%;
}
.cms-photo-placeholder--hero::before {
    inset: 18px;
    border-radius: 4px;
}
.cms-photo-placeholder--hero .cms-photo-placeholder__ornament {
    width: 22%;
    max-width: 200px;
}

/* Dark mode: keep the placeholder distinguishable but quieter. */
html[data-theme="dark"] .cms-photo-placeholder {
    background: oklch(from var(--paper-deep) l c h / 0.45);
}
html[data-theme="dark"] .cms-photo-placeholder__badge {
    background: oklch(from var(--paper-deep) l c h / 0.92);
}

/* High-contrast mode: make sure the manuscript ring is visible. */
@media (prefers-contrast: more) {
    .cms-photo-placeholder::before {
        border-color: var(--ink);
    }
    .cms-photo-placeholder__badge {
        border: 1px solid currentColor;
    }
}

/* =========================================================================
   Donate page: featured media strip
   =========================================================================
   Auto-curated photos + videos that match the donate page's purpose
   (educate-a-student → classroom; build → construction; etc.). Sits
   between the hero and the donate explainer so the donor sees proof
   before they commit. Mobile = horizontal scroll-snap rail. Desktop
   = same rail, just wider tiles. "View more" sends them to the
   relevant project page or /gallery/.
   ========================================================================= */
.donate-media {
    margin-block: var(--space-6) var(--space-5);
    padding-block: var(--space-5);
    border-block: 1px solid var(--rule);
}
.donate-media__head {
    margin-block-end: var(--space-4);
}
.donate-media__head .eyebrow {
    margin-block-end: 6px;
}
.donate-media__rail {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}
.donate-media__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.donate-media__item .video-tile__play,
.donate-media__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--rule);
}
.donate-media__caption {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.84rem);
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 0;
}
.donate-media__more {
    margin: var(--space-3) 0 0;
    text-align: end;
}
.donate-media__more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vermillion-text, var(--vermillion));
    font-family: var(--font-en-body);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color 0.18s ease-out;
}
.donate-media__more-link:hover,
.donate-media__more-link:focus-visible {
    border-block-end-color: currentColor;
}
.donate-media__more-link span {
    transition: transform 0.18s ease-out;
}
.donate-media__more-link:hover span {
    transform: translateX(3px);
}

/* On phones, flatten the grid to a horizontal-snap rail so a long
   set of clips doesn't push the donate explainer below the fold. */
@media (max-width: 640px) {
    .donate-media__rail {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }
    .donate-media__item {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* =========================================================================
   Photo gallery hub: video strip (per-topic grid)
   =========================================================================
   Sits above the project photo bands. Manuscript-grade calm: hairline
   above, vermillion eyebrow + display heading, then per-topic groups
   each rendering as a 2-up grid of poster thumbnails with the native
   browser play UI. preload="metadata" on each <video> means we only
   fetch the first frame: total page weight stays light even with
   10-20 clips. Tap-friendly 16:9 tiles with caption marginalia.
   ========================================================================= */
.photo-gallery-page__videos {
    margin-block: var(--space-5) var(--space-6);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--rule);
}
.photo-gallery-page__videos-head {
    margin-block-end: var(--space-4);
}
.photo-gallery-page__videos-head .eyebrow {
    margin-block-end: 6px;
}
.photo-gallery-page__video-group {
    margin-block-end: var(--space-5);
}
.photo-gallery-page__video-group:last-child {
    margin-block-end: 0;
}
.photo-gallery-page__video-topic {
    font-family: var(--font-en-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--space-3);
    padding-block-end: 6px;
    border-block-end: 1px solid var(--rule);
}
.photo-gallery-page__video-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}
.video-tile {
    margin: 0;
}
.video-tile figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.video-tile__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: oklch(from var(--ink) l c h / 0.96);
    border-radius: 4px;
    border: 1px solid var(--rule);
    display: block;
}
.video-tile__caption {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.84rem);
    line-height: 1.4;
    color: var(--ink-soft);
}

/* Click-to-play button: what the donor sees BEFORE pressing play.
   Just a poster image + a circular play overlay. Clicking it swaps
   the whole button for a real <video> element via video-tile.js.
   No bytes fetched until the donor commits. */
.video-tile__play {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: oklch(from var(--ink) l c h / 0.96);
    cursor: pointer;
    overflow: hidden;
    display: block;
    transition: transform 0.18s ease-out, border-color 0.18s ease-out;
}
.video-tile__play:hover,
.video-tile__play:focus-visible {
    transform: scale(1.005);
    border-color: var(--gold-leaf, var(--vermillion));
    outline: none;
}
.video-tile__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-tile__poster--placeholder {
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.6);
    display: block;
    width: 100%;
    height: 100%;
}
.video-tile__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.video-tile__play-icon svg {
    width: 56px;
    height: 56px;
    transition: transform 0.18s ease-out;
    filter: drop-shadow(0 2px 8px oklch(from var(--ink) l c h / 0.3));
}
.video-tile__play:hover .video-tile__play-icon svg,
.video-tile__play:focus-visible .video-tile__play-icon svg {
    transform: scale(1.08);
}

@media (max-width: 480px) {
    .photo-gallery-page__video-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Video embed block: manuscript-grade <video> wrapper
   =========================================================================
   Used by VideoEmbedBlock in any standard_body_blocks StreamField.
   Native HTML5 controls (no JS), gold-leaf hairline frame, caption in
   marginalia type below. preload="metadata" on the <video> tag means
   we only fetch the first frame until the donor presses play.
   ========================================================================= */
.video-embed {
    margin: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.video-embed__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: oklch(from var(--ink) l c h / 0.96);
    border-radius: 4px;
    border: 1px solid var(--rule, var(--line));
    display: block;
}
.video-embed__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.86rem);
    line-height: 1.45;
    color: var(--ink-soft);
}
.video-embed__caption-text {
    flex: 1 1 auto;
}
.video-embed__duration {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-feature-settings: "tnum";
    font-size: 0.82rem;
}

/* =========================================================================
   Project page: donate CTA panel
   =========================================================================
   Direct conversion path on every project page. Manuscript-grade calm:
   hairline rule above + below, paper-deep tint, vermillion primary CTA.
   ========================================================================= */
.project-page__support {
    margin-block: var(--space-7) var(--space-6);
    padding: var(--space-5);
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.45);
    border-block: 1px solid var(--rule);
}
.project-page__support-head {
    margin-block-end: var(--space-4);
}
.project-page__support-head .eyebrow {
    margin-block-end: 6px;
}
.project-page__support-body {
    color: var(--ink-soft);
    max-width: 60ch;
    margin-block-start: 8px;
    line-height: 1.55;
}
.project-page__support-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .project-page__support {
        padding: var(--space-4);
    }
    .project-page__support-ctas {
        flex-direction: column;
        gap: 8px;
    }
    .project-page__support-ctas .btn {
        width: 100%;
    }
}

/* =========================================================================
   Project page: inline photo strip
   =========================================================================
   Photos editors add via the inline ProjectPhoto panel render at the
   bottom of each project page as a horizontal-scrolling rail on mobile
   and a 3-up grid on desktop. Caption sits below each shot in
   manuscript-grade marginalia type.
   ========================================================================= */
.project-page__photos {
    margin-block: var(--space-7) var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--rule);
}
.project-page__photos-head {
    margin-block-end: var(--space-4);
}
.project-page__photos-head .eyebrow {
    margin-block-end: 6px;
}
.project-page__photos-sub {
    color: var(--ink-soft);
    max-width: 60ch;
    margin-block-start: 8px;
}
.project-page__photo-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.project-page__photo-item {
    margin: 0;
}
.project-page__photo-item figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-page__photo-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.project-page__photo-caption {
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.82rem);
    color: var(--ink-soft);
    line-height: 1.4;
}

/* On smaller screens flatten to a horizontal-scroll rail so a long
   project's worth of photos doesn't push the donate CTA forever
   below the fold. */
@media (max-width: 640px) {
    .project-page__photo-rail {
        grid-template-columns: none;
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-block-end: 8px;
    }
    .project-page__photo-item {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* =========================================================================
   Qurbani-updates photo rail
   =========================================================================
   Three-tile placeholder strip below the "Photos and updates" message,
   so editors see exactly where each season's distribution shots will
   land. Reuses the project-page rail pattern for visual consistency.
   ========================================================================= */
.qurbani-updates__photo-rail {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}
.qurbani-updates__photo-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.qurbani-updates__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-deep, oklch(0.88 0.015 70));
}

.qurbani-updates__caption {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-updates__editor-note {
    margin-top: 1.5rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-updates__editor-note strong {
    font-weight: 500;
    color: var(--vermillion, oklch(0.55 0.18 32));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

@media (max-width: 640px) {
    .qurbani-updates__photo-rail {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-block-end: 8px;
    }
    .qurbani-updates__photo-item {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* =========================================================================
   Photo gallery page: site-wide /gallery/ hub
   =========================================================================
   Aggregates every ProjectPhoto across the site, grouped by project.
   Editor-zero-effort: photos added to a ProjectPage automatically
   surface here. Manuscript-grade calm: hairline separators between
   project bands, paper-deep band-tints, no card chrome.
   ========================================================================= */
.photo-gallery-page {
    padding-block: var(--space-6) var(--space-7);
}
.photo-gallery-page__header {
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--rule);
}
.photo-gallery-page__intro {
    color: var(--ink-soft);
    max-width: 70ch;
    margin-block-start: var(--space-3);
    line-height: 1.6;
}
.photo-gallery-page__count {
    margin-block-start: var(--space-3);
    font-family: var(--font-en-body);
    color: var(--vermillion-text, var(--vermillion));
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.photo-gallery-page__count-num {
    font-family: var(--font-en-display);
    font-weight: 600;
    color: var(--ink);
    font-size: 1.1rem;
    margin-inline-end: 4px;
}
.photo-gallery-page__count-sep {
    margin-inline: 10px;
    color: var(--ink-faint);
}

/* Sticky jump nav, lets donors hop between project bands without
   long scrolls. On mobile it pins to the top; on desktop it floats
   to the right edge of the page as a quiet sidebar. */
.photo-gallery-page__jump {
    position: sticky;
    top: calc(var(--nav-height, 60px) + var(--utility-bar-height, 36px) + 8px);
    z-index: 5;
    margin-block-end: var(--space-5);
    padding-block: var(--space-2);
    background: oklch(from var(--paper) l c h / 0.94);
    backdrop-filter: blur(6px);
    border-block: 1px solid var(--rule);
}
.photo-gallery-page__jump-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.photo-gallery-page__jump-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: oklch(from var(--paper-deep) l c h / 0.55);
    color: var(--ink);
    font-family: var(--font-en-body);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease-out, color 0.18s ease-out;
}
.photo-gallery-page__jump-link:hover,
.photo-gallery-page__jump-link:focus-visible {
    background: oklch(from var(--vermillion) l c h / 0.10);
    color: var(--vermillion-text, var(--vermillion));
}
.photo-gallery-page__jump-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: oklch(from var(--paper) l c h / 0.9);
    color: var(--vermillion-text, var(--vermillion));
    font-size: 0.74rem;
    font-weight: 600;
}
.photo-gallery-page__jump-count--empty {
    background: transparent;
    color: var(--ink-faint);
    min-width: 0;
    padding: 0;
}

.photo-gallery-page__projects {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

/* Single project band, hairline above + project header + photo grid. */
.photo-gallery-project {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--rule);
}
.photo-gallery-project:first-child {
    padding-block-start: 0;
    border-block-start: none;
}
.photo-gallery-project__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block-end: var(--space-4);
}
.photo-gallery-project__head-text {
    flex: 1 1 360px;
}
.photo-gallery-project__title {
    font-family: var(--font-en-display);
    font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.2;
}
.photo-gallery-project__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-family: var(--font-en-body);
    font-size: 0.88rem;
    margin: 0;
}
.photo-gallery-project__location,
.photo-gallery-project__photo-count {
    color: var(--ink-soft);
}
.photo-gallery-project__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vermillion-text, var(--vermillion));
    font-family: var(--font-en-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color 0.18s ease-out;
    flex: 0 0 auto;
}
.photo-gallery-project__link:hover,
.photo-gallery-project__link:focus-visible {
    border-block-end-color: currentColor;
}
.photo-gallery-project__link svg {
    transition: transform 0.18s ease-out;
}
.photo-gallery-project__link:hover svg {
    transform: translateX(3px);
}

/* Photo grid: masonry-ish via grid auto-rows, lets editor-uploaded
   landscape + portrait shots co-exist without forced cropping at the
   wrapper level (the {% image %} tag still does fill-720x540 for
   uniform thumbnails, but the wrapper respects natural width). */
.photo-gallery-project__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.photo-gallery-project--empty .photo-gallery-project__title {
    color: var(--ink-soft);
}
.photo-gallery-project__empty-hint {
    margin-block-start: var(--space-3);
    color: var(--ink-soft);
    font-family: var(--font-en-body);
    font-size: 0.88rem;
    font-style: italic;
    max-width: 60ch;
}

/* Single photo tile: figure + image + optional caption. */
.photo-gallery-tile {
    margin: 0;
}
.photo-gallery-tile figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.photo-gallery-tile__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    transition: transform 0.4s ease-out;
}
.photo-gallery-tile figure:hover .photo-gallery-tile__img {
    transform: scale(1.01);
}
.photo-gallery-tile__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-en-body);
    font-size: var(--fs-marginalia, 0.82rem);
    color: var(--ink-soft);
    line-height: 1.4;
}
.photo-gallery-tile__date {
    color: var(--ink-faint);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
}

/* First-run state: empty hub with one big nudge. */
.photo-gallery-page__first-run {
    text-align: center;
    padding-block: var(--space-6);
}
.photo-gallery-page__first-run-body {
    max-width: 60ch;
    margin: var(--space-3) auto var(--space-5);
    color: var(--ink-soft);
}
.photo-gallery-page__first-run .photo-gallery-project__grid {
    text-align: start;
}

@media (max-width: 640px) {
    .photo-gallery-project__head {
        align-items: flex-start;
    }
    .photo-gallery-project__title {
        font-size: 1.4rem;
    }
    .photo-gallery-project__grid {
        grid-template-columns: 1fr;
    }
    .photo-gallery-page__jump {
        margin-inline: calc(var(--space-4) * -1);
        padding-inline: var(--space-4);
    }
}

/* Project-index → Gallery cross-link, sits in the index header. */
.projects-index__gallery-link {
    margin-block-start: var(--space-3);
}
.projects-index__gallery-link .btn--sm {
    font-size: 0.86rem;
    padding: 8px 14px;
}

/* "View all N photos" link, surfaces when a project has more photos
   than the gallery hub's per-project cap. Manuscript-grade quiet:
   underline on hover, no button chrome. */
.photo-gallery-project__more {
    margin-block-start: var(--space-3);
    text-align: end;
}
.photo-gallery-project__more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vermillion-text, var(--vermillion));
    font-family: var(--font-en-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color 0.18s ease-out;
}
.photo-gallery-project__more-link:hover,
.photo-gallery-project__more-link:focus-visible {
    border-block-end-color: currentColor;
}
.photo-gallery-project__more-link span {
    transition: transform 0.18s ease-out;
}
.photo-gallery-project__more-link:hover span {
    transform: translateX(3px);
}

/* ----------------------------------------------------------------------
   Featured documentary band: compact hero with poster + serif headline
   + play button. Built to grab attention on the home page; also usable
   on the gallery, About / History, fundraising pages.

   Sizing target: ~480px tall on desktop, smaller on mobile. The
   previous tuning topped out at ~700px which crowded other content
   below it on the gallery hub. Poster column is capped at 540px to
   stop it ballooning at ultra-wide viewports.
   ---------------------------------------------------------------------- */
.featured-doc {
    position: relative;
    background: oklch(0.18 0.025 175);
    color: oklch(0.94 0.01 80);
    padding: var(--space-5) 0;
    overflow: hidden;
    isolation: isolate;
}
.featured-doc::before {
    /* Subtle gold-leaf radial behind the copy column: adds depth
       without competing with the poster on the right. Kept low
       chroma so it doesn't read as "spotlight" branding. */
    content: "";
    position: absolute;
    inset: -10% -20% auto auto;
    width: 50%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side,
        oklch(0.78 0.12 75 / 0.16),
        oklch(0.78 0.12 75 / 0));
    z-index: -1;
    pointer-events: none;
}
.featured-doc__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-5);
    align-items: center;
}
@media (max-width: 720px) {
    .featured-doc__inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .featured-doc {
        padding: var(--space-4) 0;
    }
}
.featured-doc__copy {
    max-width: 48ch;
    min-width: 0;
}
.featured-doc__eyebrow {
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    font-weight: 600;
    color: oklch(0.78 0.12 75);
}
.featured-doc__heading {
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
    color: oklch(0.97 0.01 80);
    text-wrap: balance;
}
.featured-doc__lead {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 var(--space-4);
    color: oklch(0.94 0.01 80 / 0.86);
}
.featured-doc__lead p {
    margin: 0;
}
.featured-doc__play {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 1.4em 0.85em 1em;
    font-size: 1.02rem;
    font-weight: 600;
    background: oklch(0.78 0.12 75);
    color: oklch(0.18 0.025 175);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 18px 36px -22px oklch(0.05 0.04 75 / 0.6);
}
.featured-doc__play:hover,
.featured-doc__play:focus-visible {
    transform: translateY(-2px);
    background: oklch(0.82 0.13 75);
    box-shadow: 0 22px 44px -22px oklch(0.05 0.04 75 / 0.7);
    outline: none;
}
.featured-doc__play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: oklch(0.18 0.025 175);
    color: oklch(0.78 0.12 75);
}
.featured-doc__duration {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    opacity: 0.78;
    margin-inline-start: 0.4em;
    padding-inline-start: 0.7em;
    border-inline-start: 1px solid oklch(0.18 0.025 175 / 0.45);
}
.featured-doc__hint {
    margin: 0;
    font-size: 0.88rem;
    color: oklch(0.94 0.01 80 / 0.7);
    border: 1px dashed oklch(0.94 0.01 80 / 0.3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}

/* Poster column: clickable card. The play overlay (.poster-play) is
   absolutely positioned over the image for a YouTube-style affordance.
   max-width caps the poster at a sensible size on ultra-wide viewports
   so it doesn't blow up to 1000px+ tall when the band is full-bleed
   and the grid hands it a giant column. */
.featured-doc__poster {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 540px;
    margin-inline-start: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: oklch(0.22 0.02 175);
    box-shadow: 0 24px 48px -28px oklch(0.05 0.04 175 / 0.55);
}
@media (max-width: 720px) {
    .featured-doc__poster {
        margin-inline: auto;
    }
}
.featured-doc__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-out, ease-out);
}
.featured-doc__poster:hover .featured-doc__poster-img {
    transform: scale(1.04);
}
.featured-doc__poster-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: oklch(0.94 0.01 80 / 0.55);
}
.featured-doc__poster-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at center,
        oklch(0.05 0.02 175 / 0.0) 30%,
        oklch(0.05 0.02 175 / 0.25) 60%,
        oklch(0.05 0.02 175 / 0.55) 100%);
    border: none;
    cursor: pointer;
    color: oklch(0.78 0.12 75);
    transition: color 0.18s ease, background 0.18s ease;
}
.featured-doc__poster-play:hover,
.featured-doc__poster-play:focus-visible {
    color: oklch(0.85 0.13 75);
    outline: none;
}
.featured-doc__poster-play svg {
    filter: drop-shadow(0 8px 24px oklch(0.05 0.04 75 / 0.45));
    transition: transform 0.2s var(--ease-out, ease-out);
}
.featured-doc__poster-play:hover svg {
    transform: scale(1.06);
}

/* Lightbox modal: covers the page, locks scroll, embeds the iframe
   or video at 16:9. Click on the backdrop OR the close button to
   dismiss. */
.featured-doc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: featured-doc-modal-in 0.22s var(--ease-out, ease-out);
}
.featured-doc-modal[hidden] {
    display: none;
}
@keyframes featured-doc-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.featured-doc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0.05 0.02 175 / 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    cursor: pointer;
    padding: 0;
}
.featured-doc-modal__frame {
    position: relative;
    width: min(1100px, 96vw);
    max-height: 90vh;
    background: oklch(0.18 0.025 175);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 40px 80px -20px oklch(0.02 0.02 175 / 0.7);
    display: flex;
    flex-direction: column;
}
.featured-doc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: oklch(0.94 0.01 80);
    border-bottom: 1px solid oklch(0.94 0.01 80 / 0.12);
}
.featured-doc-modal__title {
    margin: 0;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.featured-doc-modal__close {
    border: none;
    background: oklch(0.94 0.01 80 / 0.08);
    color: oklch(0.94 0.01 80);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.featured-doc-modal__close:hover,
.featured-doc-modal__close:focus-visible {
    background: oklch(0.94 0.01 80 / 0.18);
    outline: none;
}
.featured-doc-modal__iframe,
.featured-doc-modal__video {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    background: black;
    border: none;
    display: block;
}

/* ----------------------------------------------------------------------
   Apply page: admissions form for the madrasa.
   Matches the contact form aesthetic but framed as a single card so the
   form feels considered, not utilitarian. Trust row above sets the
   tone (response time, intake window, bursaries). Output persists to
   the Application snippet for editor triage in the Wagtail admin.
   ---------------------------------------------------------------------- */
.apply-page {
    max-width: 760px;
    margin-inline: auto;
    padding-block-end: var(--space-8);
}
.apply-page .content-page__header {
    text-align: left;
    margin-block-end: var(--space-5);
}
.apply-page .content-page__intro {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 60ch;
}

/* Trust row: 3 short benefit badges shown above the form. Pure typography
   on a tinted background: no decorative icons (the words do the work). */
.apply-trust {
    margin-block-end: var(--space-5);
}
.apply-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.apply-trust__list li {
    padding: var(--space-3) var(--space-4);
    background: var(--cream-light);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 4px;
    align-content: start;
}
.apply-trust__list strong {
    font-family: var(--font-en-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.apply-trust__list span {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--muted);
}

/* The form card itself. Generous padding so it reads as a deliberate
   surface, not a stack of inputs. */
.apply-form-section {
    margin-block-start: var(--space-4);
}
.apply-page__form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-6);
    box-shadow: 0 24px 48px -36px oklch(from var(--ink) l c h / 0.28);
}

/* One vertical field. Labels above inputs, with optional help below. */
.apply-page__field {
    margin-block-end: var(--space-4);
    display: grid;
    gap: 6px;
}
.apply-page__field label {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: var(--muted);
}
.apply-page__field input,
.apply-page__field textarea,
.apply-page__field select {
    width: 100%;
    padding: 0.65em 0.85em;
    font: inherit;
    color: var(--ink);
    background: var(--cream-light);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    /* Strip the UA-rendered control background so our explicit
       background:var(--cream-light) wins in both color schemes -
       Chrome paints a white box for textfields under color-scheme:dark
       otherwise, ignoring the cascaded background. */
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.apply-page__field input:focus,
.apply-page__field textarea:focus,
.apply-page__field select:focus {
    outline: none;
    border-color: var(--forest, var(--ink));
    background: var(--paper);
    box-shadow: 0 0 0 3px oklch(from var(--forest, var(--ink)) l c h / 0.16);
}
.apply-page__field textarea {
    min-height: 140px;
    resize: vertical;
}
.apply-page__field small {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}
.apply-page__field .errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--red, oklch(0.55 0.18 25));
    font-size: 0.82rem;
}

/* Two-column field row that collapses to a single column on small
   screens so the email/phone and age/course pairs sit side-by-side
   on desktop without crowding mobile. */
.apply-page__field-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr 1fr;
    margin-block-end: 0;
}
.apply-page__field-row .apply-page__field {
    margin-block-end: var(--space-4);
}
@media (max-width: 600px) {
    .apply-page__field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Submit button + the privacy reassurance below it. Centered text on
   the privacy line keeps it visually quiet. */
.apply-page__submit {
    margin-block-start: var(--space-5);
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}
.apply-page__submit .btn--large {
    padding: 0.95em 2em;
    font-size: 1.02rem;
}
.apply-page__privacy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

.apply-page__alert {
    background: oklch(from var(--red, oklch(0.55 0.18 25)) l c h / 0.08);
    border: 1px solid oklch(from var(--red, oklch(0.55 0.18 25)) l c h / 0.4);
    color: var(--red, oklch(0.45 0.18 25));
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-4);
    font-size: 0.92rem;
}

/* Dark-mode rescope: form card sits on the dark page, raised one
   step so it reads as a deliberate surface. Inputs are slightly
   sunken vs. the card so the field shape stays scannable. Direct
   oklch values rather than relative-color (var()) syntax for the
   widest browser support. */
html[data-theme="dark"] .apply-trust__list li,
html[data-theme="dark"] .apply-page__form {
    background: oklch(0.22 0.02 265);
    border-color: oklch(0.32 0.02 265);
}
/* High-specificity input styling: wraps all type=text/email/tel/etc.
   inside the apply form so it beats the global form-input rule
   (html[data-theme=dark] input[type=text]) at line ~17523 of this file
   in source order. The global rule was painting our inputs white
   because it lacks the .apply-page__form parent in its selector. */
.apply-page__form input[type="text"],
.apply-page__form input[type="email"],
.apply-page__form input[type="tel"],
.apply-page__form input[type="number"],
.apply-page__form textarea,
.apply-page__form select {
    background: var(--cream-light);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .apply-page__form input[type="text"],
html[data-theme="dark"] .apply-page__form input[type="email"],
html[data-theme="dark"] .apply-page__form input[type="tel"],
html[data-theme="dark"] .apply-page__form input[type="number"],
html[data-theme="dark"] .apply-page__form textarea,
html[data-theme="dark"] .apply-page__form select {
    background: oklch(0.16 0.02 265);
    border-color: oklch(0.32 0.02 265);
    color: var(--ink);
}
html[data-theme="dark"] .apply-page__form input[type="text"]:focus,
html[data-theme="dark"] .apply-page__form input[type="email"]:focus,
html[data-theme="dark"] .apply-page__form input[type="tel"]:focus,
html[data-theme="dark"] .apply-page__form input[type="number"]:focus,
html[data-theme="dark"] .apply-page__form textarea:focus,
html[data-theme="dark"] .apply-page__form select:focus {
    background: oklch(0.20 0.02 265);
    border-color: oklch(0.62 0.10 155);
}

/* ----------------------------------------------------------------------
   Remembrance band: manuscript-style strip naming contributors who've
   passed away. Honored contributors render as a dignified card grid;
   long village roll renders as a continuous duʿā ribbon (CSS marquee).
   ---------------------------------------------------------------------- */
.remembrance {
    background: oklch(0.97 0.01 80);
    color: var(--ink);
    padding: var(--space-7) 0 var(--space-6);
    border-top: 1px solid oklch(from var(--gold) l c h / 0.25);
    border-bottom: 1px solid oklch(from var(--gold) l c h / 0.25);
    overflow: hidden;
}
.remembrance__inner {
    display: grid;
    gap: var(--space-5);
}
.remembrance__head {
    text-align: center;
    max-width: 64ch;
    margin-inline: auto;
    display: grid;
    gap: var(--space-2);
}
.remembrance__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vermillion-text, var(--gold));
}
.remembrance__heading {
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}
.remembrance__lead {
    margin: 0;
    color: var(--ink-soft, var(--muted));
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 56ch;
    margin-inline: auto;
}
.remembrance__bismillah {
    margin: var(--space-2) 0 0;
    font-family: var(--font-ar-display, "Amiri", serif);
    font-size: 1.4rem;
    color: var(--gold);
    opacity: 0.78;
    letter-spacing: 0.02em;
}

/* Short list → card grid */
.remembrance__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.remembrance__card {
    background: var(--paper);
    border: 1px solid oklch(from var(--gold) l c h / 0.18);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    text-align: center;
    display: grid;
    gap: 4px;
    align-content: start;
    box-shadow: 0 8px 20px -16px oklch(from var(--ink) l c h / 0.18);
    transition: transform 0.18s var(--ease-out, ease-out),
                box-shadow 0.18s var(--ease-out, ease-out);
}
.remembrance__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px oklch(from var(--ink) l c h / 0.24);
}
.remembrance__name-en {
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.remembrance__name-bn {
    font-family: var(--font-bn, "Hind Siliguri", sans-serif);
    font-size: 0.95rem;
    color: var(--ink-soft, var(--muted));
    margin: 0;
    line-height: 1.4;
}
.remembrance__role {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--vermillion-text, var(--gold));
    margin: 4px 0 0;
}
.remembrance__date {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 6px 0 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.remembrance__note {
    margin: 6px 0 0;
    font-size: 0.86rem;
    color: var(--ink-soft, var(--muted));
    line-height: 1.4;
}

/* Long roll → continuous ribbon (CSS marquee) */
.remembrance__ribbon {
    overflow: hidden;
    mask-image: linear-gradient(to right,
        transparent 0,
        black 6%,
        black 94%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        black 6%,
        black 94%,
        transparent 100%);
}
.remembrance__ribbon-track {
    display: flex;
    gap: var(--space-5);
    width: max-content;
    animation: remembrance-scroll 90s linear infinite;
}
.remembrance__ribbon:hover .remembrance__ribbon-track,
.remembrance__ribbon:focus-within .remembrance__ribbon-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .remembrance__ribbon-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }
    .remembrance__ribbon {
        mask-image: none;
        -webkit-mask-image: none;
    }
}
.remembrance__ribbon .remembrance__name {
    display: inline-grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    border: 1px solid oklch(from var(--gold) l c h / 0.18);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    min-width: 180px;
    text-align: center;
}
@keyframes remembrance-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Dark-mode rescope */
html[data-theme="dark"] .remembrance {
    background: oklch(0.20 0.02 265);
    border-color: oklch(from var(--gold) l c h / 0.22);
}
html[data-theme="dark"] .remembrance__card,
html[data-theme="dark"] .remembrance__ribbon .remembrance__name {
    background: oklch(0.24 0.02 265);
    border-color: oklch(from var(--gold) l c h / 0.22);
}

/* ==========================================================================
   Charity-home rebuild blocks (2026-05).
   - .service-categories: "What we do" 6-card grid (icon + title + lead).
   - .mission-vision: paired statements with serif headings.
   - .featured-projects: live DonationCampaign cards with progress bars.
   ========================================================================== */

.service-categories {
    padding: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.service-categories__head {
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 720px;
}
.service-categories__eyebrow {
    color: var(--forest);
    margin: 0 0 0.5rem;
}
.service-categories__heading {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-en-display);
    color: var(--ink);
    letter-spacing: -0.01em;
}
.service-categories__lead {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}
.service-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.service-categories__card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}
.service-categories__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px oklch(from var(--ink) l c h / 0.08);
    border-color: oklch(from var(--forest) l c h / 0.3);
}
.service-categories__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: oklch(0.96 0.04 145);
    color: var(--forest);
    margin-bottom: 0.25rem;
}
.service-categories__title {
    margin: 0;
    font-family: var(--font-en-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.service-categories__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.service-categories__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--forest);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.2s ease-out;
}
.service-categories__cta:hover {
    gap: 0.6rem;
    text-decoration: underline;
}
.service-categories__empty {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: 2rem;
}

.mission-vision {
    padding: 0;
    background: linear-gradient(
        180deg,
        var(--cream-light, var(--paper)) 0%,
        var(--paper) 100%
    );
}
.mission-vision__head {
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 720px;
}
.mission-vision__eyebrow {
    color: var(--gold);
    margin: 0 0 0.5rem;
}
.mission-vision__heading {
    margin: 0;
    font-family: var(--font-en-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ink);
    letter-spacing: -0.01em;
}
.mission-vision__pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 720px) {
    .mission-vision__pair {
        grid-template-columns: 1fr;
    }
}
.mission-vision__panel {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.75rem 1.75rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.mission-vision__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}
.mission-vision__panel--mission::before {
    background: radial-gradient(
        circle at 100% 0%,
        oklch(from var(--forest) l c h / 0.12) 0%,
        transparent 55%
    );
}
.mission-vision__panel--vision::before {
    background: radial-gradient(
        circle at 100% 0%,
        oklch(from var(--gold) l c h / 0.16) 0%,
        transparent 55%
    );
}
.mission-vision__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    border: 1px solid var(--line);
    margin-bottom: 0.85rem;
    position: relative;
}
.mission-vision__panel--mission .mission-vision__icon {
    color: var(--forest);
}
.mission-vision__panel--vision .mission-vision__icon {
    color: var(--gold);
}
.mission-vision__panel-title {
    margin: 0 0 0.65rem;
    font-family: var(--font-en-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    position: relative;
}
.mission-vision__panel-body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    position: relative;
}

.featured-projects {
    padding: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.featured-projects__head {
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 720px;
}
.featured-projects__eyebrow {
    color: var(--vermillion, var(--gold));
    margin: 0 0 0.5rem;
}
.featured-projects__heading {
    margin: 0 0 0.75rem;
    font-family: var(--font-en-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ink);
    letter-spacing: -0.01em;
}
.featured-projects__lead {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}
.featured-projects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.featured-projects__card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.featured-projects__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px oklch(from var(--ink) l c h / 0.08);
}
.featured-projects__card-link {
    display: block;
    padding: 1.5rem 1.5rem 1.25rem;
    color: inherit;
    text-decoration: none;
}
.featured-projects__card-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-en-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}
.featured-projects__card-lead {
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.featured-projects__progress-bar {
    height: 8px;
    background: oklch(from var(--ink) l c h / 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 0.75rem;
}
.featured-projects__progress-fill {
    display: block;
    height: 100%;
    width: var(--pct, 0%);
    background: linear-gradient(
        90deg,
        var(--forest) 0%,
        oklch(from var(--forest) calc(l + 0.12) c h) 100%
    );
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-projects__progress-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
}
.featured-projects__progress-meta div {
    text-align: center;
}
.featured-projects__progress-meta dt {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}
.featured-projects__progress-meta dd {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.featured-projects__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--forest);
    font-weight: 600;
    font-size: 0.9rem;
    transition: gap 0.2s ease-out;
}
.featured-projects__card-link:hover .featured-projects__cta {
    gap: 0.65rem;
}
.featured-projects__empty {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: 2rem;
}

html[data-theme="dark"] .service-categories,
html[data-theme="dark"] .featured-projects {
    background: var(--paper);
}
html[data-theme="dark"] .service-categories__card,
html[data-theme="dark"] .mission-vision__panel,
html[data-theme="dark"] .featured-projects__card {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .service-categories__icon {
    background: oklch(0.28 0.06 145);
    color: oklch(0.85 0.1 145);
}
html[data-theme="dark"] .featured-projects__progress-bar {
    background: oklch(from var(--ink) l c h / 0.18);
}

/* ==========================================================================
   Donate paths: chapter index (2026-05-17 redesign).

   Replaces a <details> accordion that:
     - hid 14 channels behind 4 clicks (fought the 90-second-to-Pay target)
     - rendered each entry as a rounded gray card with hover-lift + shadow
       (violates DESIGN.md "cards die in this system", max-radius-4px,
       no-shadow-lift)
     - used forest-green count pills + a forest gradient on monthly
       (violates "never use forest green" + "never use gold/forest as fill")

   New pattern: two-column manuscript table-of-contents (fihrist).
     - Left column: sticky category eyebrow (small-caps sepia marginalia).
     - Right column: list of chapter rows, separated by 1px gold-leaf
       hairlines. Whole row is the link; hover shifts title to vermillion.
     - Featured rows (zakat, monthly: the two highest-conversion channels
       per PRODUCT.md) carry permanent vermillion + a leading em-rule.
     - Mobile: collapses to a single column, eyebrow stacks above entries.

   Token fallbacks are belt-and-braces: the design-system migration uses
   --vermillion / --sepia / --gold-leaf, but the existing tokens.css still
   ships --vermillion-text / --ink-soft / --gold-soft. The var() chains
   resolve to whichever exists, then to the OKLCH literal as a final
   safety net so this never falls back to forest-green by accident.
   ========================================================================== */
.donate-paths-index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 4.25rem);
}

.donate-paths-index__chapter {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.donate-paths-index__chapter-head {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 12px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.donate-paths-index__chapter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sepia, var(--ink-soft, oklch(0.50 0.05 50)));
    line-height: 1.3;
}

.donate-paths-index__chapter-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    opacity: 0.85;
}

.donate-paths-index__chapter-blurb {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    max-width: 26ch;
}

.donate-paths-index__entries {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--gold-leaf, var(--gold-soft, oklch(0.75 0.10 75 / 0.6)));
}

.donate-paths-index__entry {
    border-bottom: 1px solid var(--gold-leaf, var(--gold-soft, oklch(0.75 0.10 75 / 0.6)));
}

.donate-paths-index__link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title arrow"
        "desc  arrow";
    column-gap: clamp(1rem, 3vw, 2rem);
    row-gap: 5px;
    align-items: baseline;
    padding: 1.1rem 0;
    text-decoration: none;
    color: var(--ink, oklch(0.20 0.015 270));
}

.donate-paths-index__link:focus-visible {
    outline: 2px solid var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    outline-offset: 4px;
    border-radius: 2px;
}

.donate-paths-index__title {
    grid-area: title;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.donate-paths-index__desc {
    grid-area: desc;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    max-width: 56ch;
}

.donate-paths-index__arrow {
    grid-area: arrow;
    align-self: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--sepia, var(--ink-soft, oklch(0.50 0.05 50)));
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.7;
}

.donate-paths-index__link:hover .donate-paths-index__title,
.donate-paths-index__link:focus-visible .donate-paths-index__title {
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
}

.donate-paths-index__link:hover .donate-paths-index__arrow,
.donate-paths-index__link:focus-visible .donate-paths-index__arrow {
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    transform: translateX(3px);
    opacity: 1;
}

/* Featured entries (zakat, monthly): permanently vermillion title with a
   leading em-rule ornament. Marks them as load-bearing chapter heads per
   the principle "vermillion is rare: when the donor sees it, the moment
   matters." */
.donate-paths-index__entry--featured .donate-paths-index__title {
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    position: relative;
    padding-left: 22px;
}

.donate-paths-index__entry--featured .donate-paths-index__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

/* Respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .donate-paths-index__title,
    .donate-paths-index__arrow {
        transition: none;
    }
    .donate-paths-index__link:hover .donate-paths-index__arrow,
    .donate-paths-index__link:focus-visible .donate-paths-index__arrow {
        transform: none;
    }
}

/* Mobile: single column, eyebrow stacks above the entries. */
@media (max-width: 720px) {
    .donate-paths-index {
        gap: clamp(1.75rem, 5vw, 2.5rem);
    }
    .donate-paths-index__chapter {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .donate-paths-index__chapter-head {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 12px;
        padding-top: 0;
    }
    .donate-paths-index__chapter-blurb {
        flex-basis: 100%;
        max-width: none;
    }
    .donate-paths-index__link {
        padding: 0.95rem 0;
    }
    .donate-paths-index__title {
        font-size: 1.1rem;
    }
}

/* RTL: flip the meta column, mirror the leading em-rule ornament. */
[dir="rtl"] .donate-paths-index__link {
    grid-template-areas:
        "arrow title"
        "arrow desc";
}
[dir="rtl"] .donate-paths-index__arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .donate-paths-index__link:hover .donate-paths-index__arrow,
[dir="rtl"] .donate-paths-index__link:focus-visible .donate-paths-index__arrow {
    transform: scaleX(-1) translateX(3px);
}
[dir="rtl"] .donate-paths-index__entry--featured .donate-paths-index__title {
    padding-left: 0;
    padding-right: 22px;
}
[dir="rtl"] .donate-paths-index__entry--featured .donate-paths-index__title::before {
    left: auto;
    right: 0;
}

/* Dark theme (candlelight reading): hairlines brighten so they stay
   visible on the deep indigo surface; the ink swap is handled by the
   global theme tokens. */
html[data-theme="dark"] .donate-paths-index__entries,
html[data-theme="dark"] .donate-paths-index__entry {
    border-color: var(--gold-leaf-bright, var(--gold-soft, oklch(0.85 0.13 80 / 0.45)));
}

/* ==========================================================================
   Charity-home polish pass (2026-05 founder review).
   - .hero__trust-line: small emotional trust line below the hero CTAs
   - .quick-donate__reassurance: 3-pill strip above the payment logos
   - Section background alternation on home blocks (cream / paper rhythm
     to break up the "too much green" complaint)
   - .service-categories__desc: clamp card body to 2 lines on mobile
   - Top-4 impact stats: larger visual treatment via :nth-child rules
   ========================================================================== */

.hero__trust-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    padding: 0.4rem 0.75rem;
    background: oklch(0.96 0.04 145 / 0.6);
    border-radius: 999px;
    color: var(--forest);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    max-width: max-content;
}
.hero__trust-line svg {
    flex: 0 0 auto;
    color: var(--gold);
}

.quick-donate__reassurance {
    list-style: none;
    margin: 0.85rem 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    justify-content: center;
}
.quick-donate__reassurance li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}
.quick-donate__reassurance svg {
    color: var(--forest);
    opacity: 0.85;
}

/* Section background alternation. Each home-block sits at the top
   level of .home-leaf; we colour-alternate every other one so the
   page reads as cream → paper → cream → paper rather than a single
   flat colour. Blocks that bring their own background (hero,
   featured_documentary, geometry_divider) are exempted.

   The :is() selector lets us hand-pick which block types stay neutral
   so the alternation only applies to content sections that don't
   already paint their own surface. */
.home-leaf .home-block:nth-child(odd):not(.home-block--hero):not(.home-block--featured_documentary):not(.home-block--geometry_divider) {
    background: var(--cream-light, var(--paper));
}
.home-leaf .home-block:nth-child(even):not(.home-block--hero):not(.home-block--featured_documentary):not(.home-block--geometry_divider) {
    background: var(--paper);
}

/* The block templates set their own backgrounds via .service-categories,
   .featured-projects etc.; override them so the alternation rule wins.
   We keep .mission-vision's subtle gradient because it gives the
   purpose-statement section its emotional warmth. */
.home-leaf .home-block .service-categories,
.home-leaf .home-block .featured-projects,
.home-leaf .home-block .donate-paths {
    background: transparent;
    border-color: transparent;
}

/* 2-line clamp on service-category card descriptions (founder feedback:
   paragraph-heavy on mobile, donors skim). Falls back gracefully on
   browsers without -webkit-line-clamp by just letting the text wrap. */
.service-categories__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Top-4 impact stats get a larger visual treatment (founder feedback:
   not all stats are equally important: surface the headline ones).
   The .impact-stats container uses a flat grid; the first 4 children
   become larger via a span and bumped number font-size. We don't know
   the exact class names without checking the block template, so this
   rule is defensive: it only takes effect if the existing grid
   container has the class. */
.impact-stats__grid > .impact-stat:nth-child(-n + 4) .impact-stat__number,
.impact-band__grid > .impact-band__stat:nth-child(-n + 4) .impact-band__number {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
}
.impact-stats__grid > .impact-stat:nth-child(-n + 4),
.impact-band__grid > .impact-band__stat:nth-child(-n + 4) {
    transform: scale(1);
    /* Visually anchor as "featured" via subtle outline. */
    position: relative;
}
.impact-stats__grid > .impact-stat:nth-child(-n + 4)::before,
.impact-band__grid > .impact-band__stat:nth-child(-n + 4)::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid oklch(from var(--gold) l c h / 0.25);
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 760px) {
    .quick-donate__reassurance {
        font-size: 0.68rem;
    }
    .quick-donate__reassurance li {
        flex: 0 0 auto;
    }
    .hero__trust-line {
        font-size: 0.78rem;
    }
}

html[data-theme="dark"] .hero__trust-line {
    background: oklch(0.28 0.06 145 / 0.5);
    color: oklch(0.88 0.1 145);
}
html[data-theme="dark"] .quick-donate__reassurance li {
    color: var(--ink-soft);
}
html[data-theme="dark"] .home-leaf .home-block:nth-child(odd):not(.home-block--hero):not(.home-block--featured_documentary):not(.home-block--geometry_divider) {
    background: oklch(from var(--paper) calc(l + 0.02) c h);
}

/* ==========================================================================
   Zakat info page: 3-path decision diagram (2026-05 founder brief).
   Renders only on /donate/zakat/ (slug=="zakat" check in template).
   Three columns: Calculate / Pay now (featured) / Set up a plan.
   ========================================================================= */
.zakat-paths {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    background: var(--cream-light, var(--paper));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.zakat-paths__head {
    text-align: center;
    margin: 0 auto 1.75rem;
    max-width: 720px;
}
.zakat-paths__head .eyebrow {
    color: var(--gold);
    margin: 0 0 0.5rem;
}
.zakat-paths__heading {
    margin: 0 0 0.65rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.zakat-paths__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}
.zakat-paths__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.zakat-path {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    align-items: center;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.zakat-path:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px oklch(from var(--ink) l c h / 0.08);
    border-color: oklch(from var(--forest) l c h / 0.35);
}
.zakat-path--featured {
    /* The "Pay now" card is the primary action when the donor already
       knows their amount: surface it as the recommended path. */
    background: linear-gradient(180deg, oklch(0.96 0.04 145) 0%, var(--cream) 100%);
    border-color: oklch(from var(--forest) l c h / 0.45);
    box-shadow: 0 6px 20px oklch(from var(--forest) l c h / 0.12);
}
.zakat-path__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: oklch(0.96 0.04 145);
    color: var(--forest);
    margin-bottom: 0.25rem;
}
.zakat-path--featured .zakat-path__icon {
    background: var(--forest);
    color: var(--cream);
}
.zakat-path__title {
    margin: 0;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.zakat-path__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    flex: 1 1 auto;
}
.zakat-path__cta {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
html[data-theme="dark"] .zakat-paths {
    background: oklch(from var(--paper) calc(l + 0.02) c h);
}
html[data-theme="dark"] .zakat-path {
    background: var(--cream);
    border-color: var(--line);
}

/* In-page quick-pay widget (sits below the 3 path cards). The path
   CTAs scroll here + preselect Single or Regular instead of bouncing
   the donor to a generic /donate/ page. The hero-donate-widget is
   wider than the cards above; we cap it to a comfortable form-width
   so the layout still reads as one section, not two. */
.zakat-paths__widget {
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
    max-width: 560px;
    scroll-margin-top: clamp(5rem, 4rem + 2vw, 7rem);
}
.zakat-paths__widget-head {
    text-align: center;
    margin: 0 0 1.25rem;
}
.zakat-paths__widget-head .eyebrow {
    margin: 0 0 0.4rem;
    color: var(--gold);
}
.zakat-paths__widget-title {
    margin: 0;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
/* The .hero-widget inside the new container needs no extra chrome -
   it ships its own card treatment. We do remove the margin-top on
   the form so it sits flush under our widget-head. */
.zakat-paths__widget .hero-widget {
    margin-top: 0;
}

/* ==========================================================================
   Chairman profile page rebuild (2026-05).

   Founder brief: previous version felt like a database dump. New design
   anchors emotionally on the scholar via a large portrait + featured
   quote, then surfaces evidence (role, biography, lineage, lectures,
   Q&A by language, articles) in decreasing intimacy.

   Section rhythm: alternating cream / paper backgrounds, container-
   based max-widths, breathing serif headings. Subtle gold accents
   for "Islamic institution" feel without going kitsch.
   ========================================================================== */

.chairman-profile {
    color: var(--ink);
    /* The whole article paints its own surfaces section-by-section, so
       reset any base-template padding the article wrapper would add. */
}

/* ----- Breadcrumbs ----- */
.chairman-profile__breadcrumbs {
    padding: 1rem 0 0.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.chairman-profile__breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.chairman-profile__breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
.chairman-profile__breadcrumbs li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--ink-soft);
    opacity: 0.6;
}
.chairman-profile__breadcrumbs a {
    color: var(--forest);
    text-decoration: none;
}
.chairman-profile__breadcrumbs a:hover {
    text-decoration: underline;
}
.chairman-profile__breadcrumbs [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* ----- Hero (scholar left + message right) ----- */
.chairman-hero {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(
        180deg,
        var(--cream-light, var(--paper)) 0%,
        var(--paper) 100%
    );
    border-bottom: 1px solid var(--line);
    position: relative;
}
.chairman-hero::before {
    /* Subtle geometric watermark: gold 8-point star, very low opacity. */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            circle at 90% 10%,
            oklch(from var(--gold) l c h / 0.06) 0%,
            transparent 35%
        );
    pointer-events: none;
}
.chairman-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    position: relative;
}
@media (max-width: 880px) {
    .chairman-hero__inner {
        grid-template-columns: 1fr;
    }
}

/* Scholar column ------------------------------------------------------ */
.chairman-hero__scholar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.75rem;
    align-items: start;
}
@media (max-width: 600px) {
    .chairman-hero__scholar {
        grid-template-columns: 1fr;
    }
}
.chairman-hero__portrait {
    width: 100%;
    height: auto;
    max-height: 540px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow:
        0 1px 2px oklch(from var(--ink) l c h / 0.06),
        0 18px 40px oklch(from var(--ink) l c h / 0.1);
    border: 1px solid oklch(from var(--gold) l c h / 0.25);
}
.chairman-hero__portrait--placeholder {
    aspect-ratio: 3 / 4;
    background: var(--cream);
    border: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.chairman-hero__scholar-body {
    padding-top: 0.25rem;
}
.chairman-hero__eyebrow {
    color: var(--gold);
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.chairman-hero__name {
    margin: 0 0 0.35rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.chairman-hero__name-ar {
    margin: 0 0 0.15rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--forest);
    line-height: 1.3;
}
.chairman-hero__name-bn {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--ink-soft);
    line-height: 1.3;
}
.chairman-hero__bio-short {
    margin: 0.85rem 0 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 50ch;
}
.chairman-hero__pills {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chairman-hero__pill {
    padding: 0.3rem 0.65rem;
    background: oklch(0.96 0.04 145);
    color: oklch(0.35 0.1 145);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid oklch(0.85 0.06 145 / 0.4);
}
.chairman-hero__tenure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.chairman-hero__tenure svg {
    color: var(--gold);
}

/* Message column (quote + Ask CTA card) ------------------------------- */
.chairman-hero__message {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.chairman-hero__quote {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
}
.chairman-hero__quote-mark {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    color: var(--gold);
}
.chairman-hero__quote-body {
    margin: 0;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
    font-style: italic;
    color: var(--ink);
    position: relative;
}
.chairman-hero__quote-attribution {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 500;
}
.chairman-hero__cta-card {
    padding: 1.5rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
}
.chairman-hero__cta-heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}
.chairman-hero__cta-lead {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.chairman-hero__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.chairman-hero__cta-langs {
    list-style: none;
    margin: 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.chairman-hero__cta-langs li {
    position: relative;
}
.chairman-hero__cta-langs li + li::before {
    content: "·";
    margin-right: 0.75rem;
    color: var(--ink-soft);
    opacity: 0.5;
}

/* ----- Generic section wrapper ----- */
.chairman-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-bottom: 1px solid var(--line);
}
.chairman-section:nth-of-type(odd) {
    background: var(--paper);
}
.chairman-section:nth-of-type(even) {
    background: var(--cream-light, var(--paper));
}
.chairman-section__head {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.chairman-section__head--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    margin-bottom: 1rem;
}
.chairman-section__head .eyebrow {
    color: var(--gold);
    margin: 0 0 0.5rem;
}
.chairman-section__heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.chairman-section__heading--small {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}
.chairman-section__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}
.chairman-section__head--inline .chairman-section__lead {
    margin-left: 0;
    margin-right: 0;
}

/* ----- Role at madrasa ----- */
.chairman-role__body {
    max-width: 64ch;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
}
.chairman-role__body p {
    margin: 0 0 0.85rem;
}

/* ----- Biography ----- */
.chairman-biography__body {
    max-width: 64ch;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7;
}

/* ----- Ijazah ----- */
.chairman-ijazah__body {
    max-width: 64ch;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink);
}

/* ----- Featured lecture ----- */
.chairman-lecture__layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 880px) {
    .chairman-lecture__layout {
        grid-template-columns: 1fr;
    }
}
.chairman-lecture__player {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px oklch(from var(--ink) l c h / 0.08);
}
.chairman-lecture__summary {
    padding: 0.5rem 0;
}
.chairman-lecture__title {
    margin: 0 0 0.65rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}
.chairman-lecture__summary p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ----- Topic chips ----- */
.chairman-topics__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chairman-topics__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.chairman-topics__chip:hover {
    background: oklch(0.96 0.04 145);
    border-color: oklch(0.78 0.08 145 / 0.5);
    color: oklch(0.32 0.1 145);
}

/* ----- Q&A tabs + cards ----- */
.chairman-qas__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
}
.chairman-qas__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease-out, background 0.15s ease-out;
}
.chairman-qas__tab:hover {
    color: var(--ink);
    background: oklch(from var(--cream) calc(l - 0.02) c h);
}
.chairman-qas__tab.is-active {
    color: var(--forest);
    background: var(--cream);
    border-color: var(--line);
    border-bottom-color: var(--cream);
}
.chairman-qas__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    background: oklch(0.94 0.02 80);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.chairman-qas__tab.is-active .chairman-qas__tab-count {
    background: oklch(0.95 0.07 145);
    color: oklch(0.32 0.1 145);
}
.chairman-qas__panel {
    display: block;
}
.chairman-qas__panel[hidden],
.chairman-qas__panel:not(.is-active) {
    display: none;
}
.chairman-qas__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}
.chairman-qa-card {
    position: relative;
    display: block;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.chairman-qa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px oklch(from var(--ink) l c h / 0.08);
    border-color: oklch(from var(--forest) l c h / 0.3);
}
.chairman-qa-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.chairman-qa-card__category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--gold);
}
.chairman-qa-card__date {
    font-size: 0.75rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.chairman-qa-card__question {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.chairman-qa-card__summary {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.chairman-qa-card__arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: var(--forest);
    transition: transform 0.2s ease-out;
}
.chairman-qa-card:hover .chairman-qa-card__arrow {
    transform: translateX(3px);
}
.chairman-qas__foot {
    margin-top: 1.5rem;
    text-align: center;
}

/* ----- Articles grid ----- */
.chairman-articles__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.chairman-article-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.chairman-article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px oklch(from var(--ink) l c h / 0.08);
}
.chairman-article-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.chairman-article-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.chairman-article-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(from var(--cream) calc(l - 0.03) c h);
    color: var(--ink-soft);
    opacity: 0.6;
}
.chairman-article-card__body {
    padding: 1rem 1.25rem 1.25rem;
}
.chairman-article-card__date {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.chairman-article-card__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.chairman-article-card__lead {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ----- Mobile reordering ----- */
@media (max-width: 600px) {
    /* Mobile-first ordering per founder brief: name/title → portrait
       → bio → CTA → quote. Achieved via flex order on the hero
       elements when the scholar split collapses to one column. */
    .chairman-hero__scholar {
        display: flex;
        flex-direction: column;
    }
    .chairman-hero__scholar-body {
        order: 1;
    }
    .chairman-hero__portrait,
    .chairman-hero__portrait--placeholder {
        order: 2;
        margin-top: 1rem;
        max-height: 420px;
    }
}

/* ----- Dark theme ----- */
html[data-theme="dark"] .chairman-hero {
    background: linear-gradient(180deg, oklch(0.22 0.02 80) 0%, oklch(0.18 0.02 80) 100%);
}
html[data-theme="dark"] .chairman-hero__pill {
    background: oklch(0.28 0.07 145);
    color: oklch(0.85 0.11 145);
    border-color: oklch(0.4 0.08 145 / 0.5);
}
html[data-theme="dark"] .chairman-hero__quote,
html[data-theme="dark"] .chairman-hero__cta-card,
html[data-theme="dark"] .chairman-qa-card,
html[data-theme="dark"] .chairman-article-card,
html[data-theme="dark"] .chairman-topics__chip {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .chairman-qas__tab.is-active {
    background: var(--cream);
}

/* ==========================================================================
   Story-page cards: used inside the "Our work" rich_text block on
   /en/about/story/. Six labelled boxes (Education / Sponsorship / Food /
   Family / Buildings / Seasonal). Markup is hand-rolled inside the
   richtext block so editors can re-arrange cards by editing the HTML;
   styling here turns the divs into a responsive grid.
   ========================================================================= */
.content-page__body .story-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.content-page__body .story-card {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-left: 3px solid var(--forest);
    border-radius: var(--radius-sm);
    /* Cancel the richtext block's vertical rhythm so cards look like
       cards, not list items inside flowing prose. */
}
.content-page__body .story-card h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--forest);
}
.content-page__body .story-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}
html[data-theme="dark"] .content-page__body .story-card {
    background: var(--cream);
    border-color: var(--line);
    border-left-color: oklch(from var(--forest) calc(l + 0.15) c h);
}

/* ==========================================================================
   Story leaf, /en/about/story/, manuscript-page redesign (2026-05).

   Previous version was a stack of SaaS cards (icon medallions, big-
   number stat tiles, forest-gradient emotional panel, elevated CTA
   strip). Per DESIGN.md the brand exits that lane completely.

   New chrome obeys these laws:
     • Cards die. Sections separate via 1px gold-leaf hairlines and
       generous vertical breath. No card backgrounds, no shadows on
       body content, no border-radius greater than 4px anywhere.
     • Asymmetric leaf layout. Wider left margin carries marginalia
       (chapter numbers in sepia small-caps); the body sits indented.
     • Hierarchy via scale + weight, never colour. Display serif at
       genuine display size; body sans for prose.
     • Vermillion strictly for chapter heads + primary CTA. Forest is
       banished entirely. Gold-leaf is hairlines and tiny ornaments,
       never fills.
     • Roman numerals do the work of icon medallions in the flow + trust
       sections. No emoji, no 72px circles, no gradient connectors.
   ========================================================================== */

.story-leaf {
    color: var(--ink);
    background: var(--paper);
}

/* ----- Marginalia tokens (used in multiple sections) ----- */
.story-leaf .story-leaf__chapter-mark,
.story-leaf .story-leaf__eyebrow,
.story-leaf .story-leaf__chapter {
    display: inline-block;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia);
    margin: 0 0 0.85rem;
}

/* ----- Breadcrumbs (sepia marginalia row) ----- */
.story-leaf__breadcrumbs {
    padding: 1.5rem 0 0.85rem;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
    background: var(--paper);
}
.story-leaf__breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia);
}
.story-leaf__breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
.story-leaf__breadcrumbs li + li::before {
    content: "·";
    margin-right: 1.1rem;
    color: var(--sepia);
    opacity: 0.55;
}
.story-leaf__breadcrumbs a {
    color: var(--sepia);
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-leaf__breadcrumbs a:hover {
    color: var(--vermillion-text);
}
.story-leaf__breadcrumbs [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* ----- Hero: asymmetric leaf, vermillion display title ----- */
.story-leaf__hero {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
}
.story-leaf__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    align-items: start;
    max-width: 64rem;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .story-leaf__hero-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}
.story-leaf__marginalia {
    text-align: right;
    color: var(--sepia);
    padding-top: 0.85rem;
    border-right: 1px solid oklch(from var(--gold-leaf) l c h / 0.5);
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
    min-height: 5rem;
}
@media (max-width: 720px) {
    .story-leaf__marginalia {
        text-align: left;
        border-right: none;
        border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.5);
        padding-right: 0;
        padding-bottom: 0.65rem;
        min-height: 0;
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }
}
.story-leaf__marginalia .story-leaf__chapter {
    display: block;
    margin: 0 0 0.85rem;
    color: var(--sepia);
}
@media (max-width: 720px) {
    .story-leaf__marginalia .story-leaf__chapter {
        margin: 0;
        display: inline-block;
    }
}
.story-leaf__ornament {
    display: inline-flex;
    color: var(--vermillion-text);
    opacity: 0.85;
}
.story-leaf__hero-copy {
    max-width: 38rem;
}
.story-leaf__display {
    margin: 0 0 1.25rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(2.6rem, 1.8rem + 4.5vw, 4.4rem);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -0.018em;
    color: var(--vermillion-text);
}
.story-leaf__lede {
    margin: 0 0 2rem;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.18rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 30rem;
}
.story-leaf__lede p {
    margin: 0;
}
.story-leaf__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

/* ----- Ghost / utility link (used in hero + closing CTA) ----- */
.story-leaf__ghost-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.35rem 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.6);
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-leaf__ghost-link:hover {
    color: var(--vermillion-text);
    border-bottom-color: var(--vermillion);
}
.story-leaf__ghost-link svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-leaf__ghost-link:hover svg {
    transform: translateX(2px);
}

/* ----- Generic section frame ----- */
.story-leaf__section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
}
.story-leaf__section-head {
    max-width: 64rem;
    margin: 0 auto 2.5rem;
}
.story-leaf__section-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.story-leaf__section-lede {
    margin: 0.85rem 0 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 40rem;
}

/* ----- Chapter II: By the numbers (horizontal ledger run) ----- */
.story-leaf__ledger {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 64rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.story-leaf__ledger-row {
    flex: 1 1 12rem;
    padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
    border-right: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.story-leaf__ledger-row:last-child {
    border-right: none;
}
@media (max-width: 720px) {
    .story-leaf__ledger-row {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
        padding: 1.25rem 0;
    }
    .story-leaf__ledger-row:last-child {
        border-bottom: none;
    }
}
.story-leaf__ledger-num {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia);
}
.story-leaf__ledger-amount {
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.2rem);
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.story-leaf__ledger-suffix {
    color: var(--vermillion-text);
    font-weight: 400;
    margin-left: 0.04em;
}
.story-leaf__ledger-label {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ----- Chapter III: Body (editor StreamField narrative) ----- */
.story-leaf__prose {
    max-width: 38rem;
    margin: 0 auto;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink);
}
.story-leaf__prose h2 {
    margin: 2.5rem 0 0.85rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.story-leaf__prose h2:first-child {
    margin-top: 0;
}
.story-leaf__prose p {
    margin: 0 0 1.1rem;
}
.story-leaf__prose ul {
    margin: 0 0 1.1rem;
    padding-left: 1.2rem;
}
.story-leaf__prose li {
    margin: 0 0 0.45rem;
}
.story-leaf__prose a {
    color: var(--vermillion-text);
    text-decoration: underline;
    text-decoration-color: oklch(from var(--vermillion) l c h / 0.4);
    text-underline-offset: 3px;
}
.story-leaf__prose a:hover {
    text-decoration-color: var(--vermillion);
}

/* ----- Chapter IV: Donation flow (numbered chapters, no medallions) ----- */
.story-leaf__chapters {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 50rem;
    position: relative;
}
.story-leaf__chapters::before {
    /* Thin vertical gold-leaf rule running down the roman-numeral
       column: the page's spine, connecting chapters as a flow. */
    content: "";
    position: absolute;
    top: 0.65rem;
    bottom: 0.65rem;
    left: 1.65rem;
    width: 1px;
    background: oklch(from var(--gold-leaf) l c h / 0.55);
}
@media (max-width: 540px) {
    .story-leaf__chapters::before {
        left: 1.4rem;
    }
}
.story-leaf__chapter-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.25rem;
    padding: 1.65rem 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.3);
    position: relative;
}
.story-leaf__chapter-row:first-child {
    padding-top: 0.65rem;
}
.story-leaf__chapter-row:last-child {
    border-bottom: none;
}
@media (max-width: 540px) {
    .story-leaf__chapter-row {
        grid-template-columns: 3rem 1fr;
        gap: 0.85rem;
    }
}
.story-leaf__roman {
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--vermillion-text);
    letter-spacing: 0.02em;
    line-height: 1.4;
    background: var(--paper);
    padding: 0 0.3rem 0 0;
    position: relative;
    z-index: 1;
}
.story-leaf__chapter-body h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.story-leaf__chapter-body p {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 36rem;
}

/* ----- Chapter V: Quote (no box, no gradient, manuscript text) ----- */
.story-leaf__quote {
    padding: clamp(4rem, 9vw, 7rem) 0;
    text-align: center;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.4);
}
.story-leaf__quote-ornament {
    display: inline-flex;
    color: var(--gold-leaf);
    margin: 0 auto 1.85rem;
}
.story-leaf__quote-body {
    margin: 0 auto;
    max-width: 28ch;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
    line-height: 1.18;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.012em;
}

/* ----- Chapter VI: Support tiers (ledger rows, not cards) ----- */
.story-leaf__tier-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 56rem;
}
.story-leaf__tier-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: 1.75rem;
    align-items: baseline;
    padding: 1.5rem 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.35);
}
.story-leaf__tier-row:last-child {
    border-bottom: none;
}
@media (max-width: 640px) {
    .story-leaf__tier-row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.4rem 1rem;
        padding: 1.2rem 0;
    }
    .story-leaf__tier-cta {
        grid-column: 1 / -1;
        margin-top: 0.4rem;
    }
}
.story-leaf__tier-amount {
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.4rem);
    font-weight: 300;
    line-height: 1;
    color: var(--vermillion-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.story-leaf__tier-copy {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: 40ch;
}
.story-leaf__tier-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.6);
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.story-leaf__tier-cta:hover {
    color: var(--vermillion-text);
    border-bottom-color: var(--vermillion);
}
.story-leaf__tier-cta svg {
    opacity: 0.7;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-leaf__tier-cta:hover svg {
    transform: translateX(2px);
    opacity: 1;
}

/* ----- Chapter VII: Trust list (numbered marginal items) ----- */
.story-leaf__trust-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 56rem;
}
.story-leaf__trust-list li {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.3);
}
.story-leaf__trust-list li:first-child {
    padding-top: 0.5rem;
}
.story-leaf__trust-list li:last-child {
    border-bottom: none;
}
.story-leaf__trust-list li > .story-leaf__roman {
    background: transparent;
    padding: 0;
}
.story-leaf__trust-list h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.story-leaf__trust-list p {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 38rem;
}

/* ----- Closing CTA (no card, hairlined breath) ----- */
.story-leaf__close {
    padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(5rem, 11vw, 8rem);
    text-align: center;
    background: var(--paper);
}
.story-leaf__close-title {
    margin: 0 0 0.65rem;
    font-family: var(--font-en-display, "Inria Serif", "EB Garamond", Georgia, serif);
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.story-leaf__close-body {
    margin: 0 auto 2rem;
    max-width: 36rem;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.story-leaf__close-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

/* ----- Dark theme (candlelight reading per DESIGN.md) ----- */
html[data-theme="dark"] .story-leaf,
html[data-theme="dark"] .story-leaf__close,
html[data-theme="dark"] .story-leaf__breadcrumbs {
    background: var(--paper);
    color: var(--ink);
}
html[data-theme="dark"] .story-leaf__breadcrumbs,
html[data-theme="dark"] .story-leaf__hero,
html[data-theme="dark"] .story-leaf__section,
html[data-theme="dark"] .story-leaf__quote {
    border-bottom-color: oklch(from var(--gold-leaf-bright) l c h / 0.35);
}
html[data-theme="dark"] .story-leaf__marginalia {
    border-right-color: oklch(from var(--gold-leaf-bright) l c h / 0.4);
}
html[data-theme="dark"] .story-leaf__roman {
    background: var(--paper);
}

/* ==========================================================================
   Honor Circles: public board, join form, welcome, certificate (2026-05).

   Manuscript-style patron board per DESIGN.md: paper surface, gold-leaf
   hairlines instead of card borders, vermillion for chapter heads + the
   join CTA, sepia small-caps for slot numbers + marginalia. The grid
   keeps cells text-density-driven (auto-fill, minmax(140px, 1fr)) so a
   313-member campaign and a 50-patron campaign both look right without
   per-campaign tuning. align-items: end anchors every label to the same
   baseline so missing years_supported metadata on most slots doesn't
   throw off the row rhythm.
   ========================================================================== */
/* (Legacy .honor-circle__* hero/eyebrow/title/intro/progress/cta/
   notice/board/footer rules removed 2026-05-19 after the manuscript-
   leaf redesign in commit 7246b5c. The new system is .honor-leaf__*
   at the bottom of this file. The .honor-board, .honor-join,
   .honor-welcome, .honor-certificate rules below are STILL USED by
   the corresponding _board_manuscript.html, join.html, welcome.html,
   certificate.html templates.) */

/* Manuscript board grid: every cell aligns to the bottom so the
   optional "X years" marginalia under filled slots doesn't shove the
   labels of the others out of line. Empty slots render as a quiet
   sepia em-dash inside a paper-deep wash; no border, no shadow. */
.honor-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.25rem 1rem;
    align-items: end;
}
.honor-board__slot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.4rem 0.85rem;
    border-bottom: 1px solid var(--gold-leaf, var(--gold-soft, oklch(0.75 0.10 75 / 0.4)));
    min-height: 4.5rem;
    text-align: left;
}
.honor-board__slot.is-empty {
    background: oklch(from var(--paper-deep, var(--cream-light)) l c h / 0.35);
}
.honor-board__number {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, var(--ink-soft));
    font-variant-numeric: tabular-nums;
}
.honor-board__label {
    font-family: var(--font-en-display, serif);
    font-size: 1rem;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
    word-break: break-word;
}
.honor-board__label:hover,
.honor-board__label:focus-visible {
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
}
.honor-board__years {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    color: var(--vermillion, var(--vermillion-text));
    letter-spacing: 0.05em;
}
.honor-board__placeholder {
    color: var(--sepia, var(--ink-soft));
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.45;
    padding-top: 0.2rem;
}

/* Join form: same form pattern as donate; tight column inside
   container. */
.honor-join { max-width: 40rem; padding-block: clamp(2rem, 5vw, 4rem); }
.honor-join__head { margin-bottom: 1.5rem; }
.honor-join__form { display: flex; flex-direction: column; gap: 1.25rem; }
.honor-join__form input[type="text"],
.honor-join__form input[type="email"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font: inherit;
    background: var(--paper, var(--cream-light));
    border: 1px solid var(--gold-leaf, var(--gold-soft));
    border-radius: 4px;
    color: var(--ink);
}
.honor-join__form input:focus {
    outline: 2px solid var(--vermillion, var(--vermillion-text, var(--gold)));
    outline-offset: 2px;
}
.honor-join__form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.honor-join__form fieldset legend {
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.honor-join__form ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.honor-join__secure {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
    margin: 0;
}

/* Welcome + certificate: narrow text columns; certificate is the one
   visual atom on the page so we let it breathe. */
.honor-welcome,
.honor-certificate {
    max-width: 48rem;
    padding-block: clamp(2rem, 5vw, 4rem);
    text-align: center;
}
.honor-certificate__logo {
    width: 80px; height: 80px;
    margin: 0 auto 1rem;
    display: block;
}
.honor-certificate__title {
    font-family: var(--font-en-display, serif);
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    font-weight: 300;
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    margin: 0.5rem 0;
}
.honor-certificate__statement {
    font-family: var(--font-en-display, serif);
    font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
    line-height: 1.6;
    max-width: 38rem;
    margin: 2rem auto;
    color: var(--ink);
}
.honor-certificate__meta {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 2rem 0;
}
.honor-certificate__meta dt {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sepia, var(--ink-soft));
    margin-bottom: 0.25rem;
}
.honor-certificate__meta dd {
    font-family: var(--font-en-display, serif);
    font-size: 1.2rem;
    margin: 0;
    color: var(--ink);
}
.honor-certificate__foot {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.honor-certificate__id {
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
    font-family: var(--font-en-body, monospace);
}

@media print {
    .site-nav, .site-footer, .honor-certificate__foot { display: none !important; }
    .honor-certificate { max-width: none; padding-block: 0; }
}

/* ==========================================================================
   Donate index: Seasonal giving band (2026-05-17).

   Surfaces products from the active seasonal-window causes (Ramadan /
   Qurbani / Winter) above the Ways-to-Give grid. Editor toggles the
   window from the page admin; products with matching cause appear.
   Uses the existing _product_tile.html, so all card chrome inherits
   the rest of the donate-grid styling: only the band wrapper +
   sub-group heading need new rules here.
   ========================================================================== */
.donate-index__seasonal {
    margin-block: clamp(2.5rem, 5vw, 4rem);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--gold-leaf, var(--gold-soft, var(--line)));
    border-bottom: 1px solid var(--gold-leaf, var(--gold-soft, var(--line)));
}
.donate-index__seasonal-head {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
}
.donate-index__seasonal-sub {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 0.4rem 0 0;
}
.donate-index__seasonal-group + .donate-index__seasonal-group {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px dashed oklch(from var(--gold-leaf, var(--gold-soft, var(--line))) l c h / 0.45);
}
.donate-index__seasonal-group-title {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-weight: 400;
    color: var(--vermillion, var(--vermillion-text, oklch(0.55 0.18 32)));
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}
.donate-index__seasonal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Honor Circle JazakAllah / thank-you lines (2026-05-17).
   (.honor-circle__shukr removed 2026-05-19; replaced by
   .honor-leaf__shukr at the bottom of this file. .honor-welcome__thanks
   below is STILL USED by welcome.html.) */
.honor-welcome__thanks {
    margin: 1rem 0 1.5rem;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-style: italic;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    color: var(--ink-soft, oklch(0.42 0.02 270));
    line-height: 1.55;
    max-width: 38rem;
    margin-inline: auto;
}

/* ==========================================================================
   Honor Circle: body (long-form narrative) + support-areas grid + board
   section header (2026-05-17).

   Page rhythm: hero → body → support cards → member board → footer.
   Body sits in a centred ~64ch reading column for manuscript-page
   calm; support cards use a responsive grid (auto-fill minmax) so the
   editor can add 4 cards or 8 cards without the layout breaking.
   ========================================================================== */
/* (Legacy .honor-circle__body*, .honor-circle__support*,
   .honor-circle__board-head/__board-title rules removed 2026-05-19.
   Replaced by .honor-leaf__narrative, .honor-leaf__verses, and
   .honor-leaf__board-head in the new system below.) */

/* ==========================================================================
   Honor Circle redesign, 2026-05-18: manuscript leaf system.

   Replaces the earlier .honor-circle__* block (kept above in the file
   for now, dead until a cleanup PR; the new template uses
   .honor-leaf__* only). Layout is asymmetric leaf: wide left
   marginalia column carrying sepia small-caps annotations, right body
   column carrying chapter heads and verses. Page anchors visually on
   the campaign.max_members rendered as a vermillion illuminated
   chapter number, in the manner of a 17c Bengali Persianate kitab.
   ========================================================================== */

.honor-leaf {
    color: var(--ink, oklch(0.20 0.015 270));
    background: var(--paper, oklch(0.94 0.01 80));
}

/* ---------- 1. Hero leaf ---------- */

.honor-leaf__hero {
    padding-block: clamp(3rem, 5vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.honor-leaf__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 22%) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 760px) {
    .honor-leaf__hero-grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }
}

.honor-leaf__margin {
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
    padding-top: 0.6rem;
    text-align: start;
}
@media (max-width: 760px) {
    .honor-leaf__margin {
        border-top: 0;
        padding-top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.25rem;
        align-items: baseline;
    }
}
.honor-leaf__margin-eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-en-body, "Sohne", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    line-height: 1.35;
}
.honor-leaf__margin-tag {
    margin: 0 0 0.25rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-style: italic;
    color: var(--sepia, oklch(0.50 0.05 50));
}
.honor-leaf__margin-place {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    color: var(--ink-faint, oklch(0.62 0.015 270));
    letter-spacing: 0.04em;
}

.honor-leaf__body {
    min-width: 0;
}

.honor-leaf__title {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink, oklch(0.20 0.015 270));
    margin: 0 0 1.5rem;
    max-width: 22ch;
}

/* The illuminated chapter number, hero anchor. Vermillion, large,
   calligraphic. Paired with a small hand-drawn manuscript ornament
   so it reads as chapter head, not as a SaaS metric tile. */
.honor-leaf__numeral {
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.honor-leaf__numeral-mark {
    width: clamp(70px, 14vw, 110px);
    height: auto;
    color: var(--vermillion, oklch(0.55 0.18 32));
    margin-bottom: 0.1rem;
}
.honor-leaf__numeral-figure {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-weight: 300;
    font-size: clamp(4rem, 3rem + 5vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums;
}
.honor-leaf__numeral-caption {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    margin-top: 0.4rem;
}

.honor-leaf__intro {
    max-width: 38ch;
    margin: 0 0 1.5rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
    line-height: 1.55;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-leaf__progress {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin: 0 0 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.5);
}
.honor-leaf__progress-amount {
    font-family: var(--font-en-display, serif);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 400;
    color: var(--ink, oklch(0.20 0.015 270));
    line-height: 1;
    font-variant-numeric: lining-nums;
}
.honor-leaf__progress-of {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.95rem;
    color: var(--ink-soft);
}
.honor-leaf__progress-label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    margin-inline-start: auto;
}

.honor-leaf__shukr {
    margin: 0.5rem 0 0;
    max-width: 50ch;
    font-family: var(--font-en-display, serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-leaf__cta {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.honor-leaf__notice {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.45);
    border: 1px dashed oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
    color: var(--ink-soft);
    max-width: 50ch;
}

/* ---------- Page-wide hairline ---------- */

.honor-leaf__rule {
    margin: 0;
    border: 0;
    height: 1px;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
}

/* ---------- 2. Narrative, marginalia chapter numbers ---------- */

.honor-leaf__narrative {
    padding-block: clamp(3rem, 6vw, 5.5rem);
}
.honor-leaf__narrative-inner {
    max-width: 66ch;
    margin-inline: auto;
    font-family: var(--font-en-body, "Sohne", system-ui, sans-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    counter-reset: honor-leaf-chapter;
    position: relative;
}
.honor-leaf__narrative-inner h2 {
    counter-increment: honor-leaf-chapter;
    position: relative;
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
    font-weight: 300;
    color: var(--vermillion, oklch(0.55 0.18 32));
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 3rem 0 0.75rem;
}
.honor-leaf__narrative-inner h2:first-child {
    margin-top: 0;
}
/* Roman numeral marginalia, only on wide enough screens to fit it
   in the left margin without overlapping the body column. */
@media (min-width: 880px) {
    .honor-leaf__narrative-inner h2::before {
        content: counter(honor-leaf-chapter, upper-roman);
        position: absolute;
        left: -4.5rem;
        top: 0.5em;
        font-family: var(--font-en-body, system-ui, sans-serif);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--sepia, oklch(0.50 0.05 50));
        line-height: 1;
    }
}
.honor-leaf__narrative-inner h3 {
    font-family: var(--font-en-display, serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    margin: 1.5rem 0 0.5rem;
    line-height: 1.3;
}
.honor-leaf__narrative-inner p,
.honor-leaf__narrative-inner ul,
.honor-leaf__narrative-inner ol {
    margin: 0 0 1.1rem;
}
.honor-leaf__narrative-inner ul,
.honor-leaf__narrative-inner ol {
    padding-inline-start: 1.4rem;
}
.honor-leaf__narrative-inner li + li {
    margin-top: 0.3rem;
}
.honor-leaf__narrative-inner strong {
    color: var(--ink);
    font-weight: 500;
}

/* ---------- 3. Verses, where support goes, manuscript list ---------- */

.honor-leaf__verses {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.30);
}
.honor-leaf__verses-head {
    max-width: 50ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.honor-leaf__verses-title {
    font-family: var(--font-en-display, serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0.4rem 0 0;
}
.honor-leaf__verses-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 56rem;
    counter-reset: honor-verse;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}
.honor-leaf__verse {
    display: grid;
    grid-template-columns: auto 44px 1fr;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: start;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
    border-bottom: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}
.honor-leaf__verse-num {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    font-variant-numeric: tabular-nums;
    padding-top: 0.5rem;
    min-width: 1.75rem;
}
.honor-leaf__verse-icon {
    color: var(--vermillion, oklch(0.55 0.18 32));
    padding-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.honor-leaf__verse-icon svg {
    stroke-width: 1.5;
}
.honor-leaf__verse-text {
    min-width: 0;
}
.honor-leaf__verse-heading {
    font-family: var(--font-en-display, serif);
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 0.35rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.honor-leaf__verse-body {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    max-width: 60ch;
}

/* ---------- 4. Board section header ---------- */

.honor-leaf__board {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}
.honor-leaf__board-head {
    max-width: 50ch;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
}
.honor-leaf__board-title {
    font-family: var(--font-en-display, serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--ink);
    margin: 0.4rem 0 0;
}

/* ---------- 5. Colophon ---------- */

.honor-leaf__colophon {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.5);
    text-align: center;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}
.honor-leaf__colophon p { margin: 0; }

/* ---------- RTL ---------- */

[dir="rtl"] .honor-leaf__progress-label { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .honor-leaf__narrative-inner h2::before { left: auto; right: -4.5rem; }

/* ============================================================
   Board page: Why 313 + After you join sections
   ------------------------------------------------------------
   These sit between the hero and the supporters board. Manuscript
   leaf voice: marginalia eyebrow + display-serif body, gold-leaf
   hairline dividers, no card chrome.
   ============================================================ */

.honor-leaf__why {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.honor-leaf__why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
    .honor-leaf__why-grid {
        grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
        align-items: start;
    }
}

.honor-leaf__why-body {
    max-width: 44rem;
}

.honor-leaf__why-title {
    margin: 0 0 1rem;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-leaf__why-text {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-leaf__after {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.honor-leaf__after-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 720px) {
    .honor-leaf__after-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: clamp(2.5rem, 5vw, 4rem);
    }
}

.honor-leaf__after-col {
    min-width: 0;
}

.honor-leaf__after-eyebrow {
    margin: 0 0 0.8rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-leaf__after-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.honor-leaf__after-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-leaf__after-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.5rem;
    height: 1px;
    background: var(--gold-leaf, oklch(0.75 0.10 75));
}

.honor-leaf__after-body {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
}

[dir="rtl"] .honor-leaf__after-list li {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .honor-leaf__after-list li::before {
    left: auto;
    right: 0;
}

/* ============================================================
   Qurbani product section: new design matching the mockup
   ------------------------------------------------------------
   Section header with display title + ornament; 3-card grid
   (Cow / Goat / Eid Gift); trust bar at the bottom. Cards use
   the .qcard* namespace, share one shell, differ only in
   what's inside the body (variants vs static price + features).
   ============================================================ */

/* --- Section header (Choose your Qurbani or Eid gift) --- */

.qurbani-order__head {
    text-align: center;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    max-width: 56rem;
}

.qurbani-order__title {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--forest, #15613b);
}

.qurbani-order__sub {
    margin: 0.6rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-order__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.1rem auto 0;
    max-width: 18rem;
    color: var(--gold-leaf, oklch(0.75 0.10 75));
}

.qurbani-order__rule {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.qurbani-order__ornament-mark {
    width: 1rem;
    height: 1rem;
    color: var(--gold-leaf-bright, oklch(0.85 0.13 80));
    flex-shrink: 0;
}

/* --- 3-up product grid ---
   Capped at a comfortable reading width so the 3 cards don't sprawl
   on wide monitors. Override of the global .container max-width via
   higher specificity: the order section gets its own constraint
   while the rest of the page can still use the wider 1240px shell. */

section.qurbani-order.container {
    max-width: 70rem;
}

.qurbani-order__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 720px) {
    .qurbani-order__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .qurbani-order__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   Qurbani card shell: shared by .qcard--cow + simple cards
   ============================================================ */

.qcard {
    position: relative;
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.15);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.04);
    transition: box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qcard:hover {
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.06);
}

/* "Most Popular" badge: forest green chip, top-left of cover. */
.qcard__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    padding: 0.4rem 0.7rem;
    background: var(--forest, #15613b);
    color: #fff;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

.qcard__cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-deep, #f3ebd3);
}

.qcard__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating-illustration variant: cow's horns break out of the photo
   frame. Requires a transparent PNG with the cow positioned so horns
   sit at the very top of the upload. Editor uploads via the
   DonationProduct.image field in Wagtail admin. */

.qcard--floating {
    overflow: visible;
    /* Reserve space above the photo so horns have somewhere to extend
       into without affecting the document flow below the card. */
    padding-top: 2.5rem;
    margin-top: -2.5rem;
}

.qcard__cover--floating {
    overflow: visible;
    background: transparent;
    aspect-ratio: 4 / 3;
    position: relative;
}

.qcard__cover--floating .qcard__cover-img {
    position: absolute;
    inset: auto 0 0 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: contain;
    object-position: center bottom;
}

/* The "Most Popular" badge sits at the natural top of the cover; with
   the floating image bleeding above, anchor the badge correctly. */
.qcard--floating .qcard__badge {
    top: calc(2.5rem + 0.85rem);
}

.qcard__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

/* Body header: title + lead on the left, circle icon on the right. */
.qcard__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.85rem;
    align-items: start;
}

.qcard__head-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.qcard__title {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    line-height: 1.15;
    color: var(--forest, #15613b);
}

.qcard__lead {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qcard__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--paper-deep, #f3ebd3);
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sepia, oklch(0.50 0.05 50));
    flex-shrink: 0;
    overflow: hidden;
}

.qcard__icon svg,
.qcard__icon img {
    width: 2.2rem;
    height: 2.2rem;
}

.qcard__sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Variant toggle (cow card only) --- */

.qcard__variants {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

@media (max-width: 480px) {
    .qcard__variants {
        grid-template-columns: 1fr;
    }
}

.qcard__variant {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.22);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qcard__variant:hover {
    border-color: var(--forest, #15613b);
}

.qcard__variant.is-active {
    background: var(--forest, #15613b);
    border-color: var(--forest, #15613b);
}

.qcard__variant.is-active .qcard__variant-label,
.qcard__variant.is-active .qcard__variant-price {
    color: #fff;
}

.qcard__variant.is-active .qcard__variant-radio {
    border-color: #fff;
}
.qcard__variant.is-active .qcard__variant-radio::after {
    background: #fff;
    opacity: 1;
}

.qcard__variant-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Visual radio dot (since real input is sr-hidden) */
.qcard__variant-radio {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.5);
    background: transparent;
    position: relative;
    flex-shrink: 0;
}
.qcard__variant-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--forest, #15613b);
    opacity: 0;
    transition: opacity 160ms;
}
.qcard__variant.is-active .qcard__variant-radio::after {
    opacity: 1;
}

.qcard__variant-label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink, oklch(0.20 0.015 270));
    line-height: 1.2;
}

.qcard__variant-price {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--forest, #15613b);
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.2;
}

.qcard__variant-sub {
    margin: -0.15rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* --- Share-dots row (cow card only) --- */

.qcard__shares {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.qcard__shares-icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    flex-shrink: 0;
}

.qcard__shares-icon svg {
    width: 100%;
    height: 100%;
}

.qcard__shares-label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    margin-right: auto;
}

.qcard__shares-dots {
    display: flex;
    gap: 0.3rem;
}

.qcard__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.4);
    background: var(--paper, #fbf6e9);
    transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qcard__dot.is-filled {
    background: var(--forest, #15613b);
    border-color: var(--forest, #15613b);
}

/* --- Static price block (simple cards) --- */

.qcard__price-block {
    margin: 0;
}

.qcard__price {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
    font-weight: 500;
    color: var(--forest, #15613b);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.qcard__price-sub {
    margin: 0.35rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gold-leaf, oklch(0.65 0.10 70));
    letter-spacing: 0.02em;
}

/* --- Feature row (3 icons + labels) --- */

.qcard__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.qcard__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.qcard__feature-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--paper-deep, #f3ebd3);
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.qcard__feature-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.qcard__feature-label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* --- Form / CTA / footnote --- */

.qcard__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.qcard__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.25rem;
    margin-top: auto;
    background: var(--forest, #15613b);
    color: #fff;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qcard__cta:hover {
    background: oklch(from var(--forest, #15613b) calc(l - 0.05) c h);
}

.qcard__cta:focus-visible {
    outline: 2px solid var(--vermillion, oklch(0.55 0.18 32));
    outline-offset: 2px;
}

.qcard__cta-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.qcard__footnote {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qcard__footnote-icon {
    width: 1rem;
    height: 1rem;
    color: var(--gold-leaf, oklch(0.65 0.10 70));
    flex-shrink: 0;
}

/* ============================================================
   Trust bar (4 reassurance items)
   ============================================================ */

.qurbani-trust {
    list-style: none;
    margin: 0;
    padding: 1.25rem clamp(1rem, 3vw, 2rem);
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.3);
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
}

@media (min-width: 600px) {
    .qurbani-trust {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .qurbani-trust {
        grid-template-columns: repeat(4, 1fr);
    }
}

.qurbani-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.qurbani-trust__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--paper-deep, #f3ebd3);
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sepia, oklch(0.50 0.05 50));
    flex-shrink: 0;
}

.qurbani-trust__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.qurbani-trust__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qurbani-trust__title {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--forest, #15613b);
    line-height: 1.3;
}

.qurbani-trust__sub {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* ============================================================
   Live Qurbani Tracker: animal tile redesign (override block)
   ------------------------------------------------------------
   Replaces the previous banner-style tile with a typography-led
   one: large display-serif code in the center, discrete share-
   dot indicator under it, primary CTA prominent, secondary CTA
   as a small text-link. Status-driven background tint breaks
   up what was an "identical card grid" before. Functionality
   (forms, hidden inputs, popover, filter data-attrs) unchanged.
   ============================================================ */

/* Reset the inherited banner-style rules.
   overflow: visible (NOT hidden) is required so the donor-list popover,
   which positions itself ABOVE the tile via bottom: 100% and is a child
   of this element, can escape upward. There's no media content inside
   the tile that would benefit from clipping anyway. */
.qurbani-animal {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--paper, #fbf6e9);
    border: 1px solid color-mix(in srgb, var(--forest) 12%, transparent 88%);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px oklch(from var(--ink) l c h / 0.04);
    overflow: visible;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-animal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px oklch(from var(--ink) l c h / 0.10);
}

/* Status-driven backgrounds: break the "identical card grid". */
.qurbani-animal.is-available {
    background: var(--paper, #fbf6e9);
}
.qurbani-animal.is-partial {
    background: color-mix(in srgb, var(--gold-soft, oklch(0.92 0.04 80)) 30%, var(--paper, #fbf6e9));
    border-color: color-mix(in srgb, var(--gold, oklch(0.78 0.10 75)) 30%, transparent);
}
.qurbani-animal.is-nearly {
    background: color-mix(in srgb, var(--gold-soft, oklch(0.92 0.04 80)) 50%, var(--paper, #fbf6e9));
    border-color: color-mix(in srgb, var(--gold, oklch(0.78 0.10 75)) 50%, transparent);
}
.qurbani-animal.is-full {
    background: color-mix(in srgb, var(--forest, #15613b) 6%, var(--paper, #fbf6e9));
    border-color: color-mix(in srgb, var(--forest, #15613b) 30%, transparent);
}

/* Visual (the central clickable area). Replaces the old banner. */
.qurbani-animal .qurbani-animal__visual {
    position: relative;
    width: 100%;
    height: auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--forest) 8%, transparent 92%);
    border-radius: 0;
    padding: 1.1rem 1rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    color: var(--ink, oklch(0.20 0.015 270));
}

.qurbani-animal .qurbani-animal__visual:hover {
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.35);
}

.qurbani-animal .qurbani-animal__visual:focus-visible {
    outline: 2px solid var(--vermillion, oklch(0.55 0.18 32));
    outline-offset: -3px;
}

/* Small animal icon in the corner (was: centered banner). */
.qurbani-animal .qurbani-animal__icon {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.78;
}

.qurbani-animal .qurbani-animal__icon svg {
    width: 100%;
    height: 100%;
}

/* Progress pill (top-right, unchanged position; restyled). */
.qurbani-animal .qurbani-animal__progress-pill {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    bottom: auto;
    left: auto;
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.7);
    color: var(--forest, #15613b);
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.3rem 0.55rem;
    border-radius: 0;
    border: 1px solid color-mix(in srgb, var(--forest) 14%, transparent 86%);
    box-shadow: none;
}

.qurbani-animal.is-full .qurbani-animal__progress-pill {
    background: var(--forest, #15613b);
    color: #fff;
    border-color: var(--forest, #15613b);
}

/* Visually-hidden progress-bar element for screen readers. */
.qurbani-animal__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Code: the centerpiece. Display serif, forest green, much larger. */
.qurbani-animal .qurbani-animal__code {
    margin: 0.75rem 0 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--forest, #15613b);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.qurbani-animal.is-full .qurbani-animal__code {
    color: var(--forest, #15613b);
}

/* Share-dots row: the scan-at-a-glance feature. */
.qurbani-animal__dots {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0.15rem 0 0;
}

.qurbani-animal__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--forest, #15613b) 35%, transparent);
    background: var(--paper, #fbf6e9);
    transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-animal__dot.is-filled {
    background: var(--forest, #15613b);
    border-color: var(--forest, #15613b);
}

.qurbani-animal.is-full .qurbani-animal__dot.is-filled {
    background: var(--forest, #15613b);
    border-color: var(--forest, #15613b);
}

/* Status caption under the dots. */
.qurbani-animal .qurbani-animal__status {
    margin: 0.2rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-animal .qurbani-animal__status--full {
    color: var(--forest, #15613b);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.qurbani-animal .qurbani-animal__status--full svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* CTAs: primary prominent, secondary quieter. */
.qurbani-animal .qurbani-animal__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 0.85rem 1rem;
}

.qurbani-animal__btn {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-animal__btn--primary {
    background: var(--forest, #15613b);
    color: #fff;
}

.qurbani-animal__btn--primary:hover {
    background: oklch(from var(--forest, #15613b) calc(l - 0.05) c h);
}

.qurbani-animal__btn--ghost {
    background: transparent;
    color: var(--forest, #15613b);
    border: 1px solid color-mix(in srgb, var(--forest, #15613b) 30%, transparent);
}

.qurbani-animal__btn--ghost:hover {
    background: oklch(from var(--forest, #15613b) l c h / 0.06);
    border-color: var(--forest, #15613b);
}

.qurbani-animal__btn--text {
    background: transparent;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    padding: 0.25rem 0;
    font-size: 0.78rem;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ink-soft, oklch(0.42 0.02 270)) 40%, transparent);
    text-underline-offset: 0.2em;
    text-align: center;
}

.qurbani-animal__btn--text:hover {
    color: var(--forest, #15613b);
    text-decoration-color: var(--forest, #15613b);
}

.qurbani-animal__btn:focus-visible {
    outline: 2px solid var(--vermillion, oklch(0.55 0.18 32));
    outline-offset: 2px;
}

/* Grid spacing: slightly bigger tiles, more breathing room. */
.qurbani-board__animal-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .qurbani-board__animal-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
}

.qurbani-board__animal-wrap {
    list-style: none;
}

/* ============================================================
   Live Qurbani Tracker: HERO HEADER + stats + section heads
   (matches the new design mockup: crescent ornament, huge
   display-serif title, large icon-circle stat cards, sectioned
   headers with icon + subtitle row).
   ============================================================ */

.qurbani-board--hero {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.qurbani-board__head--hero {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: 0;
}

.qurbani-board__crescent {
    display: block;
    width: clamp(2.4rem, 1.8rem + 1.5vw, 3.2rem);
    height: auto;
    color: var(--gold, oklch(0.78 0.10 75));
    margin: 0 auto 1rem;
}

.qurbani-board__hero-title {
    margin: 0 0 1rem;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--forest, #15613b);
}

.qurbani-board__hero-sub {
    margin: 0 auto;
    max-width: 38rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
    line-height: 1.55;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-board__hero-sub em {
    font-style: normal;
    color: var(--gold, oklch(0.65 0.10 70));
    font-weight: 500;
}

/* --- Tracker hero image (cow + goat + Sylhet mosque silhouette) --- */

.qurbani-board__hero-image {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background: color-mix(in srgb, var(--gold-soft, oklch(0.93 0.04 75)) 35%, var(--paper, #fbf6e9));
    box-shadow: 0 1px 3px oklch(from var(--ink) l c h / 0.06);
}

/* Subtle bottom fade so the image edge melts into the page rather
   than sitting as a hard block above the stats card below. */
.qurbani-board__hero-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 28%;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--paper, #fbf6e9) 50%, transparent) 60%,
        var(--paper, #fbf6e9) 100%);
    pointer-events: none;
}

.qurbani-board__hero-image picture {
    display: block;
}

.qurbani-board__hero-image img {
    display: block;
    width: 100%;
    height: clamp(280px, 28vw, 360px);
    object-fit: cover;
    object-position: center 35%;
}

@media (max-width: 640px) {
    .qurbani-board__hero-image {
        border-radius: var(--radius-sm);
        margin: 1rem 0 1.25rem;
    }
    .qurbani-board__hero-image img {
        height: clamp(180px, 38vw, 220px);
        object-position: 55% 40%;
    }
}

/* --- Stat cards --- */

.qurbani-board__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1.2rem clamp(1rem, 2vw, 1.5rem);
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.35);
    border-radius: var(--radius-sm);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 720px) {
    .qurbani-board__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    .qurbani-board__stats > * + * {
        border-left: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.35);
        padding-left: 1.5rem;
    }
}

.qurbani-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.qurbani-stat__icon {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--forest, #15613b) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest, #15613b);
}

.qurbani-stat__icon svg {
    width: 2.6rem;
    height: 2.6rem;
}

.qurbani-stat__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qurbani-stat__label {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-stat__value {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
    font-weight: 500;
    line-height: 1;
    color: var(--forest, #15613b);
    font-variant-numeric: lining-nums tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.qurbani-stat__sep {
    color: var(--ink-soft, oklch(0.42 0.02 270));
    font-weight: 400;
}

.qurbani-stat__suffix {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    margin-left: 0.2rem;
}

.qurbani-stat__value--date {
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
    font-weight: 500;
}

.qurbani-stat__remaining {
    margin: 0.15rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* --- Section headers (Cows / Goats) --- */

.qurbani-board__section-head--hero {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.qurbani-board__section-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--forest, #15613b) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest, #15613b);
}

.qurbani-board__section-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.qurbani-board__section-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.qurbani-board__section-head--hero .qurbani-board__section-title {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--forest, #15613b);
}

.qurbani-board__section-sub {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--gold, oklch(0.6 0.08 65));
    font-style: italic;
}

.qurbani-board__section-head--hero .qurbani-board__count {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 640px) {
    .qurbani-board__section-head--hero .qurbani-board__count {
        margin-left: 0;
        width: 100%;
        padding-top: 0.4rem;
        border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.3);
        margin-top: 0.6rem;
    }
}

/* ============================================================
   Hero countdown: "Every second counts. ..."
   Targets the distribution close datetime; ticks once per second
   client-side via small inline JS in the page template. The
   server pre-renders 00:00:00:00 placeholders so there's no
   layout shift while JS warms up.
   ============================================================ */

.qurbani-countdown {
    margin: 1.5rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
    background: oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.06);
    border: 1px solid oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.18);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 36rem;
}

.qurbani-countdown__lead {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--vermillion, oklch(0.5 0.16 32));
}

.qurbani-countdown__pulse {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: var(--vermillion, oklch(0.55 0.18 32));
    animation: qurbani-countdown-pulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes qurbani-countdown-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .qurbani-countdown__pulse { animation: none; opacity: 0.85; }
}

.qurbani-countdown__clock {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: end;
    gap: 0.4rem 0.6rem;
}

.qurbani-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.qurbani-countdown__num {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem);
    font-weight: 500;
    line-height: 1;
    color: var(--forest, #15613b);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.01em;
}

.qurbani-countdown__label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.qurbani-countdown__sep {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    color: oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.45);
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.1rem;
    user-select: none;
}

.qurbani-countdown.is-elapsed .qurbani-countdown__clock,
.qurbani-countdown.is-elapsed .qurbani-countdown__lead {
    display: none;
}

.qurbani-countdown.is-elapsed .qurbani-countdown__elapsed {
    display: block !important;
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* ============================================================
   Legacy .qurbani-cow* aliases (older class names from prior
   iterations). Kept as no-op so any cached HTML still renders.
   ============================================================ */

.qurbani-cow {
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.18);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
}

.qurbani-cow__cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-deep, #f3ebd3);
}

.qurbani-cow__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qurbani-cow__body {
    padding: 1.1rem 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.qurbani-cow__title {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--forest, #15613b);
}

.qurbani-cow__lead {
    margin: 0 0 0.3rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

.qurbani-cow__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.qurbani-cow__sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Variant toggle (the two pills) --- */

.qurbani-cow__variants {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .qurbani-cow__variants {
        grid-template-columns: 1fr;
    }
}

.qurbani-cow__variant {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: var(--paper, #fbf6e9);
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.28);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-cow__variant:hover {
    border-color: var(--forest, #15613b);
}

.qurbani-cow__variant.is-active {
    border-color: var(--forest, #15613b);
    background: oklch(from var(--forest, #15613b) l c h / 0.05);
    box-shadow: inset 0 0 0 1px var(--forest, #15613b);
}

.qurbani-cow__variant-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.qurbani-cow__variant-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.qurbani-cow__variant-label {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--ink, oklch(0.20 0.015 270));
    line-height: 1.2;
}

.qurbani-cow__variant.is-active .qurbani-cow__variant-label {
    color: var(--forest, #15613b);
    font-weight: 500;
}

.qurbani-cow__variant-price {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--forest, #15613b);
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.qurbani-cow__variant-sub {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* --- Share-dots indicator --- */

.qurbani-cow__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
}

.qurbani-cow__dots {
    display: flex;
    gap: 0.4rem;
}

.qurbani-cow__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid oklch(from var(--forest, #15613b) l c h / 0.35);
    background: var(--paper, #fbf6e9);
    transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-cow__dot.is-filled {
    background: var(--forest, #15613b);
    border-color: var(--forest, #15613b);
}

.qurbani-cow__indicator-caption {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* --- Hint + ask copy --- */

.qurbani-cow__hint {
    margin: 0;
    padding: 0.6rem 0.85rem;
    background: oklch(from var(--forest, #15613b) l c h / 0.05);
    border-radius: 4px;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    text-align: center;
    font-style: italic;
}

.qurbani-cow__ask {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

.qurbani-cow__price-static {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--forest, #15613b);
    font-variant-numeric: lining-nums tabular-nums;
}

/* --- CTA --- */

.qurbani-cow__cta {
    width: 100%;
    padding: 0.95rem 1.5rem;
    margin-top: 0.4rem;
    background: var(--forest, #15613b);
    color: #fff;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qurbani-cow__cta:hover {
    background: oklch(from var(--forest, #15613b) calc(l - 0.05) c h);
}

.qurbani-cow__cta:focus-visible {
    outline: 2px solid var(--vermillion, oklch(0.55 0.18 32));
    outline-offset: 2px;
}

/* ============================================================
   Honor Circle: join form (compact manuscript leaf)
   ------------------------------------------------------------
   Single narrow column. No boxes, no rounded corners, no card
   chrome. Bottom-border inputs per DESIGN.md form rules. Small-
   caps sepia labels, vermillion CTA. Tight vertical rhythm so
   the form fits one screen on mobile and feels considered, not
   sprawling.
   ============================================================ */

.honor-form-page {
    max-width: 28rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem) 1.25rem;
}

.honor-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.honor-form__head {
    margin-bottom: 0.25rem;
}

.honor-form__head .honor-form__eyebrow {
    margin: 0 0 0.4rem;
}

.honor-form__title {
    font-family: var(--font-en-display, serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem);
    line-height: 1.15;
    margin: 0;
    color: var(--ink, oklch(0.18 0.02 270));
}

.honor-form__eyebrow {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.45 0.06 60));
    margin: 0;
}

.honor-form__errors {
    font-size: 0.85rem;
    color: var(--vermillion, oklch(0.5 0.18 25));
    padding: 0.5rem 0;
    border-block: 1px solid var(--vermillion, oklch(0.5 0.18 25));
}

/* Mode toggle: two pills side-by-side. */
.honor-form__mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--ink-soft, oklch(0.42 0.02 270));
    background: var(--paper, var(--cream-light, #fbf6e9));
}

.honor-form__mode-pill {
    position: relative;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-form__mode-pill + .honor-form__mode-pill {
    border-left: 1px solid var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form__mode-pill:hover {
    color: var(--ink, oklch(0.18 0.02 270));
}

.honor-form__mode-pill.is-active {
    background: var(--ink, oklch(0.18 0.02 270));
    color: var(--paper, var(--cream-light, #fbf6e9));
}

.honor-form__mode-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Row = label above input, tight. */
.honor-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.honor-form__label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.45 0.06 60));
}

.honor-form input[type="text"],
.honor-form input[type="email"],
.honor-form input[type="number"] {
    width: 100%;
    padding: 0.45rem 0;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-soft, oklch(0.42 0.02 270));
    border-radius: 0;
    color: var(--ink, oklch(0.18 0.02 270));
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-form input:focus {
    outline: 0;
    border-bottom-color: var(--vermillion, oklch(0.5 0.18 25));
    border-bottom-width: 2px;
    padding-bottom: calc(0.45rem - 1px);
}

.honor-form__yearly-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    font-style: italic;
    line-height: 1.45;
}

/* Display preference: tiny pill row, not a vertical stack of radios. */
.honor-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.honor-form__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--ink, oklch(0.18 0.02 270));
    cursor: pointer;
}

.honor-form__choice input[type="radio"] {
    accent-color: var(--vermillion, oklch(0.5 0.18 25));
    margin: 0;
}

.honor-form__error {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--vermillion, oklch(0.5 0.18 25));
}

/* Vermillion CTA: flat, square, paper text. */
.honor-form__cta {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--vermillion, oklch(0.5 0.18 25));
    color: var(--paper, var(--cream-light, #fbf6e9));
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-form__cta:hover {
    background: var(--ink, oklch(0.18 0.02 270));
}

.honor-form__cta .icon-arrow-inline {
    width: 0.85rem;
    height: 0.85rem;
}

.honor-form__cta-fine {
    margin: 0.4rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form__trust {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* RTL nudges */
[dir="rtl"] .honor-form__mode-pill + .honor-form__mode-pill {
    border-left: 0;
    border-right: 1px solid var(--ink-soft, oklch(0.42 0.02 270));
}

/* ============================================================
   Honor Circle: join page (manuscript leaf around the form)
   ------------------------------------------------------------
   The form itself (.honor-form*) stays plain per DESIGN.md
   conversion-clarity rule. The COMPOSITION is the manuscript:
   asymmetric leaf grid, wide left margin carrying the donor's
   prospective slot as a vermillion chapter mark, gold-leaf
   hairline progress, sepia marginalia facts. The "I/II/III"
   trust strip below is a manuscript chapter list.
   ============================================================ */

.honor-form-leaf {
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.honor-form-leaf__head {
    max-width: 38rem;
    margin: 0 0 1.5rem;
}

.honor-form-leaf__eyebrow {
    margin: 0 0 0.9rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form-leaf__eyebrow [aria-hidden] {
    color: var(--gold-leaf, oklch(0.75 0.10 75));
    margin: 0 0.45rem;
}

.honor-form-leaf__title {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-form-leaf__lead {
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    max-width: 34rem;
}

.honor-form-leaf__lead p { margin: 0 0 0.6rem; }
.honor-form-leaf__lead p:last-child { margin-bottom: 0; }

/* Gold-leaf hairline: manuscript chapter divider. */
.honor-form-leaf__rule {
    height: 1px;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
    border: 0;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
}

/* Asymmetric leaf grid. Desktop: marginalia left ~32%, body ~68%.
   Mobile: stacked, marginalia first as a compact horizontal banner. */
.honor-form-leaf__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 768px) {
    .honor-form-leaf__grid {
        grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr);
    }
}

/* ---------- Marginalia column ---------- */

.honor-form-leaf__margin {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .honor-form-leaf__margin {
        padding-top: 0.25rem;
    }
}

.honor-form-leaf__slot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.honor-form-leaf__slot-eyebrow {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

/* The chapter-head moment. Vermillion, amount-typography display. */
.honor-form-leaf__slot-number {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(2.8rem, 2rem + 3vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-form-leaf__slot-glyph {
    display: inline-block;
    margin-right: 0.05em;
    font-size: 0.55em;
    font-style: italic;
    font-weight: 400;
    vertical-align: 0.42em;
    color: var(--vermillion, oklch(0.55 0.18 32));
    opacity: 0.85;
}

.honor-form-leaf__slot-of {
    margin: 0.1rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* Gold-leaf hairline progress. 1px track, gold-leaf-bright fill.
   No rounded corners: manuscript ledger line. */
.honor-form-leaf__progress {
    margin-top: 0.8rem;
    height: 1px;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.35);
    overflow: hidden;
    position: relative;
}

.honor-form-leaf__progress-fill {
    display: block;
    height: 100%;
    background: var(--gold-leaf-bright, oklch(0.85 0.13 80));
    transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Plain-language facts under the slot number. Sepia term, ink value.
   Definition list because that's what this actually is. */
.honor-form-leaf__facts {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.honor-form-leaf__fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.honor-form-leaf__fact dt {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    margin: 0;
}

.honor-form-leaf__fact dd {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-form-leaf__assurances {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 1.1rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}

.honor-form-leaf__trust {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form-leaf__trust svg {
    color: var(--sepia, oklch(0.50 0.05 50));
    flex-shrink: 0;
    margin-top: 0.3em;
}

/* ---------- Form column ---------- */

.honor-form-leaf__body {
    min-width: 0;  /* let the form column shrink inside the grid track */
}

/* The .honor-form inside .honor-form-leaf__body keeps all existing
   .honor-form* rules but loses the outer page-padding container. */
.honor-form-leaf__body .honor-form {
    max-width: 28rem;
    gap: 1.15rem;
}

/* Drop the page-wrapping padding that the standalone .honor-form-page
   provided: the leaf already pads its own container. */
.honor-form-leaf .honor-form,
.honor-form-leaf .honor-form-page {
    padding: 0;
    margin: 0;
}

/* ---------- "What happens next" trust strip ---------- */

.honor-form-leaf__steps {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
    max-width: 44rem;
}

.honor-form-leaf__steps-eyebrow {
    margin: 0 0 1rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form-leaf__steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

@media (min-width: 640px) {
    .honor-form-leaf__steps-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.honor-form-leaf__steps-list li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.65rem;
    align-items: baseline;
}

.honor-form-leaf__step-num {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 400;
    color: var(--sepia, oklch(0.50 0.05 50));
    line-height: 1;
    text-align: center;
}

.honor-form-leaf__step-text {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* ---------- RTL ---------- */

[dir="rtl"] .honor-form-leaf__slot-glyph {
    margin-right: 0;
    margin-left: 0.05em;
}

[dir="rtl"] .honor-form-leaf__eyebrow [aria-hidden] {
    margin: 0 0.45rem;
}

/* ============================================================
   Honor Circle: extended join-page modules
   (identity column, recommended cadence, live name preview,
   trust block, Why/What/After sections below the form)
   ============================================================ */

/* Urgency subhead under the H1: "308 places remaining." */
.honor-form-leaf__remaining {
    margin: 0.7rem 0 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-style: italic;
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
    color: var(--vermillion, oklch(0.55 0.18 32));
    letter-spacing: -0.005em;
}

/* Identity sentence (after slot N°) */
.honor-form-leaf__identity {
    margin: 0.6rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* Progress block: "X / Y supporters joined" caption + visible bar. */
.honor-form-leaf__progress-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.honor-form-leaf__stat {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    font-variant-numeric: lining-nums tabular-nums;
}

/* Override existing 1px hairline progress to a more visible 3px bar. */
.honor-form-leaf__progress {
    margin-top: 0;
    height: 3px;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.22);
}

.honor-form-leaf__progress-fill {
    background: var(--gold-leaf-bright, oklch(0.85 0.13 80));
}

/* "Together, the circle helps fund" bullet list. */
.honor-form-leaf__funds {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}

.honor-form-leaf__funds-eyebrow {
    margin: 0 0 0.3rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form-leaf__funds-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.honor-form-leaf__funds-list li {
    position: relative;
    padding-left: 0.9rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-form-leaf__funds-list li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1;
    top: 0.1em;
}

/* Recommended badge on the yearly cadence card. */
.honor-form__cadence-card.is-recommended {
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.55);
    border-color: oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.35);
}

.honor-form__cadence-card.is-recommended.is-active {
    background: oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.07);
}

.honor-form__cadence-badge {
    position: absolute;
    top: -0.55rem;
    left: 0.85rem;
    padding: 0.15rem 0.5rem;
    background: var(--vermillion, oklch(0.55 0.18 32));
    color: var(--paper, var(--cream-light, #fbf6e9));
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Live name preview attached to the display_preference radio group. */
.honor-form__row--preview {
    gap: 0.45rem;
}

.honor-form__preview {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: oklch(from var(--paper-deep, oklch(0.88 0.015 70)) l c h / 0.5);
    border-left: 1px solid var(--gold-leaf, oklch(0.75 0.10 75));
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.honor-form__preview-eyebrow {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form__preview-name {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ink, oklch(0.20 0.015 270));
    line-height: 1.3;
}

/* Trust block under the CTA: lock + renewal + cancel-anytime. */
.honor-form__trust-block {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.honor-form__trust-line {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form__trust-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--sepia, oklch(0.50 0.05 50));
    flex-shrink: 0;
    margin-top: 0.25em;
}

/* Section eyebrows + body for Why / What / After sections. */
.honor-form-leaf__section-eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vermillion, oklch(0.55 0.18 32));
}

/* Why 313? section. */
.honor-form-leaf__why {
    max-width: 38rem;
    margin: 0 auto 0 0;
}

.honor-form-leaf__why-body {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* What the circle supports: 4-cell grid, no card chrome. */
.honor-form-leaf__supports-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

@media (min-width: 640px) {
    .honor-form-leaf__supports-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem 2.5rem;
    }
}

.honor-form-leaf__support {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.6rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}

.honor-form-leaf__support dt {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-form-leaf__support dd {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* After you join: benefits + renewal, two cols. */
.honor-form-leaf__after-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

@media (min-width: 640px) {
    .honor-form-leaf__after-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 2.5rem;
    }
}

.honor-form-leaf__sub-eyebrow {
    margin: 0 0 0.65rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form-leaf__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.honor-form-leaf__benefits li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-form-leaf__benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.5rem;
    height: 1px;
    background: var(--gold-leaf, oklch(0.75 0.10 75));
}

.honor-form-leaf__after-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
}

/* RTL nudges for the new modules. */
[dir="rtl"] .honor-form__preview {
    border-left: 0;
    border-right: 1px solid var(--gold-leaf, oklch(0.75 0.10 75));
}

[dir="rtl"] .honor-form__cadence-badge {
    left: auto;
    right: 0.85rem;
}

[dir="rtl"] .honor-form-leaf__funds-list li,
[dir="rtl"] .honor-form-leaf__benefits li {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .honor-form-leaf__funds-list li::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .honor-form-leaf__benefits li::before {
    left: auto;
    right: 0;
}

/* --- Pricing display in the marginalia (second chapter-head moment) --- */

.honor-form-leaf__price {
    padding-top: 1.1rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.honor-form-leaf__price-eyebrow {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form-leaf__price-amount {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink, oklch(0.20 0.015 270));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-form-leaf__price-currency {
    color: var(--sepia, oklch(0.50 0.05 50));
    margin-right: 0.02em;
    font-weight: 400;
}

.honor-form-leaf__price-fine {
    margin: 0.35rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    max-width: 18rem;
}

/* --- Mode pill carries amount inline so price is impossible to miss --- */

.honor-form__mode-pill {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.6rem;
}

.honor-form__mode-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.honor-form__mode-price {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-transform: none;
    opacity: 0.78;
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-form__mode-pill.is-active .honor-form__mode-price {
    opacity: 1;
}

/* --- Cadence sub-picker (Yearly vs Monthly within Join mode) --- */

.honor-form__cadence-prompt {
    margin: 0 0 0.2rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form__cadence {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0;
}

.honor-form__cadence-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.9rem;
    background: var(--paper, var(--cream-light, #fbf6e9));
    border: 1px solid oklch(from var(--ink-soft, oklch(0.42 0.02 270)) l c h / 0.35);
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-form__cadence-card:hover {
    border-color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form__cadence-card.is-active {
    border-color: var(--vermillion, oklch(0.55 0.18 32));
    background: oklch(from var(--vermillion, oklch(0.55 0.18 32)) l c h / 0.04);
}

.honor-form__cadence-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.honor-form__cadence-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.honor-form__cadence-label {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-form__cadence-card.is-active .honor-form__cadence-label {
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-form__cadence-amount {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ink, oklch(0.20 0.015 270));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-form__cadence-per {
    font-size: 0.65em;
    color: var(--ink-soft, oklch(0.42 0.02 270));
    margin-left: 0.1em;
    font-weight: 400;
}

.honor-form__cadence-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-form__cadence-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--sepia, oklch(0.50 0.05 50));
    flex-shrink: 0;
}

.honor-form__cadence-card.is-active .honor-form__cadence-icon {
    color: var(--vermillion, oklch(0.55 0.18 32));
}

/* ============================================================
   Honor Circle: welcome page (post-Stripe landing)
   ------------------------------------------------------------
   Three states share one composition: slot allocated (chapter-head
   N° + amount received), pending (waiting on webhook, auto-refresh),
   one-off (no slot, amount confirmed). Manuscript leaf wrapper.
   ============================================================ */

.honor-welcome-leaf {
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.honor-welcome-leaf__head {
    max-width: 38rem;
    margin: 0 0 1.5rem;
}

.honor-welcome-leaf__eyebrow {
    margin: 0 0 1.1rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-welcome-leaf__eyebrow [aria-hidden] {
    color: var(--gold-leaf, oklch(0.75 0.10 75));
    margin: 0 0.45rem;
}

.honor-welcome-leaf__shukr {
    margin: 0 0 0.5rem;
    font-family: var(--font-ar-body, 'Amiri', serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-style: italic;
}

.honor-welcome-leaf__title {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__rule {
    height: 1px;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
    border: 0;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.55);
}

/* --- Allocated state: slot N° + body grid --- */

.honor-welcome-leaf__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 768px) {
    .honor-welcome-leaf__grid {
        grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr);
    }
}

.honor-welcome-leaf__slot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.honor-welcome-leaf__slot-eyebrow {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-welcome-leaf__slot-number {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(2.8rem, 2rem + 3vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-welcome-leaf__slot-glyph {
    display: inline-block;
    margin-right: 0.05em;
    font-size: 0.55em;
    font-style: italic;
    font-weight: 400;
    vertical-align: 0.42em;
    color: var(--vermillion, oklch(0.55 0.18 32));
    opacity: 0.85;
}

.honor-welcome-leaf__slot-of {
    margin: 0.1rem 0 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-welcome-leaf__body {
    min-width: 0;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.honor-welcome-leaf__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__lead em {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-welcome-leaf__facts {
    margin: 0;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
    border-bottom: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.45);
}

.honor-welcome-leaf__facts > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    align-items: baseline;
}

.honor-welcome-leaf__facts dt {
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
    margin: 0;
}

.honor-welcome-leaf__facts dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__amount {
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums tabular-nums;
    margin-right: 0.4rem;
}

.honor-welcome-leaf__amount-of {
    font-size: 0.82rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-welcome-leaf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.honor-welcome-leaf__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--vermillion, oklch(0.55 0.18 32));
    color: var(--paper, var(--cream-light, #fbf6e9));
    border-radius: 0;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-welcome-leaf__cta:hover {
    background: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__cta .icon-arrow-inline {
    width: 0.85rem;
    height: 0.85rem;
}

/* --- One-off state: confirmation amount, no slot --- */

.honor-welcome-leaf__single {
    max-width: 38rem;
}

.honor-welcome-leaf__big-amount {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
    line-height: 0.95;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-welcome-leaf__amount-currency {
    color: var(--sepia, oklch(0.50 0.05 50));
    font-weight: 400;
    margin-right: 0.02em;
}

.honor-welcome-leaf__single-lead {
    margin: 0.4rem 0 1.5rem;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__single-note {
    margin: 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

/* --- Pending state: subtle spinner, honest copy --- */

.honor-welcome-leaf__pending {
    max-width: 38rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.honor-welcome-leaf__pending-eyebrow {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-welcome-leaf__pending-text {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.35;
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-welcome-leaf__pending-hint {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-welcome-leaf__pending-spinner {
    margin-top: 0.5rem;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.honor-welcome-leaf__pending-spinner span {
    width: 6px;
    height: 6px;
    background: var(--sepia, oklch(0.50 0.05 50));
    border-radius: 50%;
    opacity: 0.3;
    animation: honor-pending-pulse 1.2s ease-in-out infinite;
}

.honor-welcome-leaf__pending-spinner span:nth-child(2) {
    animation-delay: 0.2s;
}

.honor-welcome-leaf__pending-spinner span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes honor-pending-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
    40% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .honor-welcome-leaf__pending-spinner span {
        animation: none;
        opacity: 0.6;
    }
}

/* ============================================================
   Honor Circle: Certificate (shareable, printable)
   ------------------------------------------------------------
   Centred sheet, ceremonial composition. Vermillion donor name
   is the chapter-head moment. Gold-leaf hairline ornaments;
   sepia marginalia; print stylesheet strips chrome.
   ============================================================ */

.honor-cert {
    max-width: 48rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
}

.honor-cert__sheet {
    background: var(--paper, var(--cream-light, #fbf6e9));
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4.5rem);
    text-align: center;
    border: 1px solid oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.4);
}

.honor-cert__head {
    margin-bottom: 1.5rem;
}

.honor-cert__logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 1rem;
    display: block;
    object-fit: contain;
}

.honor-cert__institution {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-cert__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.5rem auto 1rem;
    max-width: 22rem;
}

.honor-cert__ornament-rule {
    flex: 1;
    height: 1px;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.7);
}

.honor-cert__ornament-mark {
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-size: 1.2rem;
    line-height: 1;
}

.honor-cert__kind {
    margin: 0.5rem 0 1.8rem;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
    letter-spacing: 0.04em;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-cert__awarded {
    margin: 0 0 0.6rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-cert__donor {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(2rem, 1.4rem + 3.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-cert__statement {
    margin: 1.8rem auto 0;
    max-width: 32rem;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 300;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink, oklch(0.20 0.015 270));
    font-style: italic;
}

.honor-cert__statement strong {
    font-weight: 400;
    font-style: normal;
    color: var(--vermillion, oklch(0.55 0.18 32));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-cert__relationship {
    margin: 1rem auto 0;
    max-width: 32rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-cert__rule {
    height: 1px;
    margin: 2rem auto;
    max-width: 28rem;
    border: 0;
    background: oklch(from var(--gold-leaf, oklch(0.75 0.10 75)) l c h / 0.6);
}

.honor-cert__stats {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.2rem 2rem;
    max-width: 36rem;
}

.honor-cert__stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
}

.honor-cert__stat dt {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia, oklch(0.50 0.05 50));
}

.honor-cert__stat dd {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ink, oklch(0.20 0.015 270));
    font-variant-numeric: lining-nums tabular-nums;
}

.honor-cert__stat-glyph {
    font-style: italic;
    font-size: 0.65em;
    margin-right: 0.05em;
    color: var(--sepia, oklch(0.50 0.05 50));
    vertical-align: 0.3em;
}

.honor-cert__stat-amount {
    color: var(--vermillion, oklch(0.55 0.18 32));
}

.honor-cert__foot {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}

.honor-cert__ref {
    margin: 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-cert__seal {
    margin: 0;
    font-family: var(--font-en-display, 'Inria Serif', Georgia, serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--sepia, oklch(0.50 0.05 50));
}

/* Action row sits outside the sheet so it disappears on print. */

.honor-cert__actions {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.honor-cert__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: var(--vermillion, oklch(0.55 0.18 32));
    color: var(--paper, var(--cream-light, #fbf6e9));
    border: 0;
    border-radius: 0;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honor-cert__action:hover {
    background: var(--ink, oklch(0.20 0.015 270));
}

.honor-cert__action--ghost {
    background: transparent;
    color: var(--ink, oklch(0.20 0.015 270));
    border: 1px solid var(--ink-soft, oklch(0.42 0.02 270));
}

.honor-cert__action--ghost:hover {
    background: oklch(from var(--ink, oklch(0.20 0.015 270)) l c h / 0.06);
    color: var(--ink, oklch(0.20 0.015 270));
}

.honor-cert__action svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Print: just the sheet, full bleed, no chrome. */
@media print {
    body { background: var(--paper, #fbf6e9); }
    .site-nav,
    .site-header,
    .site-footer,
    .honor-cert__actions {
        display: none !important;
    }
    .honor-cert {
        max-width: none;
        padding: 0;
    }
    .honor-cert__sheet {
        border: 0;
        padding: 0;
    }
}

/* ============================================================
   Breadcrumb trail: small-caps sepia marginalia per DESIGN.md.
   Lives between site nav and main content; quiet visual weight,
   not a heading. Mirrors the JSON-LD BreadcrumbList emitted by
   SchemaOrgMixin so screen-reader, visual, and crawler signals
   all agree.
   ============================================================ */

.breadcrumb {
    max-width: var(--container-max, 1240px);
    margin: 0 auto;
    padding: 0.4rem clamp(1rem, 3vw, 1.5rem) 0;
    font-family: var(--font-en-body, system-ui, sans-serif);
    font-size: 0.72rem;
    opacity: 0.85;
}

.breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    color: var(--ink-soft, oklch(0.42 0.02 270));
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Separator drawn with a CSS pseudo so we don't ship an SVG per
   crumb. Gold-leaf hue keeps it manuscript-quiet. */
.breadcrumb__item + .breadcrumb__item::before {
    content: "›";
    color: var(--gold-leaf, oklch(0.75 0.10 75));
    font-size: 0.95rem;
    line-height: 1;
    user-select: none;
}

.breadcrumb__link {
    color: var(--sepia, oklch(0.50 0.05 50));
    text-decoration: none;
    transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    color: var(--forest, #15613b);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    outline: none;
}

.breadcrumb__current {
    color: var(--ink, oklch(0.20 0.015 270));
    font-weight: 500;
}

[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
    content: "‹";
}

/* ==========================================================================
   Focus ring guarantee (Phase 2, audit A-1)
   Dozens of component rules set :focus-visible { outline: none } and beat
   the global ring on specificity, leaving keyboard users with a faint tint
   or nothing. This last rule wins everywhere until the component rebuild
   removes those overrides.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--vermillion-text) !important;
  outline-offset: 2px !important;
}
html[data-theme="dark"] :focus-visible {
  outline-color: var(--gold-leaf-bright) !important;
}

/* No lift on hover (DESIGN.md: opacity and colour only, VD-7). */
.btn:hover,
.featured-doc__play:hover {
  transform: none;
}

/* Long site names overflowed the brand box and ran under the search
   button (visible in RTL at 375px, audit RTL-1). Let the brand shrink and
   truncate instead. */
.site-nav__brand {
  min-width: 0;
  flex: 0 1 auto;
}
.site-nav__brand-text {
  min-width: 0;
  overflow: hidden;
}
.site-nav__brand-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arrows follow reading direction (audit RTL-2). */
.dir-arrow {
  display: inline-block;
}
[dir="rtl"] .dir-arrow,
[dir="rtl"] .icon-arrow-inline,
[dir="rtl"] svg:has(> use[href="#icon-arrow-right"]) {
  transform: scaleX(-1);
}

/* 44px minimum tap targets on phones (audit A-3). */
.site-nav__toggle,
.site-nav__basket,
.site-nav__search {
  min-width: 44px;
  min-height: 44px;
}
@media (max-width: 767px) {
  .hero__quick-jumps a,
  .site-footer__col li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
}

/* Trust block on donate, checkout and thank-you pages (audit CV-2). */
.trust-block {
  margin-block: var(--space-7);
  padding-block: var(--space-5);
  border-top: 1px solid var(--gold-leaf);
  color: var(--ink);
}
.trust-block__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0 0 var(--space-2);
}
.trust-block__status {
  max-width: 60ch;
  margin: 0 0 var(--space-4);
}
.trust-block__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0;
}
.trust-block__facts dt {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.trust-block__facts dd {
  margin: 0;
}

/* Newsletter: visible label and consent line (audit CV-7). */
.site-footer__newsletter-label {
  display: block;
  flex-basis: 100%;
  font-size: 0.875rem;
  margin-bottom: var(--space-1);
}
.site-footer__newsletter-consent {
  font-size: 0.8125rem;
  color: inherit;
  opacity: 0.85;
  margin-top: var(--space-2);
}
.hp-field {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Phone hero: the trust line wraps to two lines, so it reads as a
   small note rather than a lozenge-shaped pill. */
@media (max-width: 639px) {
  .hero__trust-line {
    border-radius: var(--radius-sm);
    align-items: flex-start;
    max-width: none;
  }
  .hero__trust-line svg {
    margin-top: 0.15rem;
    flex-shrink: 0;
  }
}

/* Service categories ("What we do"): whole card is the link, no lift on
   hover, full descriptions (the 2-line clamp cut sentences mid-word).
   On phones each card becomes a compact row: icon beside the text. */
.service-categories__desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}
.service-categories__card {
  position: relative;
}
.service-categories__card:hover {
  transform: none;
  box-shadow: none;
}
.service-categories__card--link .service-categories__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}
.service-categories__icon svg {
  width: 28px;
  height: 28px;
}
@media (max-width: 639px) {
  .service-categories__grid {
    gap: 0.75rem;
  }
  .service-categories__card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    align-items: start;
    padding: 1rem;
  }
  .service-categories__icon {
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  .service-categories__icon svg {
    width: 24px;
    height: 24px;
  }
  .service-categories__title {
    font-size: 1.05rem;
  }
  .service-categories__desc {
    font-size: 0.9rem;
  }
  .service-categories__cta {
    padding-top: 0.25rem;
    font-size: 0.85rem;
  }
}

/* Impact band: reserve the scope-label line on every stat so numbers
   align across a row even when only one stat has a label. */
.impact__scope {
  display: block;
  min-height: 1.4em;
}
@media (max-width: 767px) {
  .hero__quick-jumps {
    row-gap: 0;
  }
}

/* Quick-donate card contrast, within each site's own theme. On the
   charity theme the card and the Donate button were the same green, so
   the button vanished; the reassurance line was dark grey on green.
   The button now uses the theme's deeper CTA shade with a light edge,
   and the small print uses the card's light text colour. */
.quick-donate .btn--primary {
  background: var(--cta-bg-hover, var(--cta-bg));
  box-shadow: inset 0 0 0 1px oklch(from var(--cream) l c h / 0.45);
}
.quick-donate .btn--primary:hover {
  background: var(--forest-deep, var(--cta-bg-hover));
}
.quick-donate .quick-donate__reassurance li {
  color: oklch(from var(--cream) l c h / 0.85);
}
.quick-donate .quick-donate__reassurance svg {
  color: var(--gold-light, currentColor);
  opacity: 1;
}

/* =========================================================================
   Mobile menu polish (owner request, 28 Oct 2026). Donate sits straight
   under the links, each top-level link gets a chevron, and the language +
   theme controls share one row pinned to the bottom of the drawer.
   On desktop the wrapper and status line get out of the way.
   ========================================================================= */
.site-nav__prefs { display: contents; }
.site-nav__meta { display: none; }
.site-nav__toggle {
  background: rgba(216, 178, 107, 0.1);
  border-color: var(--gold-soft, rgba(216, 178, 107, 0.35));
}

@media (max-width: 1100px) {
  .site-nav__menu { gap: 0; padding-block: var(--space-2) var(--space-5); }
  .site-nav__list { order: 0; }
  .site-nav__list > li > a,
  .site-nav__dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding-block: 0.5rem;
    font-size: 1.125rem;
  }
  .site-nav .site-nav__list > li > a::after {
    display: block;
    content: "";
    position: static;
    width: 8px;
    height: 8px;
    background: none;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    margin-inline-end: 4px;
  }
  [dir="rtl"] .site-nav .site-nav__list > li > a::after { transform: rotate(-45deg); }
  .site-nav__list > li:last-child { border-bottom: 1px solid var(--line); }

  .site-nav__donate {
    order: 1;
    margin-top: var(--space-5);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
  }

  .site-nav__prefs {
    order: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-6);
  }
  .site-nav__prefs .lang-switcher { flex: 1 1 auto; margin: 0; }
  .site-nav__prefs .theme-toggle { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 999px; }

  .site-nav__meta {
    order: 3;
    display: block;
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
  }
}

/* =========================================================================
   Zakat calculator journey (owner request, 28 Oct 2026). The calculator
   sits right under the hero; the blocking privacy pop-up became one line;
   the long intro shows on step 1 only so later steps start at the fields.
   ========================================================================= */
.nisab-wizard__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--space-3) auto 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.nisab-wizard__privacy-icon { flex: none; color: var(--forest); }
.nisab-wizard:has(.nisab-wizard__panel.is-active:not([data-step="1"])) .nisab-wizard__lead,
.nisab-wizard:has(.nisab-wizard__panel.is-active:not([data-step="1"])) .nisab-wizard__privacy {
  display: none;
}
@media (max-width: 720px) {
  .nisab-wizard__title { font-size: clamp(1.375rem, 1.1rem + 1.5vw, 1.75rem); }
  /* The hero right above already says what this is. */
  .nisab-wizard__lead { display: none; }
  .nisab-wizard__nav { background: var(--paper); }
}

/* The footer is dark in both themes and uses --paper for its light text.
   In dark mode --paper turns dark, so lines like the tagline, Zakat link,
   legal line and currency label vanished. Keep it light inside the footer. */
html[data-theme="dark"] .site-footer { --paper: oklch(0.94 0.01 80); }