/* ══════════════════════════════════════════════════════════════════
   جمعية حُماة المستقبل — FPA
   style.css
   Palette sampled directly from the association logo.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root{
  /* brand */
  --navy:#292369;          /* sampled from logo */
  --green:#7DC148;         /* sampled from logo */
  --ink:#14103A;           /* deepest field */
  --navy-soft:#4A4494;
  --green-disp:#56952A;    /* green large enough to read as display type */
  --green-ink:#4E8A24;     /* accessible green for small text on light */
  --green-pale:#F0F7E7;

  /* neutrals */
  --stone:#EEF1EA;
  --stone-2:#F8FAF5;
  --line:#D9DFD0;
  --white:#FFFFFF;
  --body:#3C4152;
  --muted:#5A6076;         /* G17: darkened from #6E7488 for AA on white/stone — metadata, breadcrumbs, goal line */
  --lav:#6E66B0;           /* muted lavender — secondary DECORATIVE use only, never low-contrast body copy */

  /* families — G18: headings Alexandria, body IBM Plex Sans Arabic, numerals mono.
     Both Arabic faces keep a system fallback so a failed webfont never blanks text. */
  --ar-display:'Alexandria',system-ui,'Segoe UI',sans-serif;
  --ar-body:'IBM Plex Sans Arabic','Alexandria',system-ui,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ── TYPE SCALE (R10) ──
     One documented ladder, named by ROLE, so a heading's size comes from its
     job (display / page / section / card) and there are no ad-hoc one-offs.
     clamp() carries the responsive step; weight + colour + spacing carry the
     hierarchy, not size alone. Legacy aliases (--fs-hero/--fs-h2/--fs-h3) are
     kept so nothing that referenced them breaks. */
  --fs-display:clamp(2.15rem,4.4vw,3.5rem);   /* homepage hero only */
  --fs-page:clamp(1.7rem,3vw,2.35rem);        /* page-title / section hero */
  --fs-section:clamp(1.55rem,2.7vw,2.15rem);  /* section heading */
  --fs-card:1.1rem;                           /* card title */
  --fs-body:1.0625rem;                        /* 17px reading body */
  --fs-label:.92rem;                          /* form labels, nav, controls */
  --fs-meta:.8rem;                            /* metadata, breadcrumbs */
  --fs-caption:.8rem;                         /* image captions */
  --fs-hero:var(--fs-display);                /* legacy alias */
  --fs-h2:var(--fs-section);                  /* legacy alias */
  --fs-h3:var(--fs-card);                     /* legacy alias */
  --lh-tight:1.28;   /* display / page titles */
  --lh-head:1.4;     /* section & card headings */
  --lh-body:1.8;     /* Arabic reading body */
  --lh-loose:1.95;   /* long-form Arabic paragraphs */
  --w-light:300;   /* display accents only (light half of a heading pair) — NEVER body copy */
  --w-body:400;    /* G18: Arabic body floor — 300 is too thin for reading Arabic */
  --w-mid:600;     /* labels, navigation, controls */
  --w-bold:800;    /* display headings — weight, not size, carries headline contrast */

  /* geometry */
  --wrap:1240px;           /* standard shared-page container */
  --wrap-read:760px;       /* R09: narrow measure for long Arabic reading content */
  --hd-h:94px;             /* header height / sticky offset */
  --r:4px;                 /* documents, cards, panels */
  --r-sm:2px;              /* controls, badges, chips */
  --card-pad:20px;         /* R09: standard card padding */

  /* ── SPACING SCALE (G17/R09) — one vertical rhythm; reach for these before ad-hoc px. */
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:48px; --sp-6:72px; --sp-7:104px;
  --section-y:clamp(56px,7vw,104px);   /* R09: vertical rhythm between conceptual groups */
  --pad-x:24px;            /* the single horizontal gutter .wrap uses */

  --sh-sm:0 1px 2px rgba(20,16,58,.05),0 6px 18px -10px rgba(20,16,58,.12);
  --sh-md:0 3px 8px rgba(20,16,58,.08),0 34px 74px -28px rgba(20,16,58,.42);
  --sh-lg:0 2px 6px rgba(20,16,58,.06),0 28px 64px -26px rgba(20,16,58,.34);
  --e:cubic-bezier(.22,.7,.28,1);

  /* ── HERO PHOTO DIALS ──
     Four scrim stops read right → left (RTL order).
     --veil-1 sits under the headline — keep high for legibility.
     --veil-4 sits on the open side  — keep low to show the photograph.
     Lower any value = more photo. Raise = more legibility. */
  --veil-1:.91; --veil-2:.80; --veil-3:.34; --veil-4:.18;
}

/* ─────────────────────────── 2. BASE ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--stone);color:var(--body);
  font-family:var(--ar-body);font-weight:var(--w-body);font-size:17px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ar-display);color:var(--navy);margin:0;line-height:1.4;font-weight:var(--w-mid)}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* G22: global reduced-motion guard — component blocks below still refine, this
   catches everything else, including smooth scroll. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.eyebrow{
  font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-ink);display:flex;align-items:center;gap:.6rem;margin:0;
}
.eyebrow::after{content:'';height:1px;flex:1;background:var(--line);max-width:70px}

.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:11px 20px;font-size:.9rem;border-radius:0 0 var(--r) 0;
}
.skip:focus{inset-inline-start:0}

/* ─────────────────────────── 3. BUTTONS ─────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;                         /* R12: comfortable touch target */
  font-family:var(--ar-body);font-weight:var(--w-mid);font-size:.95rem;padding:12px 26px;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--e),background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.btn--go{background:var(--green);color:#14300A}
.btn--go:hover{background:#8CD053;transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(78,138,34,.9)}
.btn--line{background:var(--white);color:var(--navy);border-color:var(--line)}
.btn--line:hover{border-color:var(--navy);transform:translateY(-1px)}
/* R12: pressed + disabled + loading — precise states, not just hover */
.btn:active{transform:translateY(0)}
.btn--go:active{background:#6FB33E}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.9;
  animation:btnspin .6s linear infinite;color:#14300A;
}
@keyframes btnspin{to{transform:rotate(360deg)}}
.btn--sm{min-height:38px;padding:9px 18px;font-size:.86rem}
.btn--lg{min-height:52px;padding:16px 32px;font-size:1rem}
.btn--full{width:100%}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}

/* ─────────────────────────── 4. HEADER ─────────────────────────── */
.util{background:var(--ink);color:#A9ADC8;font-size:.77rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap}
.util__reg{display:flex;align-items:center;gap:.55rem}
.util__dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.util strong{font-family:var(--mono);font-weight:500;color:#fff;letter-spacing:.04em}
.util__r{display:flex;align-items:center;gap:18px}
.util__tel{font-family:var(--mono);direction:ltr}
.util__lang{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.09em;
  border:1px solid var(--navy-soft);padding:2px 9px;border-radius:var(--r-sm);color:#fff;
}
.util__lang:hover{border-color:var(--green);color:var(--green)}

.hdr{
  position:sticky;top:0;z-index:60;background:var(--navy);
  box-shadow:0 1px 0 rgba(255,255,255,.08);transition:box-shadow .3s,background .3s;
}
.hdr[data-stuck="true"]{
  background:rgba(24,20,72,.96);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 14px 34px -20px rgba(0,0,0,.7);
}
.hdr .wrap{display:flex;align-items:center;gap:30px;min-height:78px;transition:min-height .3s var(--e)}
.hdr[data-stuck="true"] .wrap{min-height:64px}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{width:44px;height:44px;flex:none;position:relative;transition:width .3s var(--e),height .3s var(--e)}
.hdr[data-stuck="true"] .brand__mark{width:36px;height:36px}
.brand__mark img{width:100%;height:100%;object-fit:contain;display:none}
.brand__mark.has-logo img{display:block}
.brand__mark.has-logo svg{display:none}
.brand__mark svg{width:100%;height:100%}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--ar-display);font-weight:700;font-size:1.02rem;color:#fff}
.brand__sub{
  font-family:var(--mono);font-size:.59rem;letter-spacing:.15em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:.93rem}
.nav>a,.nav__btn{
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.86);padding:9px 13px;
  border-radius:var(--r);display:inline-flex;align-items:center;gap:.35rem;
  font-size:.93rem;font-weight:400;position:relative;transition:color .16s;
}
.nav>a::after{
  content:'';position:absolute;inset-block-end:4px;inset-inline:13px;height:1.5px;
  background:var(--green);transform:scaleX(0);transform-origin:100% 50%;transition:transform .26s var(--e);
}
.nav>a:hover::after{transform:scaleX(1)}
.nav>a:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{color:#fff}
.nav__btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .22s var(--e)}
.nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__has{position:relative}
/* R15: custom-feeling dropdown — a branded green top rule ties it to the nav,
   a tighter panel + soft shadow read as designed rather than a default float. */
.nav__menu{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0;min-width:238px;
  background:var(--white);border:1px solid var(--line);border-top:2px solid var(--green);
  border-radius:var(--r);box-shadow:var(--sh-lg);
  padding:7px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transition:all .2s var(--e);z-index:70;transform-origin:100% 0;
}
.nav__has[data-open="true"] .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{display:block;padding:9px 13px;border-radius:var(--r-sm);font-size:.9rem;color:var(--navy);transition:all .15s}
.nav__menu a:hover{background:var(--green-pale);color:var(--green-ink);padding-inline-start:18px}
.hdr__cta{flex:none;margin-inline-start:8px}
.burger{
  display:none;margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r);width:44px;height:44px;cursor:pointer;
}
.burger span{display:block;width:18px;height:1.5px;background:#fff;margin:4px auto}

/* ── MOBILE DRAWER — branded navigation canvas ────────────────────
   Direction-aware: pinned to the INLINE-START edge (right in RTL, left in LTR);
   the hide transform flips by document direction, so nothing is hardcoded L/R.
   Navy branded header · warm off-white body · sticky two-action footer. */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
.drawer[data-open="true"]{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(20,16,58,.55);opacity:0;transition:opacity .25s}
.drawer[data-open="true"] .drawer__bg{opacity:1}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-start:0;width:min(420px,90vw);max-width:100%;
  background:var(--stone-2);display:flex;flex-direction:column;
  border-start-end-radius:14px;border-end-end-radius:14px;overflow:hidden;
  box-shadow:0 0 60px -28px rgba(20,16,58,.55);   /* restrained depth, not a big float */
  transform:translateX(100%);transition:transform .3s var(--e);  /* RTL: off to the right */
}
html[dir="ltr"] .drawer__panel{transform:translateX(-100%)}       /* LTR: off to the left */
.drawer[data-open="true"] .drawer__panel{transform:translateX(0)}

/* branded navy header — reuses x-brand (logo lockup + home link + a11y name) */
.drawer__hd{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;background:var(--navy);
}
.drawer__hd .brand{min-width:0}
.drawer__x{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
  cursor:pointer;color:#fff;transition:background .15s,border-color .15s;
}
.drawer__x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.drawer__x:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

.drawer__nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 12px}
.drawer__eyebrow{
  margin:2px 8px 8px;font-family:var(--ar-body);font-size:.74rem;color:var(--muted);
}

/* groups: separated by spacing + surface, not heavy per-row dividers */
.drawer__grp{border-radius:var(--r);margin-bottom:2px;transition:background .18s}
.drawer__acc{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:12px 14px;background:none;border:0;border-radius:var(--r);cursor:pointer;text-align:start;
  font-family:var(--ar-display);font-weight:600;font-size:1.05rem;color:var(--navy);
  transition:color .15s,background .15s;
}
.drawer__acc:hover{background:var(--stone)}
.drawer__acc:hover,.drawer__acc[aria-expanded="true"]{color:var(--green-ink)}
.drawer__chev{
  flex:none;width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--e),stroke .15s;
}
.drawer__acc[aria-expanded="true"] .drawer__chev{transform:rotate(180deg);stroke:var(--green-ink)}
/* expanded group: a subtly differentiated surface + a brand accent rail on the
   inline-start edge (right in RTL) — a recognizable, integrated selected state */
.drawer__grp[data-open="true"]{background:var(--stone);border-inline-start:3px solid var(--green)}

/* height + opacity animation via the grid-rows technique (no content jump) */
.drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--e)}
.drawer__grp[data-open="true"] .drawer__sub{grid-template-rows:1fr}
.drawer__sub-in{overflow:hidden;min-height:0;opacity:0;transition:opacity .2s;padding:0 6px}
.drawer__grp[data-open="true"] .drawer__sub-in{opacity:1;padding-bottom:8px}
.drawer__sub-in a{
  display:flex;align-items:center;min-height:44px;padding:8px 22px;border-radius:var(--r);
  font-family:var(--ar-body);font-size:.98rem;line-height:1.6;color:var(--body);transition:color .15s,background .15s;
}
.drawer__sub-in a:hover{color:var(--green-ink)}
.drawer__sub-in a[aria-current="page"]{color:var(--green-ink);font-weight:600;background:var(--green-pale)}

/* direct primary link (تطوع معنا) — same weight as accordion labels */
.drawer__link{
  display:flex;align-items:center;min-height:52px;padding:12px 14px;border-radius:var(--r);
  font-family:var(--ar-display);font-weight:600;font-size:1.05rem;color:var(--navy);transition:color .15s,background .15s;
}
.drawer__link:hover{background:var(--stone);color:var(--green-ink)}
.drawer__link[aria-current="page"]{color:var(--green-ink)}
/* current-page group: highlight its trigger */
.drawer__grp:has(a[aria-current="page"]) .drawer__acc{color:var(--green-ink)}

/* sticky two-action footer (§6/§7) */
.drawer__ft{
  flex:none;display:flex;flex-wrap:wrap;gap:10px;background:var(--white);
  padding:13px 16px;padding-block-end:max(13px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.drawer__act{flex:1 1 140px;min-height:48px}
.drawer__act--case{background:var(--white);color:var(--navy);border:1.5px solid var(--navy)}
.drawer__act--case:hover{background:var(--stone);border-color:var(--navy);transform:translateY(-1px)}

/* ─────────────────────────── 5. HERO ─────────────────────────── */
.hero{
  position:relative;overflow:hidden;padding:84px 0 96px;
  background:linear-gradient(168deg,#FBFCF8 0%,#F2F5EE 46%,#E9EDE3 100%);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:62% 64%;
  /* mirrored so the photograph's subject falls on the open side in RTL */
  transform:scaleX(-1);
  filter:saturate(.92) brightness(1.04) contrast(.97);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left,
      rgba(249,251,246,var(--veil-1)) 0%,
      rgba(248,250,245,var(--veil-2)) 34%,
      rgba(246,249,243,var(--veil-3)) 70%,
      rgba(244,248,241,var(--veil-4)) 100%),
    radial-gradient(1000px 560px at 96% -14%, rgba(125,193,72,.18), transparent 60%),
    linear-gradient(180deg, rgba(250,252,247,.58) 0%, transparent 15%),
    linear-gradient(180deg, transparent 84%, rgba(238,241,234,.92) 100%);
}
.hero__motif{
  position:absolute;inset-block-start:-14%;inset-inline-end:-16%;width:min(760px,72vw);height:auto;
  pointer-events:none;z-index:1;opacity:0;
  animation:motifIn 1.6s var(--e) .1s forwards, spin 150s linear 1.7s infinite;
}
@keyframes motifIn{to{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .wrap{position:relative;z-index:2}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

/* ── headline: ONE size, weight carries the contrast ── */
.hh{margin:22px 0 26px;display:flex;flex-direction:column}
.hh span{display:block;font-size:var(--fs-hero);line-height:1.24;letter-spacing:-.022em}
.hh__a{font-weight:var(--w-light);color:rgba(41,35,105,.6)}
.hh__b{font-weight:var(--w-bold);color:var(--navy)}
.hh__b em{font-style:normal;color:var(--green-disp)}

.hero__lede{font-size:1.05rem;line-height:2;color:var(--body);max-width:47ch;margin:0 0 14px}
.hero__note{font-size:.92rem;line-height:1.95;color:var(--muted);max-width:46ch;margin:0 0 28px}

/* domains — what the association actually does, stated plainly */
.doms{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0}
.doms li{
  font-size:.85rem;color:var(--navy);background:rgba(255,255,255,.74);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 14px;
  backdrop-filter:blur(4px);display:flex;align-items:center;gap:.45rem;
}
.doms li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}

.plateRow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.plate{
  display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.84);backdrop-filter:blur(6px);overflow:hidden;
}
.plate__n{
  font-family:var(--mono);font-weight:var(--w-mid);font-size:1.32rem;color:var(--navy);
  letter-spacing:-.01em;padding:11px 17px;display:grid;place-items:center;
  background:var(--white);border-inline-end:1px solid var(--line);
}
.plate__t{padding:9px 16px;display:flex;flex-direction:column;justify-content:center;line-height:1.4}
.plate__t b{font-size:.8rem;font-weight:500;color:var(--navy)}
.plate__t span{font-size:.72rem;color:var(--muted)}
.plateRow>a{
  font-size:.89rem;color:var(--navy);border-bottom:1px solid var(--line);
  padding-bottom:2px;display:inline-flex;align-items:center;gap:.4rem;transition:all .18s;
}
.plateRow>a:hover{border-color:var(--green);color:var(--green-ink);gap:.7rem}

/* ─────────────────────────── 6. DONATION CONSOLE ─────────────────────────── */
.cons{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-md);overflow:hidden;position:relative;
}
.cons::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--green),var(--navy));
}
.cons__hd{
  background:var(--navy);color:#fff;padding:16px 22px;
  display:flex;align-items:baseline;justify-content:space-between;
}
.cons__hd h2{color:#fff;font-size:1.06rem;font-weight:var(--w-mid)}
.cons__live{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;color:var(--green);
  display:flex;align-items:center;gap:.4rem;
}
.cons__live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cons__bd{padding:20px 22px 22px}

.fld{margin-bottom:16px}
.fld:last-child{margin-bottom:0}
.fld>label,.fld>.lbl{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:.79rem;font-weight:500;color:var(--navy);margin-bottom:8px;
}
.fld .hint{
  font-family:var(--mono);font-size:.66rem;color:var(--muted);
  font-weight:400;letter-spacing:.03em;text-align:end;
}

.seg{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--stone-2);
}
.seg button{
  background:transparent;border:0;border-inline-end:1px solid var(--line);padding:11px 4px;
  font-size:.78rem;color:var(--navy);cursor:pointer;transition:all .18s var(--e);line-height:1.4;
}
.seg button:last-child{border-inline-end:0}
.seg button:hover{background:var(--green-pale)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff;font-weight:500}

.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.chip{
  font-family:var(--mono);font-size:.86rem;font-weight:500;color:var(--navy);padding:11px 2px;
  text-align:center;background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:all .16s var(--e);
}
.chip:hover{border-color:var(--green);background:var(--green-pale);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.amtRow{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:7px}
.amt{position:relative}
.amt input{
  width:100%;font-family:var(--mono);font-size:1.14rem;font-weight:500;color:var(--navy);
  padding:12px 15px 12px 56px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--stone-2);transition:background .18s,border-color .18s;
}
.amt input:focus{background:var(--white);border-color:var(--navy);outline:none}
.amt__cur{
  position:absolute;inset-block:1px;inset-inline-end:1px;display:grid;place-items:center;width:50px;
  font-size:.79rem;color:var(--muted);background:var(--white);
  border-inline-start:1px solid var(--line);border-radius:0 var(--r) var(--r) 0;pointer-events:none;
}
.freq{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--stone-2)}
.freq button{
  background:transparent;border:0;border-inline-end:1px solid var(--line);padding:0 15px;
  font-size:.79rem;color:var(--navy);cursor:pointer;white-space:nowrap;transition:all .18s;
}
.freq button:last-child{border-inline-end:0}
.freq button[aria-pressed="true"]{background:var(--green-pale);color:var(--green-ink);font-weight:500}

.impact{
  background:var(--green-pale);border:1px solid rgba(125,193,72,.42);border-radius:var(--r);
  padding:13px 15px;margin-top:15px;transition:box-shadow .3s;
}
.impact[data-flash="true"]{box-shadow:0 0 0 4px rgba(125,193,72,.16)}
.impact__eq{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:#2E5A12;margin:0 0 11px}
.impact__eq b{font-family:var(--mono);font-size:1.04rem;font-weight:var(--w-mid);color:var(--green-ink)}
.impact__eq svg{width:15px;height:15px;stroke:var(--green-ink);fill:none;stroke-width:2.2;flex:none}
.prev__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.74rem;color:#4B6B31;margin-bottom:6px;
}
.prev__row b{font-family:var(--mono);font-weight:var(--w-mid)}
.prev__track{height:7px;background:var(--white);border:1px solid rgba(125,193,72,.45);position:relative;overflow:hidden}
.prev__now{position:absolute;inset-block:0;inset-inline-start:0;background:var(--green);transition:width .45s var(--e)}
.prev__add{
  position:absolute;inset-block:0;transition:all .45s var(--e);
  background:repeating-linear-gradient(45deg,var(--navy) 0 4px,#413A96 4px 8px);
}
.cons__foot{
  border-top:1px dashed var(--line);padding:12px 22px;background:var(--stone-2);
  font-size:.73rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.cons__foot svg{width:13px;height:13px;stroke:var(--green-ink);fill:none;stroke-width:2;flex:none}
.cons__foot em{font-style:normal;color:var(--navy);font-weight:400}

/* ── Tom Select, restyled to the system ──
   Chevron uses PHYSICAL borders so it points down in both directions. */
.ts-wrapper{font-family:var(--ar-body)}
.ts-wrapper.single .ts-control{
  background:var(--stone-2)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:12px 15px!important;padding-inline-end:38px!important;
  box-shadow:none!important;font-size:.92rem;color:var(--navy);min-height:auto;
  transition:border-color .18s,background .18s;
}
.ts-wrapper.single.dropdown-active .ts-control{
  border-color:var(--navy)!important;background:var(--white)!important;border-radius:var(--r)!important;
}
.ts-control::after{display:none!important}
.ts-wrapper.single .ts-control::before{
  content:'';position:absolute;inset-inline-end:16px;top:50%;width:7px;height:7px;
  border-right:1.7px solid var(--navy);border-bottom:1.7px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .22s var(--e);
}
.ts-wrapper.single.dropdown-active .ts-control::before{transform:translateY(-24%) rotate(225deg)}
.ts-control input{font-family:var(--ar-body)!important;font-size:.92rem!important;color:var(--navy)!important}
.ts-control input::placeholder{color:var(--muted)}
.ts-dropdown{
  border:1px solid var(--line)!important;border-radius:var(--r)!important;
  box-shadow:var(--sh-lg)!important;margin-top:5px!important;overflow:hidden;z-index:75;
}
.ts-dropdown .option{padding:11px 15px;border-block-end:1px solid var(--stone);cursor:pointer}
.ts-dropdown .option:last-child{border-block-end:0}
.ts-dropdown .active{background:var(--green-pale)!important;color:inherit!important}
.ts-dropdown .no-results{padding:14px;font-size:.85rem;color:var(--muted)}
.opt__t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.opt__t strong{font-family:var(--ar-display);font-weight:var(--w-mid);font-size:.9rem;color:var(--navy);line-height:1.5}
.opt__pct{font-family:var(--mono);font-size:.72rem;font-weight:var(--w-mid);color:var(--green-ink);flex:none}
.opt__m{
  display:flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.66rem;color:var(--muted);margin-top:3px;
}
.opt__m em{font-style:normal;color:var(--green-ink)}
.opt__bar{height:3px;background:var(--stone);margin-top:7px;position:relative}
.opt__bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--green)}
.ts-control .item .opt__m,.ts-control .item .opt__bar,.ts-control .item .opt__pct{display:none}
.ts-control .item .opt__t strong{font-family:var(--ar-body);font-weight:400}

/* ─────────────────────────── 7. FIGURES BAND ─────────────────────────── */
.figs{background:var(--ink);color:#9EA2BE;position:relative;overflow:hidden;padding:52px 0 54px}
.figs::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(125,193,72,.5),transparent);
}
.figs__glow{
  position:absolute;inset-block-start:-60%;inset-inline-start:50%;transform:translateX(50%);
  width:900px;height:400px;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse,rgba(41,35,105,.85),transparent 66%);
}
.figs .wrap{position:relative;z-index:2}
.figs__hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.figs__hd .eyebrow{color:var(--green)}
.figs__hd .eyebrow::after{background:rgba(255,255,255,.16)}
.figs__hd p{margin:0;font-size:.84rem;color:#7C819E;font-family:var(--mono);letter-spacing:.03em}
.figs__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding-inline-end:26px;position:relative}
.fig+.fig{padding-inline-start:26px}
.fig+.fig::before{
  content:'';position:absolute;inset-block:6px auto;inset-inline-start:0;height:0;width:1px;
  background:rgba(255,255,255,.13);transition:height .8s var(--e) .1s;
}
.fig+.fig.on::before{height:calc(100% - 12px)}
.fig__n{
  font-family:var(--mono);font-weight:500;font-size:clamp(2.1rem,3.8vw,3.05rem);color:#fff;
  letter-spacing:-.035em;line-height:1;display:flex;align-items:baseline;
}
.fig__n small{font-size:.42em;color:var(--green);margin-inline-start:.1em;font-weight:var(--w-mid)}
.fig__rule{height:2px;background:var(--green);width:0;margin:15px 0 13px;transition:width .9s var(--e) .25s}
.fig.on .fig__rule{width:44px}
.fig__l{font-family:var(--ar-display);font-weight:var(--w-mid);font-size:.94rem;color:#fff;margin:0 0 5px}
.fig__s{margin:0;font-size:.8rem;color:#7C819E;line-height:1.65}

/* ─────────────────────────── 8. SECTION SCAFFOLD ─────────────────────────── */
.sec{padding:92px 0}
.sec--white{background:var(--white)}
.sec--ink{background:var(--ink);color:#B7BBD3}
.sec__hd{max-width:680px}
.sec__hd h2{font-size:var(--fs-h2);margin:17px 0 13px;font-weight:var(--w-bold);letter-spacing:-.018em}
/* same light/bold pair as the hero — one system across the page */
.sec__hd h2 .lt{font-weight:var(--w-light);color:rgba(41,35,105,.58)}
.sec--ink .sec__hd h2{color:#fff}
.sec--ink .sec__hd h2 .lt{color:rgba(255,255,255,.5)}
.sec__hd p{margin:0;font-size:1rem;color:var(--muted);line-height:1.95}
.sec--ink .sec__hd p{color:#9EA2BE}
.sec__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:38px;flex-wrap:wrap}
.sec__more{
  font-size:.88rem;color:var(--navy);display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid var(--line);padding-bottom:2px;flex:none;transition:all .18s;
}
.sec__more:hover{border-color:var(--green);color:var(--green-ink);gap:.7rem}
.sec--ink .sec__more{color:#fff;border-color:rgba(255,255,255,.25)}
.sec--ink .sec__more:hover{color:var(--green);border-color:var(--green)}

/* ─────────────────────────── 9. CAMPAIGN CARDS ─────────────────────────── */
.camp__meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;
  padding-block:13px;border-block:1px solid var(--line);
}
.camp__count{
  font-family:var(--mono);font-size:.8rem;color:var(--navy);font-weight:500;
  display:flex;align-items:center;gap:.5rem;
}
.camp__count i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.camp__upd{font-family:var(--mono);font-size:.71rem;color:var(--muted);margin-inline-start:auto}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{
  font-family:var(--ar-body);font-size:.83rem;color:var(--navy);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 14px;cursor:pointer;
  transition:all .16s var(--e);
}
.filters button:hover{border-color:var(--navy);transform:translateY(-1px)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.filters button .num{font-size:.72rem;opacity:.65;margin-inline-start:.25rem}

.deeds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.deed{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;position:relative;
  transition:transform .24s var(--e),box-shadow .24s,border-color .24s;
}
/* R11: subtle lift + minimal elevation; transform only (no layout shift) */
.deed:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:#C4CFB6}
.deed__img{
  position:relative;height:176px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;margin:0;
  background:linear-gradient(150deg,var(--navy),var(--ink));
}
.deed__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.deed:hover .deed__img img{transform:scale(1.05)}
/* R13: lighter scrim — just enough at the top for the serial/badge chips to
   stay legible; documentary photos keep their realism (no heavy purple wash). */
.deed__img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,58,.34) 0%,rgba(20,16,58,.04) 42%,rgba(20,16,58,.12) 100%);
}
.deed__serial{
  position:absolute;inset-block-start:11px;inset-inline-end:11px;z-index:2;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.07em;color:#fff;
  background:rgba(10,8,30,.5);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:3px 8px;direction:ltr;
}
.deed__tag{
  position:absolute;inset-block-start:11px;inset-inline-start:11px;z-index:2;
  font-size:.69rem;font-weight:500;border-radius:var(--r-sm);padding:3px 10px;
}
.deed__tag--urg{background:#E8543F;color:#fff}
.deed__tag--soon{background:#F0B429;color:#3A2A00}
.deed__tag--new{background:var(--green);color:#14300A}
.deed__bd{padding:19px 20px 17px;flex:1}
.deed__cat{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-ink);margin:0 0 7px;
}
.deed__bd h3{font-size:var(--fs-card);margin-bottom:7px}
.deed__where{
  font-family:var(--mono);font-size:.71rem;color:var(--muted);
  display:flex;align-items:center;gap:.4rem;margin:0 0 11px;
}
.deed__where svg{width:12px;height:12px;stroke:var(--green-ink);fill:none;stroke-width:2;flex:none}
.deed__txt{margin:0;font-size:.87rem;line-height:1.85;color:var(--body)}

.meter{margin-top:17px}
.meter__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.meter__raised{font-family:var(--mono);font-size:.98rem;font-weight:var(--w-mid);color:var(--navy)}
.meter__raised small{font-family:var(--ar-body);font-size:.67rem;font-weight:400;color:var(--muted);margin-inline-start:3px}
.meter__pct{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--green-ink)}
.meter__track{height:6px;background:var(--stone);border:1px solid var(--line);position:relative;overflow:hidden}
.meter__fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--green);width:0;transition:width 1.1s var(--e)}
.meter__goal{
  font-family:var(--mono);font-size:.69rem;color:var(--muted);margin-top:7px;
  display:flex;justify-content:space-between;gap:8px;
}

/* tear-off stub */
.deed__stub{position:relative;border-top:1px dashed var(--line);padding:14px 20px;display:flex;gap:9px;align-items:center}
.deed__stub::before,.deed__stub::after{
  content:'';position:absolute;inset-block-start:-8px;width:16px;height:16px;
  border-radius:50%;background:var(--stone);
}
.deed__stub::before{inset-inline-start:-8px}
.deed__stub::after{inset-inline-end:-8px}
.sec--white .deed__stub::before,.sec--white .deed__stub::after{background:var(--white)}
.deed__stub .btn{flex:1}
.deed__more{font-size:.81rem;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap}
.deed__more:hover{border-color:var(--green)}

.deed--done .deed__img img{filter:saturate(.3) brightness(.92)}
.deed--done .meter__fill{background:var(--navy)}
.deed--done .meter__pct{color:var(--navy)}
.stamp{
  position:absolute;inset-block-start:58px;inset-inline-end:16px;z-index:3;
  transform:rotate(-11deg) scale(.9);border:2px solid rgba(41,35,105,.75);color:rgba(41,35,105,.9);
  background:rgba(255,255,255,.9);font-family:var(--ar-display);font-weight:700;font-size:.78rem;
  padding:5px 12px;border-radius:var(--r-sm);opacity:0;
  transition:opacity .5s .35s,transform .5s var(--e) .35s;
}
.deed.in .stamp{opacity:1;transform:rotate(-11deg) scale(1)}

.arch{
  margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.arch__t{font-size:.88rem;color:var(--navy);font-weight:500;display:flex;align-items:center;gap:.5rem}
.arch__t svg{width:16px;height:16px;stroke:var(--green-ink);fill:none;stroke-width:2.2}
.arch__l{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.arch__l span{
  font-size:.78rem;color:var(--muted);background:var(--stone);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;
}
.arch a{font-size:.83rem;color:var(--navy);border-bottom:1px solid var(--line);white-space:nowrap}
.arch a:hover{border-color:var(--green)}

/* ─────────────────────────── 10. GIVING MODES ─────────────────────────── */
/* R03: related work areas — 3 per row, trailing row CENTERED (was a 4-col
   hairline grid that left a large blank cell with five items). Flex-wrap +
   justify-content:center makes the final row feel intentional at every width. */
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.mode{
  flex:1 1 calc((100% - 32px) / 3);max-width:calc((100% - 32px) / 3);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;transition:background .2s,border-color .2s,transform .2s var(--e);
}
@media (max-width:820px){.mode{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}
@media (max-width:520px){.mode{flex-basis:100%;max-width:100%}}
.mode:hover{background:var(--stone-2)}
.mode__ic{
  width:34px;height:34px;stroke:var(--navy);fill:none;stroke-width:1.6;
  margin-bottom:15px;transition:transform .3s var(--e);
}
.mode:hover .mode__ic{transform:translateY(-3px)}
.mode h3{font-size:1.04rem;margin-bottom:8px}
.mode p{margin:0 0 15px;font-size:.85rem;line-height:1.8;color:var(--muted)}
.mode a{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--green-ink);text-transform:uppercase}
.mode a:hover{color:var(--navy)}

/* ─────────────────────────── 11. ABOUT ─────────────────────────── */
.about{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:stretch}
.about__txt{align-self:center}
.about h2{font-size:var(--fs-h2);margin:17px 0 18px;font-weight:var(--w-bold);letter-spacing:-.018em}
.about h2 .lt{font-weight:var(--w-light);color:rgba(41,35,105,.58);display:block}
.about p{margin:0 0 16px;font-size:.98rem;line-height:2}
.about__fig{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  min-height:440px;background:linear-gradient(150deg,var(--navy),var(--ink));margin:0;
}
.about__fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.about__cap{
  position:absolute;inset-block-end:16px;inset-inline:16px;z-index:2;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:var(--r);
  padding:13px 16px;display:flex;align-items:center;gap:14px;
}
.about__cap b{font-family:var(--mono);font-size:1.02rem;font-weight:var(--w-mid);color:var(--navy);flex:none}
.about__cap span{font-size:.8rem;color:var(--muted);line-height:1.55}
.pillars{list-style:none;margin:26px 0 24px;padding:0;border-block-start:1px solid var(--line)}
.pillars li{padding:18px 0;border-block-end:1px solid var(--line)}
.pillars h3{font-size:.99rem;margin-bottom:6px;display:flex;align-items:center;gap:.6rem}
.pillars h3::before{content:'';width:8px;height:8px;background:var(--green);border-radius:1px;flex:none}
.pillars p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.85}

/* ─────────────────────────── 12. WORK AREAS ─────────────────────────── */
.work{position:relative;isolation:isolate;overflow:hidden}
.work__bg{position:absolute;inset:0;z-index:-2}
.work__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.work::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,58,.94) 0%,rgba(20,16,58,.86) 42%,rgba(20,16,58,.95) 100%);
}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.area{
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:25px 23px;display:block;
  background:rgba(20,16,58,.5);backdrop-filter:blur(3px);
  transition:background .22s,border-color .22s,transform .22s var(--e);
}
.area:hover{background:rgba(125,193,72,.1);border-color:rgba(125,193,72,.45);transform:translateY(-3px)}
.area__ic{width:29px;height:29px;stroke:var(--green);fill:none;stroke-width:1.6;margin-bottom:14px}
.area h3{color:#fff;font-size:1rem;margin-bottom:8px}
.area p{margin:0;font-size:.85rem;line-height:1.8;color:#A8ACC6}
.area--more{
  display:flex;flex-direction:column;justify-content:center;background:rgba(20,16,58,.3);
  border-style:dashed;border-color:rgba(125,193,72,.4);
}
.area--more h3{color:var(--green);margin-bottom:6px}
.area--more span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#fff;text-transform:uppercase;
  margin-top:14px;display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s;
}
.area--more:hover span{gap:.75rem}

/* ─────────────────────────── 13. CHAIN ─────────────────────────── */
.chain{display:grid;grid-template-columns:repeat(3,1fr)}
.step{padding-inline-end:30px}
.step+.step{border-inline-start:1px solid var(--line);padding-inline-start:30px}
.step__n{
  font-family:var(--mono);font-size:.76rem;font-weight:var(--w-mid);color:var(--green-ink);
  letter-spacing:.11em;margin:0 0 13px;
}
.step h3{font-size:1.04rem;margin-bottom:10px}
.step p{margin:0;font-size:.89rem;line-height:1.9;color:var(--muted)}

/* ─────────────────────────── 14. DOCUMENTS ─────────────────────────── */
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.doc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s var(--e);
}
.doc:hover{border-color:var(--navy);transform:translateY(-3px)}
.doc__ic{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.7}
.doc h3{font-size:.93rem;font-weight:var(--w-mid);line-height:1.6}
.doc span{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin-top:auto;
}

/* ─────────────────────────── 15. NEWS (B109 editorial) ─────────────────────────── */

/* the branded placeholder: the page's own artwork + logo mark, used wherever a
   genuine photograph does not exist. Shared by the featured, grid and article
   images so the fallback reads as one deliberate identity, never a broken slot. */
.post__img--ph, .feat__img--ph, .artl__img--ph{
  background-color:#141c36;
  background-image:
    linear-gradient(180deg, rgba(16,20,44,.55), rgba(16,20,44,.72)),
    url('../../images/pages/about/board-hero-background.webp');
  background-size:auto,cover;background-position:center,center;
}
.post__mark, .feat__mark, .artl__mark{
  position:absolute;inset:0;
  background:url('../../images/brand/logo-mark-white.png') center/auto 46% no-repeat;
  opacity:.9;
}

/* ── the featured story (hero) ── */
.nhero{
  background:linear-gradient(180deg,var(--stone-2,#F8FAF5),var(--white,#FFF));
  padding:26px 0 56px;
}
.nhero__grid{
  display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:40px 48px;align-items:center;
}
.nhero__intro{min-width:0}
.nhero__feat{min-width:0}
.nhero .crumb{margin-bottom:22px}
.nhero__k{
  margin:0 0 12px;font-family:var(--mono,monospace);font-size:.875rem;
  letter-spacing:.06em;color:#467C20;   /* AA on the tinted hero; see B108 note */
}
.nhero__h{
  margin:0;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:var(--w-bold,800);
  line-height:1.22;letter-spacing:-.015em;color:var(--navy,#292369);
}
.nhero__lede{margin:16px 0 0;max-width:46ch;font-size:1.0625rem;line-height:1.9;color:var(--body,#3C4152)}

.feat{
  display:grid;grid-template-rows:auto auto;
  background:var(--white,#FFF);border:1px solid var(--line,#D9DFD0);
  border-radius:10px;overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(6,4,26,.4);
}
.feat__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#141c36}
.feat__img img{width:100%;height:100%;object-fit:cover;display:block}
.feat__bd{padding:24px 26px 26px;position:relative}
.feat__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px;
  font-family:var(--mono,monospace);font-size:.8125rem;color:var(--muted,#5A6076);
}
.feat__lead{
  font-weight:700;color:#467C20;
  border:1px solid var(--green,#7DC148);border-radius:999px;padding:2px 12px;
}
.feat__cat{color:var(--navy,#292369)}
.feat__h{
  margin:0;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.4;font-weight:var(--w-bold,800);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.feat__h a{color:var(--navy,#292369);text-decoration:none}
.feat__x{margin:12px 0 0;font-size:1.02rem;line-height:1.85;color:var(--body,#3C4152)}
.feat__go{
  display:inline-block;margin-top:16px;
  font-family:var(--mono,monospace);font-size:.9rem;font-weight:600;color:#467C20;
}
.feat:hover .feat__go{color:var(--navy,#292369)}

/* the stretched link: whole card clickable, one real <a>, no nested links */
.post__link::after{content:'';position:absolute;inset:0;z-index:1}
.feat__bd,.post__bd{position:relative}

/* ── the grid card ── */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
/* small archives anchor intentionally instead of leaving an empty grid track */
.news--1{grid-template-columns:minmax(0,560px);justify-content:center}
.news--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(66.66% - 8px);margin-inline:auto}
.news__all{margin-top:26px;text-align:center}
.post{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line,#D9DFD0);border-radius:10px;overflow:hidden;
  background:var(--white,#FFF);
  transition:transform .24s var(--e),box-shadow .24s var(--e),border-color .24s;
}
.post:hover{transform:translateY(-4px);box-shadow:0 22px 48px -26px rgba(6,4,26,.4);border-color:#C7CFBB}
.post:focus-within{border-color:var(--green,#7DC148);box-shadow:0 0 0 3px rgba(125,193,72,.25)}
.post__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#141c36}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e);display:block}
.post:hover .post__img img{transform:scale(1.04)}
.post__bd{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.post__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.78rem;letter-spacing:.02em;color:var(--muted,#5A6076);
}
.post__cat{color:var(--navy,#292369)}
.post__h{
  margin:0;font-size:1.06rem;line-height:1.55;font-weight:var(--w-bold,800);
  /* visual clamp only — the full title stays in the DOM and the CMS store */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post__h a{color:var(--navy,#292369);text-decoration:none}
.post__x{
  margin:10px 0 0;font-size:1rem;color:var(--body,#3C4152);line-height:1.75;
  /* two–three lines, not truncated so hard the meaning changes */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post__go{
  margin-top:auto;padding-top:14px;
  font-family:var(--mono,monospace);font-size:.85rem;font-weight:600;color:#467C20;
}
.post:hover .post__go{color:var(--navy,#292369)}

/* ── the article page ── */
.artl{max-width:74ch;margin-inline:auto}
.artl__when{margin:0 0 16px;font-family:var(--mono,monospace);font-size:.9rem;color:var(--muted,#5A6076)}
.artl__fig{margin:0 0 26px}
.artl__img{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#141c36}
.artl__img img{width:100%;height:100%;object-fit:cover;display:block}
.artl__cap{margin:10px 2px 0;font-size:.9rem;color:var(--muted,#5A6076);line-height:1.7}
.artl__body{max-width:72ch}
.artl__body p{margin:0 0 1.1em;font-size:1.06rem;line-height:1.95;color:var(--body,#3C4152)}
.artl__body h2{margin:1.6em 0 .5em;font-size:1.5rem;font-weight:var(--w-bold,800);color:var(--navy,#292369);line-height:1.35}
.artl__body h3{margin:1.4em 0 .4em;font-size:1.2rem;font-weight:var(--w-bold,800);color:var(--navy,#292369);line-height:1.4}
.artl__body ul,.artl__body ol{margin:0 0 1.1em;padding-inline-start:1.4em}
.artl__body li{margin:0 0 .5em;font-size:1.06rem;line-height:1.9;color:var(--body,#3C4152)}
.artl__body a{color:var(--navy,#292369);text-decoration:underline;text-underline-offset:3px}
.artl__body a:hover{color:#467C20}
.artl__body blockquote{
  margin:1.4em 0;padding:6px 20px;
  border-inline-start:3px solid var(--green,#7DC148);
  color:var(--muted,#5A6076);font-size:1.1rem;line-height:1.85;
}
.artl__body figure{margin:1.6em 0}
.artl__body img{width:100%;height:auto;border-radius:8px;display:block}
.artl__body figcaption{margin-top:10px;font-size:.9rem;color:var(--muted,#5A6076);line-height:1.7}
.artl__back{
  display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
  font-family:var(--mono,monospace);font-size:.9rem;font-weight:600;
  color:var(--navy,#292369);text-underline-offset:3px;
}

/* Arabic must not be letter-spaced (joined script). Scoped to the news pages;
   the sitewide sweep of the remaining mono labels belongs to the typography
   batch. */
.newsx .eyebrow,.newsx .crumb,.newsx .nhero__k,
.newsx .feat__meta,.newsx .feat__lead,.newsx .feat__go,
.newsx .post__meta,.newsx .post__go,.newsx .artl__when{letter-spacing:normal}

@media (max-width:1080px){
  .nhero__grid{grid-template-columns:1fr;gap:28px}
  .news{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .news--2{max-width:none;margin-inline:0}
}
@media (max-width:600px){
  .news,.news--1,.news--2{grid-template-columns:1fr;max-width:none}
}

/* ─────────────────────────── 16. DUAL CTA ─────────────────────────── */
.dual{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.dual__c{position:relative;isolation:isolate;overflow:hidden;padding:46px 40px;background:var(--white)}
.dual__bg{position:absolute;inset:0;z-index:-2}
.dual__bg img{width:100%;height:100%;object-fit:cover}
.dual__c::before{content:'';position:absolute;inset:0;z-index:-1}
.dual__c--light::before{
  background:linear-gradient(to left,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.6) 100%);
}
.dual__c--alt{color:#C3C6DD}
.dual__c--alt::before{
  background:linear-gradient(to left,rgba(30,25,88,.95) 0%,rgba(41,35,105,.86) 52%,rgba(41,35,105,.6) 100%);
}
.dual__c--alt h3{color:#fff}
.dual__c h3{font-size:1.32rem;margin:16px 0 12px}
.dual__c p{margin:0 0 22px;font-size:.93rem;line-height:1.9;max-width:38ch}
.dual__c--alt p{color:#BBBFD6}

/* ─────────────────────────── 17. FOOTER ─────────────────────────── */
.ftr{background:var(--ink);color:#9EA2BE;padding:66px 0 0;font-size:.87rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:42px;padding-bottom:48px}
/* R10/R15: proper Arabic subhead — no Latin uppercase tracking on Arabic text. */
.ftr h4{
  color:#fff;font-size:.95rem;font-family:var(--ar-display);font-weight:600;letter-spacing:normal;
  margin-bottom:18px;
}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{transition:color .16s}
.ftr a:hover{color:var(--green)}
.ftr__about{max-width:34ch;line-height:1.95;margin:0 0 18px}
.ftr__reg{font-family:var(--mono);font-size:.71rem;color:var(--green);letter-spacing:.05em;margin:0}
.office{margin-bottom:16px}
.office strong{display:block;color:#fff;font-weight:500;font-size:.83rem;margin-bottom:3px}
.office span{line-height:1.75}
.ftr__tel{font-family:var(--mono);direction:ltr;display:inline-block}
.social{display:flex;gap:8px;margin-top:6px}
.social a{
  width:34px;height:34px;border:1px solid var(--navy-soft);border-radius:var(--r-sm);
  display:grid;place-items:center;transition:all .2s var(--e);
}
.social a:hover{border-color:var(--green);background:rgba(125,193,72,.1);transform:translateY(-2px)}
.social svg{width:15px;height:15px;fill:currentColor}
.ftr__bar{
  border-top:1px solid rgba(255,255,255,.08);padding:19px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.77rem;
}

/* ─────────────────────────── 18. UTILITY OVERLAYS ─────────────────────────── */
.mbar{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:55;background:var(--white);
  border-top:1px solid var(--line);padding:10px 16px;display:none;
  box-shadow:0 -8px 24px -12px rgba(20,16,58,.3);
}
.mbar .btn{width:100%}
.toast{
  position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translate(50%,20px);z-index:200;
  background:var(--ink);color:#fff;font-size:.85rem;padding:12px 20px;border-radius:var(--r);
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transition:all .28s var(--e);
  display:flex;align-items:center;gap:.6rem;
}
.toast[data-show="true"]{opacity:1;visibility:visible;transform:translate(50%,0)}
.toast i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}

/* ─────────────────────────── 19. ANIMATION ─────────────────────────── */
.rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none;transition:opacity .65s ease,transform .65s var(--e)}
.ha{opacity:0;animation:haIn .85s var(--e) forwards}
@keyframes haIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ha--1{animation-delay:.06s}
.ha--2{animation-delay:.16s}
.ha--3{animation-delay:.26s}
.ha--4{animation-delay:.36s}
.ha--5{animation-delay:.48s}
.ha--6{animation-delay:.6s}
.ha--7{animation-delay:.72s}

/* ─────────────────────────── 20. RESPONSIVE ─────────────────────────── */
@media (max-width:1080px){
  :root{--veil-1:.90;--veil-2:.86;--veil-3:.62;--veil-4:.42}
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .hero__grid,.about{grid-template-columns:1fr;gap:44px}
  .about__fig{min-height:340px}
  .figs__grid{grid-template-columns:1fr 1fr;gap:34px 0}
  .fig:nth-child(3)::before{display:none}
  .fig:nth-child(3){padding-inline-start:0}
  .deeds,.areas,.news{grid-template-columns:repeat(2,1fr)}
  .docs{grid-template-columns:repeat(2,1fr)}   /* .modes is flex now — see R03 */
  .ftr__grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:700px){
  :root{--veil-1:.88;--veil-2:.86;--veil-3:.80;--veil-4:.74}
  .sec{padding:60px 0}
  .hero{padding:44px 0 64px}
  .hero__bg img{object-position:68% 70%}
  .hero__motif{inset-block-start:-8%;inset-inline-end:-42%;width:120vw}
  .figs{padding:40px 0 42px}
  .figs__grid{grid-template-columns:1fr;gap:0}
  .fig{padding-inline:0!important;padding-block:22px;border-block-end:1px solid rgba(255,255,255,.1)}
  .fig+.fig::before{display:none}
  .fig:last-child{border-block-end:0}
  .deeds,.areas,.modes,.docs,.news,.dual,.chain{grid-template-columns:1fr}
  .step{padding-inline-end:0}
  .step+.step{
    border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);
    padding-block-start:26px;margin-block-start:26px;
  }
  .dual__c{padding:32px 24px}
  .dual__c--light::before{background:rgba(255,255,255,.93)}
  .dual__c--alt::before{background:rgba(41,35,105,.92)}
  .chips,.seg{grid-template-columns:repeat(2,1fr)}
  .seg button{border-block-end:1px solid var(--line)}
  .amtRow{grid-template-columns:1fr}
  .freq{height:44px}
  .util__r{display:none}
  .camp__upd{margin-inline-start:0;width:100%}
  .mbar{display:block}
  body{padding-bottom:66px}
  .toast{inset-block-end:76px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ha,.rise{opacity:1!important;transform:none!important}
  .hero__motif{opacity:.5!important}
  .stamp{opacity:1!important;transform:rotate(-11deg)!important}
}

/* ══════════════════════════════════════════════════════════════════
   21. CAMPAIGN DETAIL PAGE
   Long main column + sticky sidebar console.
   Reuses every token above; adds no new colours.
   ══════════════════════════════════════════════════════════════════ */
.crumb{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);padding-block:22px 0;margin-bottom:26px;
}
.crumb a{transition:color .16s}
.crumb a:hover{color:var(--navy)}
.crumb i{opacity:.45;font-style:normal}
.crumb b{color:var(--navy);font-weight:400}

.cp{background:var(--stone);padding-bottom:92px}
.cp__grid{display:grid;grid-template-columns:1fr 372px;gap:48px;align-items:start}
.cp__side{position:sticky;top:94px;align-self:start;display:flex;flex-direction:column;gap:16px}

/* ── campaign identity ── */
.cid__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:15px}
/* F03: the serial is quiet metadata on the detail page, not a badge — plain
   muted mono text so the status tag and category chip remain the visitor-facing
   labels. Identifier and all technical uses are unchanged. */
.cid__serial{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  padding:4px 2px;direction:ltr;
}
.cid__cat{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-ink);background:var(--green-pale);border:1px solid rgba(125,193,72,.4);
  border-radius:var(--r-sm);padding:4px 10px;
}
.cid__h{font-size:var(--fs-page);font-weight:var(--w-bold);letter-spacing:-.018em;line-height:var(--lh-tight)}
.cid__h .lt{
  display:block;font-size:.44em;font-weight:var(--w-light);
  color:rgba(41,35,105,.6);letter-spacing:0;line-height:1.6;margin-bottom:.35em;
}
.cid__where{
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
  display:flex;align-items:center;gap:.45rem;margin:14px 0 0;
}
.cid__where svg{width:13px;height:13px;stroke:var(--green-ink);fill:none;stroke-width:2;flex:none}

/* ── gallery ── */
.gal{margin-top:26px}
.gal__main{
  position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,var(--navy),var(--ink));aspect-ratio:16/9;
}
.gal__main img{width:100%;height:100%;object-fit:cover}
.gal__cap{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding:22px 18px 12px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.86);
  background:linear-gradient(180deg,transparent,rgba(10,8,30,.72));
}
.gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gal__t{
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;padding:0;
  cursor:pointer;background:none;aspect-ratio:16/10;transition:border-color .18s,transform .18s var(--e);
}
.gal__t:hover{transform:translateY(-2px);border-color:var(--navy)}
.gal__t[aria-current="true"]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.gal__t img{width:100%;height:100%;object-fit:cover}

/* ── large progress ── */
.bigm{margin-top:30px}
.bigm__row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:11px;flex-wrap:wrap}
.bigm__amt{font-family:var(--mono);font-size:1.95rem;font-weight:var(--w-mid);color:var(--navy);line-height:1}
.bigm__amt small{font-family:var(--ar-body);font-size:.44em;color:var(--muted);font-weight:400;margin-inline-start:4px}
.bigm__of{display:block;font-size:.85rem;color:var(--muted);margin-top:7px}
.bigm__pct{font-family:var(--mono);font-size:1.2rem;font-weight:var(--w-mid);color:var(--green-ink)}
.bigm__track{height:10px;background:var(--stone-2);border:1px solid var(--line);position:relative;overflow:hidden}
.bigm__fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--green);width:0;transition:width 1.2s var(--e)}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:22px;
}
.facts>div{background:var(--white);padding:15px 17px}
.facts dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.facts dd{margin:0;font-family:var(--mono);font-size:1.06rem;font-weight:var(--w-mid);color:var(--navy)}
.facts dd em{font-family:var(--ar-body);font-style:normal;font-size:.68rem;color:var(--muted);margin-inline-start:3px}

/* ── content blocks ── */
.blk{margin-top:54px}
.blk__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:22px;padding-block-end:12px;border-block-end:1px solid var(--line);
}
.blk__h h2{font-size:1.24rem;font-weight:var(--w-bold);letter-spacing:-.012em}
.blk__h span{font-family:var(--mono);font-size:.69rem;color:var(--muted);letter-spacing:.05em}
.blk>p{font-size:.97rem;line-height:2;margin:0 0 15px}
.blk>p:last-child{margin-bottom:0}

/* ── budget ledger ──
   The trust engine of this page. Line items sum exactly to target;
   funded state per line is computed server-side from raised_amount. */
.led{width:100%;border-collapse:collapse;font-size:.9rem}
.led th{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;text-align:start;padding:0 0 11px;
  border-block-end:1px solid var(--line);white-space:nowrap;
}
.led td{padding:13px 0;border-block-end:1px solid var(--line);vertical-align:middle;transition:background .3s}
.led th.n,.led td.n{text-align:end;font-family:var(--mono);white-space:nowrap;padding-inline-start:14px}
.led td.item{color:var(--navy);line-height:1.6}
.led td.st-cell{text-align:end;padding-inline-start:14px}
.led tfoot td{
  border-block-end:0;border-block-start:2px solid var(--navy);padding-block-start:15px;
  font-weight:var(--w-mid);color:var(--navy);font-size:.95rem;
}
.led tr.is-target td{background:var(--green-pale)}
.led__note{font-size:.83rem;color:var(--muted);margin:16px 0 0;line-height:1.8}

.st{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;padding:4px 9px;
  border-radius:var(--r-sm);white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;
}
.st svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3}
.st--done{background:var(--green-pale);color:var(--green-ink);border:1px solid rgba(125,193,72,.4)}
.st--now{background:rgba(41,35,105,.06);color:var(--navy);border:1px solid var(--line)}
.st--wait{background:var(--stone);color:var(--muted);border:1px solid var(--line)}

/* ── field-update timeline ── */
.tml{list-style:none;margin:0;padding:0;position:relative}
.tml::before{content:'';position:absolute;inset-block:8px;inset-inline-start:7px;width:1px;background:var(--line)}
.tml li{position:relative;padding-inline-start:34px;padding-block-end:26px}
.tml li:last-child{padding-block-end:0}
.tml__dot{
  position:absolute;inset-inline-start:0;inset-block-start:4px;width:15px;height:15px;
  border-radius:50%;background:var(--white);border:2px solid var(--line);z-index:2;
}
.tml li.done .tml__dot{background:var(--green);border-color:var(--green)}
.tml li.now .tml__dot{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px rgba(41,35,105,.1)}
.tml__d{font-family:var(--mono);font-size:.67rem;letter-spacing:.06em;color:var(--muted);margin:0 0 5px}
.tml h3{font-size:.98rem;margin-bottom:6px}
.tml li.wait h3{color:var(--muted);font-weight:var(--w-light)}
.tml p{margin:0;font-size:.87rem;color:var(--muted);line-height:1.85}

/* ── donors ── */
.dnr{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.dnr li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-block-end:1px solid var(--line)}
.dnr__av{
  width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--ar-display);font-weight:var(--w-mid);
  font-size:.85rem;flex:none;
}
.dnr__av--anon{background:var(--stone);color:var(--muted);border:1px solid var(--line)}
.dnr__b{flex:1;min-width:0}
.dnr__t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dnr__n{font-size:.92rem;color:var(--navy)}
.dnr__a{font-family:var(--mono);font-size:.9rem;font-weight:var(--w-mid);color:var(--navy);white-space:nowrap}
.dnr__m{font-size:.83rem;color:var(--muted);margin:4px 0 0;line-height:1.7}
.dnr__x{font-family:var(--mono);font-size:.67rem;color:var(--muted);margin:3px 0 0}
.dnr__more{margin-top:18px;display:inline-flex}

/* ── sidebar cards ── */
.sideCard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:19px 20px}
.sideCard h2{font-size:.95rem;margin-bottom:14px;font-weight:var(--w-mid)}
.sideCard dl{margin:0;display:flex;flex-direction:column;gap:12px}
.sideCard dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.sideCard dd{margin:0;font-size:.89rem;color:var(--navy);line-height:1.65}

.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share__b{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--ar-body);font-size:.84rem;color:var(--navy);background:var(--stone-2);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;
  transition:all .16s var(--e);
}
.share__b:hover{border-color:var(--navy);transform:translateY(-1px)}
.share__b svg{width:15px;height:15px;flex:none}
.share__b--wa{background:var(--green-pale);border-color:rgba(125,193,72,.42);color:var(--green-ink)}
.share__b--wa:hover{border-color:var(--green-ink)}

/* ── budget-line callout inside the console impact box ── */
.impact__ln{
  display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;color:#3C5A22;
  margin:0 0 11px;padding-block-end:11px;border-block-end:1px dashed rgba(125,193,72,.45);
}
.impact__ln b{color:var(--green-ink);font-weight:var(--w-mid)}
.impact__ln svg{width:14px;height:14px;stroke:var(--green-ink);fill:none;stroke-width:2.2;flex:none;transform:translateY(3px)}

/* ── mobile donate bar with live amount ── */
.mbar__row{display:flex;align-items:center;gap:12px}
.mbar__amt{
  font-family:var(--mono);font-size:1.02rem;font-weight:var(--w-mid);color:var(--navy);flex:none;
  display:flex;flex-direction:column;line-height:1.25;
}
.mbar__amt em{font-family:var(--ar-body);font-style:normal;font-size:.62rem;color:var(--muted);font-weight:400}
.mbar__row .btn{flex:1}

/* ── related ── */
.rel{background:var(--white);border-block-start:1px solid var(--line)}

@media (max-width:1080px){
  .cp__grid{grid-template-columns:1fr;gap:36px}
  .cp__side{position:static;top:auto}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .cp{padding-bottom:60px}
  .crumb{font-size:.75rem;padding-block:16px 0;margin-bottom:18px}
  .gal__thumbs{grid-template-columns:repeat(4,1fr);gap:7px}
  .blk{margin-top:40px}
  .facts{grid-template-columns:1fr}
  /* the ledger becomes stacked rows on narrow screens */
  .led thead{display:none}
  .led tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-block:14px;border-block-end:1px solid var(--line)}
  .led td{border:0;padding:0}
  .led td.item{grid-column:1;font-size:.9rem}
  .led td.qty{grid-column:1;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
  .led td.unit{display:none}
  .led td.tot{grid-column:2;grid-row:1;text-align:end}
  .led td.st-cell{grid-column:2;grid-row:2;text-align:end;padding-inline-start:0}
  .led tfoot tr{border-block-end:0;border-block-start:2px solid var(--navy);padding-block-start:14px}
  .led tfoot td{padding:0;border:0}
}

/* ══════════════════════════════════════════════════════════════════
   22. INNER PAGE HERO  (generic — reused by every remaining page)
   ══════════════════════════════════════════════════════════════════ */
.phero{
  position:relative;overflow:hidden;padding:16px 0 46px;
  background:
    radial-gradient(900px 420px at 94% -34%, rgba(125,193,72,.17), transparent 60%),
    linear-gradient(172deg,#FBFCF8 0%,#F1F4ED 100%);
  border-block-end:1px solid var(--line);
}
.phero .crumb{margin-bottom:22px}
.phero__h{font-size:var(--fs-page);font-weight:var(--w-bold);letter-spacing:-.018em;line-height:var(--lh-tight);max-width:22ch}
.phero__h .lt{
  display:block;font-size:.5em;font-weight:var(--w-light);color:rgba(41,35,105,.6);
  letter-spacing:0;line-height:1.6;margin-bottom:.4em;max-width:none;
}
.phero__lede{font-size:1rem;line-height:1.95;color:var(--muted);max-width:60ch;margin:16px 0 0}

/* ══════════════════════════════════════════════════════════════════
   23. CAMPAIGN INDEX — filters, toolbar, pager, empty state
   ══════════════════════════════════════════════════════════════════ */
.idx{padding:44px 0 92px}
/* G14 §9: single full-width column — filters are an on-demand overlay at ALL
   widths now (was a 264px persistent desktop sidebar). */
.idx__grid{display:block}

/* ── filter panel ── */
/* G14 §9 — the filter panel is an on-demand overlay SHEET at all widths, opened
   by the toolbar's تصفية button (#fltBtn). One DOM node, one set of inputs. */
.idx__side{
  position:fixed;inset:0;z-index:82;background:rgba(20,16,58,.55);
  visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;
}
.idx__side[data-open="true"]{visibility:visible;opacity:1}
/* R05: the filter panel is a flex column — sticky header + footer, scrollable
   body between them — so it reads as a product interface, not a scrolling form. */
.flt{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(380px,94vw);max-width:100%;
  background:var(--white);display:flex;flex-direction:column;box-shadow:var(--sh-lg);
  transform:translateX(-100%);transition:transform .3s var(--e);
}
.idx__side[data-open="true"] .flt{transform:none}
.flt__hd{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.flt__hd h2{font-size:1.05rem;font-weight:var(--w-bold)}
.flt__x{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;color:var(--navy);
}
.flt__x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.flt__x:hover{border-color:var(--navy)}
.flt__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 20px}
.flt__g{border-block-end:1px solid var(--line);padding-block:18px}
.flt__g:first-of-type{padding-block-start:0}
.flt__g:last-of-type{border-block-end:0;padding-block-end:0}
/* R05/R10: Arabic group heading — not the mono-uppercase Latin convention. */
.flt__t{
  font-family:var(--ar-display);font-size:.82rem;font-weight:600;
  color:var(--navy);margin:0 0 8px;
}
/* the whole row is the click target (a <label>); count is a badge beside the
   label, and long names wrap without colliding with the box or the badge. */
.chk{
  display:flex;align-items:flex-start;gap:10px;padding:8px 10px;margin-inline:-10px;
  border-radius:var(--r);cursor:pointer;font-size:.92rem;color:var(--navy);
  transition:background .15s;
}
.chk:hover{background:var(--stone-2)}
.chk:has(input:checked){background:var(--green-pale)}
.chk:focus-within{outline:2px solid var(--green);outline-offset:2px}
.chk input{
  appearance:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);flex:none;position:relative;cursor:pointer;transition:all .15s;
}
.chk:hover input{border-color:var(--green)}
.chk input:checked{background:var(--navy);border-color:var(--navy)}
.chk input:checked::after{
  content:'';position:absolute;inset-inline-start:5px;top:2px;width:4px;height:8px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
}
.chk__t{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.5}
.chk__n{
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--muted);
  background:var(--stone);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center;
}
.chk:has(input:checked) .chk__n{background:#DCEBCB;color:var(--green-ink)}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;cursor:pointer;font-size:.88rem;color:var(--navy)}
.tgl input{
  appearance:none;width:38px;height:21px;border-radius:11px;background:var(--stone);
  border:1px solid var(--line);position:relative;cursor:pointer;transition:all .2s;flex:none;
}
.tgl input::after{
  content:'';position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.22);transition:inset-inline-start .2s var(--e);
}
.tgl input:checked{background:var(--green);border-color:var(--green)}
.tgl input:checked::after{inset-inline-start:19px}
.tgl small{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;line-height:1.5}
.tgl:focus-within{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r)}
/* R05: sticky footer — عرض النتائج is the dominant primary; إزالة الفلاتر is a
   quiet secondary text action, not a competing button. */
.flt__foot{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-top:1px solid var(--line);
}
.flt__foot .btn--go{flex:1}
.flt__clear{
  flex:none;font-size:.9rem;font-weight:600;color:var(--muted);
  min-height:44px;display:inline-flex;align-items:center;
}
.flt__clear:hover{color:var(--navy);text-decoration:underline}

/* native select, matched to the system */
.sel{
  appearance:none;font-family:var(--ar-body);font-size:.86rem;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 13px;padding-inline-end:34px;cursor:pointer;transition:border-color .18s;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--navy) 50%),
    linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:14px calc(50% - 1px),19px calc(50% - 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sel:hover,.sel:focus{border-color:var(--navy);outline:none}
.flt .sel{width:100%}

/* ── toolbar ── */
.tbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block-end:16px;border-block-end:1px solid var(--line);margin-bottom:20px;
}
.tbar__c{font-size:.92rem;color:var(--navy)}
.tbar__c b{font-family:var(--mono);font-weight:var(--w-mid)}
.tbar__r{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.tbar__r label{font-size:.82rem;color:var(--muted);white-space:nowrap}
.fltBtn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ar-body);font-size:.86rem;
  color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 14px;cursor:pointer;
}
.fltBtn svg{width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:1.8}
.fltBtn span[hidden]{display:none}
.fltBtn span:not([hidden]){
  min-width:18px;height:18px;border-radius:9px;background:var(--green);color:#14300A;
  font-family:var(--mono);font-size:.68rem;font-weight:600;display:grid;place-items:center;
}

/* ── active filter pills ── */
.achips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
/* R12: active-filter chips — removable pills (pill radius is correct for chips).
   Whole chip is the remove target; hover signals removal in a restrained red. */
.achips a{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;min-height:32px;transition:border-color .16s,background .16s,color .16s;
}
.achips a:hover{border-color:#E8543F;background:#FCEEEB;color:#B33A28}
.achip{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.81rem;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;
}
.achip button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:.78rem;line-height:1;padding:2px}
.achip button:hover{color:#E8543F}
.achips__clear{
  background:none;border:0;border-block-end:1px dashed var(--line);cursor:pointer;
  font-family:inherit;font-size:.81rem;color:var(--muted);padding:0 0 1px;margin-inline-start:6px;
}
.achips__clear:hover{color:var(--navy);border-color:var(--navy)}

/* ── pagination ── */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:44px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:38px;height:38px;display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--navy);
  transition:all .16s var(--e);
}
.pager a:hover{border-color:var(--navy);transform:translateY(-1px)}
.pager [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pager .pager__nav{padding-inline:15px;font-family:var(--ar-body);font-size:.84rem}
.pager .is-off{opacity:.38;pointer-events:none}

/* ── empty state ── */
.empty{
  text-align:center;padding:66px 24px;background:var(--white);
  border:1px dashed var(--line);border-radius:var(--r);
}
.empty svg{width:38px;height:38px;stroke:#BFC9B2;fill:none;stroke-width:1.5;margin:0 auto 18px}
.empty h2{font-size:1.14rem;margin-bottom:10px}
.empty p{font-size:.92rem;color:var(--muted);max-width:46ch;margin:0 auto 22px;line-height:1.85}

/* (G14: the former ≤1080px overlay rules are now the base — the filter panel is
   an on-demand sheet at every width, so no breakpoint fork is needed here.) */
@media (max-width:700px){
  .idx{padding:26px 0 60px}
  .phero{padding-block-end:34px}
  .phero__h{max-width:none}
  .tbar__r{margin-inline-start:0;width:100%}
  .tbar__r .sel{flex:1}
  .pager{margin-top:32px}
  .pager .pager__nav{padding-inline:11px}
}

/* ══════════════════════════════════════════════════════════════════
   24. CHECKOUT
   Direct-acquirer model: card fields are hosted by the bank gateway,
   the wallet flow is asynchronous, the transfer flow is offline.
   ══════════════════════════════════════════════════════════════════ */
.co{padding:40px 0 92px}
.co__grid{display:grid;grid-template-columns:1fr 372px;gap:44px;align-items:start}

/* ── stepper ── */
.steps{display:flex;align-items:center;list-style:none;margin:0 0 30px;padding:0}
.steps li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted);white-space:nowrap}
.steps li:not(:last-child){flex:1}
.steps li:not(:last-child)::after{content:'';flex:1;height:1px;background:var(--line);margin-inline:14px}
.steps b{
  width:27px;height:27px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:.74rem;font-weight:500;background:var(--white);flex:none;transition:all .2s;
}
.steps li.on{color:var(--navy);font-weight:500}
.steps li.on b{background:var(--navy);border-color:var(--navy);color:#fff}
.steps li.ok b{background:var(--green);border-color:var(--green);color:#14300A}
.steps li.ok{color:var(--navy)}

/* ── panels ── */
.pane{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.pane[hidden]{display:none}
.pane__h{margin-bottom:20px;padding-block-end:14px;border-block-end:1px solid var(--line)}
.pane__h h2{font-size:1.16rem;font-weight:var(--w-bold);letter-spacing:-.012em}
.pane__h p{margin:7px 0 0;font-size:.88rem;color:var(--muted);line-height:1.8}
.pane__nav{display:flex;gap:10px;margin-top:26px;padding-block-start:20px;border-block-start:1px solid var(--line)}
.pane__nav .btn{flex:1}
.pane__nav .btn--line{flex:0 0 auto}

/* ── form fields ── */
.frm{display:grid;gap:17px}
.frm__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f>label{display:block;font-size:.82rem;font-weight:500;color:var(--navy);margin-bottom:7px}
.f>label em{font-style:normal;color:var(--muted);font-weight:400;font-size:.93em}
.f input,.f textarea{
  width:100%;font-family:var(--ar-body);font-size:.94rem;color:var(--navy);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--stone-2);
  transition:background .18s,border-color .18s;
}
.f textarea{resize:vertical;min-height:78px;line-height:1.8}
.f input:focus,.f textarea:focus{background:var(--white);border-color:var(--navy);outline:none}
.f input[dir="ltr"]{font-family:var(--mono);letter-spacing:.03em}
.f input[readonly]{background:var(--stone);color:var(--muted);cursor:not-allowed}
.f[data-err="true"] input,.f[data-err="true"] textarea{border-color:#D8452C;background:#FEF7F5}
.f__err{display:none;font-size:.79rem;color:#C0341E;margin-top:6px}
.f[data-err="true"] .f__err{display:block}
.f__hint{font-size:.79rem;color:var(--muted);margin-top:6px;line-height:1.65}

/* ── fee-coverage strip ── */
.fee{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background:var(--green-pale);border:1px solid rgba(125,193,72,.42);border-radius:var(--r);padding:14px 16px;
}
.fee__b{flex:1}
.fee__t{font-size:.89rem;color:#2E5A12;font-weight:500;margin:0 0 4px}
.fee__d{font-size:.81rem;color:#4B6B31;margin:0;line-height:1.7}
.fee input{
  appearance:none;width:38px;height:21px;border-radius:11px;background:var(--white);
  border:1px solid rgba(125,193,72,.5);position:relative;cursor:pointer;transition:all .2s;flex:none;margin-top:2px;
}
.fee input::after{
  content:'';position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;
  background:var(--green-pale);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:inset-inline-start .2s var(--e);
}
.fee input:checked{background:var(--green);border-color:var(--green)}
.fee input:checked::after{inset-inline-start:19px;background:#fff}

/* ── payment method options ── */
.pm{display:grid;gap:11px}
.pmo{
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.pmo:hover{border-color:#B9C4AA}
.pmo[data-sel="true"]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.pmo__t{display:flex;align-items:flex-start;gap:13px;padding:15px 17px;cursor:pointer;width:100%;
  background:none;border:0;text-align:start;font-family:inherit}
.pmo__r{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);flex:none;
  margin-top:3px;position:relative;transition:all .16s;
}
.pmo[data-sel="true"] .pmo__r{border-color:var(--navy);border-width:5px}
.pmo__ic{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.7;flex:none;margin-top:1px}
.pmo__b{flex:1;min-width:0}
.pmo__n{
  font-family:var(--ar-display);font-weight:var(--w-mid);font-size:.96rem;color:var(--navy);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pmo__tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;padding:2px 7px;border-radius:var(--r-sm);
  background:var(--stone);color:var(--muted);border:1px solid var(--line);font-weight:400;
}
.pmo__tag--fast{background:var(--green-pale);color:var(--green-ink);border-color:rgba(125,193,72,.4)}
.pmo__d{font-size:.82rem;color:var(--muted);margin:5px 0 0;line-height:1.7}
.pmo__panel{display:none;padding:0 17px 17px;margin-top:2px}
.pmo[data-sel="true"] .pmo__panel{display:block}
.pmo__panel>hr{border:0;border-block-start:1px dashed var(--line);margin:0 0 16px}
.hosted{
  border:1px dashed var(--line);border-radius:var(--r);background:var(--stone-2);
  padding:11px 13px;font-size:.79rem;color:var(--muted);line-height:1.7;display:flex;gap:.55rem;
}
.hosted svg{width:14px;height:14px;stroke:var(--green-ink);fill:none;stroke-width:2;flex:none;transform:translateY(3px)}

/* ── async / terminal states ── */
.pend{text-align:center;padding:14px 8px 8px}
.pend__spin{
  width:46px;height:46px;margin:0 auto 20px;border:3px solid var(--line);
  border-block-start-color:var(--green);border-radius:50%;animation:spin 1s linear infinite;
}
.pend h3{font-size:1.1rem;margin-bottom:9px}
.pend>p{font-size:.9rem;color:var(--muted);max-width:44ch;margin:0 auto 18px;line-height:1.85}
.pend__t{font-family:var(--mono);font-size:1.6rem;color:var(--navy);font-weight:var(--w-mid);letter-spacing:.02em}
.pend__tl{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin:0 0 4px}
.pend ol{
  text-align:start;margin:22px auto 0;padding:0 0 0 0;max-width:38ch;list-style:none;
  border-block-start:1px solid var(--line);
}
.pend ol li{
  display:flex;gap:11px;padding:11px 0;border-block-end:1px solid var(--line);
  font-size:.86rem;color:var(--body);line-height:1.7;
}
.pend ol li b{font-family:var(--mono);color:var(--green-ink);flex:none}
.pend__re{margin-top:18px;font-size:.84rem;color:var(--muted)}
.pend__re button{
  background:none;border:0;border-block-end:1px dashed var(--line);cursor:pointer;
  font-family:inherit;font-size:.84rem;color:var(--navy);padding:0 0 1px;
}
.pend__re button:hover{border-color:var(--green)}

.state{text-align:center;padding:34px 26px}
.state__ic{width:48px;height:48px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center}
.state__ic svg{width:24px;height:24px;fill:none;stroke-width:2.4}
.state--bad .state__ic{background:#FDECE8}
.state--bad .state__ic svg{stroke:#C0341E}
.state--wait .state__ic{background:rgba(41,35,105,.07)}
.state--wait .state__ic svg{stroke:var(--navy)}
.state h3{font-size:1.12rem;margin-bottom:10px}
.state p{font-size:.9rem;color:var(--muted);max-width:46ch;margin:0 auto 20px;line-height:1.85}
.state__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── transfer instructions ── */
.tr__box{background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.tr__box dl{margin:0;display:grid;gap:12px}
.tr__box dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tr__box dd{margin:0;font-family:var(--mono);font-size:.95rem;color:var(--navy);direction:ltr;text-align:start}
.tr__box dd.ar{font-family:var(--ar-body);direction:rtl;font-size:.89rem}

/* ── order summary ── */
.sum{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  position:sticky;top:94px;
}
.sum__hd{background:var(--navy);color:#fff;padding:15px 20px;font-family:var(--ar-display);font-size:1rem;font-weight:var(--w-mid)}
.sum__bd{padding:18px 20px}
.sum__camp{display:flex;gap:12px;padding-block-end:16px;border-block-end:1px solid var(--line);margin-bottom:8px}
.sum__img{width:66px;height:50px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--navy)}
.sum__img img{width:100%;height:100%;object-fit:cover}
.sum__ct{font-family:var(--ar-display);font-weight:var(--w-mid);font-size:.9rem;color:var(--navy);line-height:1.5}
.sum__cs{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:4px;display:block}
.sum__l{display:flex;justify-content:space-between;gap:12px;font-size:.87rem;padding-block:7px;color:var(--body)}
.sum__l>span:last-child{font-family:var(--mono);color:var(--navy)}
.sum__l--fee>span:last-child{color:var(--green-ink)}
.sum__tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-block-start:14px;margin-block-start:10px;border-block-start:2px solid var(--navy);
}
.sum__tot span{font-size:.9rem;color:var(--navy);font-weight:500}
.sum__tot b{font-family:var(--mono);font-size:1.4rem;color:var(--navy);font-weight:var(--w-mid);letter-spacing:-.02em}
.sum__tot b em{font-family:var(--ar-body);font-style:normal;font-size:.42em;color:var(--muted);font-weight:400;margin-inline-start:3px}
.sum__note{
  border-block-start:1px dashed var(--line);padding:12px 20px;background:var(--stone-2);
  font-size:.75rem;color:var(--muted);display:flex;align-items:flex-start;gap:.5rem;line-height:1.65;
}
.sum__note svg{width:13px;height:13px;stroke:var(--green-ink);fill:none;stroke-width:2;flex:none;transform:translateY(3px)}

/* ══════════════════════════════════════════════════════════════════
   25. CONFIRMATION / RECEIPT
   ══════════════════════════════════════════════════════════════════ */
.done{padding:52px 0 92px}
.done__top{text-align:center;max-width:60ch;margin:0 auto 40px}
.done__ic{width:62px;height:62px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--green-pale);border:1px solid rgba(125,193,72,.45)}
.done__ic svg{width:30px;height:30px;stroke:var(--green-ink);fill:none;stroke-width:2.6}
.done__ic--wait{background:rgba(41,35,105,.06);border-color:var(--line)}
.done__ic--wait svg{stroke:var(--navy)}
.done__top h1{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:var(--w-bold);letter-spacing:-.018em;margin-bottom:13px}
.done__top p{font-size:1rem;color:var(--muted);line-height:1.95;margin:0}

.rcpt{
  max-width:560px;margin:0 auto 40px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;position:relative;
}
.rcpt__hd{
  background:var(--navy);color:#fff;padding:14px 22px;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;
}
.rcpt__hd span{font-family:var(--ar-display);font-size:.98rem;font-weight:var(--w-mid)}
.rcpt__no{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--green);direction:ltr}
.rcpt__bd{padding:20px 22px}
.rcpt__l{display:flex;justify-content:space-between;gap:14px;padding-block:10px;border-block-end:1px solid var(--line);font-size:.88rem}
.rcpt__l:last-child{border-block-end:0}
.rcpt__l>span:first-child{color:var(--muted)}
.rcpt__l>span:last-child{color:var(--navy);text-align:end}
.rcpt__l .num{font-family:var(--mono)}
.rcpt__foot{
  border-block-start:1px dashed var(--line);padding:14px 22px;background:var(--stone-2);
  font-size:.78rem;color:var(--muted);line-height:1.7;
}
.rcpt__foot .btn{margin-top:12px}
/* perforation, matching the campaign card stub */
.rcpt__foot::before,.rcpt__foot::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--stone);
}

.nexts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:0 auto}
.nx{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.nx__n{font-family:var(--mono);font-size:.72rem;font-weight:var(--w-mid);color:var(--green-ink);letter-spacing:.1em;margin:0 0 12px}
.nx h2{font-size:1rem;margin-bottom:8px}
.nx p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.8}

.upsell{
  max-width:940px;margin:40px auto 0;background:var(--navy);border-radius:var(--r);
  padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
}
.upsell h2{color:#fff;font-size:1.22rem;margin-bottom:10px}
.upsell p{margin:0;color:#BBBFD6;font-size:.92rem;line-height:1.9;max-width:52ch}
.upsell__b{display:flex;gap:10px;flex-wrap:wrap}

/* design-review helper — delete this block before launch */
.devnote{
  max-width:940px;margin:40px auto 0;border:1px dashed #C9A227;background:#FFFBEF;
  border-radius:var(--r);padding:14px 18px;font-size:.82rem;color:#7A5E00;line-height:1.8;
}
.devnote b{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px}
.devnote a{color:#7A5E00;border-block-end:1px solid #D9C88A}

@media (max-width:1080px){
  .co__grid{grid-template-columns:1fr;gap:28px}
  .sum{position:static;top:auto}
  .nexts{grid-template-columns:1fr}
  .upsell{grid-template-columns:1fr;padding:28px 26px}
}
@media (max-width:700px){
  .co{padding:24px 0 60px}
  .pane{padding:20px 18px}
  .steps li span{display:none}
  .steps li:not(:last-child)::after{margin-inline:8px}
  .frm__row{grid-template-columns:1fr}
  .pane__nav{flex-direction:column-reverse}
  .pane__nav .btn{width:100%}
  .done{padding:32px 0 60px}
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  PART II — sections 25b–41                                       ║
   ║  Folded from additions.css at the cleanup commit (Aug 2026).     ║
   ║  additions.css is DELETED; every post-freeze rule now lives here ║
   ║  in the one stylesheet. Section labels kept as shipped so batch  ║
   ║  READMEs remain accurate references.                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 25b. CASCADE GUARD — the `hidden` attribute ──────────────────
   style.css has no global [hidden] rule. It handles two specific cases
   (.pane[hidden] and .fltBtn span[hidden]) and nothing else, which means the
   attribute silently does nothing on any element that carries its own display
   value — and every layout container has one.

   That is why the corporate fields were always visible: .frm__row is
   display:grid, and a UA default of display:none loses to it. Same for the
   console's campaign-details link (.destLink is inline-flex), which was
   showing before a campaign had been picked.

   This is the fix for the whole class of bug, not just the two reported. Any
   future element toggled with `hidden` now behaves. !important is deliberate:
   `hidden` means hidden, and no component rule should be able to outvote it.

   Fold this into style.css section 1 (resets) during the cleanup pass — it
   belongs with the base layer, not here. */
[hidden]{display:none !important}

/* ── 26. CONFIDENTIALITY NOTE ─────────────────────────────────────
   Sits at the point of data collection. Understated on purpose: a privacy
   promise styled like a warning reads as a warning. */
.priv{
  border:1px solid var(--line,#E3E1D8);
  background:var(--stone,#F7F6F1);
  border-radius:2px;
  padding:16px 18px;
  margin-top:6px;
}
.priv__t{
  display:flex;align-items:center;gap:8px;
  margin:0 0 10px;
  font-weight:600;
  font-size:.92rem;
  color:var(--navy,#292369);
}
.priv__t svg{width:16px;height:16px;fill:none;stroke:var(--green,#7DC148);stroke-width:2}
.priv__l{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.priv__l li{
  position:relative;
  padding-inline-start:16px;
  font-size:.86rem;
  line-height:1.65;
  color:var(--muted,#5A5A63);
}
.priv__l li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--green,#7DC148);
}

/* ── 27. CONSOLE — CAMPAIGN DETAILS LINK ──────────────────────────
   Quiet by design: an option for the cautious donor, never a second CTA
   competing with the donate button directly beneath it. */
.destLink{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:9px;
  font-size:.82rem;
  color:var(--navy,#292369);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.destLink:hover{color:var(--green,#7DC148);border-bottom-color:currentColor}
.destLink svg{flex:0 0 auto}

/* ── 28. CAMPAIGN VIDEO ───────────────────────────────────────────
   Facade only. The iframe is injected by pages.js on click — see block 4
   there for why the embed is not in the markup. */
.gal__main--video{position:relative}
.vid__play{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;line-height:0;
}
.vid__play img{width:100%;height:auto;display:block}
.vid__btn{
  position:absolute;inset:0;margin:auto;
  width:68px;height:68px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(41,35,105,.82);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease;
}
.vid__play:hover .vid__btn{transform:scale(1.06);background:var(--green,#7DC148)}
.vid__btn svg{width:28px;height:28px;fill:#fff;margin-inline-start:3px}
.vid__btn--sm{width:26px;height:26px;box-shadow:none}
.vid__btn--sm svg{width:12px;height:12px;margin-inline-start:1px}
.gal__t--video{position:relative}

@media (prefers-reduced-motion:reduce){
  .vid__play:hover .vid__btn{transform:none}
}

/* ── 29. GIVE-MODE HERO ───────────────────────────────────────────
   Split hero for /give/{mode}: content beside a framed photograph, the mode
   icon as a stamped chip. Reuses the about-section grammar — these are section
   pages inside a task, not landing pages, so no full-bleed. */
.ghero{
  background:var(--stone,#F7F6F1);
  border-bottom:1px solid var(--line,#E3E1D8);
  padding-block:34px 54px;
}
.ghero__grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:52px;
  align-items:center;
  margin-top:18px;
}
/* Watermark icon — replaces the boxed chip from the first pass, which read as
   a UI sticker on an editorial layout. Oversized, stroke-only, 7% opacity,
   sitting behind the heading like the homepage motif circles: identification
   as architecture, not ornament. */
.ghero{position:relative;overflow:hidden}
.ghero__mark{
  position:absolute;
  inset-inline-end:38%;
  top:-40px;
  width:340px;height:340px;
  pointer-events:none;
}
.ghero__mark svg{
  width:100%;height:100%;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;
  opacity:.07;
}
.ghero__cta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:26px;
}
.ghero__alt{
  font-size:.88rem;
  color:var(--muted,#5A5A63);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.ghero__alt:hover{color:var(--navy,#292369);border-bottom-color:currentColor}
.ghero__fig{position:relative;margin:0}
/* Hero proportions (external review, accepted): the raw 900×1050 made the
   hero excessively tall with dead space under the CTA. The frame is now a
   capped 4:5 window — object-fit keeps every existing and future image
   correct without re-cropping files. */
.ghero__fig img{
  width:100%;height:auto;display:block;
  aspect-ratio:4/5;
  max-height:560px;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--line,#E3E1D8);
}
/* green corner rule — the same accent .about__fig carries, so the two frames
   read as one family */
.ghero__fig::after{
  content:"";position:absolute;
  inset-inline-start:-10px;bottom:-10px;
  width:44%;height:44%;
  border-inline-start:2px solid var(--green,#7DC148);
  border-bottom:2px solid var(--green,#7DC148);
  pointer-events:none;
}
@media (max-width:900px){
  .ghero__grid{grid-template-columns:1fr;gap:26px}
  /* Mobile order flipped (external review, accepted): copy and CTA first,
     image after — a phone user must never scroll past a full-screen
     photograph to reach the page's action. Height capped accordingly. */
  .ghero__fig{max-width:520px}
  .ghero__fig img{max-height:300px;aspect-ratio:16/10}
  /* the watermark would collide with the stacked layout — identification is
     already carried by the photo and title at this width */
  .ghero__mark{display:none}
}

/* ── 30. ICON STEPS ───────────────────────────────────────────────
   .step--ic adds a large icon above the numbered specifics on the give pages.
   Same stroke vocabulary as .mode__ic; green on hover ties it to the cards. */
.step--ic{position:relative}
.step__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  background:var(--stone,#F7F6F1);
  margin-bottom:14px;
  transition:border-color .2s ease,background .2s ease;
}
.step__ic svg{
  width:34px;height:34px;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .2s ease;
}
.step--ic:hover .step__ic{border-color:var(--green,#7DC148);background:#fff}
.step--ic:hover .step__ic svg{stroke:var(--green,#7DC148)}

/* ── 31. NAV ACTIVE STATE ─────────────────────────────────────────
   style.css styled hover and open states but never the current section.
   Single links carry aria-current="page" (set server-side by fpa_link);
   dropdown parents carry data-active, because a button is not the page.
   The marker is an underline rule in green, clear at a glance without
   fighting the CTA button for weight. */
.nav>a,.nav__btn{position:relative}
.nav>a[aria-current="page"],
.nav__btn[data-active]{color:#fff}
.nav>a[aria-current="page"]::after,
.nav__btn[data-active]::after{
  content:"";position:absolute;
  inset-inline:12px;bottom:6px;
  height:2px;border-radius:1px;
  background:var(--green,#7DC148);
}
/* drawer: the same state for mobile */
.drawer__panel nav a[aria-current="page"]{color:var(--green,#7DC148)}

/* ── 32. IN-PAGE ANCHORS ──────────────────────────────────────────
   The give-hero CTA scrolls to the mode's functional block. Native smooth
   scroll with the sticky-header offset; no JS involved, and reduced-motion
   users get an instant jump. */
html{scroll-behavior:smooth}
#calculator,#pickup,#contact-csr,#dedicate,#how{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── 33. DOORS INDEX — أبواب التبرع on the homepage ────────────────
   A فهرس, not a grid: numbered ledger rows that scale to any count without
   orphans. Mono numerals from the serial vocabulary; row grammar from the
   budget ledger. */
.doors{
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line,#E3E1D8);
}
.doors li{border-bottom:1px solid var(--line,#E3E1D8)}
.door{
  display:grid;
  grid-template-columns:56px 44px minmax(0,1fr) 40px;
  gap:20px;align-items:center;
  padding:22px 10px;
  text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.door:hover{background:var(--white,#fff)}
.door__no{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:1.05rem;
  color:var(--muted,#5A5A63);
  transition:color .2s ease;
}
.door:hover .door__no{color:var(--green,#7DC148)}
.door__ic{
  width:38px;height:38px;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.door__bd{display:grid;gap:3px;min-width:0}
.door__t{
  font-weight:600;
  font-size:1.02rem;
  color:var(--navy,#292369);
}
.door__d{
  font-size:.88rem;
  color:var(--muted,#5A5A63);
  line-height:1.6;
}
.door__go{
  font-size:1.2rem;
  color:var(--muted,#5A5A63);
  transition:transform .2s ease,color .2s ease;
}
.door:hover .door__go{color:var(--green,#7DC148);transform:translateX(-5px)}
@media (max-width:700px){
  .door{grid-template-columns:40px 34px minmax(0,1fr);gap:12px;padding:18px 6px}
  .door__go{display:none}
  .door__ic{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .door:hover .door__go{transform:none}
}

/* ── 34. HOMEPAGE RHYTHM ──────────────────────────────────────────
   The page alternates white / stone between two ink anchors; three adjacent
   stone sections were what flattened the old layout. .sec--framed closes a
   stone band with hairlines so it reads as one object between white
   neighbours — used by the doors index. */
.sec--framed{
  background:var(--stone,#F7F6F1);
  border-block:1px solid var(--line,#E3E1D8);
}

/* The transparency strip inside the chain section — the four promised
   documents as a compact status row instead of a row of disabled cards. */
.docstrip{
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid var(--line,#E3E1D8);
}
.docstrip__t{
  margin:0 0 14px;
  font-size:.9rem;
  font-weight:600;
  color:var(--navy,#292369);
}
.docstrip__l{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px 26px;
}
.docstrip__l li{
  display:flex;align-items:center;gap:9px;
  font-size:.88rem;
  color:var(--muted,#5A5A63);
}
.docstrip__l svg{
  flex:0 0 auto;width:15px;height:15px;
  fill:none;stroke:var(--navy,#292369);stroke-width:1.7;
  opacity:.55;
}
.docstrip__l em{
  font-style:normal;
  font-size:.72rem;
  padding:2px 8px;
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  background:var(--stone,#F7F6F1);
  color:var(--muted,#5A5A63);
  white-space:nowrap;
}
.docstrip__l a{color:var(--navy,#292369)}

/* ── 35. DARK PHOTOGRAPHIC HERO (volunteer + transparency) ────────
   v2 — dramatic pass, and one real bug fix, shared by both pages that use
   this treatment:

   BUG: style.css sets heading colors at element level (h1 → navy), which
   beats inheritance — so the hero's bold payload line rendered navy-on-ink,
   nearly invisible (client screenshot). .vhero__h now declares #fff.

   DESIGN: the photo was a murky field — 34% opacity under a ~uniform 90%+
   scrim — and half the hero was dead space. Now the scrim is a true
   directional wedge: near-opaque behind the text (inline-start in RTL = the
   right), falling to 15% where the photograph lives, so the image actually
   reads as a photograph while type contrast stays AAA. Type scale up, a
   green slab anchors the heading, and the facts became horizontal chips that
   use the width instead of stacking into the empty column. */
.vhero{
  position:relative;overflow:hidden;
  background:var(--ink,#14103A);
  color:#fff;
  padding-block:46px 60px;
}
.vhero__bg{position:absolute;inset:0}
.vhero__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.vhero__scrim{
  position:absolute;inset:0;
  /* RTL: text sits inline-start (right); the wedge keeps it dark and lets the
     photo breathe on the other side. `to left` = darkest at the right edge. */
  background:linear-gradient(to left,
    rgba(20,16,58,.97) 0%,
    rgba(20,16,58,.88) 36%,
    rgba(20,16,58,.55) 64%,
    rgba(20,16,58,.15) 100%);
}
[dir="ltr"] .vhero__scrim{
  background:linear-gradient(to right,
    rgba(20,16,58,.97) 0%,
    rgba(20,16,58,.88) 36%,
    rgba(20,16,58,.55) 64%,
    rgba(20,16,58,.15) 100%);
}
.vhero__motif{
  position:absolute;
  inset-inline-start:-140px;bottom:-180px;
  width:520px;height:520px;
}
.vhero .wrap{position:relative;z-index:1}
.crumb--onDark a{color:rgba(255,255,255,.65)}
.crumb--onDark b{color:#fff}
.crumb--onDark i{color:rgba(255,255,255,.3)}
.vhero__grid{max-width:680px;margin-top:22px}
.vhero__h{
  font-family:var(--display,inherit);
  font-weight:700;
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.24;
  margin:10px 0 0;
  color:#fff; /* the bug fix — see block comment */
}
.vhero__h .lt{display:block;font-weight:300;color:rgba(255,255,255,.78)}
/* the green slab: a hard architectural anchor under the display type */
.vhero__h::after{
  content:"";display:block;
  width:76px;height:4px;
  background:var(--green,#7DC148);
  margin-top:20px;
}
.vhero__lede{
  font-size:1.04rem;line-height:1.95;
  color:rgba(255,255,255,.88);
  margin:20px 0 22px;
}
/* facts: horizontal chips that use the width, not a stacked list */
.vhero__facts{
  margin:0 0 28px;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
}
.vhero__facts li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:2px;
  font-size:.85rem;color:rgba(255,255,255,.88);
  background:rgba(20,16,58,.35);
  backdrop-filter:blur(2px);
}
.vhero__facts li::before{
  content:"";flex:0 0 auto;
  width:9px;height:9px;
  border:2px solid var(--green,#7DC148);
  border-radius:50%;
}
.ghero__alt--onDark{color:rgba(255,255,255,.7)}
.ghero__alt--onDark:hover{color:var(--green,#7DC148)}

/* Field cards: light cards with a green top rule that fills on hover — the
   card is also a picker (its checkbox mirrors into the form), so the hover
   state has to promise interactivity. */
.vfields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.vfield{
  position:relative;
  background:var(--stone,#F7F6F1);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  padding:24px 22px 18px;
  display:flex;flex-direction:column;
}
.vfield::before{
  content:"";position:absolute;top:-1px;inset-inline:-1px;
  height:3px;background:var(--green,#7DC148);
  transform:scaleX(.22);transform-origin:right;
  transition:transform .25s ease;
}
.vfield:hover::before{transform:scaleX(1)}
.vfield__ic{
  width:40px;height:40px;margin-bottom:14px;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.vfield h3{margin:0 0 8px;font-size:1.02rem;color:var(--navy,#292369)}
.vfield p{margin:0 0 16px;font-size:.88rem;line-height:1.75;color:var(--muted,#5A5A63);flex:1}
.vfield__pick{
  display:flex;align-items:center;gap:9px;
  padding-top:13px;
  border-top:1px solid var(--line,#E3E1D8);
  font-size:.85rem;font-weight:600;
  color:var(--navy,#292369);
  cursor:pointer;
}
.vfield__pick input{accent-color:var(--green,#7DC148);width:16px;height:16px}
.vfield__pick:hover{color:var(--green,#7DC148)}

/* form checkbox groups */
.vchecks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px 18px;
}
@media (max-width:700px){
  .vhero{padding-block:36px 46px}
  .vhero__motif{display:none}
  /* the wedge has no safe side at phone widths — flatten it */
  .vhero__scrim,[dir="ltr"] .vhero__scrim{background:rgba(20,16,58,.86)}
  .vhero__h{font-size:clamp(1.8rem,7.5vw,2.3rem)}
}
@media (prefers-reduced-motion:reduce){
  .vfield::before{transition:none}
}

/* ── 35b. FORM-CONTROL CASCADE REPAIRS ────────────────────────────
   Two collisions found on the volunteer form, both latent site-wide:

   1) style.css line 1240 `.f input` (full-width stone text field) defeats
      line 1079 `.chk input` (16px checkbox) — equal specificity, later rule
      wins. The filter panel never hit this because its .chk sits outside any
      .f wrapper. Any checkbox/radio inside .f — volunteer fields, and any
      future form — rendered as a giant text box. Scoped by input type, so it
      repairs every current and future occurrence at once.

   2) style.css line 1366 `.sum__l>span:last-child` forces the mono font —
      right for amounts in the checkout summary, wrong for Arabic sentence
      values. `.sum--plain` opts a card's values back into the UI font; the
      checkout keeps mono for its numbers. */
.f input[type="checkbox"],
.f input[type="radio"]{
  width:16px;height:16px;
  min-height:0;
  flex:0 0 auto;
  padding:0;
  appearance:auto;
  accent-color:var(--green,#7DC148);
  background:none;border:none;
  cursor:pointer;
}
.f .chk{padding:8px 0}
.f .chk input:checked{background:none;border:none}
.f .chk input:checked::after{content:none}

.sum--plain .sum__l>span:last-child{
  font-family:inherit;
  letter-spacing:0;
}
.sum--plain .sum__l>span:last-child .num{font-family:var(--mono,monospace)}

/* ── 36. TRANSPARENCY CARDS ───────────────────────────────────────
   Second iteration. The v1 ledger rows were structurally right and
   content-starved: a title plus one cadence line cannot carry full width, so
   the page read as empty (client screenshot confirmed). v2 is a two-up card
   grid, and the substance is the new `desc` per document — what is INSIDE
   each one — which is content, not padding. Mono index numbers and the green
   top rule keep it in the doors/vfield family. */
.tdocs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:18px;
}
.tdoc{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--stone,#F7F6F1);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  padding:22px 24px 18px;
}
.tdoc::before{
  content:"";position:absolute;top:-1px;inset-inline:-1px;height:3px;
  background:var(--green,#7DC148);
  transform:scaleX(.22);transform-origin:right;
  transition:transform .25s ease;
}
.tdoc:hover::before{transform:scaleX(1)}
.tdoc__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.tdoc__chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
}
.tdoc__chip svg{
  width:24px;height:24px;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.tdoc__no{
  font-family:var(--mono,monospace);
  font-size:1rem;color:var(--muted,#5A5A63);
}
.tdoc:hover .tdoc__no{color:var(--green,#7DC148)}
.tdoc h2{margin:0 0 8px;font-size:1.08rem;color:var(--navy,#292369)}
.tdoc__desc{
  margin:0 0 14px;flex:1;
  font-size:.89rem;line-height:1.8;
  color:var(--muted,#5A5A63);
}
.tdoc__cad{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;
  font-size:.82rem;color:var(--navy,#292369);
}
.tdoc__cad svg{
  flex:0 0 auto;width:15px;height:15px;
  fill:none;stroke:var(--green-ink,#4E8A22);stroke-width:1.8;
}
.tdoc__foot{border-top:1px solid var(--line,#E3E1D8);padding-top:13px}
.tdoc__files{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.tdoc__files li{display:flex;align-items:baseline;gap:9px;font-size:.9rem}
.tdoc__files a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--navy,#292369);font-weight:600;
}
.tdoc__files a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.tdoc__files a:hover{color:var(--green-ink,#4E8A22)}
.tdoc__files span{font-family:var(--mono,monospace);font-size:.7rem;color:var(--muted,#5A5A63)}
.tdoc__pend{margin:0;font-size:.85rem;color:var(--muted,#5A5A63)}
.tdoc__pend em{
  font-style:normal;font-size:.72rem;
  padding:2px 8px;margin-inline-end:8px;
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;background:var(--white,#fff);
}
.tdoc--pending .tdoc__chip svg{opacity:.5}
@media (prefers-reduced-motion:reduce){.tdoc::before{transition:none}}

/* ── 37. CONTACT PAGE (B110 route-first rebuild) ───────────────────
   A welcoming journey, not a support directory: navy branded hero with a
   direct-contact panel, pale-sage topic cards, a distinct safeguarding
   banner, and two balanced location cards. No operational promises. */

/* 1 · hero */
.chero{
  position:relative;overflow:hidden;color:#fff;
  background-color:#191446;
  background-image:
    radial-gradient(900px 460px at 88% -20%, rgba(125,193,72,.12), transparent 60%),
    linear-gradient(168deg,#2E2775 0%,#221C57 60%,#191446 100%);
  padding:20px 0 58px;
}
.chero__net{position:absolute;inset-block:0;inset-inline-start:0;width:min(70%,900px);height:100%;opacity:.7;pointer-events:none}
.chero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:34px 48px;align-items:center;
}
.chero .crumb{margin-bottom:26px}
.chero .crumb a{color:rgba(255,255,255,.72)}
.chero .crumb b{color:#fff}
.chero .crumb i{color:rgba(255,255,255,.5)}
.chero__bd{min-width:0}
.chero__k{margin:0 0 12px;font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.06em;color:var(--green,#7DC148)}
.chero__h{margin:0;font-size:clamp(2rem,3.8vw,3rem);font-weight:var(--w-bold,800);line-height:1.22;letter-spacing:-.015em;color:#fff}
.chero__lede{margin:16px 0 0;max-width:52ch;font-size:1.0625rem;line-height:1.9;color:rgba(255,255,255,.86)}

/* direct-contact panel */
.cdirect{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:12px;
  display:grid;gap:10px;
}
.cdirect__row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:8px;
  background:rgba(255,255,255,.04);
  text-decoration:none;color:#fff;min-height:44px;
  transition:background .2s ease;
}
.cdirect__row:hover,.cdirect__row:focus-visible{background:rgba(125,193,72,.16)}
.cdirect__row svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--green,#7DC148);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cdirect__c{display:flex;flex-direction:column;min-width:0}
.cdirect__lbl{font-size:.85rem;color:rgba(255,255,255,.72)}
.cdirect__val{font-family:var(--mono,monospace);font-size:1.14rem;font-weight:700;color:#fff}
.cdirect__hours{margin:4px 6px 2px;font-size:.9rem;color:rgba(255,255,255,.72)}
.cdirect__hours b{color:#fff}

/* 2 · topic cards */
.ctopics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;
}
.ctile{
  position:relative;display:flex;flex-direction:column;
  background:var(--white,#FFF);border:1px solid var(--line,#D9DFD0);
  border-radius:10px;padding:24px 24px 22px;
  transition:transform .22s var(--e),box-shadow .22s var(--e),border-color .22s;
}
.ctile:hover{transform:translateY(-4px);box-shadow:0 22px 48px -26px rgba(6,4,26,.4);border-color:#C7CFBB}
.ctile:focus-within{border-color:var(--green,#7DC148);box-shadow:0 0 0 3px rgba(125,193,72,.25)}
.ctile__ic{
  display:inline-flex;width:46px;height:46px;margin-bottom:16px;
  align-items:center;justify-content:center;border-radius:10px;
  background:rgba(41,35,105,.06);
}
.ctile__ic svg{width:26px;height:26px;fill:none;stroke:var(--navy,#292369);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctile__t{margin:0 0 8px;font-size:1.1rem;font-weight:var(--w-bold,800);line-height:1.45}
.ctile__t a{color:var(--navy,#292369);text-decoration:none}
.ctile__link::after{content:'';position:absolute;inset:0;z-index:1}
.ctile__d{margin:0;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.ctile__go{margin-top:auto;padding-top:16px;font-family:var(--mono,monospace);font-size:.85rem;font-weight:600;color:#467C20}
.ctile:hover .ctile__go{color:var(--navy,#292369)}

/* 3 · safeguarding banner — deliberately distinct from ordinary enquiries */
.cguard{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px 36px;
  padding:28px 32px;border-radius:12px;
  background:linear-gradient(150deg,#FBF3E7,#FCF7EE);
  border:1px solid #EBD9BC;border-inline-start:4px solid #C98A2B;
}
.cguard__bd{display:flex;gap:18px;align-items:flex-start;min-width:0}
.cguard__ic{flex:0 0 auto;display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:10px;background:rgba(201,138,43,.14)}
.cguard__ic svg{width:28px;height:28px;fill:none;stroke:#9A6516;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cguard__k{margin:0 0 4px;font-family:var(--mono,monospace);font-size:.8125rem;letter-spacing:.05em;color:#8A5A12}
.cguard__h{margin:0 0 8px;font-size:1.3rem;font-weight:var(--w-bold,800);line-height:1.4;color:var(--navy,#292369)}
.cguard__x{margin:0;font-size:1rem;line-height:1.8;color:var(--body,#3C4152)}
.cguard__a{flex:0 0 auto}
.cguard__a .btn{min-height:44px}

/* 4 · locations */
.cloc{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
.cloc__card{
  background:var(--white,#FFF);border:1px solid var(--line,#D9DFD0);
  border-radius:10px;padding:24px 26px;border-top:3px solid var(--navy,#292369);
}
.cloc__k{margin:0 0 10px;font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;color:var(--navy,#292369)}
.cloc__addr{font-style:normal;font-size:1.02rem;line-height:1.8;color:var(--body,#3C4152)}
.cloc__a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.cloc__map{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;color:var(--navy,#292369);text-underline-offset:3px;
}
.cloc__map:hover{color:#467C20}
.cloc__copy{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;
  background:transparent;border:1px solid var(--line,#D9DFD0);border-radius:999px;
  font-family:inherit;font-size:.9rem;color:var(--body,#3C4152);cursor:pointer;
}
.cloc__copy:hover{border-color:var(--navy,#292369)}
.cloc__note{margin:18px 0 0;font-size:.95rem;line-height:1.7;color:var(--muted,#5A6076)}

@media (max-width:1080px){
  .chero__grid{grid-template-columns:1fr}
  .ctopics{grid-template-columns:repeat(2,1fr)}
  .cguard{grid-template-columns:1fr}
  .cloc{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ctopics{grid-template-columns:1fr}
}

/* ── 38. BOARD ROSTER ─────────────────────────────────────────────
   Built for real members (Batch 22 dropped five names into cards designed
   for an empty state). Monogram avatar until FPA supplies headshots — an
   initial says "pending"; a grey silhouette would say "broken". */
.board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:16px;
}
.bmember{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  padding:20px;
}
.bmember__photo{
  flex:0 0 auto;width:64px;height:64px;
  border-radius:50%;object-fit:cover;
  border:1px solid var(--line,#E3E1D8);
}
.bmember__mono{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--stone,#F7F6F1);
  border:1px solid var(--line,#E3E1D8);
  font-family:var(--display,inherit);
  font-size:1.5rem;font-weight:700;
  color:var(--navy,#292369);
}
.bmember__bd{min-width:0}
.bmember__role{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  color:var(--green-ink,#4E8A22);
  margin-bottom:4px;
}
.bmember__bd h3{margin:0 0 4px;font-size:1rem;color:var(--navy,#292369)}
.bmember__bd p{margin:0;font-size:.84rem;line-height:1.65;color:var(--muted,#5A5A63)}

/* ── 39. MISSION PULL-QUOTE ───────────────────────────────────────
   FPA's charter text at display weight on the strategy page: their words,
   given the size their words deserve, anchored by the green slab. */
.mission{margin:0;max-width:900px}
.mission__t{
  font-family:var(--display,inherit);
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:500;
  line-height:2.05;
  color:var(--navy,#292369);
  margin:14px 0 0;
}
.mission__t::after{
  content:"";display:block;
  width:76px;height:4px;
  background:var(--green,#7DC148);
  margin-top:24px;
}
.mission__src{
  margin-top:16px;
  font-size:.85rem;
  color:var(--muted,#5A5A63);
}

/* ── 40. ACCESSIBILITY + POLISH PASS (external review, accepted set) ──
   Four cheap, sitewide wins. */

/* Global anchored-section offset: the sticky header must never cover the
   start of a section reached via a fragment. Supersedes the per-id list in
   section 32 (kept for specificity harmony; this is the general rule). */
[id]{scroll-margin-top:96px}

/* Visible keyboard focus, everywhere. style.css styles hover thoroughly and
   focus not at all — a keyboard user had no idea where they were. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green,#7DC148);
  outline-offset:2px;
  border-radius:2px;
}

/* Headings wrap in balanced lines; no orphaned final word on display type.
   Progressive enhancement — browsers without support are unchanged. */
h1,h2,h3,.hh,.phero__h,.vhero__h{text-wrap:balance}

/* Dark-section body contrast: .area p on the ink band measured below AA. */
.area p{color:rgba(255,255,255,.78)}

/* Touch targets: the contact card's social buttons to 44px minimum. */
.ccard__social a{width:44px;height:44px}

/* Chain steps on mobile: a subtle connecting rule so the sequence reads as
   one journey rather than three stacked cards. */
@media (max-width:700px){
  .chain{position:relative}
  .chain .step{position:relative;padding-inline-start:22px}
  .chain .step::before{
    content:"";position:absolute;
    inset-inline-start:6px;top:8px;bottom:-18px;
    width:2px;background:var(--line,#E3E1D8);
  }
  .chain .step:last-child::before{bottom:auto;height:14px}
}

/* ── 41. CONSOLE IMPACT HIERARCHY (round-3 review, accepted) ──────
   The impact equivalence is the primary feedback; the progress preview is
   secondary. Weight and colour now say so. */
.impact__eq{font-size:.95rem;font-weight:600}
.impact__eq b{font-size:1.12rem}
.prev__row{font-size:.78rem;color:var(--muted,#5A5A63)}

/* ── 42. TYPE REFINEMENT ───────────────────────────────────────────
   G18 update: the family system is now Alexandria (headings) / IBM Plex Sans
   Arabic (body) / IBM Plex Mono (numerals & serials); families are set once in
   §1 tokens. Body floor raised to 17px and body weight to 400 (was 16px/300 —
   300 is too thin for Arabic reading). Full per-level clamp() rescale and font
   self-hosting remain deferred to a browser-verified pass. */
body{font-size:max(1.0625rem,17px)}
.phero__lede,.hero__lede,.vhero__lede{line-height:1.95}
p{line-height:1.85}
.f__hint,.door__d,.tdoc__desc{line-height:1.7}
h2{text-wrap:balance}

/* ── 43. WORK INDEX v2 (external review, accepted set) ─────────────
   The 4-column hairline .modes grid left two empty cells with six areas and
   read as a spreadsheet (review catch, verified at repeat(4,1fr) gap:1px).
   Replaced by: wide split hero, 3×2 photographic cards, asymmetric process
   split, navy conversion band with the logo's circle geometry. */

/* hero: landscape variant of the give-page split */
.ghero--wide .ghero__grid{grid-template-columns:54fr 46fr;align-items:center}
.ghero__fig--wide img{
  aspect-ratio:3/2;max-height:460px;
  width:100%;height:auto; /* same latent bug as .wproc__fig — see comment there */
  object-fit:cover;display:block;
  border-radius:2px;border:1px solid var(--line,#E3E1D8);
}
@media (max-width:900px){
  .ghero__fig--wide img{aspect-ratio:4/3;max-height:280px}
}

/* the six field cards */
.fcards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:1000px){.fcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fcards{grid-template-columns:1fr}}
.fcard{
  display:flex;flex-direction:column;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease;
}
.fcard:hover{border-color:var(--green,#7DC148);transform:translateY(-2px)}
.fcard:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fcard{transition:none}.fcard:hover{transform:none}}
.fcard__media{display:block;aspect-ratio:16/10;background:var(--stone,#F7F6F1)}
.fcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.fcard__bd{display:flex;flex-direction:column;flex:1;padding:18px 20px 16px}
.fcard__ic{
  width:30px;height:30px;margin-bottom:10px;
  fill:none;stroke:var(--navy,#292369);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.fcard__bd h2{margin:0 0 7px;font-size:1.08rem;color:var(--navy,#292369)}
.fcard__bd>p{margin:0 0 13px;flex:1;font-size:.88rem;line-height:1.75;color:var(--muted,#5A5A63)}
.fcard__state{
  display:flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--green-ink,#4E8A22);
  padding-top:12px;border-top:1px solid var(--line,#E3E1D8);
}
.fcard__state i{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--green,#7DC148);
}
.fcard__state--none{color:var(--muted,#5A5A63)}
.fcard__go{
  margin-top:9px;font-size:.85rem;font-weight:600;color:var(--navy,#292369);
}
.fcard:hover .fcard__go{color:var(--green-ink,#4E8A22)}

/* process split — 60/40, content first on mobile */
.wproc{display:grid;grid-template-columns:60fr 40fr;gap:40px;align-items:start}
.wproc__bd h2{margin:10px 0 12px}
.wproc__lede{margin:0 0 24px;color:var(--muted,#5A5A63);line-height:1.85}
.wproc__steps{display:grid;gap:0;margin-bottom:26px}
.wproc__steps .step{padding:16px 0;border-top:1px solid var(--line,#E3E1D8)}
.wproc__fig{margin:0;position:sticky;top:110px}
.wproc__fig img{
  /* height:auto is LOAD-BEARING: without it the HTML height attribute
     survives as a presentational hint and aspect-ratio never applies — the
     2000×1500 placeholder rendered as a 780×1500 portrait monolith
     overflowing the section (client screenshots, volunteer page). */
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:2px;border:1px solid var(--line,#E3E1D8);
}
@media (max-width:900px){
  .wproc{grid-template-columns:1fr;gap:26px}
  .wproc__fig{position:static;order:2}
  .wproc__fig img{max-height:300px}
}

/* the navy conversion conclusion */
.wcta{position:relative;overflow:hidden;background:var(--ink,#14103A);color:#fff}
.wcta__pat{position:absolute;inset:0;width:100%;height:100%}
.wcta__bd{position:relative;max-width:640px;padding-block:14px}
.wcta__bd h2{color:#fff;margin:0 0 10px}
.wcta__bd h2 .lt{font-weight:300;color:rgba(255,255,255,.78)}
.wcta__bd>p{margin:0 0 22px;color:rgba(255,255,255,.85);font-size:1.02rem}

/* ── 44. VOLUNTEER v2 (round-5 review, accepted set) ───────────────
   Slim hero (facts moved to the trust strip), 3×2 selectable field cards
   sharing one state with the form, and the matching-journey framing. */

.vhero--slim{padding-block:34px 44px}
.vhero--slim .vhero__grid{margin-top:14px}

/* trust strip — the reassurance that used to crowd the hero */
.tstrip{background:var(--stone,#F7F6F1);border-bottom:1px solid var(--line,#E3E1D8)}
.tstrip__l{
  margin:0;padding:18px 0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.tstrip__l li{display:flex;gap:12px;align-items:flex-start}
.tstrip__l svg{
  flex:0 0 auto;width:22px;height:22px;margin-top:2px;
  fill:none;stroke:var(--green-ink,#4E8A22);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.tstrip__l b{display:block;font-size:.88rem;color:var(--navy,#292369);margin-bottom:2px}
.tstrip__l span{font-size:.8rem;line-height:1.6;color:var(--muted,#5A5A63)}
@media (max-width:800px){.tstrip__l{grid-template-columns:1fr;gap:14px}}

/* the fields grid: fixed 3×2 — auto-fit was yielding 4+2 at desktop widths
   (round-5 review, verified at minmax(280px)) */
.vfields--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.vfields--three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.vfields--three{grid-template-columns:1fr}}

/* selectable card = one label + one hidden input; no nested interactives */
.vfield--pickable{position:relative;cursor:pointer;display:flex;flex-direction:column}
.vfield__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vfield__check{
  position:absolute;top:16px;inset-inline-end:16px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--line,#E3E1D8);
  background:var(--white,#fff);
  transition:border-color .15s ease,background .15s ease;
}
.vfield__check svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;opacity:0}
.vfield--on{border-color:var(--green,#7DC148);background:#F4FAEE}
.vfield--on .vfield__check{border-color:var(--green,#7DC148);background:var(--green,#7DC148)}
.vfield--on .vfield__check svg{opacity:1}
.vfield--pickable:focus-within{outline:2px solid var(--green,#7DC148);outline-offset:2px}
.vfield__pickState{
  margin-top:10px;padding-top:11px;
  border-top:1px solid var(--line,#E3E1D8);
  font-size:.82rem;font-weight:600;color:var(--muted,#5A5A63);
}
.vfield--on .vfield__pickState{color:var(--green-ink,#4E8A22)}
.vfield--on .vfield__pickState::after{content:" ✓"}
@media (prefers-reduced-motion:reduce){.vfield__check{transition:none}}

/* metadata chips + requirement line inside the card */
.vmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vmeta em{
  font-style:normal;font-size:.72rem;font-weight:600;
  padding:3px 9px;border-radius:2px;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  color:var(--navy,#292369);
}
.vfield__req{
  display:block;margin-top:9px;
  font-size:.76rem;line-height:1.6;color:var(--muted,#5A5A63);
}

/* ── 45. VOLUNTEER JOURNEY THREAD (cohesion pass, client round) ────
   The page's sections read as stacked landing blocks; three devices stitch
   them into one journey: numbered section eyebrows (الخطوة 01/02 + بعد
   الإرسال, the same mono-numbering language the steps already speak), the
   selection ECHO — your card picks rendered as removable chips at the top of
   the form, making the invisible card→form sync visible — and the card's
   check indicator moved into the state row so selection reads as one line,
   not a floating circle. */

.jno{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono,monospace);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--green-ink,#4E8A22);
}
.jno::after{content:"";width:34px;height:2px;background:var(--green,#7DC148)}

/* the selection echo above the form */
.selecho{margin:0 0 18px}
.selecho__t{margin:0 0 8px;font-size:.85rem;font-weight:600;color:var(--navy,#292369)}
.selecho__l{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.selecho__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  background:#F4FAEE;
  border:1px solid var(--green,#7DC148);
  border-radius:2px;
  font-size:.82rem;font-weight:600;color:var(--green-ink,#4E8A22);
  cursor:pointer;
}
.selecho__chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4}
.selecho__chip:hover{background:#E9F5DE}
.selecho__chip:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:2px}
.selecho__none{margin:0;font-size:.84rem;color:var(--muted,#5A5A63)}

/* card check indicator: superseded — the check now lives INSIDE the state
   row in the markup (Batch 31); the order:2 flex-column hack below placed it
   under the label instead of beside it (client screenshot). */
.vfield__pickState{display:flex;align-items:center;gap:8px}
.vfield__pickState .vfield__check{
  position:static;margin-inline-start:auto;
  width:22px;height:22px;flex:0 0 auto;
}
.vfield--on .vfield__pickState::after{content:""}
/* consistent card bottoms: description stays natural, state row anchors */
.vfield--pickable p{flex:0 0 auto}
.vfield--pickable .vfield__pickState{margin-top:auto;padding-top:12px}
.vfield--pickable .vfield__req{margin-bottom:2px}

/* ── 46. VOLUNTEER SEAMS + NAV STATES (client round) ───────────────

   A. The ribbon: SUPERSEDED in Batch 32 — the assurances moved inside the
      hero as the .vband (section 47); the white overlapping card collided
      with the CTA above it. Rules kept inert for reference. */
.vribbonWrap{background:var(--white,#fff)}
.vribbon{
  position:relative;z-index:2;
  margin-top:-46px;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-top:3px solid var(--green,#7DC148);
  border-radius:2px;
  padding:22px 26px 18px;
}
.vribbon .tstrip__l{padding:0;border:0}
@media (max-width:800px){.vribbon{margin-top:-30px;padding:18px}}

/* B. section seams — the dead white gulfs between hero→fields and
      cards→form */
.sec--tightTop{padding-top:30px}
.sec--tightBottom{padding-bottom:36px}
.jno{margin-bottom:6px}

/* C. the sidebar, redesigned: statements, not ragged label/value pairs */
.vfacts{
  position:sticky;top:96px;
  background:var(--stone,#F7F6F1);
  border:1px solid var(--line,#E3E1D8);
  border-top:3px solid var(--green,#7DC148);
  border-radius:2px;
  padding:20px 22px 18px;
}
.vfacts__t{
  margin:0 0 14px;
  font-size:.95rem;font-weight:700;color:var(--navy,#292369);
}
.vfacts__l{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:11px}
.vfacts__l li{
  position:relative;
  padding-inline-start:22px;
  font-size:.85rem;line-height:1.7;color:var(--muted,#5A5A63);
}
.vfacts__l li::before{
  content:"";position:absolute;
  inset-inline-start:2px;top:9px;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--green,#7DC148);
}
.vfacts__note{
  margin:0;padding-top:14px;
  border-top:1px dashed var(--line,#E3E1D8);
  font-size:.8rem;line-height:1.65;color:var(--navy,#292369);
}
@media (max-width:1024px){.vfacts{position:static}}

/* D. the after-submit timeline on ink */
.vtl{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  position:relative;counter-reset:none;
}
.vtl::before{
  content:"";position:absolute;
  top:19px;inset-inline:24px;height:2px;
  background:rgba(255,255,255,.14);
}
.vtl li{position:relative}
.vtl__n{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--ink,#14103A);
  border:2px solid var(--green,#7DC148);
  font-family:var(--mono,monospace);
  font-size:.8rem;font-weight:600;color:var(--green,#7DC148);
  margin-bottom:14px;
}
.vtl h3{margin:0 0 7px;font-size:1rem;color:#fff}
.vtl p{margin:0;font-size:.85rem;line-height:1.75;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .vtl{grid-template-columns:1fr;gap:22px}
  .vtl::before{top:24px;bottom:24px;inset-inline:18px auto;width:2px;height:auto}
}

/* E. NAV STATES — the missing half of the navigation.
   fpa_link() has emitted aria-current="page" since Batch 1; nothing ever
   styled it. Active = the identity's green slab under the item; hover = a
   quiet partial slab (replacing the color-only hover); dropdown items lose
   the padding-jump hover (items must not move) and gain a proper current
   state. */
.nav>a,.nav__btn{position:relative}
.nav>a::after,.nav__btn::after{
  content:"";position:absolute;
  inset-inline:12px;bottom:6px;height:3px;
  background:var(--green,#7DC148);
  transform:scaleX(0);transform-origin:center;
  transition:transform .18s ease;
}
.nav>a:hover::after,.nav__btn:hover::after{transform:scaleX(.45)}
.nav>a[aria-current="page"]{color:#fff}
.nav>a[aria-current="page"]::after{transform:scaleX(1)}
/* dropdown parent lights when a child is the current page */
.nav__has:has(a[aria-current="page"]) .nav__btn{color:#fff}
.nav__has:has(a[aria-current="page"]) .nav__btn::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav>a::after,.nav__btn::after{transition:none}}

/* dropdown items: no movement on hover — tint only */
.nav__menu a{border-inline-start:3px solid transparent}
.nav__menu a:hover{
  background:var(--green-pale,#EDF6E3);
  color:var(--green-ink,#4E8A22);
  border-inline-start-color:var(--green,#7DC148); /* R15: hover shows the accent rail */
  padding-inline-start:13px; /* kills the 13→18px hover jump */
}
.nav__menu a[aria-current="page"]{
  background:var(--green-pale,#EDF6E3);
  border-inline-start-color:var(--green,#7DC148);
  color:var(--green-ink,#4E8A22);
  font-weight:600;
}

/* ── 47. VOLUNTEER ROUND 3 (client screenshots) ────────────────────

   A. The assurance band: ink-native cells closing the hero. The outlined
      green circles echo the .vtl timeline nodes — the same device opens and
      closes the page's journey. */
.vband{
  margin:38px 0 0;padding:22px 0 0;list-style:none;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  position:relative;z-index:1;
}
.vband li{display:flex;gap:13px;align-items:flex-start}
.vband__ic{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--green,#7DC148);
}
.vband__ic svg{
  width:17px;height:17px;
  fill:none;stroke:var(--green,#7DC148);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.vband b{display:block;font-size:.9rem;color:#fff;margin-bottom:3px}
.vband div>span{font-size:.8rem;line-height:1.65;color:rgba(255,255,255,.68)}
@media (max-width:800px){.vband{grid-template-columns:1fr;gap:16px}}

/* B. the timeline on stone: same nodes, light field */
.sec--framed .vtl::before{background:var(--line,#E3E1D8)}
.sec--framed .vtl__n{background:var(--white,#fff);color:var(--green-ink,#4E8A22)}
.sec--framed .vtl h3{color:var(--navy,#292369)}
.sec--framed .vtl p{color:var(--muted,#5A5A63)}

/* C. custom form controls — pill multi-selects + a segmented radio.
      Same construction rule as the field cards: one label, one hidden
      input, no nested interactives; state carried by :checked. */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pill span{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  font-size:.86rem;font-weight:500;color:var(--navy,#292369);
  transition:border-color .15s ease,background .15s ease;
}
.pill span::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--line,#E3E1D8);
  transition:border-color .15s ease,background .15s ease;
}
.pill input:checked+span{
  background:#F4FAEE;
  border-color:var(--green,#7DC148);
  color:var(--green-ink,#4E8A22);
}
.pill input:checked+span::before{
  border-color:var(--green,#7DC148);
  background:var(--green,#7DC148);
}
.pill input:focus-visible+span{outline:2px solid var(--green,#7DC148);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pill span,.pill span::before{transition:none}}

/* .mseg, NOT .seg: the console's amount segments have owned .seg since the
   static phase (style.css:297, aria-pressed buttons) — these later rules
   would have restyled the donation console sitewide. The collision check
   caught it pre-ship; the newcomer renames, the incumbent keeps the name
   (the Batch 20 rule). */
.mseg{
  display:inline-flex;
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;overflow:hidden;
  background:var(--white,#fff);
}
.mseg__opt{position:relative;cursor:pointer}
.mseg__opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mseg__opt span{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  font-size:.86rem;font-weight:500;color:var(--navy,#292369);
  border-inline-start:1px solid var(--line,#E3E1D8);
}
.mseg__opt:first-child span{border-inline-start:0}
.mseg__opt input:checked+span{
  background:var(--navy,#292369);
  color:#fff;font-weight:600;
}
.mseg__opt input:focus-visible+span{outline:2px solid var(--green,#7DC148);outline-offset:-2px}
@media (max-width:480px){
  .mseg{display:flex;flex-direction:column}
  .mseg__opt span{width:100%;border-inline-start:0;border-top:1px solid var(--line,#E3E1D8)}
  .mseg__opt:first-child span{border-top:0}
}

/* D. the notes counter */
.f__hint--split{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.f__count{
  flex:0 0 auto;
  font-family:var(--mono,monospace);
  font-size:.72rem;color:var(--muted,#5A5A63);
}

/* ── 48. من نحن REBUILD (external review round) ────────────────────
   Institutional-story layout: split hero (reuses .ghero--wide + the B30
   height:auto fix), trust strip, mission with a navy facts panel replacing
   the old portrait placeholder, four principles, water feature (.wproc),
   verified stats, governance cards, fields teaser, navy conclusion. */

/* institutional trust strip */
.itrust{background:var(--stone,#F7F6F1);border-block:1px solid var(--line,#E3E1D8)}
.itrust__l{
  margin:0;padding:20px 0;
  display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:34px;align-items:center;
}
.itrust__l dt{font-size:.76rem;font-weight:500;color:var(--muted,#5A5A63);margin-bottom:3px}
.itrust__l dd{margin:0;font-size:1.05rem;font-weight:600;color:var(--navy,#292369);font-family:var(--mono,monospace)}
.itrust__l dd:not([class]){font-family:inherit}
.itrust__cta{justify-self:end}
.itrust__cta a{font-size:.86rem;font-weight:600;color:var(--navy,#292369)}
.itrust__cta a:hover{color:var(--green-ink,#4E8A22)}
@media (max-width:820px){
  .itrust__l{grid-template-columns:1fr 1fr;gap:18px}
  .itrust__cta{grid-column:1/-1;justify-self:start}
}

/* mission navy panel (replaces the about-team.jpg placeholder) */
.ipanel{
  background:var(--ink,#14103A);color:#fff;
  border-radius:2px;padding:26px 26px 22px;
  align-self:start;
}
.ipanel__k{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--green,#7DC148)}
.ipanel__v{margin:0 0 18px;font-size:.95rem;line-height:1.85;color:rgba(255,255,255,.9)}
.ipanel__links{margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);list-style:none;display:grid;gap:11px}
.ipanel__links a{color:#fff;font-weight:600;font-size:.9rem}
.ipanel__links a:hover{color:var(--green,#7DC148)}

/* four principles */
.principles{
  margin:44px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border-top:1px solid var(--line,#E3E1D8);padding-top:34px;
}
.principles__n{
  display:inline-flex;font-family:var(--mono,monospace);font-size:1rem;font-weight:600;
  color:var(--green-ink,#4E8A22);margin-bottom:10px;
}
.principles h3{margin:0 0 7px;font-size:1.02rem;color:var(--navy,#292369)}
.principles p{margin:0;font-size:.86rem;line-height:1.75;color:var(--muted,#5A5A63)}
@media (max-width:900px){.principles{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:520px){.principles{grid-template-columns:1fr}}

/* governance cards */
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.gcards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gcards{grid-template-columns:1fr}}
.gcard{
  display:flex;flex-direction:column;
  background:var(--white,#fff);border:1px solid var(--line,#E3E1D8);border-radius:2px;
  padding:20px;text-decoration:none;color:inherit;
  border-top:3px solid var(--green,#7DC148);
  transition:transform .2s ease,border-color .2s ease;
}
.gcard:hover{transform:translateY(-2px)}
.gcard:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:2px}
.gcard h3{margin:0 0 8px;font-size:1.05rem;color:var(--navy,#292369)}
.gcard p{margin:0 0 14px;flex:1;font-size:.86rem;line-height:1.7;color:var(--muted,#5A5A63)}
.gcard__go{font-size:.85rem;font-weight:600;color:var(--navy,#292369)}
.gcard:hover .gcard__go{color:var(--green-ink,#4E8A22)}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}

/* fields teaser: compact icon tiles, 3×2, no counts/photos */
.fteaser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.fteaser{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fteaser{grid-template-columns:1fr}}
.fteaser__i{
  display:flex;align-items:center;gap:14px;
  background:var(--stone,#F7F6F1);border:1px solid var(--line,#E3E1D8);border-radius:2px;
  padding:16px 18px;text-decoration:none;color:var(--navy,#292369);font-weight:600;
  transition:border-color .18s ease,background .18s ease;
}
.fteaser__i:hover{border-color:var(--green,#7DC148);background:#fff}
.fteaser__i:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:2px}
.fteaser__ic{flex:0 0 auto;width:30px;height:30px;fill:none;stroke:var(--navy,#292369);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fteaser__i span{font-size:.94rem}

/* ── 49. من نحن FIXES (client screenshot round) ───────────────────

   A. Flowing hero headline — the .lt block break split the H1 into two
      disconnected greyed lines. One weight, one emphasised phrase, balanced
      wrap. */
.phero__h--flow{font-weight:300;color:var(--navy,#292369)}
.phero__h--flow em{font-style:normal;font-weight:700}
.phero__h--flow::after{
  content:"";display:block;width:76px;height:4px;
  background:var(--green,#7DC148);margin-top:22px;
}

/* B. the conversion CTA as a card on stone — no longer ink-on-ink with the
      footer. The card keeps the navy field; the stone section frames it. */
.wcta--card{
  position:relative;overflow:hidden;
  background:var(--ink,#14103A);color:#fff;
  border-radius:2px;
  padding:44px 46px;
}
.wcta--card .wcta__bd{position:relative;max-width:640px;padding-block:0}
@media (max-width:640px){.wcta--card{padding:30px 24px}}

/* C. stat numbers on the about page: the static variant renders navy on the
      white section (the count-up variant was leaving them blank). Ensure the
      figure number always has an explicit color — never inherits to nothing. */
.figs__grid .fig__n{color:var(--fig-color,var(--navy,#292369))}
.figs__grid .fig__s{color:var(--muted,#5A5A63)}

/* ── 50. من نحن STATS — content-page block (client screenshot) ─────
   The homepage x-stat-figure was the wrong tool here: .fig__l is hardcoded
   #fff (invisible on white) and fpa_num() comma-groups the founding year into
   "2,004". This block is white-section-native: navy numbers, navy labels,
   muted subs, a green accent rule per stat, no JS, no comma on the year. */
.astats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.astat{
  padding-top:18px;
  border-top:2px solid var(--line,#E3E1D8);
}
.astat__n{
  margin:0 0 12px;
  font-family:var(--mono,monospace);
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:700;line-height:1;
  color:var(--navy,#292369);
}
.astat__n--live{color:inherit} /* live-vs-static is carried by the sub-label "يتحدث الرقم لحظيًا", not color (client) */
.astat__n--none{color:var(--muted,#5A5A63);font-weight:400}
.astat__l{
  margin:0 0 5px;
  font-size:.95rem;font-weight:600;line-height:1.5;
  color:var(--navy,#292369);
}
.astat__s{
  margin:0;
  font-size:.8rem;line-height:1.65;
  color:var(--muted,#5A5A63);
}
@media (max-width:820px){.astats{grid-template-columns:1fr 1fr;gap:26px 22px}}
@media (max-width:420px){.astats{grid-template-columns:1fr}}

/* ── 51. ERROR PAGES (branded 4xx/5xx) ────────────────────────────
   Laravel's default English pages broke the site's voice at exactly the
   moment a visitor is lost. These share one Arabic layout: big mono code,
   Arabic heading, a way home, and wayfinding links so an error is a fork,
   not a dead end. */
.errpage{background:var(--stone,#F7F6F1)}
.errpage .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;min-height:52vh}
.errpage__code{
  margin:0 0 6px;
  font-family:var(--mono,monospace);font-size:clamp(2.4rem,6vw,4rem);
  font-weight:700;color:var(--green,#7DC148);line-height:1;
}
.errpage__h{margin:0 0 14px;font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--navy,#292369)}
.errpage__lede{margin:0 0 26px;max-width:52ch;font-size:1.02rem;line-height:1.85;color:var(--muted,#5A5A63)}
.errpage__cta{margin-bottom:30px}
.errpage__links{
  margin:0;padding-top:22px;list-style:none;
  border-top:1px solid var(--line,#E3E1D8);
  display:flex;flex-wrap:wrap;gap:8px 26px;
}
.errpage__links a{font-size:.9rem;font-weight:600;color:var(--navy,#292369)}
.errpage__links a:hover{color:var(--green-ink,#4E8A22)}
.errpage__mark{justify-self:center}
.errpage__mark svg{width:min(260px,60vw);height:auto}
@media (max-width:800px){
  .errpage .wrap{grid-template-columns:1fr;gap:24px;min-height:auto;padding-block:20px}
  .errpage__mark{display:none}
}


/* ── 52. STATS: --ink palette + accent (client screenshots) ───────
   ADDITIVE ONLY. The base grid lives in §50 and must not be touched here —
   the previous version zeroed the grid gap on a base lacking §50,
   collapsing the four cells into a broken stack (client screenshot). This
   adds palette + the green rule under each number, nothing structural. */
.astat__n{position:relative}
.astat__n::after{content:"";display:block;width:34px;height:3px;background:var(--green,#7DC148);margin:12px 0 0}
.astats--ink .astat{border-top-color:rgba(255,255,255,.18)}
.astats--ink .astat__n{color:#fff}
.astats--ink .astat__n--live{color:#fff}
.astats--ink .astat__n--none{color:rgba(255,255,255,.6)}
.astats--ink .astat__l{color:#fff}
.astats--ink .astat__s{color:rgba(255,255,255,.62)}

/* ── 53. أبواب التبرع — card grid (client screenshot) ─────────────
   The flat ledger index read as monotonous rows. This auto-fill card grid
   keeps the index concept (serial + icon + name + blurb) but fills any card
   count into clean rows — no orphan row at 6/7/10, which is why the grid was
   originally abandoned; auto-fill solves that. */
.dgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:16px;
}
/* R03: the four contribution paths — explicit 4 / 2×2 / 1 so the 4th card never
   orphans (shared auto-fill .dgrid can land 3+1 at in-between widths). */
.dgrid--four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.dgrid--four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dgrid--four{grid-template-columns:1fr}}
.dcard{
  display:flex;flex-direction:column;
  background:var(--white,#fff);
  border:1px solid var(--line,#E3E1D8);
  border-radius:2px;
  padding:22px 24px 18px;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.dcard::before{
  content:"";position:absolute;top:0;inset-inline:0;height:3px;
  background:var(--green,#7DC148);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .22s ease;
}
.dcard:hover{transform:translateY(-3px);border-color:var(--green,#7DC148)}
.dcard:hover::before{transform:scaleX(1)}
.dcard:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:2px}
.dcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dcard__ic{width:34px;height:34px;fill:none;stroke:var(--navy,#292369);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dcard__no{font-family:var(--mono,monospace);font-size:1.05rem;color:var(--muted,#5A5A63)}
.dcard:hover .dcard__no{color:var(--green,#7DC148)}
.dcard__t{font-size:var(--fs-card);font-weight:600;color:var(--navy,#292369);margin-bottom:7px}
.dcard__d{flex:1;font-size:.86rem;line-height:1.75;color:var(--muted,#5A5A63);margin-bottom:16px}
.dcard__go{
  padding-top:13px;border-top:1px solid var(--line,#E3E1D8);
  font-size:.85rem;font-weight:600;color:var(--navy,#292369);
}
.dcard:hover .dcard__go{color:var(--green-ink,#4E8A22)}
@media (prefers-reduced-motion:reduce){.dcard,.dcard::before{transition:none}.dcard:hover{transform:none}}

/* ── 54. STATS HIERARCHY on the ink strip (client: old design was better) ──
   The old figures strip led with a large, tight mono number and a smaller
   label close beneath. The generic .astats made everything uniform. Restore
   the proportions on the homepage strip only (about keeps its calmer content
   scale). No green on the numbers — the live ones are distinguished by their
   sub-label, not color. */
.astats--ink{gap:0}
.astats--ink .astat{padding:0 30px}
.astats--ink .astat + .astat{border-inline-start:1px solid rgba(255,255,255,.12);border-top:0}
.astats--ink .astat__n{
  font-size:clamp(2.1rem,3.8vw,3.05rem);
  font-weight:500;letter-spacing:-.035em;
  margin-bottom:0;
}
.astats--ink .astat__n::after{margin:14px 0 16px}
.astats--ink .astat__l{
  font-size:1rem;font-weight:600;margin-bottom:6px;
}
.astats--ink .astat__s{font-size:.82rem}
@media (max-width:820px){
  .astats--ink{gap:26px 0}
  .astats--ink .astat{padding:14px 0}
  .astats--ink .astat + .astat{border-inline-start:0;border-top:1px solid rgba(255,255,255,.12)}
}

/* ── 55. STATS: drop the ink top-border + style the + suffix (client) ──
   The faint line above the first cell was §50's .astat{border-top} recolored
   but left visible on the ink strip. The green rule under each number is the
   only separator the strip needs. */
.astats--ink .astat{border-top:0}
.astat__plus{
  font-size:.5em;font-weight:500;
  color:var(--green,#7DC148);
  margin-inline-start:.08em;vertical-align:baseline;
}
.astats--ink .astat__plus{color:var(--green,#7DC148)}

/* ── 56. TRUST BAND + ZAKAT TEASER + ZAKAT EDU (client feedback) ──

   A. Trust band on ink — four transparency points before the ask. */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}
.trust__i{display:flex;flex-direction:column}
.trust__ic{width:34px;height:34px;margin-bottom:14px;fill:none;stroke:var(--green,#7DC148);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust__i h3{margin:0 0 8px;font-size:1.05rem;color:#fff}
.trust__i p{margin:0 0 10px;font-size:.88rem;line-height:1.8;color:rgba(255,255,255,.72)}
.trust__go{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--green,#7DC148)}
.trust__go:hover{color:#fff}
.trust__foot{
  margin:34px 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.92rem;color:rgba(255,255,255,.8);text-align:center;
}
.trust__foot a{color:var(--green,#7DC148);font-weight:600}
.trust__foot a:hover{color:#fff}

/* B. zakat teaser on ink — copy + a static result-panel echo */
.zteaser{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:820px){.zteaser{grid-template-columns:1fr;gap:26px}}
.zteaser__bd h2{color:#fff;margin:8px 0 14px}
.zteaser__bd h2 .lt{font-weight:300;color:rgba(255,255,255,.7)}
.zteaser__bd>p{margin:0 0 24px;color:rgba(255,255,255,.8);line-height:1.85;max-width:52ch}
.zteaser__note{display:inline-flex;align-items:center;font-size:.9rem;font-weight:600;color:var(--green,#7DC148)}
.zteaser__note:hover{color:#fff}
.zteaser__card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:2px;padding:22px 24px;
}
.zteaser__row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem;color:rgba(255,255,255,.82)}
.zteaser__row .num{font-family:var(--mono,monospace);color:rgba(255,255,255,.5)}
.zteaser__tot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;font-size:1rem;color:#fff}
.zteaser__tot b{font-family:var(--mono,monospace);font-size:1.5rem;color:var(--green,#7DC148)}

/* C. zakat educational strip on the calculator page (light section) */
.zedu{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0 0 34px;padding:22px;
  background:var(--stone,#F7F6F1);
  border:1px solid var(--line,#E3E1D8);border-radius:2px;
}
@media (max-width:900px){.zedu{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.zedu{grid-template-columns:1fr}}
.zedu__k{display:block;font-size:.9rem;font-weight:700;color:var(--navy,#292369);margin-bottom:6px}
.zedu__i p{margin:0;font-size:.83rem;line-height:1.75;color:var(--muted,#5A5A63)}

/* ── 57. HOMEPAGE RESTRUCTURE (G13) ───────────────────────────────
   Two isolated additions; the process 5-step rail and the single final-CTA
   band. "Ways to contribute" reuses .dgrid/.dcard and "verified impact" reuses
   .about — no new CSS for either. */

/* A. process — five stages on a green rail (light/framed section) */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:6px}
@media (max-width:900px){.proc{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:560px){.proc{grid-template-columns:1fr}}
.proc__s{padding-inline-start:16px;border-inline-start:2px solid var(--green,#7DC148)}
.proc__n{
  font-family:var(--mono,monospace);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;color:var(--green-ink,#4E8A24);margin:0 0 8px;
}
.proc__s h3{font-size:1.02rem;margin:0 0 8px;color:var(--navy,#292369)}
.proc__s p{margin:0;font-size:.9rem;line-height:1.85;color:var(--muted,#5A6076)}

/* B. final CTA — one focused action in the navy register */
.fcta{
  position:relative;overflow:hidden;
  background:var(--navy,#292369);color:#fff;
  border-radius:var(--r,4px);padding:60px 44px;text-align:center;
}
.fcta h2{color:#fff;font-size:var(--fs-h2);font-weight:var(--w-bold,800);letter-spacing:-.018em;margin:0 0 14px}
.fcta p{max-width:58ch;margin:0 auto 26px;color:rgba(255,255,255,.82);line-height:1.85}
.fcta .btn--go{position:relative;z-index:1}
/* the interlocking-circle motif — the one sanctioned decoration on navy bands */
.fcta__motif{
  position:absolute;inset-block-start:-40px;inset-inline-start:-40px;
  width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(125,193,72,.22);
  box-shadow:0 0 0 34px rgba(255,255,255,.03);
  pointer-events:none;
}
@media (max-width:560px){.fcta{padding:42px 22px}.fcta__motif{display:none}}

/* ── 58. CAMPAIGN DETAIL (G15 §10) — immediate impact summary ──────
   Reading order was reworked in the blade (need → funding, with this summary
   above both); only the summary block needs styling. */
.isum{margin:22px 0 0}
.isum__lede{font-size:1.12rem;line-height:1.85;color:var(--navy);font-weight:500;margin:0 0 14px}
.isum__unit{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;
  background:var(--green-pale);color:var(--green-ink);
  border:1px solid #D8E6C6;border-radius:var(--r);
  padding:8px 14px;font-size:.95rem;font-weight:600;
}
.isum__unit .num{font-family:var(--mono);font-weight:600}
/* the funding meter now follows the narrative, so give it clear separation */
.cp__main .bigm{margin-top:44px}

/* ── 59. SHARED CAMPAIGN IMAGE + CATEGORY FALLBACK (R02/R06) ───────
   One component behind every campaign card and preview. The fallback is the
   brand navy gradient + a category icon/label — a deliberate category tile,
   never a photographic stand-in, and never a filename. z-index:0 on the fill
   variant isolates the img(1)/fallback(0) layering into its own stacking
   context so host overlays (card gradient, serial, badge) sit cleanly above. */
.cimg{position:relative;display:block;overflow:hidden;background:linear-gradient(150deg,var(--navy),var(--ink))}
.cimg--ratio{aspect-ratio:var(--cimg-ar,3/2)}
.cimg--fill{position:absolute;inset:0;z-index:0}
.cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
.cimg--failed img{opacity:0}   /* hide the broken-image glyph; keep alt in the a11y tree */
.cimg__fb{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px;text-align:center;
}
.cimg__ic{width:40px;height:40px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cimg__lb{font-family:var(--ar-display);font-size:.82rem;font-weight:600;color:rgba(255,255,255,.66)}
.cimg--compact .cimg__ic{width:22px;height:22px}
.cimg--compact{background:var(--navy)}

/* card layering: image block at the base, readability gradient above it, then
   the serial/badge (already z-index:2) on top */
.deed__img .cimg{z-index:0}
.deed__img::after{z-index:1}

/* ── 60. TYPE SCALE + LAYOUT UTILITIES (R09/R10) ──────────────────
   Reusable role-based classes so headings, intros, cards, labels, metadata,
   captions and long-form reading blocks stay consistent across shared pages
   without one-off sizes. Page/section/card titles already resolve through the
   scale tokens; these classes let new surfaces opt in with one class. */
.t-display{font-family:var(--ar-display);font-weight:var(--w-bold);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.022em;color:var(--navy)}
.t-page{font-family:var(--ar-display);font-weight:var(--w-bold);font-size:var(--fs-page);line-height:var(--lh-tight);letter-spacing:-.018em;color:var(--navy)}
.t-section{font-family:var(--ar-display);font-weight:var(--w-bold);font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:-.018em;color:var(--navy)}
.t-card{font-family:var(--ar-display);font-weight:600;font-size:var(--fs-card);line-height:var(--lh-head);color:var(--navy)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body)}
.t-label{font-size:var(--fs-label);font-weight:var(--w-mid);color:var(--navy)}
.t-meta{font-size:var(--fs-meta);color:var(--muted)}
.t-caption{font-size:var(--fs-caption);color:var(--muted);line-height:1.6}

/* R09: narrow measure for long Arabic reading content (policy / about / strategy) */
.wrap--read{max-width:var(--wrap-read)}
.wrap--read p{line-height:var(--lh-loose)}
/* R09: section rhythm — larger, consistent spacing between conceptual groups */
.sec--rhythm{padding-block:var(--section-y)}


/* ══════════════════════════════════════════════════════════════════
   §62. HOMEPAGE REFINEMENT PASS (Batch 57)
   ══════════════════════════════════════════════════════════════════
   A TARGETED second-pass polish of the restored original homepage — NOT a
   redesign. Every rule here is either homepage-only (a class used only by
   pages/home/*) or explicitly scoped under `.hero` / `#figures` / `#campaigns`
   / `.work` so shared components (the campaign `.deed` card, the bound
   donation console, `.chips` on the campaign/checkout pages) keep their
   current appearance everywhere else. No global token is redefined. */

/* ── §2 — Hero: clearer documentary image + restrained directional veil ──
   The restored hero washed the photo out. Drop the heavy filter and replace
   the multi-layer veil with a single directional gradient — opaque behind the
   text column (inline-start), clearing over the donation panel. */
.hero__bg img{filter:saturate(1) contrast(1.02) brightness(1)}
.hero__scrim{
  background:
    linear-gradient(to left,
      rgba(251,252,248,.94) 0%,
      rgba(251,252,248,.80) 32%,
      rgba(250,252,247,.30) 64%,
      rgba(250,252,247,0)  100%),
    linear-gradient(180deg, transparent 82%, rgba(233,237,227,.7) 100%);
}
[dir="ltr"] .hero__scrim{
  background:
    linear-gradient(to right,
      rgba(251,252,248,.94) 0%,
      rgba(251,252,248,.80) 32%,
      rgba(250,252,247,.30) 64%,
      rgba(250,252,247,0)  100%),
    linear-gradient(180deg, transparent 82%, rgba(233,237,227,.7) 100%);
}
.hero__motif{animation:none;opacity:.24}

/* §2/§13 — headline: one coherent color, restrained emphasis (no alternating
   green fragment), balanced Arabic wrapping, strong but not oversized. */
.hh__a{font-weight:var(--w-mid);color:rgba(41,35,105,.72)}
.hh__b{font-weight:var(--w-bold);color:var(--navy)}
.hh span{text-wrap:balance}
.hero__lede{max-width:48ch}

/* §2 — hero donation module, scoped to .hero so the campaign-page console
   (bound-console) is untouched. Comfortable ≥44px controls, clearer selected
   states, visible keyboard focus, no cramped 4-across segment on phones. */
.hero .cons .seg button{min-height:46px;font-size:.8rem;line-height:1.35}
.hero .cons .chip{min-height:46px;display:grid;place-items:center;font-size:.92rem;padding:6px 2px}
.hero .cons .amt input{min-height:48px}
.hero .cons .freq button{min-height:46px}
.hero .cons .chip[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--navy)}
.hero .cons .seg button:focus-visible,
.hero .cons .chip:focus-visible,
.hero .cons .freq button:focus-visible,
.hero .cons .destLink:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (max-width:520px){
  .hero .cons .seg{grid-template-columns:1fr 1fr}
  .hero .cons .seg button{border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)}
  .hero .cons .seg button:nth-child(2n){border-inline-end:0}
  .hero .cons .seg button:nth-last-child(-n+2){border-block-end:0}
}
/* §2/§16 — on mobile the institutional message precedes the donation panel */
@media (max-width:900px){
  .hero__grid>div{order:1}
  .hero__grid>.cons{order:2}
}

/* ── §3/§10 — impact stats: one compact, real transparency link under the band
   (option 1 of §10 — "اطّلع على تقارير الأثر"), visually secondary. The four
   figures and their proportions (§54) are unchanged. */
.figs__more{
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:flex-end;
}
.figs__more a{
  font-size:.92rem;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:2px;
}
.figs__more a:hover{color:var(--green);border-color:var(--green)}
@media (max-width:560px){.figs__more{justify-content:flex-start}}

/* ── §5 — five-step process: substantial connected panels (not a thin line).
   Shared green inline-start rail is the "restrained line"; each step gets a
   round numbered node and a consistent min-height. Homepage-only (.proc). */
.proc__s{
  padding:22px 20px;background:var(--white);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:186px;
}
.proc__n{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--green-pale);color:var(--green-ink);
  font-size:.9rem;letter-spacing:0;margin:0 0 13px;
}
.proc__s h3{font-size:1.08rem;margin:0 0 9px}
.proc__s p{font-size:.9rem;line-height:1.8}
@media (max-width:560px){.proc__s{min-height:0}}

/* ── §6 — work-area cards: consistent height, clearer hierarchy, a directional
   affordance, visible focus, and a graceful 3→2→1 grid. Homepage-only (.areas). */
@media (max-width:860px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.areas{grid-template-columns:1fr}}
.area{min-height:158px;display:flex;flex-direction:column}
.area h3{font-size:1.06rem;font-weight:600;margin-bottom:9px}
.area p{font-size:.86rem}
.area:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.area::after{
  content:"←";display:block;margin-top:auto;padding-top:12px;
  color:rgba(255,255,255,.4);font-size:1rem;transition:color .2s,transform .2s;
}
[dir="ltr"] .area::after{content:"→"}
.area:hover::after,.area:focus-visible::after{color:var(--green);transform:translateX(-4px)}
[dir="ltr"] .area:hover::after{transform:translateX(4px)}

/* ── §8 — participation: keep four equal-weight cards, but let the principal
   financial route carry a stronger green emphasis (always-on top rail) so the
   routes are differentiated, not identical. Homepage-only (ways.blade). */
.dcard--primary{border-color:rgba(125,193,72,.55);box-shadow:inset 0 3px 0 var(--green)}
.dcard--primary::before{transform:scaleX(1)}
.dcard--primary .dcard__no,.dcard--primary .dcard__go{color:var(--green-ink)}
.dcard--primary .dcard__ic{stroke:var(--green-ink)}

/* ── §12 — closing CTA: substantial navy band with a two-route choice (no
   donation form). Adds a secondary outline action on navy. Homepage-only. */
.fcta__cta{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fcta .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.fcta .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:560px){.fcta__cta .btn{width:100%}}


/* ══════════════════════════════════════════════════════════════════
   §63. HOMEPAGE POLISH PASS (Batch 58)
   ══════════════════════════════════════════════════════════════════
   Third, tightly-scoped polish of the current (§62) homepage. Concept,
   order, and composition are unchanged. Every rule is homepage-only or
   scoped under a homepage section id so shared components (the .deed card,
   .post news card, .dcard, the console) are untouched on other pages.
   Root is 16px; several supporting texts sat at ~14px — raised toward the
   16px body target on the homepage only, with line-length/spacing tuned
   alongside so cards don't crowd. */

/* ── §2 — small-text readability (homepage-scoped) ── */
#campaigns .deed__txt{font-size:1rem;line-height:1.85}
#campaigns .deed__cat{font-size:.74rem}
#campaigns .deed__where{font-size:.8rem}
.proc__s p{font-size:1rem;line-height:1.8}
.work .area h3{font-size:1.12rem}
.work .area p{font-size:.95rem;line-height:1.75}
#ways .dcard__d{font-size:.98rem;line-height:1.75}
#ways .dcard__t{font-size:1.12rem}
#ways .dcard__go{font-size:.92rem}
#news .post__d{font-size:.8rem;letter-spacing:.04em}
#news .post h3{font-size:1.06rem}
#news .post p{font-size:.95rem;line-height:1.8}
.hero__note{font-size:.95rem}

/* ── §3 — connect the five-step process ──
   A subtle progression line links the cards across the gaps (visible only in
   the gaps — the white cards paint over the rest), at the numbered-node
   centre-line. Start node is solid green, end node solid navy, so the
   sequence reads without relying on colour alone (the 1–5 numerals carry it).
   Hidden once the cards stack. */
.proc{position:relative;gap:20px}
.proc::before{
  content:'';position:absolute;z-index:0;top:40px;inset-inline:9%;height:2px;
  background:repeating-linear-gradient(to left,var(--green) 0 12px,transparent 12px 20px);
  opacity:.5;
}
.proc__s{position:relative;z-index:1}
.proc__s:first-child .proc__n{background:var(--green);color:#0F2E06}
.proc__s:last-child .proc__n{background:var(--navy);color:#fff}
@media (max-width:900px){.proc::before{display:none}}

/* ── §4 — work-area cards: more separation on the dark surface, stronger
   title + icon contrast, without changing the composition ── */
.work .area{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.16);
  padding:26px 24px;
}
.work .area:hover{background:rgba(125,193,72,.12);border-color:rgba(125,193,72,.5)}
.work .area__ic{stroke:var(--green);width:31px;height:31px;opacity:.95}
.work .area h3{font-weight:600;margin-bottom:9px}

/* ── §5 — participation: a small, honest "kind" label per route so financial /
   in-kind / time / institutional read as distinct without four different card
   designs. Financial keeps the stronger green (§62 .dcard--primary). ── */
.dcard__kind{
  align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;margin-bottom:12px;
  background:var(--stone-2);color:var(--muted);border:1px solid var(--line);
}
.dcard--primary .dcard__kind{background:var(--green-pale);color:var(--green-ink);border-color:rgba(125,193,72,.4)}
.dcard__kind--org{background:rgba(41,35,105,.06);color:var(--navy);border-color:rgba(41,35,105,.18)}

/* ── §6 — the Zakat teaser's left panel no longer reads as an unfinished form.
   The "—" placeholder rows are replaced (in markup) with three truthful,
   non-fabricated points about what the calculator does. ── */
.ztips{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ztips li{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.ztips li:last-child{border-bottom:0}
.ztips svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
.ztips b{display:block;color:#fff;font-family:var(--ar-display);font-size:1rem;font-weight:600;margin-bottom:2px}
.ztips span{display:block;color:rgba(255,255,255,.72);font-size:.86rem;line-height:1.65}

/* ── §8 — closing CTA as a full-bleed institutional band (not a floating
   rectangle in a white moat). Full section width in the navy register, a
   controlled height, and it sits flush above the darker ink footer for a
   connected transition. ── */
.sec--cta{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding-block:76px;text-align:center;
}
.sec--cta .cta__motif{
  position:absolute;inset-block-start:-90px;inset-inline-start:50%;transform:translateX(-50%);
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(125,193,72,.16);box-shadow:0 0 0 40px rgba(255,255,255,.02);
}
.cta__in{position:relative;z-index:1;max-width:760px}
.sec--cta h2{color:#fff;font-size:var(--fs-h2);font-weight:var(--w-bold);letter-spacing:-.018em;margin:0 0 14px}
.sec--cta>.wrap>p,.cta__in p{max-width:56ch;margin:0 auto 26px;color:rgba(255,255,255,.84);line-height:1.85}
.cta__act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sec--cta .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.sec--cta .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:560px){.sec--cta{padding-block:52px}.cta__act .btn{width:100%}.sec--cta .cta__motif{display:none}}


/* ══════════════════════════════════════════════════════════════════
   §64. HOMEPAGE EDITORIAL & UI POLISH (Batch 59)
   ══════════════════════════════════════════════════════════════════
   Editorial/typography/CTA pass on the current homepage. Homepage-scoped or
   homepage-only; no shared component restyled for other pages. Concept, order,
   routes, and dynamic behaviour unchanged. */

/* ── §2/§8 — hero headline: two intentional lines, coherent navy, safe Arabic
   line-height with room for ascenders/descenders, a stable max-width, and NO
   forcing tricks (no negative margins / transforms / fixed heights). Weights:
   line 1 medium (§62), line 2 bold. */
.hh{max-width:19ch;margin-block:20px 24px}
.hh span{line-height:1.28;letter-spacing:-.012em;padding-block:.02em}
.hh__a{margin-bottom:.12em}
@media (max-width:900px){.hh{max-width:24ch}}

/* ── §3/§4/§6/§8 — section-header action placed INSIDE the header area (slot),
   under the description, instead of floating opposite an empty gap. */
.sec__act{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:6px;
  font-size:.92rem;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:all .18s var(--e);
}
.sec__act:hover{border-color:var(--green);color:var(--green-ink);gap:.65rem}
.sec--ink .sec__act{color:#fff;border-color:rgba(255,255,255,.28)}
.sec--ink .sec__act:hover{color:var(--green);border-color:var(--green)}

/* ── §4 — "How we work": ordered list reset, tighter intro→process gap, one
   continuous restrained connector (replaces the dashed line), stronger numbers,
   clearer start/end. */
.proc{list-style:none;padding-inline-start:0;margin-block:0;gap:18px}
#how-it-works .sec__bar{margin-bottom:26px}
.proc::before{
  background:rgba(41,35,105,.18);      /* continuous, restrained (not dashed) */
  opacity:1;top:42px;inset-inline:11%;
}
.proc__n{width:40px;height:40px;font-size:1rem;font-weight:700}
.proc__s{min-height:190px}
.proc__s h3{font-size:1.1rem}
.proc__s p{font-size:1rem;line-height:1.8}

/* ── §5 — participation: decorative 01–04 numbers removed, so the icon row is
   just the icon; kind label carries differentiation. */
#ways .dcard__top{justify-content:flex-start;margin-bottom:14px}
#ways .dcard__go{margin-top:auto}

/* ── §7 — closing CTA: full-bleed documentary band, navy directional gradient
   strongest on the RTL text side (right), content right-aligned in the
   container, restrained green accent. Overrides the §63 centered navy panel. */
.sec--cta{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding-block:0;min-height:360px;display:flex;align-items:center;text-align:start;
}
.sec--cta .cta__bg{position:absolute;inset:0;z-index:0}
.sec--cta .cta__bg img{width:100%;height:100%;object-fit:cover;object-position:22% center}
.sec--cta .cta__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(16,12,44,.95) 0%, rgba(18,14,52,.9) 34%, rgba(20,16,58,.5) 74%, rgba(20,16,58,.28) 100%),
    radial-gradient(720px 360px at 92% 12%, rgba(125,193,72,.16), transparent 62%);
}
.sec--cta .wrap{position:relative;z-index:2;width:100%}
.sec--cta .cta__in{max-width:560px;margin-inline:0;text-align:start;padding-block:64px}
.sec--cta .cta__in::before{
  content:'';display:block;width:44px;height:3px;background:var(--green);margin-bottom:18px;
}
.sec--cta h2{margin:0 0 14px}
.sec--cta .cta__in p{margin:0 0 26px;max-width:48ch;color:rgba(255,255,255,.86)}
.sec--cta .cta__act{justify-content:flex-start}
@media (max-width:560px){
  .sec--cta{min-height:0}
  .sec--cta .cta__in{padding-block:48px;max-width:none}
  .sec--cta .cta__act .btn{width:100%}
}


/* ══════════════════════════════════════════════════════════════════
   §65. HERO 3-LINE LOCKUP + CONNECTED PROCESS (Batch 60)
   ══════════════════════════════════════════════════════════════════
   Two focused changes: an art-directed three-line hero headline with genuine
   size/weight hierarchy, and the "how we work" section rebuilt as ONE connected
   process surface. Homepage-only. Overrides earlier .hh rules (§62/§64). */

/* ── §2 — hero headline lockup. Real Alexandria weights (400/700/600 are all
   loaded), never opacity-simulated. Arabic-safe line-heights with room for
   ascenders/descenders; letter-spacing reset to normal (never track Arabic).
   clamp() scales the three lines together and compresses their size gap on
   narrow columns while keeping the hierarchy. No positioning tricks. --*/
.hh{
  display:flex;flex-direction:column;gap:.12em;
  max-width:34rem;margin-block:16px 22px;
}
.hh span{
  display:block;font-family:var(--ar-display);letter-spacing:normal;padding-block:0;
  text-wrap:balance;
}
.hh .hh__1{font-weight:400;color:rgba(41,35,105,.86);font-size:clamp(1.55rem,2.3vw,2.35rem);line-height:1.3}
.hh .hh__2{font-weight:700;color:var(--navy);font-size:clamp(2.35rem,4.9vw,4.05rem);line-height:1.14}
.hh .hh__2 em{font-style:normal;color:var(--green-disp)}
.hh .hh__3{font-weight:600;color:var(--navy);font-size:clamp(1.85rem,3.3vw,3rem);line-height:1.22}
@media (max-width:900px){.hh{max-width:26rem}}
@media (max-width:480px){.hh{max-width:none;gap:.16em}}

/* ── §4–§6 — connected process surface. Desktop: one white container, five
   stage columns, restrained vertical separators, a continuous rail through five
   centred numbered nodes (RTL right→left). --*/
.pflow{
  position:relative;list-style:none;margin:0;padding:36px 8px 30px;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
}
#how-it-works .sec__bar{margin-bottom:26px}   /* connect intro to the process */
.pflow::before{                                 /* continuous rail through node centres */
  content:'';position:absolute;z-index:0;height:2px;background:var(--line);
  top:59px;                                      /* padding-top 36 + node radius 23 */
  inset-inline:calc(10% - 4px);
}
.pflow__stage{
  position:relative;padding:0 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pflow__stage + .pflow__stage{border-inline-start:1px solid var(--line)}
.pflow__node{
  position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:18px;
  font-family:var(--mono);font-weight:700;font-size:1.05rem;
  background:var(--stone-2);color:var(--navy);border:2px solid var(--line);
}
.pflow__stage--start .pflow__node{background:var(--green);border-color:var(--green);color:#0F2E06}
.pflow__stage--end .pflow__node{background:var(--navy);border-color:var(--navy);color:#fff}
.pflow__t{font-size:1.05rem;font-weight:600;color:var(--navy);margin:0 0 8px;line-height:1.45}
.pflow__d{font-size:.92rem;line-height:1.7;color:var(--body);margin:0;max-width:24ch}

/* ── §6 — narrow screens: the SAME container becomes a vertical timeline.
   Rail on the RTL start (right) edge via a per-stage connector so it always
   reaches the next node; nodes attached, content beside. --*/
@media (max-width:760px){
  .pflow{grid-template-columns:1fr;padding:26px 24px}
  .pflow::before{display:none}
  .pflow__stage{
    flex-direction:row;align-items:flex-start;text-align:start;
    padding:0 0 26px;gap:0 16px;
  }
  .pflow__stage + .pflow__stage{border-inline-start:0}
  .pflow__stage:last-child{padding-bottom:0}
  .pflow__node{margin:0;flex:none}
  .pflow__stage:not(:last-child)::after{
    content:'';position:absolute;z-index:0;width:2px;background:var(--line);
    top:46px;bottom:0;inset-inline-start:22px;   /* node centre (46px node, start-aligned) */
  }
  .pflow__body{padding-top:9px}
  .pflow__d{max-width:none}
}


/* ══════════════════════════════════════════════════════════════════
   §66. HERO LOCKUP + PROCESS POLISH (Batch 61)
   ══════════════════════════════════════════════════════════════════
   Fine polish of the §65 hero headline and the connected process. Same
   selectors/specificity as §65 so these win by source order. Homepage-only. */

/* ── §3/§4 — hero: reintegrate أثرٍ into line 2 (same size/weight/baseline,
   green is the ONLY emphasis), a clearer softened-navy line 1 (solid colour,
   not low-opacity), line 2 slightly calmer, line 3 visibly quieter than line 2,
   controlled per-line gaps with Arabic-safe line-heights. --*/
.hh{gap:.06em;max-width:33rem;margin-block:16px 22px}
.hh .hh__1{
  color:var(--navy-soft);font-weight:400;margin-bottom:.1em;
  font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.3;
}
.hh .hh__2{font-weight:700;font-size:clamp(2.5rem,4.7vw,4rem);line-height:1.16}
.hh .hh__2 em{
  font-size:1em;font-weight:inherit;line-height:inherit;vertical-align:baseline;
  color:var(--green-disp);
}
.hh .hh__3{font-weight:600;font-size:clamp(2rem,3.7vw,3.15rem);line-height:1.24}

/* ── §8/§9 — process: stronger presence & legibility on the same unified
   container (bigger, higher-contrast nodes; a more visible rail; larger titles
   and descriptions; more internal breathing room; a restrained container
   shadow). Still far more compact than the old five-card version. --*/
.pflow{padding:42px 14px 36px;box-shadow:var(--sh-sm)}
.pflow::before{top:63px;background:rgba(41,35,105,.22);height:2px}   /* pad-top 42 + node radius 21 */
.pflow__stage{padding:0 22px}
.pflow__stage + .pflow__stage{border-inline-start-color:rgba(41,35,105,.1)}
.pflow__node{
  width:42px;height:42px;margin-bottom:20px;border-width:2px;
  font-size:1.15rem;font-weight:800;
}
/* middle stages: quiet white fill + navy numeral + a slightly stronger border,
   so start (green) and end (navy) read as endpoints by fill AND number, not
   colour alone. */
.pflow__stage:not(.pflow__stage--start):not(.pflow__stage--end) .pflow__node{
  background:var(--white);border-color:rgba(41,35,105,.26);color:var(--navy);
}
.pflow__stage--end .pflow__node{border-width:2px}
.pflow__t{font-size:1.15rem;font-weight:700;margin:0 0 10px;line-height:1.45}
.pflow__d{font-size:1rem;line-height:1.78;max-width:24ch}

/* ── §11 — methodology action integrated into the header, comfortable target. */
.sec__act{min-height:44px;display:inline-flex;align-items:center;padding-block:5px}
#how-it-works .sec__act{font-size:1rem}
.sec__act:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

/* ── §12 — mobile timeline: match the larger node, keep the rail reaching every
   node, strengthen its contrast. --*/
@media (max-width:760px){
  .pflow{padding:30px 24px}
  .pflow__node{width:42px;height:42px}
  .pflow__stage:not(:last-child)::after{top:42px;inset-inline-start:20px;background:rgba(41,35,105,.22)}
  .pflow__body{padding-top:8px}
}


/* ══════════════════════════════════════════════════════════════════
   §67. FINAL HERO OPTICS + PROCESS READABILITY (Batch 62)
   ══════════════════════════════════════════════════════════════════
   Final optical pass. Same selectors/specificity as §65/§66 (wins by source
   order). Homepage-only; no markup change beyond the methodology-link move. */

/* ── §3/§4 — hero: one right-anchored editorial lockup. align-items:flex-start
   in this RTL column packs each line to the inline-start (right) edge and sizes
   it to its own content, so the three lines share ONE clean right edge with a
   natural stepped left silhouette (no per-line centering, no forced equal
   widths). Bigger gap after line 1, tighter after line 2. Line 1 darker/solid;
   line 3 reduced ~12% so it's clearly secondary to line 2. --*/
.hh{
  align-items:flex-start;gap:0;
  max-width:33rem;margin-block:16px 26px;
}
.hh .hh__1{
  color:#3A3480;font-weight:400;margin-bottom:.28em;
  font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.28;
}
.hh .hh__2{
  font-weight:700;margin-bottom:.08em;
  font-size:clamp(2.5rem,4.7vw,4rem);line-height:1.16;
}
.hh .hh__2 em{font-size:1em;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:var(--green-disp)}
.hh .hh__3{
  font-weight:600;
  font-size:clamp(1.9rem,3.35vw,2.8rem);line-height:1.22;
}

/* ── §7 — process: quiet stages 2–4 get a clearer node outline (still quieter
   than the green start / navy end); descriptions gain contrast + line-height;
   the intro sits closer to the container. --*/
#how-it-works .sec__bar{margin-bottom:18px}
.pflow__stage:not(.pflow__stage--start):not(.pflow__stage--end) .pflow__node{
  background:var(--white);border-color:rgba(41,35,105,.36);color:var(--navy);
}
.pflow__d{color:#343A4D;line-height:1.85}

/* ── §8 — methodology action integrated in the header row (opposite the
   heading on the RTL grid), modestly more visible, 44px target, clear focus,
   no layout movement on hover/focus. --*/
#how-it-works .sec__more{
  font-size:.95rem;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;
}
.sec__more:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}


/* ══════════════════════════════════════════════════════════════════
   §68. WORK-AREA FIELD PAGES (Batch 63)
   ══════════════════════════════════════════════════════════════════
   The redesigned shared work/show template: a more purposeful hero, a
   scannable field explanation, a field-specific process/principles band,
   a "what your support provides" box, reworked campaigns + a compact
   no-campaign panel, curated related fields, and a restrained navy close.
   Scoped to the work-area page classes; nothing shared elsewhere changes. */

/* ── 1. Hero — more compact, title aligned to the image, motif anchored ── */
.wa-hero{padding-block:32px 46px}
.wa-hero__grid{gap:40px;align-items:center;margin-top:14px}
.wa-hero .eyebrow{margin-bottom:0}
.wa-hero__h{
  font-family:var(--ar-display);font-size:var(--fs-page);font-weight:var(--w-bold);
  color:var(--navy);letter-spacing:-.018em;line-height:1.2;margin:8px 0 0;
}
.wa-hero__promise{
  font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600;color:var(--navy);
  line-height:1.55;margin:14px 0 0;max-width:34ch;text-wrap:balance;
}
.wa-hero__lede{font-size:1rem;line-height:1.9;color:var(--muted);max-width:52ch;margin:12px 0 0}
.wa-hero__cta{margin-top:22px}
.wa-hero__mark2{
  display:inline-flex;align-items:center;gap:.5rem;margin:16px 0 0;
  font-family:var(--mono);font-size:.78rem;color:var(--green-ink);
}
.wa-hero__mark2 i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;animation:pulse 2s infinite}
/* field motif: quiet, consistently anchored top inline-start — not floating mid-gap */
.wa-hero .ghero__mark{inset-inline-end:auto;inset-inline-start:3%;top:-26px;width:230px;height:230px}

/* ── 2. Field explanation — intervention types grid ── */
.wa-exp{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wa-exp__i{
  background:var(--stone);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px 22px;transition:transform .2s var(--e),border-color .2s,box-shadow .2s;
}
.wa-exp__i:hover{transform:translateY(-2px);border-color:#C4CFB6;box-shadow:var(--sh-sm)}
.wa-exp__i h3{font-size:1.06rem;color:var(--navy);margin:0 0 8px;font-weight:600;line-height:1.4}
.wa-exp__i p{margin:0;font-size:.95rem;line-height:1.7;color:var(--body)}
.wa-prose{max-width:72ch}
.wa-prose p{font-size:1rem;line-height:1.95;margin:0 0 14px}
@media (max-width:860px){.wa-exp{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.wa-exp{grid-template-columns:1fr}}

/* ── 3. Field process / principles + support box ── */
.wa-method__head{margin-bottom:20px}
.wa-method__head h2{font-size:var(--fs-h2);font-weight:var(--w-bold);color:var(--navy);letter-spacing:-.018em;margin:10px 0 0}
.wa-flow,.wa-prin{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wa-flow__s,.wa-prin__i{
  display:flex;align-items:center;gap:13px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
}
.wa-flow__n,.wa-prin__n{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:.95rem;
  background:var(--stone-2);color:var(--navy);border:1.5px solid rgba(41,35,105,.24);
}
.wa-flow__s--start .wa-flow__n{background:var(--green);border-color:var(--green);color:#0F2E06}
.wa-flow__s--end .wa-flow__n{background:var(--navy);border-color:var(--navy);color:#fff}
.wa-flow__t,.wa-prin__i b{font-size:1rem;font-weight:600;color:var(--navy);line-height:1.4}
@media (max-width:860px){.wa-flow,.wa-prin{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.wa-flow,.wa-prin{grid-template-columns:1fr}}

.wa-support{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.wa-support__h{font-size:1.1rem;color:var(--navy);margin:0 0 15px;font-weight:700}
.wa-support__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 28px}
.wa-support__l li{display:flex;align-items:flex-start;gap:.6rem;font-size:.97rem;line-height:1.6;color:var(--body)}
.wa-support__l svg{width:20px;height:20px;stroke:var(--green-ink);fill:none;stroke-width:2.2;flex:none;margin-top:2px}
.wa-support__note{margin:15px 0 0;font-size:.85rem;color:var(--muted);line-height:1.7}
@media (max-width:640px){.wa-support__l{grid-template-columns:1fr}}

/* ── 4. Campaigns — subtype chips + compact no-campaign panel ── */
.wa-sub{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.wa-sub li{font-size:.82rem;color:var(--navy);background:var(--stone-2);border:1px solid var(--line);border-radius:999px;padding:5px 13px}
.wa-nc{
  max-width:660px;background:var(--stone-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);padding:30px 32px;
}
.wa-nc__h{font-size:1.2rem;color:var(--navy);margin:0 0 10px;font-weight:700;line-height:1.45}
.wa-nc__p{margin:0 0 20px;font-size:.97rem;line-height:1.85;color:var(--body);max-width:62ch}

/* ── 6. Closing — restrained navy band (self-contained, not the §64 image band) ── */
.wa-cta{background:var(--navy);color:#fff;padding-block:56px;text-align:center}
.wa-cta__in{max-width:660px;margin-inline:auto}
.wa-cta h2{color:#fff;font-size:var(--fs-h2);font-weight:var(--w-bold);letter-spacing:-.018em;margin:0 0 12px}
.wa-cta p{color:rgba(255,255,255,.85);line-height:1.8;margin:0 auto 24px;max-width:54ch}
.wa-cta .cta__act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.wa-cta .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.wa-cta .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:560px){.wa-cta{padding-block:44px}.wa-cta .cta__act .btn{width:100%}}


/* ══════════════════════════════════════════════════════════════════
   §69. WORK-AREA FAMILY REFINEMENT (Batch 64)
   ══════════════════════════════════════════════════════════════════
   Refinement of the §68 field pages: one deliberate vertical rhythm, a
   tighter/better-balanced hero, larger Arabic text, a clearly STATIC
   connected process (the bordered pills read as selectable tabs), intentional
   campaign-grid density (3 / pair / solo), a warmer compact empty panel, and
   scoped campaign-card legibility. Everything is scoped to .wa-* / .wa-sec /
   .wa-hero so the homepage and other pages are unaffected. */

/* ── §3 — one rhythm for the family ── */
.wa-sec{padding:68px 0}
.wa-sec .sec__bar{margin-bottom:30px}
.wa-method__head{margin-bottom:22px}
@media (max-width:900px){.wa-sec{padding:50px 0}}

/* ── §4 — hero: tighter gap, aligned columns, controlled reading width ── */
.wa-hero{padding-block:26px 40px}
.wa-hero__grid{gap:34px;margin-top:12px}
.wa-hero__lede{font-size:1.05rem;line-height:1.9;max-width:46ch}
.wa-hero__promise{margin-top:12px}
.wa-hero .eyebrow{font-size:.78rem;letter-spacing:.07em}
.ghero__alt:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.wa-hero .ghero__alt{font-size:.92rem;min-height:44px;display:inline-flex;align-items:center}

/* ── §6 — Arabic readability across the family ── */
.wa-sec .eyebrow{font-size:.78rem;letter-spacing:.07em}
.wa-sec .sec__hd p{font-size:1.05rem;line-height:1.9}
.wa-exp__i h3{font-size:1.1rem}
.wa-exp__i p{font-size:1rem;line-height:1.78}
.wa-support__l li{font-size:1rem}
.wa-support__note{font-size:.88rem}
.wa-prose p{font-size:1.05rem}

/* ── §7 — intervention types are INFORMATION, not controls: no hover lift ── */
.wa-exp{margin-top:26px}
.wa-exp__i{transition:none}
.wa-exp__i:hover{transform:none;border-color:var(--line);box-shadow:none}

/* ── §8 — process: clearly static connected sequence (replaces the tab-like
   bordered pills). Plain stages on the section surface, one continuous rail
   through the numbered nodes, no borders/hover/pointer. Same treatment quiets
   the principles list. ── */
.wa-flow{position:relative;gap:20px}
.wa-flow::before{
  content:'';position:absolute;z-index:0;height:2px;top:20px;inset-inline:11%;
  background:rgba(41,35,105,.18);
}
.wa-flow__s{
  background:transparent;border:0;border-radius:0;padding:0;
  flex-direction:column;align-items:center;text-align:center;gap:12px;
  position:relative;z-index:1;cursor:default;
}
.wa-flow__n{width:40px;height:40px;background:var(--white);font-size:1rem}
.wa-flow__t{font-size:1.04rem;line-height:1.5}
.wa-prin{gap:20px}
.wa-prin__i{background:transparent;border:0;border-radius:0;padding:0;flex-direction:column;align-items:center;text-align:center;gap:12px;cursor:default}
.wa-prin__n{width:40px;height:40px;background:var(--white);font-size:1rem}
.wa-prin__i b{font-size:1.04rem;line-height:1.5}
/* narrow: one connected vertical sequence (skip the ambiguous 2×2) */
@media (max-width:860px){
  .wa-flow{grid-template-columns:1fr;gap:0}
  .wa-flow::before{display:none}
  .wa-flow__s{flex-direction:row;align-items:flex-start;text-align:start;padding-bottom:22px}
  .wa-flow__s:last-child{padding-bottom:0}
  .wa-flow__s:not(:last-child)::after{
    content:'';position:absolute;z-index:0;width:2px;background:rgba(41,35,105,.18);
    top:40px;bottom:0;inset-inline-start:19px;
  }
  .wa-flow__n{flex:none}
  .wa-flow__t{padding-top:8px}
  .wa-prin{grid-template-columns:1fr 1fr}
  .wa-prin__i{flex-direction:row;text-align:start}
}
@media (max-width:520px){.wa-prin{grid-template-columns:1fr}}

/* ── §9 — support box breathing room ── */
.wa-support{margin-top:30px;padding:26px 28px}
.wa-support__l{gap:12px 30px}

/* ── §11 — campaign-card legibility, scoped to the field pages only ── */
.wa-sec .deed__txt{font-size:1rem;line-height:1.8}
.wa-sec .deed__cat{font-size:.72rem}
.wa-sec .deed__where{font-size:.79rem}
.wa-sec .meter__track{height:8px;background:#EDEBE0;border-color:#D9D6C8}
.wa-sec .meter__raised{font-size:1.06rem}
.wa-sec .meter__pct{font-size:.86rem}
.wa-sec .meter__goal{font-size:.75rem;color:#4E5468}

/* ── §13 — intentional grid density ── */
.deeds--pair{grid-template-columns:repeat(2,1fr);max-width:880px;margin-inline:auto}
.deeds--solo{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
@media (max-width:700px){.deeds--pair{grid-template-columns:1fr}}

/* ── §14 — no-campaign panel: compact, warm, with a quiet field icon ── */
.wa-nc{
  display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:start;
  max-width:680px;padding:28px 30px;
}
.wa-nc__ic{width:38px;height:38px;stroke:var(--green-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.wa-nc__h{font-size:1.18rem}
.wa-nc__p{font-size:1rem}
@media (max-width:520px){.wa-nc{grid-template-columns:1fr;gap:12px}.wa-nc__ic{margin:0}}

/* ── §15 — related fields: clear affordance + focus, calmer spacing ── */
.wa-sec .mode a{min-height:44px;display:inline-flex;align-items:center}
.wa-sec .mode a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

/* ── closing band rhythm ── */
.wa-cta{padding-block:52px}


/* ══════════════════════════════════════════════════════════════════
   §70. GIVING-METHOD PAGES (Batch 65)
   ══════════════════════════════════════════════════════════════════
   The five /give/{mode} journeys: shared readability scope (.gv), the
   feeding unit-and-quantity selector (.fu), the staged in-kind request
   (.ik), and the monthly sequence + authorization (.gvflow/.gvauth).
   Scoped to these classes — homepage/work-area/other pages untouched. */

/* ── family readability ── */
.gv .sec__hd p{font-size:1.05rem;line-height:1.9}
.gv .step p{font-size:1rem;line-height:1.8}
.gv .step h3{font-size:1.12rem}
.gv .f__hint{font-size:.85rem;line-height:1.7;color:var(--muted)}
.gv .deed__txt{font-size:1rem;line-height:1.8}
.gv .eyebrow{font-size:.78rem;letter-spacing:.07em}

/* ── feeding: unit rows ── */
.fu{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.fu__row{
  display:grid;grid-template-columns:1.25fr .75fr;gap:20px 34px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;
}
.fu__t{font-size:1.15rem;color:var(--navy);margin:0 0 6px;font-weight:700;line-height:1.45}
.fu__meta{margin:0 0 8px;font-size:.95rem;color:var(--body)}
.fu__meta b{font-family:var(--mono);color:var(--green-ink);font-size:1.02rem}
.fu__d{margin:0;font-size:.95rem;line-height:1.75;color:var(--muted)}
.fu__pick{display:grid;gap:10px;justify-items:stretch}
.fu__qty{
  display:grid;grid-template-columns:46px 1fr 46px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--stone-2);
}
.fu__step{
  background:transparent;border:0;font-size:1.3rem;color:var(--navy);cursor:pointer;
  min-height:46px;transition:background .15s;
}
.fu__step:hover{background:var(--green-pale)}
.fu__step:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.fu__n{
  border:0;background:transparent;text-align:center;font-family:var(--mono);
  font-size:1.1rem;font-weight:600;color:var(--navy);min-height:46px;width:100%;
}
.fu__n:focus{outline:2px solid var(--navy);outline-offset:-2px}
.fu__tot{margin:0;font-size:.95rem;color:var(--body);text-align:center}
.fu__tot b{font-family:var(--mono);font-size:1.15rem;color:var(--navy)}
.fu__go{justify-self:stretch;text-align:center}
.fu__more{font-size:.85rem;color:var(--navy);text-align:center;border-bottom:1px solid var(--line);padding-bottom:1px;justify-self:center}
.fu__more:hover{border-color:var(--green)}
.fu__flex{
  margin-top:24px;background:var(--stone-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);padding:24px 26px;max-width:680px;
}
.fu__flex h3{font-size:1.1rem;color:var(--navy);margin:0 0 8px}
.fu__flex p{margin:0 0 12px;font-size:.97rem;line-height:1.8;color:var(--body)}
.fu__flex ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fu__flex a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.fu__flex a:hover{border-color:var(--green)}
.fu__flex span{color:var(--muted);font-size:.9rem}
@media (max-width:760px){
  .fu__row{grid-template-columns:1fr;gap:16px}
  .fu__pick{max-width:340px}
}

/* ── in-kind: staged request ── */
.ik__steps{
  list-style:none;display:flex;gap:8px;margin:0 0 22px;padding:0;flex-wrap:wrap;
}
.ik__steps li{
  font-size:.82rem;color:var(--muted);background:var(--stone-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  counter-increment:ikstep;
}
.ik__steps li.is-on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.ik__fs{border:0;margin:0;padding:0;min-inline-size:auto}
.ik__lg{
  font-family:var(--ar-display);font-size:1.1rem;font-weight:700;color:var(--navy);
  padding:0;margin-bottom:16px;
}
.ik__rev{margin:0 0 16px;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ik__rev>div{
  display:grid;grid-template-columns:130px 1fr;gap:14px;padding:11px 16px;
  border-block-end:1px solid var(--line);background:var(--stone-2);
}
.ik__rev>div:last-child{border-block-end:0}
.ik__rev dt{font-size:.82rem;color:var(--muted);font-weight:600}
.ik__rev dd{margin:0;font-size:.95rem;color:var(--navy);overflow-wrap:anywhere}
.ik__nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:520px){.ik__rev>div{grid-template-columns:1fr;gap:3px}}

/* ── monthly: sequence + authorization ── */
.gvflow{position:relative;list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gvflow::before{content:'';position:absolute;z-index:0;top:20px;inset-inline:11%;height:2px;background:rgba(41,35,105,.18)}
.gvflow__s{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;cursor:default}
.gvflow__n{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-weight:700;font-size:1rem;
  background:var(--white);color:var(--navy);border:2px solid rgba(41,35,105,.26);
}
.gvflow__s--start .gvflow__n{background:var(--green);border-color:var(--green);color:#0F2E06}
.gvflow__s--end .gvflow__n{background:var(--navy);border-color:var(--navy);color:#fff}
.gvflow__s h3{font-size:1.05rem;color:var(--navy);margin:0 0 6px;font-weight:600;line-height:1.45}
.gvflow__s p{margin:0;font-size:.95rem;line-height:1.75;color:var(--body);max-width:26ch}
@media (max-width:860px){
  .gvflow{grid-template-columns:1fr;gap:0}
  .gvflow::before{display:none}
  .gvflow__s{flex-direction:row;align-items:flex-start;text-align:start;padding-bottom:22px}
  .gvflow__s:last-child{padding-bottom:0}
  .gvflow__s:not(:last-child)::after{
    content:'';position:absolute;z-index:0;width:2px;background:rgba(41,35,105,.18);
    top:40px;bottom:0;inset-inline-start:19px;
  }
  .gvflow__s p{max-width:none}
  .gvflow__s > div{padding-top:6px}
}
.gvauth{
  margin-top:30px;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-inline-start:3px solid var(--green);
  border-radius:var(--r);padding:26px 28px;
}
.gvauth h3{font-size:1.12rem;color:var(--navy);margin:0 0 12px;font-weight:700}
.gvauth__l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gvauth__l li{
  position:relative;padding-inline-start:26px;font-size:.98rem;line-height:1.8;color:var(--body);
}
.gvauth__l li::before{
  content:'';position:absolute;inset-inline-start:0;top:9px;width:14px;height:14px;
  border-radius:50%;border:2px solid var(--green);
}
.gvauth__l b{color:var(--navy)}
.gvauth__act{display:grid;gap:10px;justify-items:center;text-align:center}
@media (max-width:820px){.gvauth{grid-template-columns:1fr}}


/* ══════════════════════════════════════════════════════════════════
   §71. ZAKAT JOURNEY (Batch 66)
   ══════════════════════════════════════════════════════════════════
   Zakat-page-only: grouped calculator fieldsets with contextual guidance,
   the indicative result hierarchy with a gated transitional CTA, the
   compact governance block, and the eligible-campaign cards that receive
   the calculated amount. Scoped to .zfs/.zres/.zgov/.zc*/.zcarry. */

/* ── calculator: grouped fields + guidance beside the decision ── */
.zfs{border:0;margin:0 0 22px;padding:0;min-inline-size:auto}
.zfs:last-of-type{margin-bottom:0}
.zfs__lg{
  font-family:var(--ar-display);font-size:1.05rem;font-weight:700;color:var(--navy);
  padding:0;margin-bottom:14px;
}
.zfs + .zfs{border-top:1px solid var(--line);padding-top:20px}
.zctx{
  margin:10px 0 0;padding:12px 14px;font-size:.9rem;line-height:1.75;color:var(--body);
  background:var(--green-pale);border:1px solid rgba(125,193,72,.35);border-radius:var(--r);
}
.zctx b{color:var(--navy)}
.zmore{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--stone-2)}
.zmore summary{
  cursor:pointer;padding:13px 16px;font-weight:600;color:var(--navy);font-size:.95rem;
  list-style-position:inside;
}
.zmore summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;border-radius:var(--r)}
.zmore__bd{padding:0 16px 14px}
.zmore__bd p{margin:0 0 10px;font-size:.92rem;line-height:1.8;color:var(--body)}
.zmore__bd p:last-child{margin-bottom:0}
.zmore__bd b{color:var(--navy)}

/* ── result: indicative hierarchy + gated transition ── */
.zres .sum__tot b{font-size:1.5rem}
.zres .sum__l span:first-child{font-size:.85rem}
#zGo.is-off{
  background:var(--stone-2);color:var(--muted);border:1px solid var(--line);
  box-shadow:none;cursor:not-allowed;
}
#zGo.is-off:hover{transform:none;background:var(--stone-2)}
#zGo:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ── governance: compact readable rows, not icon confetti ── */
.zgov{max-width:760px}
.zgov__h{font-size:1.35rem;font-weight:var(--w-bold);color:var(--navy);margin:0 0 16px;letter-spacing:-.012em}
.zgov__l{list-style:none;margin:0;padding:0;display:grid;gap:0}
.zgov__l li{
  padding:14px 2px;border-block-end:1px solid var(--line);
  font-size:1rem;line-height:1.85;color:var(--body);
}
.zgov__l li:first-child{border-block-start:1px solid var(--line)}
.zgov__l b{color:var(--navy)}

/* ── carry chip ── */
.zcarry{
  margin:0 0 22px;padding:14px 18px;max-width:760px;
  background:var(--green-pale);border:1px solid rgba(125,193,72,.4);border-radius:var(--r);
  font-size:.97rem;line-height:1.8;color:var(--body);
}
.zcarry b{font-family:var(--mono);color:var(--green-ink);font-size:1.1rem}

/* ── eligible-campaign cards ── */
.zcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.zcards--pair{grid-template-columns:repeat(2,1fr);max-width:880px;margin-inline:auto}
.zcards--solo{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
.zc{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.zc__img{position:relative;height:170px;margin:0;background:linear-gradient(150deg,var(--navy),var(--ink))}
.zc__bd{padding:18px 20px 14px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.zc__chip{
  font-size:.72rem;font-weight:600;color:var(--green-ink);background:var(--green-pale);
  border:1px solid rgba(125,193,72,.4);border-radius:999px;padding:4px 12px;margin-bottom:10px;
}
.zc__cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin:0 0 7px}
.zc__t{font-size:1.1rem;font-weight:700;color:var(--navy);line-height:1.5;margin:0 0 8px}
.zc__d{margin:0;font-size:.95rem;line-height:1.75;color:var(--body)}
.zc__bd .meter{width:100%}
.zc__act{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line);
}
.zc__act .btn{flex:1;min-width:0;text-align:center}
.zc__more{font-size:.85rem;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap}
.zc__more:hover{border-color:var(--green)}
.zc-empty{
  max-width:640px;background:var(--stone-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);padding:26px 28px;
}
.zc-empty h3{font-size:1.15rem;color:var(--navy);margin:0 0 8px}
.zc-empty p{margin:0 0 16px;font-size:.97rem;line-height:1.8;color:var(--body)}
@media (max-width:900px){.zcards{grid-template-columns:1fr}.zcards--pair{grid-template-columns:1fr;max-width:520px}}


/* ══════════════════════════════════════════════════════════════════
   §72. ZAKAT RECOMPOSITION (Batch 67)
   ══════════════════════════════════════════════════════════════════
   Visual rebuild of the zakat page on the B66 journey. All selectors are
   zakat-scoped (.ghero--zakat / .zk* / .zbridge / .zgov3 / .zc*). */

/* ── hero: contained split, no circular watermark, tighter gap ── */
.ghero--zakat{padding-block:26px 42px}
.ghero--zakat .ghero__mark{display:none}   /* the overlapping-circles motif read as decoration/gender symbol */
.ghero--zakat .ghero__grid{grid-template-columns:54fr 42fr;gap:44px;margin-top:14px;align-items:center}
.ghero--zakat .crumb{font-size:.8rem}
.ghero--zakat .phero__lede{font-size:1.08rem;line-height:1.9;max-width:50ch;margin-top:14px}
.ghero--zakat .ghero__cta{margin-top:24px}
.ghero--zakat .ghero__alt{font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
.ghero--zakat .ghero__fig::after{display:none}
.ghero--zakat .ghero__fig img{max-height:440px;aspect-ratio:5/4}

/* ── the calculator surface: one confident container ── */
.zk{
  margin-top:6px;background:var(--stone);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 36px;
}
.zk__grid{display:grid;grid-template-columns:64fr 36fr;gap:40px;align-items:start}
.zk__form{min-width:0}
.zk__fs{border:0;margin:0;padding:0 0 26px;min-inline-size:auto}
.zk__fs + .zk__fs{border-top:1px solid var(--line);padding-top:24px}
.zk__lg{
  display:flex;align-items:center;gap:10px;padding:0;margin-bottom:18px;
  font-family:var(--ar-display);font-size:1.15rem;font-weight:700;color:var(--navy);
}
.zk__lg bdi{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:.9rem;font-weight:700;
  background:var(--white);border:1.5px solid rgba(41,35,105,.3);
}
.zk__lg em{font-style:normal;font-size:.85rem;font-weight:400;color:var(--muted)}
.zk__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zk__f{margin-bottom:18px}
.zk__f:last-child{margin-bottom:0}
.zk__f>label{font-size:1rem;font-weight:600;margin-bottom:9px}
.zk__f .f__hint{font-size:.88rem;line-height:1.7}
/* unit-suffixed inputs */
.zin{position:relative;display:block}
.zin input{
  min-height:52px;font-size:1.1rem;padding:13px 16px;padding-inline-end:58px;
  background:var(--white);border:1px solid #CFCCBF;
}
.zin input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,35,105,.12)}
.zin__u{
  position:absolute;inset-block:1px;inset-inline-end:1px;width:50px;
  display:grid;place-items:center;font-style:normal;
  font-size:.82rem;color:var(--muted);background:var(--stone-2);
  border-inline-start:1px solid var(--line);
  border-start-end-radius:var(--r);border-end-end-radius:var(--r);pointer-events:none;
}
/* live nisab beside the price */
.zk__nisab{
  display:flex;align-items:center;gap:.5rem;margin:10px 0 0;
  padding:10px 14px;font-size:.92rem;color:var(--body);
  background:var(--green-pale);border:1px solid rgba(125,193,72,.4);border-radius:var(--r);
}
.zk__nisab svg{width:16px;height:16px;stroke:var(--green-ink);fill:none;stroke-width:2.4;flex:none}
.zk__nisab b{font-family:var(--mono);color:var(--navy)}
.zk .zmore{background:var(--white)}

/* ── result: a decision surface ── */
.zk__res{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 22px;box-shadow:var(--sh-sm);
  position:sticky;top:calc(var(--hd-h) + 16px);
}
.zk__res-h{font-size:1.02rem;font-weight:700;color:var(--navy);margin:0 0 14px;line-height:1.5}
.zk__status{
  display:flex;gap:.55rem;align-items:flex-start;margin:0 0 14px;
  padding:11px 13px;border-radius:var(--r);font-size:.9rem;line-height:1.7;
  background:var(--stone-2);border:1px solid var(--line);color:var(--body);
}
.zk__status svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--muted);stroke-width:2}
.zk__status[data-state="below"]{background:#FBF6E8;border-color:#EAD9A8}
.zk__status[data-state="below"] svg{stroke:#9A7B1E}
.zk__status[data-state="due"]{background:var(--green-pale);border-color:rgba(125,193,72,.45)}
.zk__status[data-state="due"] svg{stroke:var(--green-ink)}
.zk__amt{
  margin:0 0 16px;display:flex;align-items:baseline;gap:.35rem;
}
.zk__amt b{
  font-family:var(--mono);font-weight:700;color:var(--navy);line-height:1;
  font-size:clamp(2rem,3vw,3.2rem);letter-spacing:-.02em;
}
.zk__amt em{font-style:normal;font-size:1rem;color:var(--muted)}
.zk__brk{margin:0 0 14px;display:grid;gap:0;border-top:1px solid var(--line)}
.zk__brk>div{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 2px;border-bottom:1px solid var(--line);
}
.zk__brk dt{font-size:.88rem;color:var(--body)}
.zk__brk dd{margin:0;font-family:var(--mono);font-size:.95rem;color:var(--navy);white-space:nowrap}
.zk__frm{margin:0 0 6px;font-size:.82rem;color:var(--muted);line-height:1.7}
.zk__act{margin-top:14px}
.zk__act .f__hint{margin-top:8px;text-align:center}
.zk__reset{
  display:block;width:100%;margin-top:10px;background:transparent;border:0;cursor:pointer;
  font-family:var(--ar-body);font-size:.88rem;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;padding:8px;min-height:40px;
}
.zk__reset:hover{color:var(--navy)}
.zk__reset:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.zk__lim{margin:12px 0 0;font-size:.82rem;line-height:1.75;color:var(--muted);text-align:center}
#zGo.is-off{
  background:var(--stone-2);color:var(--muted);border:1px solid var(--line);
  box-shadow:none;cursor:not-allowed;
}
#zGo.is-off:hover{transform:none;background:var(--stone-2)}
#zGo:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ── bridge: calculation → selection ── */
.zbridge{
  margin:0 0 26px;display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:center;
  background:var(--navy);color:#fff;border-radius:var(--r);padding:22px 26px;
}
.zbridge__amt{display:grid;gap:2px}
.zbridge__amt span{font-size:.82rem;color:rgba(255,255,255,.75)}
.zbridge__amt b{font-family:var(--mono);font-size:1.7rem;font-weight:700;line-height:1.1}
.zbridge__amt em{font-style:normal;font-size:.9rem;color:rgba(255,255,255,.75)}
.zbridge__txt{margin:0;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.88);max-width:56ch}
.zbridge__edit{
  font-size:.9rem;font-weight:600;color:#fff;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
  min-height:44px;display:inline-flex;align-items:center;
}
.zbridge__edit:hover{border-color:var(--green);color:var(--green)}
@media (max-width:760px){.zbridge{grid-template-columns:1fr}}

/* ── compact governance inside the journey ── */
.zgov3{margin:0 0 30px;padding:22px 26px;background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r)}
.zgov3__h{font-size:1.08rem;font-weight:700;color:var(--navy);margin:0 0 14px}
.zgov3__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zgov3__l li{display:grid;gap:5px;position:relative;padding-inline-start:24px}
.zgov3__l li::before{
  content:'';position:absolute;inset-inline-start:0;top:6px;width:12px;height:12px;
  border-radius:50%;border:2.5px solid var(--green);
}
.zgov3__l b{font-size:.98rem;color:var(--navy)}
.zgov3__l span{font-size:.9rem;line-height:1.75;color:var(--body)}
@media (max-width:820px){.zgov3__l{grid-template-columns:1fr}}

/* ── selection cards: larger scale + deliberate no-photo fallback ── */
.zc__img{height:196px}
.zc__bd{padding:20px 22px 16px}
.zc__t{font-size:1.2rem}
.zc__d{font-size:1rem;line-height:1.8}
.zc__cat{font-size:.74rem}
.zc__chip{font-size:.78rem;padding:5px 13px}
.zc__act{padding:16px 22px}
.zc__act .btn{min-height:46px}
.zc__more{font-size:.9rem;min-height:44px;display:inline-flex;align-items:center}
.zc .meter__track{height:8px;background:#EDEBE0;border-color:#D9D6C8}
.zc .meter__raised{font-size:1.05rem}
.zc .meter__pct{font-size:.86rem}
.zc .meter__goal{font-size:.75rem;color:#4E5468}
.zc:hover{border-color:#C4CFB6;box-shadow:var(--sh-sm)}
.zc:focus-within{border-color:var(--navy)}
/* richer layered fallback when a card has no photograph (education case):
   tonal rings + soft radial behind the category glyph, same proportions —
   reusable for any zc card without a cover. */
.zc .cimg{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(125,193,72,.16), transparent 55%),
    linear-gradient(150deg,var(--navy) 0%,var(--ink) 100%);
}
.zc .cimg__fb::before{
  content:'';position:absolute;inset-inline-end:-46px;inset-block-start:-46px;
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 34px rgba(255,255,255,.05),0 0 0 72px rgba(255,255,255,.03);
  pointer-events:none;
}
.zc .cimg__ic{width:52px;height:52px;stroke:rgba(255,255,255,.75)}
.zc .cimg__lb{font-size:.95rem;color:rgba(255,255,255,.85)}

/* ── responsive: one column, result after inputs, sticky off ── */
@media (max-width:980px){
  .zk{padding:24px 20px}
  .zk__grid{grid-template-columns:1fr;gap:26px}
  .zk__res{position:static;box-shadow:none}
  .zk__row{grid-template-columns:1fr}
  .ghero--zakat .ghero__grid{grid-template-columns:1fr;gap:24px}
}

/* §72 refinement pass (after visual inspection of the rendered page):
   1) dir="ltr" numeric inputs resolve padding-inline-end to their own right,
      so values slid under the unit chip (which sits physically LEFT on this
      RTL page) — fix with physical padding + an LTR-site override.
   2) rhythm: the calculator section is white so the stone .zk surface reads
      as a real surface; the selection journey returns to the stone body with
      white cards/governance on top. */
.zin input{padding-left:60px;padding-right:16px}
html[dir="ltr"] .zin input{padding-left:16px;padding-right:60px}
.zgov3{background:var(--white)}
.zbridge{box-shadow:var(--sh-sm)}


/* ══════════════════════════════════════════════════════════════════
   §73. ZAKAT VISUAL WEIGHT (Batch 68)
   ══════════════════════════════════════════════════════════════════
   Hierarchy through scale, surface contrast and typography — no new
   components. The calculator fills the container and splits into a light
   input side and a DEEP NAVY result surface; the initial state is designed;
   step markers, inputs and all functional copy scale up; pale green retreats
   to actions/progress/eligibility; cards gain labelled financial rows.
   Zakat-scoped (.ghero--zakat / .zk* / .zgov3 / .zc*). */

/* ── hero: more presence, grouped actions, warm frame (no shapes) ── */
.ghero--zakat{padding-block:30px 52px}
.ghero--zakat .ghero__grid{grid-template-columns:53fr 44fr;gap:52px}
.ghero--zakat .phero__h{font-size:clamp(2rem,3.4vw,2.9rem)}
.ghero--zakat .phero__lede{font-size:1.14rem;line-height:1.9;color:#3A4055;max-width:48ch}
.ghero--zakat .ghero__cta--group{
  display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:8px 8px 8px 0;
}
.ghero--zakat .ghero__alt{font-size:1rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:2px}
.ghero--zakat .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
.ghero__cue{
  display:flex;align-items:center;gap:.5rem;margin:20px 0 0;
  font-size:.95rem;color:var(--muted);line-height:1.7;
}
.ghero__cue svg{width:17px;height:17px;stroke:var(--green-ink);fill:none;stroke-width:1.8;flex:none}
/* warm/gold tonal frame behind the photo — a surface, not an ornament */
.ghero--zakat .ghero__fig{padding:14px;background:linear-gradient(150deg,#EFE7D4 0%,#E7E3D2 100%);border-radius:var(--r)}
.ghero--zakat .ghero__fig img{max-height:480px;aspect-ratio:4/3;border:0;border-radius:2px}

/* ── calculator: fill the container, stronger two-side contrast ── */
.zk{padding:0;background:transparent;border:0;border-radius:0;overflow:visible}
.zk__grid{grid-template-columns:58fr 42fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.zk__form{background:#FCFBF7;padding:34px 36px 30px}
.zk__fs{padding:0 0 30px}
.zk__fs + .zk__fs{padding-top:30px}
.zk__lg{font-size:1.22rem;gap:13px;margin-bottom:20px}
.zk__lg bdi{
  width:38px;height:38px;font-size:1.02rem;
  background:var(--navy);color:#fff;border:0;
}
.zk__lg em{font-size:.9rem}
.zk__f>label{font-size:1.04rem;font-weight:600;margin-bottom:10px}
.zk__f .f__hint{font-size:.92rem;line-height:1.7;color:#5A6076}
.zin input{min-height:56px;font-size:1.18rem;border-color:#C6C2B2}
.zin__u{width:54px;font-size:.88rem;color:var(--navy);background:#F1EFE6}
/* the nisab driver gets a restrained gold accent */
.zk__f--gold{
  padding:18px 18px 16px;border-radius:var(--r);
  background:linear-gradient(180deg,#FBF6E9 0%,#FAF8F1 100%);
  border:1px solid #E6D9B4;border-inline-start:3px solid #C9A34A;
}
.zk__f--gold>label{color:#6B5312}
.zk__f--gold .zin__u{background:#F4E9CE;color:#6B5312;border-inline-start-color:#E6D9B4}
.zk__nisab{background:var(--white);border-color:#E6D9B4}
.zk__nisab svg{stroke:#9A7B1E}
.zk .zmore{background:var(--white);margin-top:8px}
.zk .zmore summary{font-size:1rem;padding:15px 18px}
.zk .zmore__bd p{font-size:.96rem}

/* ── result: deep-navy decision surface ── */
.zk__res{
  position:sticky;top:calc(var(--hd-h) + 16px);align-self:start;
  background:linear-gradient(170deg,var(--navy) 0%,var(--ink) 100%);
  color:#fff;border:0;border-radius:0;box-shadow:none;
  padding:34px 34px 30px;
}
.zk__res-h{color:#fff;font-size:1.12rem;margin-bottom:20px}
/* designed initial state */
.zk__init{text-align:center;padding:10px 0 4px}
.zk__init-ic{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 18px;
  border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.zk__init-ic svg{width:36px;height:36px;fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.4;stroke-linecap:round}
.zk__init-t{margin:0 0 8px;font-family:var(--ar-display);font-size:1.15rem;font-weight:600;color:#fff}
.zk__init-d{margin:0 0 20px;font-size:.98rem;line-height:1.85;color:rgba(255,255,255,.72)}
.zk__init-go{
  background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;cursor:pointer;
  font-family:var(--ar-body);font-size:.96rem;font-weight:600;
  padding:12px 22px;border-radius:var(--r);min-height:46px;transition:background .18s,border-color .18s;
}
.zk__init-go:hover{background:rgba(255,255,255,.1);border-color:#fff}
.zk__init-go:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* live face: muted until there is a real calculation */
.zk__res[data-ready="false"] .zk__live{display:none}
.zk__res[data-ready="true"] .zk__init{display:none}
.zk__status{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.9);font-size:.95rem}
.zk__status svg{stroke:rgba(255,255,255,.6)}
.zk__status[data-state="below"]{background:rgba(233,199,105,.14);border-color:rgba(233,199,105,.42)}
.zk__status[data-state="below"] svg{stroke:#E9C769}
.zk__status[data-state="due"]{background:rgba(125,193,72,.16);border-color:rgba(125,193,72,.45)}
.zk__status[data-state="due"] svg{stroke:var(--green)}
.zk__amt{margin:18px 0;align-items:baseline}
.zk__amt b{color:#fff;font-size:clamp(2.6rem,4.4vw,4.2rem)}
.zk__amt em{color:rgba(255,255,255,.65);font-size:1.05rem}
.zk__res[data-ready="true"] .zk__status[data-state="due"] ~ .zk__amt b{color:var(--green)}
.zk__brk{border-top-color:rgba(255,255,255,.16)}
.zk__brk>div{border-bottom-color:rgba(255,255,255,.14);padding:11px 2px}
.zk__brk dt{color:rgba(255,255,255,.72);font-size:.95rem}
.zk__brk dd{color:#fff;font-size:1.02rem}
.zk__frm{color:rgba(255,255,255,.6);font-size:.88rem}
.zk__err{color:#FFC9BE}
.zk__act{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.zk__why{margin:10px 0 0;text-align:center;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.68)}
.zk__lim{color:rgba(255,255,255,.55);font-size:.86rem;margin-top:14px}
.zk__reset{color:rgba(255,255,255,.7);font-size:.92rem}
.zk__reset:hover{color:#fff}
.zk__reset:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#zGo.is-off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.22)}
#zGo.is-off:hover{background:rgba(255,255,255,.1)}
#zGo:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ── governance: substantial, not a thin strip ── */
.zgov3{padding:30px 32px;margin-bottom:34px;background:var(--stone-2)}
.zgov3__h{font-size:1.28rem;margin-bottom:6px}
.zgov3__intro{margin:0 0 22px;font-size:1.02rem;line-height:1.8;color:var(--body)}
.zgov3__l{gap:28px}
.zgov3__l li{padding-inline-start:0}
.zgov3__l li::before{display:none}
.zgov3__l b{
  display:flex;align-items:center;gap:.55rem;font-size:1.08rem;margin-bottom:6px;
}
.zgov3__l b::before{
  content:'';width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--green-pale);border:1.5px solid rgba(125,193,72,.55);
}
.zgov3__l span{font-size:.98rem;line-height:1.85}

/* ── cards: room to compare ── */
.zcards{gap:26px}
.zc{background:var(--white);border-color:#DCD9CC;box-shadow:var(--sh-sm)}
.zc:hover{border-color:#C4CFB6;box-shadow:var(--sh-md)}
.zc:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,35,105,.14)}
.zc__img{height:208px}
.zc__bd{padding:22px 24px 18px}
.zc__t{font-size:1.28rem;line-height:1.45}
.zc__d{font-size:1.02rem;line-height:1.8;color:var(--body)}
.zc__cat{font-size:.8rem;letter-spacing:.04em}
.zc__chip{font-size:.82rem;padding:6px 14px}
/* labelled financial block */
.zcfin{width:100%;margin-top:18px}
.zcfin__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.zcfin__k{font-size:.88rem;color:var(--muted)}
.zcfin__v{font-family:var(--mono);font-size:1.3rem;font-weight:700;color:var(--navy)}
.zcfin__v em{font-style:normal;font-size:.72rem;color:var(--muted);margin-inline-start:2px}
.zcfin__bar{height:10px;background:#EDEBE0;border:1px solid #D9D6C8;border-radius:999px;overflow:hidden}
.zcfin__bar span{display:block;height:100%;background:var(--green);border-radius:999px}
.zcfin__pct{margin:8px 0 12px;font-size:.9rem;color:var(--body)}
.zcfin__pct b{font-family:var(--mono);color:var(--green-ink);font-size:1rem}
.zcfin__pair{display:flex;gap:22px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.zcfin__pair span{display:grid;gap:2px}
.zcfin__pair i{font-style:normal;font-size:.8rem;color:var(--muted)}
.zcfin__pair b{font-family:var(--mono);font-size:.98rem;color:var(--navy);font-weight:600}
.zc__act{padding:18px 24px;gap:12px}
.zc__act .btn{min-height:50px;font-size:1rem}
.zc__more{font-size:.95rem}
/* richer editorial fallback for cards without photography */
.zc .cimg{
  background:
    radial-gradient(120% 90% at 76% 16%, rgba(201,163,74,.22), transparent 58%),
    linear-gradient(150deg,var(--navy) 0%,var(--ink) 100%);
}
.zc .cimg__fb{gap:14px}
.zc .cimg__fb::after{
  content:'';position:absolute;inset-inline:26%;bottom:28px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,163,74,.55),transparent);
}
.zc .cimg__ic{width:58px;height:58px;stroke:rgba(255,255,255,.82);stroke-width:1.2}
.zc .cimg__lb{font-size:1.05rem;font-weight:600;color:#fff;letter-spacing:.02em}

/* ── responsive ── */
@media (max-width:1080px){
  .zk__grid{grid-template-columns:1fr}
  .zk__res{position:static}
  .zk__form{padding:26px 22px}
  .zk__res{padding:28px 22px}
  .zk__row{grid-template-columns:1fr}
  .ghero--zakat .ghero__grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .zk__form,.zk__res{padding:22px 18px}
  .zk__lg{font-size:1.12rem}
  .zk__amt b{font-size:2.4rem}
}

/* §73 refinement (after inspecting the render): the sticky result panel did not
   fill its grid column, leaving raw white below the navy — the column now
   stretches (navy full height) while an inner wrapper carries the stickiness.
   Also tightens the calculator→campaigns hand-off. */
.zk__res{align-self:stretch;position:static;padding:0}
.zk__inner{position:sticky;top:calc(var(--hd-h) + 16px);padding:34px 34px 30px}
#calculator.sec{padding-bottom:58px}
#zcamps.sec{padding-top:58px}
@media (max-width:1080px){.zk__inner{position:static;padding:28px 22px}}
@media (max-width:560px){.zk__inner{padding:22px 18px}}
/* §73: bridge amount carries the result's green for visual continuity */
.zbridge__amt b{font-size:2rem;color:var(--green)}
.zbridge{padding:24px 28px}


/* ══════════════════════════════════════════════════════════════════
   §74. ZAKAT FINAL PASS (Batch 69)
   ══════════════════════════════════════════════════════════════════
   Two corrections from the final review + my own read of the render:
   (1) the navy result panel's lower dead space — the column still fills
       (no white gap) but the content is now DISTRIBUTED: heading/status/
       amount/breakdown at the top, the action block pinned to the bottom
       edge, which is also the better place for a decision action. Sticky is
       dropped because the panel and the form are near-equal height, so it
       never actually travelled — distribution beats a no-op offset.
   (2) secondary-text contrast raised across helper, breakdown, governance
       and card metadata — contrast only, no size changes. */

/* (1) distribute the panel vertically instead of leaving a dark void */
.zk__inner{position:static;display:flex;flex-direction:column;min-height:100%}
.zk__act{margin-top:auto}
.zk__init{padding-top:18px}

/* (2) secondary text: darker, still clearly secondary */
.zk__f .f__hint{color:#4A5065}
.gv .sec__hd p{color:#454B60}
.ghero__cue{color:#4A5065}
.zk__brk dt{color:rgba(255,255,255,.84)}
.zk__frm{color:rgba(255,255,255,.72)}
.zk__why{color:rgba(255,255,255,.8)}
.zk__lim{color:rgba(255,255,255,.68)}
.zk__reset{color:rgba(255,255,255,.82)}
.zk__init-d{color:rgba(255,255,255,.84)}
.zk__status{color:rgba(255,255,255,.94)}
.zbridge__txt{color:rgba(255,255,255,.94)}
.zbridge__amt span{color:rgba(255,255,255,.85)}
.zgov3__intro{color:#3A4055}
.zgov3__l span{color:#3A4055}
.zc__cat{color:#4A5065}
.zc__d{color:#3A4055}
.zcfin__k{color:#4A5065}
.zcfin__pct{color:#3A4055}
.zcfin__pair i{color:#4A5065}
.zc__more{color:var(--navy)}


/* ══════════════════════════════════════════════════════════════════
   §75. SADAQA JARIYA RECOMPOSITION (Batch 70)
   ══════════════════════════════════════════════════════════════════
   Projects-first rebuild on the approved zakat grammar. Scoped to
   .ghero--sadaqa-jariya / .sjflow / .sjded; the projects reuse the shared
   .zcards/.zc/.zcfin selection cards unchanged, so nothing here touches
   other give pages. Three moves the review asked for:
     (1) quieter hero — no circular watermark, no green corner rule, grouped
         actions and a real secondary link (matching zakat's hero weight);
     (2) ONE compact navy journey band — replaces the old purple .dual split;
     (3) a single dedication note instead of a duplicated explanatory panel. */

/* ── (1) hero: quieter, grouped actions ── */
.ghero--sadaqa-jariya{padding-block:30px 52px}
.ghero--sadaqa-jariya .ghero__mark{display:none}      /* pale decorative symbol removed */
.ghero--sadaqa-jariya .ghero__fig::after{display:none} /* green corner rule removed */
.ghero--sadaqa-jariya .ghero__grid{grid-template-columns:53fr 44fr;gap:52px}
.ghero--sadaqa-jariya .phero__h{font-size:clamp(2rem,3.4vw,2.9rem)}
.ghero--sadaqa-jariya .phero__lede{font-size:1.14rem;line-height:1.9;color:#3A4055;max-width:48ch}
.ghero--sadaqa-jariya .ghero__cta--group{
  display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:8px 8px 8px 0;
}
.ghero--sadaqa-jariya .ghero__alt{
  font-size:1rem;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.ghero--sadaqa-jariya .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
/* clean framed photo — a surface, not an ornament */
.ghero--sadaqa-jariya .ghero__fig{padding:14px;background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r)}
.ghero--sadaqa-jariya .ghero__fig img{max-height:480px;aspect-ratio:4/3;border:0;border-radius:2px}

/* ── (2) compact journey: one solid-navy band ── */
.sjflow{
  background:linear-gradient(170deg,var(--navy) 0%,var(--ink) 100%);
  color:#fff;border-radius:var(--r);padding:34px 36px;box-shadow:var(--sh-sm);
}
.sjflow__hd{margin-bottom:22px}
.sjflow__eyebrow{
  margin:0 0 6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);
}
.sjflow__h{margin:0;font-family:var(--ar-display);font-size:1.5rem;font-weight:700;color:#fff;line-height:1.4}
.sjflow__l{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.sjflow__s{
  display:flex;gap:14px;align-items:flex-start;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
}
.sjflow__n{flex:none}
.sjflow__n bdi{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-family:var(--mono);font-size:1.02rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.32);
}
.sjflow__s h3{margin:0 0 6px;font-size:1.08rem;font-weight:700;color:#fff;line-height:1.4}
.sjflow__s p{margin:0;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.82)}
@media (max-width:820px){
  .sjflow{padding:26px 22px}
  .sjflow__l{grid-template-columns:1fr;gap:0}
  .sjflow__s{padding:18px 0}
  .sjflow__s:first-child{padding-top:0;border-top:0}
}

/* ── (3) dedication note: one calm band ── */
.sjded{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--stone-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);
  padding:26px 30px;max-width:820px;
}
.sjded__ic{
  flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--green-pale);border:1px solid rgba(125,193,72,.4);
}
.sjded__ic svg{width:26px;height:26px;fill:none;stroke:var(--green-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sjded__bd h3{margin:0 0 8px;font-size:1.18rem;font-weight:700;color:var(--navy);line-height:1.45}
.sjded__bd p{margin:0;font-size:1rem;line-height:1.9;color:#3A4055;max-width:64ch}
@media (max-width:620px){
  .sjded{flex-direction:column;gap:14px;padding:22px 20px}
}

/* ── responsive: hero stacks (matches base .ghero breakpoint) ── */
@media (max-width:900px){
  .ghero--sadaqa-jariya .ghero__grid{grid-template-columns:1fr;gap:26px}
}


/* ══════════════════════════════════════════════════════════════════
   §76. SADAQA JARIYA — FINAL POLISH (Batch 71)
   ══════════════════════════════════════════════════════════════════
   Optional-polish items from the approval review, all scoped to sadaqa
   surfaces (#projects / .sjflow / #dedicate) so nothing else moves:
     · a touch more contrast on step descriptions and card metadata;
     · less white space around the dedication note, panel widened so it
       no longer floats with a large empty margin;
     · the "view all projects" link made more visible and pulled up level
       with the heading. */

/* contrast: navy journey step copy + on-sadaqa card metadata */
.sjflow__s p{color:rgba(255,255,255,.9)}
#projects .zc__cat{color:#3C4256}
#projects .zc__d{color:#333A4C}
#projects .zcfin__k,#projects .zcfin__pair i{color:#3C4256}
#projects .zcfin__pct{color:#333A4C}

/* view-all link: more visible, aligned to the heading baseline */
#projects .sec__bar{align-items:center}
#projects .sec__more{
  font-size:.95rem;font-weight:600;color:var(--green-ink);
  border-bottom-color:rgba(78,138,36,.5);
}
#projects .sec__more:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* dedication: tighter section, wider centred panel — no floating margin */
#dedicate.sec{padding-block:34px 52px}
.sjded{max-width:1000px;margin-inline:auto}


/* ══════════════════════════════════════════════════════════════════
   §77. FEEDING — ONE CONTRIBUTION BUILDER (Batch 72)
   ══════════════════════════════════════════════════════════════════
   The feeding page becomes a single unit-based builder in the approved
   family: compact warm hero → white intro → light builder → deep-navy
   summary with a dominant total → compact assurance band. All selectors
   are feeding-scoped (.ghero--feeding / .fb* / .fassure); the duplicate
   lower catalogue is gone (camps=null). Green is reserved for the primary
   action, the selected state and progress — it no longer floods the page. */

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

/* ── hero: compact, warm-neutral, no watermark / no green corner ── */
.ghero--feeding{
  background:linear-gradient(160deg,#F5F1E8 0%,#EFEADD 100%);
  padding-block:28px 40px;
}
.ghero--feeding .ghero__mark{display:none}
.ghero--feeding .ghero__fig::after{display:none}
.ghero--feeding .ghero__grid{grid-template-columns:46fr 54fr;gap:44px;align-items:center;margin-top:12px}
.ghero--feeding .phero__h{font-size:clamp(2rem,3.4vw,2.9rem)}
.ghero--feeding .phero__lede{font-size:1.14rem;line-height:1.85;color:#3A4055;max-width:46ch}
.ghero--feeding .ghero__cta--group{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:8px 8px 8px 0}
.ghero--feeding .ghero__alt{font-size:1rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:2px}
.ghero--feeding .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
.ghero--feeding .ghero__fig{padding:0;background:none;border:0}
.ghero--feeding .ghero__fig img{max-height:420px;aspect-ratio:16/11;border:1px solid var(--line);border-radius:var(--r)}

/* ── builder shell ── */
.fb{margin-top:6px}
.fb__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:26px;align-items:start}

/* ── selector: radio group, one campaign each, real selected state ── */
.fb__opts{border:0;margin:0;padding:0;min-inline-size:auto;display:flex;flex-direction:column;gap:16px}
.fb__opt{position:relative}
.fb__radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fb__card{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:14px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s;
}
.fb__card:hover{border-color:#BFC9B2;box-shadow:var(--sh-sm)}
.fb__radio:focus-visible + .fb__card{outline:2px solid var(--navy);outline-offset:3px}
.fb__radio:checked + .fb__card{
  border-color:var(--navy);background:#F6F8F2;box-shadow:0 0 0 3px rgba(41,35,105,.12);
}
.fb__img{position:relative;width:132px;height:104px;flex:none;border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,var(--navy),var(--ink))}
.fb__info{min-width:0;display:flex;flex-direction:column;gap:5px}
.fb__cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#4A5065}
.fb__t{font-size:1.2rem;font-weight:700;color:var(--navy);line-height:1.4}
.fb__d{font-size:.96rem;line-height:1.7;color:#333A4C}
.fb__unit{font-size:1rem;color:var(--body);margin-top:2px}
.fb__unit b{font-family:var(--mono);font-size:1.06rem;color:var(--navy)}
.fb__unit i{font-style:normal;color:#4A5065}
.fb__prog{display:flex;align-items:center;gap:10px;margin-top:4px}
.fb__bar{flex:1;height:8px;background:#EDEBE0;border:1px solid #D9D6C8;border-radius:999px;overflow:hidden;min-width:80px}
.fb__bar>span{display:block;height:100%;background:var(--green);border-radius:999px}
.fb__pct{font-size:.82rem;color:#333A4C;white-space:nowrap}
.fb__pct b{font-family:var(--mono);color:var(--green-ink)}
.fb__check{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s;
}
.fb__check svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fb__radio:checked + .fb__card .fb__check{opacity:1;transform:scale(1)}
.fb__more{
  display:inline-block;margin:8px 4px 0;font-size:.9rem;color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:1px;min-height:32px;
}
.fb__more:hover{border-color:var(--green);color:var(--green-ink)}

/* ── summary: deep-navy decision surface, dominant total ── */
.fb__sum{
  align-self:start;position:sticky;top:calc(var(--hd-h) + 16px);
  background:linear-gradient(170deg,var(--navy) 0%,var(--ink) 100%);
  color:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);
}
.fb__sum-in{padding:26px 26px 24px}
.fb__sum-h{color:#fff;font-size:1.16rem;margin:0 0 18px}
.fb__lines{margin:0 0 18px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.fb__lines>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.14)}
.fb__lines dt{font-size:.95rem;color:rgba(255,255,255,.82)}
.fb__lines dd{margin:0;font-size:1rem;color:#fff;text-align:end;max-width:60%}
.fb__lines .num{font-family:var(--mono)}
.fb__qtyblk{margin:4px 0 14px}
.fb__qlab{display:block;font-size:.98rem;font-weight:600;color:#fff;margin-bottom:9px}
.fb__qty{display:inline-flex;align-items:stretch;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.06)}
.fb__step{
  width:52px;min-height:52px;background:rgba(255,255,255,.06);border:0;color:#fff;cursor:pointer;
  font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:background .16s;
}
.fb__step:hover:not(:disabled){background:rgba(255,255,255,.16)}
.fb__step:disabled{opacity:.4;cursor:not-allowed}
.fb__step:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.fb__n{
  width:72px;min-height:52px;text-align:center;border:0;border-inline:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;font-family:var(--mono);font-size:1.2rem;font-weight:700;
}
.fb__n:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.fb__calc{margin:0 0 6px;font-size:.95rem;color:rgba(255,255,255,.8);font-family:var(--mono)}
.fb__totlab{margin:6px 0 2px;font-size:.9rem;color:rgba(255,255,255,.75)}
.fb__total{margin:0 0 6px;display:flex;align-items:baseline;gap:.35rem}
.fb__total b{font-family:var(--mono);font-weight:700;color:var(--green);line-height:1;font-size:clamp(2rem,3vw,3.5rem);letter-spacing:-.02em}
.fb__total em{font-style:normal;font-size:1.05rem;color:rgba(255,255,255,.7)}
.fb__bad{margin:2px 0 0;font-size:.86rem;line-height:1.6;color:#FFC9BE}
.fb__act{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
#fbGo{min-height:52px;font-size:1.05rem}
#fbGo.is-off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.22);box-shadow:none;cursor:not-allowed}
#fbGo.is-off:hover{background:rgba(255,255,255,.1);transform:none}
#fbGo:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.fb__why{margin:10px 0 0;text-align:center;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.72)}
.fb__reset{
  display:block;width:100%;margin-top:10px;background:transparent;border:0;cursor:pointer;
  font-family:var(--ar-body);font-size:.9rem;color:rgba(255,255,255,.78);text-decoration:underline;
  text-underline-offset:3px;padding:8px;min-height:40px;
}
.fb__reset:hover{color:#fff}
.fb__reset:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.fb__lim{margin:12px 0 0;font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.6);text-align:center}

/* ── flexible-amount campaigns (no fixed unit) ── */
.fb__flex{margin-top:26px;padding:22px 26px;background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r)}
.fb__flex h3{font-size:1.12rem;color:var(--navy);margin:0 0 8px}
.fb__flex p{margin:0 0 12px;font-size:.98rem;line-height:1.8;color:var(--body)}
.fb__flex ul{margin:0;padding-inline-start:18px}
.fb__flex li{margin-bottom:8px;font-size:1rem;line-height:1.7}
.fb__flex a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.fb__flex a:hover{border-color:var(--green)}

/* ── assurance band: compact, restrained markers ── */
.fassure{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.fassure__i{display:grid;gap:5px;padding-inline-start:20px;position:relative}
.fassure__i::before{content:'';position:absolute;inset-inline-start:0;top:7px;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--green)}
.fassure__i b{font-size:1.04rem;color:var(--navy)}
.fassure__i span{font-size:.98rem;line-height:1.8;color:#333A4C}
.fassure__more{margin:22px 0 0}
.fassure__more a{font-size:.98rem;font-weight:600;color:var(--green-ink);border-bottom:1px solid rgba(78,138,36,.5);padding-bottom:2px}
.fassure__more a:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* ── responsive ── */
@media (max-width:1080px){
  .fb__grid{grid-template-columns:1fr;gap:22px}
  .fb__sum{position:static}
  .ghero--feeding .ghero__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .fassure{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .fb__card{grid-template-columns:1fr;gap:12px}
  .fb__img{width:100%;height:150px}
  .fb__check{position:absolute;inset-block-start:22px;inset-inline-end:22px}
  .fb__sum-in{padding:22px 18px}
  .fb__qty,.fb__n,.fb__step{width:auto}
  .fb__qty{display:flex;width:100%}
  .fb__n{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .fb__card,.fb__check,.fb__step{transition:none}
}


/* ══════════════════════════════════════════════════════════════════
   §78. FEEDING — DETAILS LINK RECONNECTED (Batch 73)
   ══════════════════════════════════════════════════════════════════
   Review point: «عرض التفاصيل» floated in the gap between cards, so its
   ownership was unclear. The visual frame now moves from the label to the
   .fb__opt WRAPPER, and the link sits in a .fb__foot INSIDE that frame — it
   reads as part of the card while staying a sibling of the radio control
   (never nested in the selectable label). Selected/hover/focus states move
   to the wrapper; the checkmark + inner tint remain as the no-:has fallback. */

.fb__opt{
  position:relative;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .16s,box-shadow .16s;
}
.fb__opt:hover{border-color:#BFC9B2;box-shadow:var(--sh-sm)}
.fb__opt:has(.fb__radio:checked){border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,35,105,.12)}

/* the label is now just the selectable body — frame lives on the wrapper */
.fb__card{border:0;background:transparent;border-radius:0;box-shadow:none}
.fb__card:hover{border:0;box-shadow:none}
.fb__radio:focus-visible + .fb__card{outline:2px solid var(--navy);outline-offset:-3px}
.fb__radio:checked + .fb__card{border:0;box-shadow:none;background:#F6F8F2}

/* footer strip inside the card frame */
.fb__foot{
  display:flex;justify-content:flex-start;align-items:center;
  padding:9px 14px;border-top:1px solid var(--line);background:#FBFCF9;
}
.fb__radio:checked ~ .fb__foot{background:#F6F8F2;border-top-color:rgba(41,35,105,.18)}
.fb__more{
  display:inline-flex;align-items:center;margin:0;font-size:.92rem;color:var(--navy);
  border-bottom:1px solid transparent;padding-bottom:1px;min-height:32px;
}
.fb__more:hover{border-bottom-color:var(--green);color:var(--green-ink)}

@media (prefers-reduced-motion:reduce){
  .fb__opt{transition:none}
}


/* ══════════════════════════════════════════════════════════════════
   §79. IN-KIND — PICKUP-REQUEST SERVICE (Batch 74)
   ══════════════════════════════════════════════════════════════════
   The in-kind page becomes a form-centred service journey in the approved
   family: compact warm hero → white request intro + qualification → the form
   as centrepiece with a real stepper → a prominent eligibility guide beside it
   (collapsible on mobile) → a "what happens next" band. Scoped to
   .ghero--in-kind / .ik* / .elig / .ikafter. Green is reserved for actions,
   the current/done step and confirmation — pale green no longer dominates. */

/* ── hero: compact, warm-neutral, no cube / no green corner ── */
.ghero--in-kind{background:linear-gradient(160deg,#F5F1E8 0%,#EFEADD 100%);padding-block:28px 40px}
.ghero--in-kind .ghero__mark{display:none}
.ghero--in-kind .ghero__fig::after{display:none}
.ghero--in-kind .ghero__grid{grid-template-columns:46fr 54fr;gap:44px;align-items:center;margin-top:12px}
.ghero--in-kind .phero__h{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.ghero--in-kind .phero__lede{font-size:1.12rem;line-height:1.85;color:#3A4055;max-width:48ch}
.ghero--in-kind .ghero__cta--group{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:8px 8px 8px 0}
.ghero--in-kind .ghero__alt{font-size:1rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:2px}
.ghero--in-kind .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
.ghero--in-kind .ghero__fig{padding:0;background:none;border:0}
.ghero--in-kind .ghero__fig img{max-height:440px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r)}

/* ── qualification notice: submitting ≠ acceptance ── */
.ikqual{
  display:flex;gap:12px;align-items:flex-start;margin:0 0 26px;max-width:none;
  padding:15px 18px;border-radius:var(--r);
  background:#FBF6E8;border:1px solid #EAD9A8;color:#4A4326;line-height:1.8;font-size:1rem;
}
.ikqual svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:#9A7B1E;stroke-width:2}
.ikqual b{color:#6B5312}
.ikqual--sm{margin:0 0 16px;font-size:.92rem;padding:12px 15px}

/* ── layout: form (centrepiece) + eligibility guide beside ── */
.ikgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.ikform{padding:28px 30px}
.ikform .ik__lg{font-size:1.2rem;margin-bottom:18px}
.ikform .f>label{font-size:.96rem;font-weight:600;color:var(--navy);margin-bottom:8px}
.ikform .f>label em{font-size:.82rem}
.ikform .f input,.ikform .f textarea{min-height:50px;font-size:1.04rem}
.ikform .f textarea{min-height:96px}
.ikform .f__hint{font-size:.9rem;line-height:1.7;color:#4A5065}

/* ── numbered stepper ── */
.ikstep{
  list-style:none;margin:0 0 24px;padding:0 0 22px;border-bottom:1px solid var(--line);
  display:flex;gap:8px;
}
.ikstep__s{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;
}
.ikstep__s + .ikstep__s::before{
  content:'';position:absolute;top:19px;inset-inline-end:50%;width:100%;height:2px;
  background:var(--line);z-index:0;
}
.ikstep__s.is-done + .ikstep__s::before,
.ikstep__s.is-done::before{background:var(--green)}
.ikstep__n{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:2px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:1rem;font-weight:700;
}
.ikstep__s.is-on .ikstep__n{background:var(--navy);border-color:var(--navy);color:#fff}
.ikstep__s.is-done .ikstep__n{background:var(--green);border-color:var(--green);color:#14300A}
.ikstep__s.is-done .ikstep__n bdi{display:none}
.ikstep__s.is-done .ikstep__n::after{content:'✓';font-family:var(--ar-body);font-size:1.05rem;line-height:1}
.ikstep__t{font-size:.9rem;line-height:1.5;color:var(--muted);max-width:16ch}
.ikstep__s.is-on .ikstep__t{color:var(--navy);font-weight:600}
.ikstep__s.is-done .ikstep__t{color:var(--body)}
.ikstep__now{
  margin:0 0 20px;padding:12px 16px;border-radius:var(--r);
  background:var(--navy);color:#fff;font-weight:600;font-size:1rem;
}

/* ── eligibility guide (details): open on desktop, collapsible on mobile ── */
.elig{
  align-self:start;background:var(--stone-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--green);border-radius:var(--r);overflow:hidden;
}
.elig__sum{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:16px 20px;font-family:var(--ar-display);font-size:1.14rem;font-weight:700;color:var(--navy);
}
.elig__sum::-webkit-details-marker{display:none}
.elig__sum-m{display:none}
.elig__chev{width:20px;height:20px;margin-inline-start:auto;fill:none;stroke:var(--navy);stroke-width:2;transition:transform .18s}
.elig[open] .elig__chev{transform:rotate(180deg)}
.elig__bd{padding:0 20px 20px}
.elig__intro{margin:0 0 12px;font-size:.96rem;line-height:1.8;color:var(--body)}
.elig__list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.elig__list li{display:grid;gap:3px;padding-inline-start:18px;position:relative}
.elig__list li::before{content:'';position:absolute;inset-inline-start:0;top:7px;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--green)}
.elig__list b{font-size:1rem;color:var(--navy)}
.elig__list span{font-size:.92rem;line-height:1.7;color:#3A4055}
.elig__note{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.75;color:#4A5065}
/* desktop: the guide is kept open (via the `open` attribute + a small script),
   and the summary reads as a plain heading rather than a toggle */
@media (min-width:981px){
  #eligibility.elig > .elig__sum{cursor:default;pointer-events:none}
  .elig__chev{display:none}
}

/* ── confirmation: received-for-review ── */
.pane--done{display:block}
.pane--done .pane__h{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;padding-block-end:0;margin-bottom:18px}
.ikdone__badge{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:12px;
  background:var(--green-pale);border:1px solid rgba(125,193,72,.45);
}
.ikdone__badge svg{width:24px;height:24px;fill:none;stroke:var(--green-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pane--done .pane__h h2{font-size:1.24rem;line-height:1.5}
.pane--done .pane__h p{font-size:1rem;color:var(--body);line-height:1.85;margin-top:8px}

/* ── what happens after ── */
.ikafter__h{font-size:1.32rem;font-weight:700;color:var(--navy);margin:0 0 22px}
.ikafter__l{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ikafter__s{display:flex;gap:14px;align-items:flex-start}
.ikafter__n{flex:none}
.ikafter__n bdi{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-family:var(--mono);font-size:1.02rem;font-weight:700;color:#fff;background:var(--navy);
}
.ikafter__s h3{margin:0 0 5px;font-size:1.08rem;font-weight:700;color:var(--navy);line-height:1.4}
.ikafter__s p{margin:0;font-size:.96rem;line-height:1.8;color:#333A4C}
.ikafter__reuse{
  margin:8px 0 0;padding:16px 20px;border-radius:var(--r);
  background:var(--stone-2);border:1px solid var(--line);
  font-size:.96rem;line-height:1.8;color:#3A4055;
}

/* ── responsive ── */
@media (max-width:980px){
  .ikgrid{grid-template-columns:1fr;gap:20px}
  .elig{order:-1}                       /* guide before the form on mobile */
  .ghero--in-kind .ghero__grid{grid-template-columns:1fr;gap:24px}
  .elig__sum-d{display:none}
  .elig__sum-m{display:inline}
  .ikstep__t{display:none}              /* the compact "الخطوة N من ٣" line carries titles */
  .ikafter__l{grid-template-columns:1fr;gap:18px}
}
@media (min-width:981px){
  .ikstep__now{display:none}            /* full stepper carries state on desktop */
}
@media (max-width:560px){
  .ikform{padding:22px 18px}
  .ikstep{gap:4px}
  .ikstep__n{width:34px;height:34px;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .elig__chev{transition:none}
}


/* ══════════════════════════════════════════════════════════════════
   §80. MONTHLY — COMMITMENT BUILDER (Batch 76, Model B)
   ══════════════════════════════════════════════════════════════════
   The monthly page reuses the approved Feeding selector (.fb*) for the
   campaign choice and adds a monthly summary: amount presets + an honest
   "first gift now, team arranges continuation" panel. No auto-charge UI.
   Scoped to .ghero--monthly / .mb*. */

/* ── hero: compact, warm-neutral, no calendar watermark / no green corner ── */
.ghero--monthly{background:linear-gradient(160deg,#F5F1E8 0%,#EFEADD 100%);padding-block:28px 40px}
.ghero--monthly .ghero__mark{display:none}
.ghero--monthly .ghero__fig::after{display:none}
.ghero--monthly .ghero__grid{grid-template-columns:46fr 54fr;gap:44px;align-items:center;margin-top:12px}
.ghero--monthly .phero__h{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.ghero--monthly .phero__lede{font-size:1.12rem;line-height:1.85;color:#3A4055;max-width:48ch}
.ghero--monthly .ghero__cta--group{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:8px 8px 8px 0}
.ghero--monthly .ghero__alt{font-size:1rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:2px}
.ghero--monthly .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
.ghero--monthly .ghero__fig{padding:0;background:none;border:0}
.ghero--monthly .ghero__fig img{max-height:440px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r)}

/* ── card status chip ── */
.mb__chip{
  align-self:flex-start;margin-top:2px;font-size:.76rem;font-weight:600;color:var(--green-ink);
  background:var(--green-pale);border:1px solid rgba(125,193,72,.4);border-radius:999px;padding:3px 11px;
}

/* ── summary: amount presets + custom ── */
.mb__amtblk{margin:6px 0 14px}
.mb__amtlab{margin:0 0 9px;font-size:.98rem;font-weight:600;color:#fff}
.mb__chips{display:flex;gap:8px;flex-wrap:wrap}
.mb__amt{
  flex:1;min-width:74px;min-height:46px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);
  color:#fff;font-family:var(--mono);font-size:1rem;font-weight:700;transition:background .16s,border-color .16s;
}
.mb__amt:hover{background:rgba(255,255,255,.14)}
.mb__amt.is-on{background:var(--green);border-color:var(--green);color:#14300A}
.mb__amt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.mb__custom{position:relative;margin-top:8px}
.mb__custom input{
  width:100%;min-height:46px;padding:10px 14px;padding-inline-end:96px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);
  color:#fff;font-size:1rem;
}
.mb__custom input::placeholder{color:rgba(255,255,255,.55)}
.mb__custom input:focus-visible{outline:2px solid var(--green);outline-offset:-1px}
.mb__cur{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:.82rem;color:rgba(255,255,255,.6);pointer-events:none}
.mb__first{margin:2px 0 6px;font-size:1rem;color:rgba(255,255,255,.9)}
.mb__first b{color:var(--green)}
#mbGo{min-height:52px;font-size:1.05rem}
#mbGo.is-off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.22);box-shadow:none;cursor:not-allowed}
#mbGo.is-off:hover{background:rgba(255,255,255,.1);transform:none}
#mbGo:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ── control / transparency band ── */
.mb__ctrl{margin:6px 0 0;padding:24px 26px;background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r)}
.mb__ctrl-h{font-size:1.16rem;font-weight:700;color:var(--navy);margin:0 0 16px}
.mb__ctrl-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mb__ctrl-l li{display:grid;gap:4px;padding-inline-start:20px;position:relative}
.mb__ctrl-l li::before{content:'';position:absolute;inset-inline-start:0;top:7px;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--green)}
.mb__ctrl-l b{font-size:1.02rem;color:var(--navy)}
.mb__ctrl-l span{font-size:.95rem;line-height:1.75;color:#333A4C}

@media (max-width:980px){
  .ghero--monthly .ghero__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .mb__ctrl-l{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .mb__amt{transition:none}
}


/* ══════════════════════════════════════════════════════════════════
   §81. CSR — CORPORATE PARTNERSHIP JOURNEY (Batch 78)
   ══════════════════════════════════════════════════════════════════
   Four selectable models → a partnership brief (form + navy summary) →
   compact process → conditional deliverables → sponsorship opportunities
   (reusing .zc cards) → a separate direct-donation band. Scoped to
   .ghero--csr / .csr* ; reuses .fb__sum, .zc*, .mb__ctrl. */

/* ── hero: compact warm-neutral, no watermark / no corner ── */
.ghero--csr{background:linear-gradient(160deg,#F5F1E8 0%,#EFEADD 100%);padding-block:28px 40px}
.ghero--csr .ghero__mark{display:none}
.ghero--csr .ghero__fig::after{display:none}
.ghero--csr .ghero__grid{grid-template-columns:46fr 54fr;gap:44px;align-items:center;margin-top:12px}
.ghero--csr .phero__h{font-size:clamp(1.9rem,3.1vw,2.6rem)}
.ghero--csr .phero__lede{font-size:1.12rem;line-height:1.85;color:#3A4055;max-width:52ch}
.ghero--csr .ghero__cta--group{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:8px 8px 8px 0}
.ghero--csr .ghero__alt{font-size:1rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:2px}
.ghero--csr .ghero__alt:hover{border-color:var(--green);color:var(--green-ink)}
.ghero--csr .ghero__fig{padding:0;background:none;border:0}
.ghero--csr .ghero__fig img{max-height:440px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r)}

/* ── four partnership models ── */
.csrmodels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.csrmodel{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
.csrmodel__ic{width:34px;height:34px;fill:none;stroke:var(--green-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.csrmodel h3{font-size:1.14rem;font-weight:700;color:var(--navy);line-height:1.4;margin:0 0 12px}
.csrmodel__meta{margin:0 0 16px;display:grid;gap:9px;flex:1}
.csrmodel__meta>div{display:grid;gap:2px}
.csrmodel__meta dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted)}
.csrmodel__meta dd{margin:0;font-size:.92rem;line-height:1.6;color:#333A4C}
.csrmodel__go{width:100%;text-align:center;min-height:44px}

/* ── partnership brief ── */
.csrbrief{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.csrbrief__form{padding:26px 28px}
.csrbrief__form .ik__fs + .ik__fs{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.csrbrief__form .f>label{font-size:.92rem;font-weight:600;color:var(--navy)}
.csr__sel{
  width:100%;min-height:48px;padding:11px 14px;font-family:var(--ar-body);font-size:1rem;color:var(--body);
  background:var(--stone);border:1px solid #CFCCBF;border-radius:var(--r);cursor:pointer;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(0% + 16px) calc(1em + 2px),calc(0% + 21px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.csr__sel:focus{outline:none;border-color:var(--navy);background-color:var(--white)}
.csrbrief__sum{position:sticky;top:calc(var(--hd-h) + 16px)}
.csrbrief__after{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem;line-height:1.8;color:rgba(255,255,255,.85)}
.csrbrief__after b{color:#fff}
.csrbrief__wip{
  margin:14px 0 0;padding:13px 16px;border-radius:var(--r);font-size:.92rem;line-height:1.8;
  background:#FBF6E8;border:1px solid #EAD9A8;color:#4A4326;
}
.csrbrief__wip a{color:var(--navy);font-weight:600}

/* ── engagement process ── */
.csrsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.csrsteps__s{display:flex;gap:13px;align-items:flex-start}
.csrsteps__n{flex:none}
.csrsteps__n bdi{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-family:var(--mono);font-size:.98rem;font-weight:700;color:#fff;background:var(--navy)}
.csrsteps__s h3{margin:0 0 5px;font-size:1.04rem;font-weight:700;color:var(--navy);line-height:1.4}
.csrsteps__s p{margin:0;font-size:.94rem;line-height:1.75;color:#333A4C}

/* ── deliverables: 4 across ── */
.csr__deliv{grid-template-columns:repeat(4,1fr)}

/* ── direct-donation band ── */
.csrdirect{display:grid;grid-template-columns:1fr auto;gap:24px 32px;align-items:center;
  background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px}
.csrdirect__bd h3{font-size:1.28rem;font-weight:700;color:var(--navy);margin:6px 0 8px}
.csrdirect__bd p{margin:0;font-size:1rem;line-height:1.85;color:#333A4C;max-width:70ch}
.csrdirect__act .btn{white-space:nowrap}

/* ── responsive ── */
@media (max-width:1080px){
  .csrmodels{grid-template-columns:repeat(2,1fr)}
  .csrsteps{grid-template-columns:repeat(2,1fr)}
  .csr__deliv{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .csrbrief{grid-template-columns:1fr;gap:20px}
  .csrbrief__sum{position:static}
  .ghero--csr .ghero__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:600px){
  .csrmodels{grid-template-columns:1fr}
  .csrsteps{grid-template-columns:1fr}
  .csr__deliv{grid-template-columns:1fr}
  .csrdirect{grid-template-columns:1fr}
  .csrbrief__form{padding:22px 18px}
}

/* ══════════════════════════════════════════════════════════════════
   §82. DOCUMENT LIBRARY — PUBLICATION STATES (Batch 79)
   ══════════════════════════════════════════════════════════════════
   The transparency review rejected the old grid on three counts: the cards
   were pale and text-heavy while the action/status area was the smallest
   thing on them; a decree and an internal policy read as the same class of
   object in one flat 01–06 sequence; and an unavailable document showed a
   faded slot with no explanation.

   So: purpose GROUPS replace the numbered grid, and each card becomes a real
   download surface — title and period at the top, one status badge that can
   never be mistaken for decoration, metadata rows, then a full-width action.
   A pending card spends that same action area on the REASON plus the one
   route that exists (a written request), never on a disabled button.

   Class prefix is `dl*` because `.dcard` was already the homepage doors grid
   (§25b) — the newcomer renames, per the standing collision rule. The old
   `.tdoc*` block (~§30) is now orphaned by this rewrite; it is left in place
   rather than deleted, because deleting earlier sections is exactly what
   caused the B27→B41 regression. Flag it for a future cleanup batch.

   Scoped entirely to .vhero--docs / .dlib / .dlnav / .dlgrp / .dlc / .dstat /
   .darch, so nothing outside this page can move.
   ══════════════════════════════════════════════════════════════════ */

/* ── hero: compact, and the photograph allowed to read ──
   The base .vhero wedge peaks at 97% opacity and holds 88% across the text
   column; on this page the review found the whole hero too tall and the
   overlay too heavy. Trimmed block padding, and the wedge relaxed by ~10
   points at every stop — type contrast stays AAA on the ink field because
   the darkest stop is still 88%. */
.vhero--docs{padding-block:34px 44px}
.vhero--docs .vhero__grid{margin-top:14px;max-width:720px}
.vhero--docs .vhero__bg img{opacity:.62}
.vhero--docs .vhero__scrim{
  background:linear-gradient(to left,
    rgba(20,16,58,.88) 0%,
    rgba(20,16,58,.78) 38%,
    rgba(20,16,58,.44) 66%,
    rgba(20,16,58,.10) 100%);
}
[dir="ltr"] .vhero--docs .vhero__scrim{
  background:linear-gradient(to right,
    rgba(20,16,58,.88) 0%,
    rgba(20,16,58,.78) 38%,
    rgba(20,16,58,.44) 66%,
    rgba(20,16,58,.10) 100%);
}
.vhero--docs .vhero__h{font-size:clamp(1.95rem,4.2vw,3rem)}
.vhero--docs .vhero__lede{margin:18px 0 20px;max-width:60ch}
.vhero--docs .vhero__facts{margin-bottom:24px}
/* breadcrumb + hero metadata contrast (review): .65 was too faint on the
   lightened scrim */
.vhero--docs .crumb--onDark a{color:rgba(255,255,255,.82)}
.vhero--docs .crumb--onDark i{color:rgba(255,255,255,.45)}

/* ── the library's own state line ── */
.dlib__state{
  margin:-4px 0 22px;
  font-size:.95rem;line-height:1.8;
  color:var(--body,#3C4152);
  padding-inline-start:13px;
  border-inline-start:3px solid var(--green,#7DC148);
}

/* ── category navigation ── */
.dlnav{
  display:flex;flex-wrap:wrap;gap:9px;
  margin:0 0 34px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line,#D9DFD0);
}
.dlnav a{
  display:inline-block;
  padding:8px 15px;
  border:1px solid var(--line,#D9DFD0);
  border-radius:2px;
  background:var(--stone-2,#F8FAF5);
  font-size:var(--fs-label,.92rem);font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.dlnav a:hover{background:var(--green-pale,#F0F7E7);border-color:var(--green,#7DC148);color:var(--green-ink,#4E8A24)}
.dlnav a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px}

/* ── a purpose group ── */
.dlgrp{margin:0 0 40px;scroll-margin-top:96px}
.dlgrp:last-of-type{margin-bottom:0}
.dlgrp__hd{margin:0 0 20px}
.dlgrp__hd h2{
  margin:0 0 7px;
  font-size:1.22rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
/* the group heading carries a short green rule, echoing the hero slab at a
   quieter scale so groups read as siblings of the page title, not of the cards */
.dlgrp__hd h2::after{
  content:"";display:block;
  width:40px;height:3px;
  background:var(--green,#7DC148);
  margin-top:10px;
}
.dlgrp__hd p{
  margin:11px 0 0;
  font-size:.95rem;line-height:1.8;
  color:var(--muted,#5A6076);
  max-width:72ch;
}
.dlgrp__none{
  margin:0;padding:18px 20px;
  background:var(--stone-2,#F8FAF5);
  border:1px dashed var(--line,#D9DFD0);
  font-size:.92rem;color:var(--muted,#5A6076);
}

.dlcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* ── the card as a download surface ──
   Solid white on the section's white ground would vanish, so the card takes
   the faint stone tint and a real border; the status badge and the action
   row are the two things that must survive a squint test. */
.dlc{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  padding:22px 22px 20px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.dlc:hover{border-color:#C3CDB6;box-shadow:0 2px 14px rgba(20,16,58,.07)}
/* the top rule states availability before any text is read */
.dlc::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:3px;
  background:var(--green,#7DC148);
}
.dlc--pending::before{background:#C9CFC0}

.dlc__hd{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:13px;
  margin-bottom:14px;
}
.dlc__ic{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--stone,#EEF1EA);
  border:1px solid var(--line,#D9DFD0);
  border-radius:2px;
}
.dlc__ic svg{
  width:19px;height:19px;
  fill:none;stroke:var(--navy,#292369);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.dlc--pending .dlc__ic svg{stroke:var(--muted,#5A6076)}
.dlc__ttl{min-width:0}
/* stronger title hierarchy than the old .tdoc h2 (1.08rem, regular navy) */
.dlc__ttl h3{
  margin:0;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.dlc__per{
  margin:5px 0 0;
  font-family:var(--mono,monospace);
  font-size:.76rem;letter-spacing:.02em;
  color:var(--muted,#5A6076);
}

/* ── status badge ──
   Six states, five treatments: `work` and `wait` share a tone because the
   distinction that matters to a visitor is available / coming / on request /
   never, and the label itself carries the rest. */
.dstat{
  flex:0 0 auto;
  display:inline-block;
  padding:5px 10px;
  border-radius:2px;
  border:1px solid transparent;
  font-size:.72rem;font-weight:var(--w-mid,600);line-height:1.5;
  white-space:nowrap;
}
.dstat--ok{background:var(--green-pale,#F0F7E7);border-color:#BFE0A0;color:var(--green-ink,#4E8A24)}
.dstat--work{background:#F1F0FA;border-color:#CFCAE8;color:#4A4494}
.dstat--wait{background:#FBF6EA;border-color:#E5D6AE;color:#8A6A1F}
.dstat--req{background:var(--stone,#EEF1EA);border-color:var(--line,#D9DFD0);color:var(--body,#3C4152)}
.dstat--no{background:#F7EFEF;border-color:#DFC4C4;color:#8C3A3A}

/* ── body ── */
.dlc__desc{
  margin:0 0 14px;
  font-size:.95rem;line-height:1.8;   /* review: card body text was too small */
  color:var(--body,#3C4152);
}
.dlc__meta{
  margin:0 0 16px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:7px;
}
.dlc__meta li{
  font-size:.83rem;line-height:1.65;
  color:var(--muted,#5A6076);
}
.dlc__cad{display:flex;align-items:flex-start;gap:8px}
.dlc__cad svg{
  flex:0 0 auto;
  width:14px;height:14px;margin-top:3px;
  fill:none;stroke:var(--green-ink,#4E8A24);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ── action area: the card's payload, pushed to a common baseline ── */
.dlc__act{
  margin-top:auto;
  padding-top:15px;
  border-top:1px solid var(--line,#D9DFD0);
}
.dlc__file{
  margin:0 0 11px;
  font-family:var(--mono,monospace);
  font-size:.73rem;letter-spacing:.02em;
  color:var(--muted,#5A6076);
}
.dlc__btns{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.dlc__dl{display:inline-flex;align-items:center;gap:9px}
.dlc__dl svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.dlc__view{
  font-size:.87rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.dlc__view:hover{color:var(--green-ink,#4E8A24);border-bottom-color:currentColor}
.dlc__view:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}

/* pending: the reason occupies the space a disabled button used to waste */
.dlc__why{
  margin:0 0 10px;
  font-size:.88rem;line-height:1.75;
  color:var(--body,#3C4152);
}
.dlc__exp{
  margin:0 0 12px;
  font-size:.82rem;
  color:var(--muted,#5A6076);
}
.dlc__exp::before{
  content:"";display:inline-block;
  width:7px;height:7px;margin-inline-end:8px;
  border:2px solid #C9A227;border-radius:50%;
  vertical-align:middle;
}
.dlc__req{font-size:.87rem}

/* ── previous editions ── */
.darch{
  margin-top:16px;
  border-top:1px solid var(--line,#D9DFD0);
  padding-top:13px;
}
.darch summary{
  display:flex;align-items:center;gap:9px;
  cursor:pointer;
  font-size:.86rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  list-style:none;
}
.darch summary::-webkit-details-marker{display:none}
/* Disclosure caret. PHYSICAL borders plus a direction-aware rotation, not
   logical ones: with border-inline-end the corner flips with the direction while
   the rotation does not, so the first draft pointed the wrong way in RTL — and
   [open] merely FLIPPED it (rotate(-135deg)) instead of pointing down. Now
   closed points along the reading direction and open points down, in both. */
.darch summary::before{
  content:"";flex:0 0 auto;
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(135deg);                                    /* RTL closed → left */
  transition:transform .18s ease;
}
[dir="ltr"] .darch summary::before{transform:rotate(-45deg)}   /* LTR closed → right */
.darch[open] summary::before,
[dir="ltr"] .darch[open] summary::before{transform:rotate(45deg)}   /* open → down */
.darch summary:hover{color:var(--green-ink,#4E8A24)}
.darch summary:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}
.darch__n{
  font-family:var(--mono,monospace);
  font-size:.7rem;
  padding:1px 7px;
  background:var(--stone,#EEF1EA);
  border:1px solid var(--line,#D9DFD0);
  border-radius:2px;
  color:var(--muted,#5A6076);
}
.darch__l{margin:13px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.darch__l li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
}
.darch__l a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.darch__l a svg{
  width:13px;height:13px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.darch__l a:hover{color:var(--green-ink,#4E8A24);border-bottom-color:currentColor}
.darch__l a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}
.darch__l span{
  font-family:var(--mono,monospace);
  font-size:.7rem;
  color:var(--muted,#5A6076);
}

/* unregistered-kind cards carry no promised prose, so they need no min body */
.dlc--plain .dlc__act{border-top:0;padding-top:0}

@media (prefers-reduced-motion:reduce){
  .dlc,.dlnav a,.darch summary::before{transition:none}
}

/* ── responsive ── */
@media (max-width:980px){
  .dlcards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .vhero--docs{padding-block:26px 34px}
  /* the badge stops competing with the title for a narrow line: title and
     period take the full width, the badge drops to its own row */
  .dlc__hd{grid-template-columns:auto 1fr;gap:11px}
  .dlc__hd .dstat{grid-column:1 / -1;justify-self:start;margin-top:2px}
  .dlc{padding:19px 17px 17px}
  .dlc__ttl h3{font-size:1.06rem}
  .dlnav{gap:7px;margin-bottom:26px}
  .dlnav a{padding:7px 12px;font-size:.85rem}
  .dlc__btns{gap:9px 13px}
  .darch__l li{gap:4px}
}

/* ══════════════════════════════════════════════════════════════════
   §83. DOCUMENT LIBRARY — FINAL REFINEMENT (Batch 80)
   ══════════════════════════════════════════════════════════════════
   The sign-off review's remaining items, all scoped to §82's surfaces:

   1. ADAPTIVE GRID. The fixed two-column grid orphaned any odd card — the
      lone protection policy took half a row beside dead space, and the empty
      area read as page length. The column count now comes from the real item
      count (controller: layoutFor()), so no data state can strand a card:
      three-up, two-up, or a deliberate full-width horizontal card.
   2. SOLO CARD. A single card turns horizontal: body at the inline start,
      action panel at the end behind a rule. Built with flex-wrap rather than
      grid placement so it survives cards that have no description or metadata
      (the unregistered-kind ones), and so the archive can drop to its own line
      with flex-basis:100% instead of becoming a third column.
   3. CATEGORY NAV. Was pill "tabs" implying a selected state and a filtered
      view that do not exist — these only scroll to an anchor. Restyled as a
      labelled row of in-page links.
   4. SUPPORT BAND (.dband) replaces the two-panel .dual block: one calm
      container, no gradient, no 50/50, capped near 200px on desktop.

   Nothing here edits §82 or earlier — .dlcards--* and .dband are new hooks,
   and the .dlnav rules that follow deliberately RESET the §82 chip treatment
   on the same selectors rather than being edited in place.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1/2. adaptive grid ── */
.dlcards--three{grid-template-columns:repeat(3,1fr)}
.dlcards--two{grid-template-columns:repeat(2,1fr)}
.dlcards--solo{grid-template-columns:1fr}

/* Cards hug their content instead of stretching to the tallest sibling.
   Stretching plus §82's `margin-top:auto` on .dlc__act put the slack INSIDE the
   lighter cards — a three-up row where one document carries an archive and two
   carry a one-line reason opened ~120px holes mid-card. That is the same empty
   space the review objected to, just moved. Ragged bottoms are the honest
   trade: no holes, and the page gets shorter again.
   Solo keeps stretch — its full-height action divider depends on it. */
.dlcards--two,
.dlcards--three{align-items:start}

/* three-up is narrower, so the card's internals tighten a notch */
.dlcards--three .dlc{padding:20px 19px 18px}
.dlcards--three .dlc__ttl h3{font-size:1.06rem}
.dlcards--three .dlc__desc{font-size:.92rem}
.dlcards--three .dstat{font-size:.68rem;padding:4px 8px}

/* the solo card: horizontal, action panel behind a rule */
@media (min-width:981px){
  .dlcards--solo .dlc{
    flex-flow:row wrap;
    align-items:stretch;
    column-gap:28px;
    padding:24px 26px;
  }
  .dlcards--solo .dlc__body{flex:1 1 auto;min-width:0}
  .dlcards--solo .dlc__desc{max-width:78ch}
  .dlcards--solo .dlc__meta{margin-bottom:0}
  /* 360, not 300: a pending solo card carries its REASON here, and at 300 a
     long safeguarding explanation wrapped to five cramped lines while the body
     column sat half empty. */
  .dlcards--solo .dlc__act{
    flex:0 0 360px;
    margin-top:0;
    padding-top:0;
    border-top:0;
    padding-inline-start:26px;
    border-inline-start:1px solid var(--line,#D9DFD0);
    display:flex;flex-direction:column;justify-content:center;
  }
  /* forced onto its own line rather than becoming a third column */
  .dlcards--solo .darch{flex:0 0 100%;margin-top:20px}
}

/* ── 3. category navigation, not filters ──
   Overrides §82's chip treatment on the same selectors. The boxed pill implied
   "click to filter"; these only jump to an anchor. */
.dlnav{
  align-items:baseline;
  gap:8px 20px;
  padding-bottom:16px;
  margin-bottom:30px;
}
.dlnav__lbl{
  font-size:.85rem;
  color:var(--muted,#5A6076);
}
.dlnav a{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:.93rem;
  color:var(--navy,#292369);
  border-bottom:1px solid rgba(41,35,105,.28);
  transition:color .18s ease,border-color .18s ease;
}
.dlnav a::after{
  content:" ↓";
  color:var(--green-ink,#4E8A24);
  font-size:.82em;
}
.dlnav a:hover{
  background:none;
  color:var(--green-ink,#4E8A24);
  border-bottom-color:currentColor;
}

/* ── 4. the support band ── */
.dband{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:32px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  padding:22px 30px;   /* keeps the band under the 200px desktop cap */
}
/* the one decorative note: a green edge rule tying it to the library above */
.dband{border-inline-start:3px solid var(--green,#7DC148)}
.dband__c{min-width:0}
.dband__c h2{
  margin:8px 0 10px;
  font-size:1.24rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.dband__c p{
  margin:0;
  font-size:.93rem;line-height:1.8;
  color:var(--body,#3C4152);
  max-width:74ch;
}
.dband__a{
  display:flex;flex-direction:column;align-items:stretch;
  gap:10px;
  flex:0 0 auto;
}
.dband__a .btn{white-space:nowrap;text-align:center}
/* the address is a reference, not the call to action it used to be */
.dband__mail{
  margin-top:2px;
  text-align:center;
  font-family:var(--mono,monospace);
  font-size:.75rem;
  color:var(--muted,#5A6076);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.dband__mail:hover{color:var(--green-ink,#4E8A24);border-bottom-color:currentColor}
.dband__mail:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}

/* ── responsive ── */
@media (max-width:1180px){
  /* three-up gets cramped before the tablet breakpoint proper */
  .dlcards--three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .dlcards--three,
  .dlcards--two{grid-template-columns:1fr}
  .dband{grid-template-columns:1fr;gap:20px;padding:24px 22px}
  .dband__a{align-items:flex-start}
  .dband__a .btn{width:100%}
  .dband__mail{align-self:flex-start;text-align:start}
}
@media (max-width:600px){
  .dband{padding:20px 17px}
  .dband__c h2{font-size:1.1rem}
  .dlnav{gap:7px 16px}
  .dlnav a{font-size:.88rem}
}

/* ══════════════════════════════════════════════════════════════════
   §84. DOCUMENT LIBRARY — PRODUCTION PASS (Batch 81)
   ══════════════════════════════════════════════════════════════════
   Final pass. Type floors, equal-height rows with pinned badges/actions,
   44px targets, the three-up hero trust row, real current-section nav states,
   and contrast/overflow hardening. All scoped to the page's own selectors;
   several rules deliberately RESET §82/§83 declarations on the same selectors
   rather than editing those sections in place.
   ══════════════════════════════════════════════════════════════════ */

/* ── hero: three trust points, evenly divided ──
   §82 laid these out with flex-wrap, so a count of 4 wrapped 3+1 and stranded
   one. A three-column grid cannot orphan: it is three, or it is stacked. */
.dtrust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  align-items:stretch;
}
.dtrust li{
  font-size:.95rem;          /* was .85rem — 13.6px */
  line-height:1.6;
  align-items:flex-start;
  padding:11px 14px;
}
.dtrust li::before{margin-top:.35em}
@media (max-width:1080px){
  .dtrust{grid-template-columns:1fr}
}

/* ── type floors: 16px descriptive body, 14px metadata and status ── */
.dlib__state{font-size:1rem}
.dlc__desc,
.dlcards--three .dlc__desc{font-size:1rem;line-height:1.75}
.dlc__why{font-size:1rem;line-height:1.7}
.dlc__meta li{font-size:.875rem;line-height:1.6}
.dlc__per{font-size:.875rem}
.dlc__file{font-size:.875rem}
.dlc__exp{font-size:.875rem}
.dstat,
.dlcards--three .dstat{font-size:.875rem;padding:5px 11px}
.darch summary{font-size:.94rem}
.darch__n{font-size:.875rem}          /* .8rem = 12.8px, below the 14px floor */
.darch__l a{font-size:.94rem}
.darch__l span{font-size:.875rem}
.dband__c p{font-size:1rem}
.dband__mail{font-size:.875rem}

/* contrast: --muted (#5A6076) is AA on white but thin at these sizes for
   metadata a donor is meant to check. A darker ink for the page's small text. */
.dlc__meta li,
.dlc__per,
.dlc__file,
.dlc__exp,
.darch__n,
.darch__l span,
.dlnav__lbl,
.dband__mail{color:#474D61}

/* ── equal-height rows, badge pinned top, actions pinned bottom ──
   Reverses §83's `align-items:start`. §82 already pushes .dlc__act down with
   margin-top:auto, so with the row stretched again every action row in a row
   sits on one line. The internal spacing below is tightened to spend that
   slack on the content rather than leaving it as a gap. */
.dlcards--two,
.dlcards--three{align-items:stretch}
.dlcards--two .dlc,
.dlcards--three .dlc{height:100%}
.dlc__body{display:flex;flex-direction:column;min-width:0}
.dlc__hd{align-items:start;margin-bottom:12px}
.dlc__desc{margin-bottom:12px}
.dlc__meta{margin-bottom:14px}
.dlc__meta:last-child{margin-bottom:0}
.dlc__act{margin-top:auto}

/* status badge: never nowrap. At 14px, «جاري تجهيز النسخة الرقمية» in a
   three-up card overflowed the row and forced horizontal scroll. */
.dstat{
  white-space:normal;
  overflow-wrap:anywhere;
  max-width:100%;
  align-self:start;
}

/* long Arabic must wrap, never clip or push the grid wider */
.dlcards,
.dlc,
.dlc__body,
.dlc__ttl,
.dlc__act{min-width:0}
.dlc__ttl h3,
.dlc__desc,
.dlc__why,
.dlc__meta li{overflow-wrap:break-word}

/* ── 44px targets on the controls that were text-sized ── */
.dlc__view,
.darch summary,
.dband__mail{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.dlc__view{padding-block:10px}
.darch summary{padding-block:8px}
.dlnav a{
  display:inline-flex;align-items:center;
  min-height:44px;
}

/* ── category navigation: real states ── */
.dlnav{flex-wrap:wrap}
.dlnav ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:0 4px;
}
/* one consistent separator between items, never before the first or after the last */
.dlnav li + li::before{
  content:"";
  display:inline-block;
  width:1px;height:14px;
  margin-inline:12px 8px;
  background:var(--line,#D9DFD0);
  vertical-align:middle;
}
.dlnav li{display:inline-flex;align-items:center}
.dlnav a:hover{border-bottom-color:currentColor}
.dlnav a:focus-visible{
  outline:2px solid var(--navy,#292369);
  outline-offset:3px;
  border-radius:2px;
}
/* current section — announced via aria-current, not colour alone: the weight
   change and the filled marker both carry it */
.dlnav a[aria-current="true"]{
  color:var(--green-ink,#4E8A24);
  font-weight:var(--w-mid,600);
  border-bottom-color:currentColor;
}
.dlnav a[aria-current="true"]::after{content:" ●";font-size:.6em;vertical-align:middle}

/* ── sticky-header offset for anchor jumps ──
   .hdr is sticky at min-height 78px (64 when stuck). 96px cleared the heading
   but crowded it; 108 leaves the group heading and its lede both visible. */
.dlgrp{scroll-margin-top:108px}
#docs{scroll-margin-top:96px}

/* ── focus-visible on every action on the page ── */
.dlc__dl:focus-visible,
.dlc__req:focus-visible,
.dband__a .btn:focus-visible{
  outline:2px solid var(--navy,#292369);
  outline-offset:3px;
}
.dlc--pending .dlc__req:focus-visible{outline-color:var(--green-ink,#4E8A24)}

/* a request already being opened — the guard sets aria-disabled for a beat */
[data-request][aria-disabled="true"]{
  opacity:.6;
  pointer-events:none;
  cursor:default;
}

/* ── support band: hierarchy + spacing ──
   Tightened to hold the ~200px desktop cap after the 16px body-text floor made
   the description taller. */
.dband{gap:30px;padding:18px 28px;align-items:center}
.dband__c h2{margin:4px 0 6px;font-size:1.2rem;line-height:1.4}
/* let the description use the column it has: at 68ch it broke to three lines
   and pushed the band past the ~200px cap, while the 16px body floor is fixed */
.dband__c p{line-height:1.7;max-width:none}
.dband__c .eyebrow{margin-bottom:0}
.dband__a{gap:8px}
.dband__a{min-width:236px}
.dband__a .btn{width:100%}

@media (max-width:600px){
  /* B82: the .dtrust font-size reduction that used to live here is gone — the
     chips stack full-width on mobile, so there is nothing to fit, and the size
     should not drop below the desktop value anywhere. */
  .dlc__hd{margin-bottom:11px}
}

/* Badge on its own row in multi-column cards.
   §82's header is `auto 1fr auto` — icon, title, badge. That was fine while the
   badge was 11.5px and nowrap, but at the 14px floor «جاري تجهيز النسخة الرقمية»
   claims so much of the row that the title column collapsed and
   «قرار الإشهار رقم 1727 لسنة 2004» broke over five lines. The badge now spans
   its own row beneath the title, so the title always gets the full card width.
   Solo cards keep the three-column header — they have the room. */
.dlcards--two .dlc__hd,
.dlcards--three .dlc__hd{grid-template-columns:auto 1fr}
.dlcards--two .dlc__hd .dstat,
.dlcards--three .dlc__hd .dstat{grid-column:1 / -1;margin-top:4px}

/* ══════════════════════════════════════════════════════════════════
   §85. HERO TRUST ROW — ONE UNBROKEN LINE (Batch 82)
   ══════════════════════════════════════════════════════════════════
   §84 laid the three trust points out as `repeat(3,1fr)`. Equal fixed columns
   sized every item to the widest, so the longest —
   «يمكن الاستفسار عن الوثائق غير المنشورة» — still broke onto a second line
   inside its own chip and the row read as uneven.

   Now: content-based widths on one nowrap flex row, so each chip is exactly as
   wide as its text and all three sit on a single line. The hero text column
   keeps its 720px measure; only this row is allowed the extra width, so the
   approved heading and lede do not move.

   At the tablet breakpoint it goes straight to ONE stacked column — never a
   two-plus-one, which is the arrangement that started this.
   ══════════════════════════════════════════════════════════════════ */

/* let the trust row use the full container while the copy keeps its measure */
.vhero--docs .vhero__grid{max-width:none}
.vhero--docs .vhero__h,
.vhero--docs .vhero__lede{max-width:720px}
.vhero--docs .ghero__cta{max-width:720px}

.dtrust{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  width:max-content;
  max-width:100%;
}
.dtrust li{
  flex:0 0 auto;              /* content width, not an equal share */
  white-space:nowrap;         /* one line per indicator */
  align-items:center;         /* identical icon position on every chip */
  padding:11px 15px;
  line-height:1.5;
}
.dtrust li::before{margin-top:0}

@media (max-width:1080px){
  /* straight to a single stacked column — no 2+1 stage */
  .dtrust{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    width:100%;
  }
  .dtrust li{
    white-space:normal;       /* stacked, so wrapping is correct here */
    width:100%;
  }
  .vhero--docs .vhero__grid{max-width:720px}
}

/* ══════════════════════════════════════════════════════════════════
   §86. IMPACT PAGE + POLICIES INDEX (Batch 83)
   ══════════════════════════════════════════════════════════════════
   Two new pages, deliberately built on existing grammar rather than new
   systems: the figures reuse .astats/.astat from §50 (the about page's
   content-native stat block, which already carries a provenance sub-line and
   an honest empty variant), the closing band reuses .dband from §83, and the
   completed-campaign proof reuses .deeds + x-campaign-card unchanged.

   What is genuinely new is only what those could not express:
     · .imp__dec — the DECLARED figure, which must not look like the computed
       ones. It gets a different container, not a different colour, because the
       distinction is about provenance and has to survive a squint.
     · .imp__note — the basis-of-count footnote.
     · .lgx — the policy index cards, and the one card that is a document with
       a publication state rather than a page.

   Type floors carried over from §84: 16px descriptive body, 14px metadata,
   44px interactive controls.
   ══════════════════════════════════════════════════════════════════ */

/* ── impact: computed figures ── */
.imp__figs{margin-bottom:26px}
/* §50's .astat sizes predate the §84 type floors (16px body / 14px metadata).
   Raised HERE, scoped to this page, rather than in §50 — the about page uses
   the same block and is already approved at its own scale. */
.imp__figs .astat__l{font-size:1rem;line-height:1.6}
.imp__figs .astat__s{font-size:.875rem;line-height:1.65}
/* the currency unit rides with the number but must not be read as a digit */
.imp__unit{
  font-family:var(--ar-body);
  font-size:.42em;font-weight:var(--w-mid,600);
  margin-inline-start:7px;
  color:var(--muted,#5A6076);
}
.imp__note{
  display:flex;align-items:flex-start;gap:9px;
  margin:0;padding-top:16px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:1rem;line-height:1.75;
  color:#474D61;
  max-width:88ch;
}
.imp__note svg{
  flex:0 0 auto;width:16px;height:16px;margin-top:5px;
  fill:none;stroke:var(--green-ink,#4E8A24);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.imp__note a{color:var(--navy,#292369);border-bottom:1px solid rgba(41,35,105,.3)}
.imp__note a:hover{color:var(--green-ink,#4E8A24);border-bottom-color:currentColor}
.imp__note a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}

/* ── impact: the declared figure, visibly a different KIND of claim ──
   Bordered and set apart rather than tinted: provenance is not a mood, and a
   colour difference alone would read as decoration next to the computed row. */
.imp__dec{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:34px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--lav,#6E66B0);
  border-radius:3px;
  padding:26px 30px;
}
.imp__dec__c h2{
  margin:6px 0 10px;
  font-size:1.24rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.imp__dec__c p{
  margin:0;
  font-size:1rem;line-height:1.85;
  color:var(--body,#3C4152);
  max-width:80ch;
}
.imp__dec__n{
  font-family:var(--mono,monospace);
  font-weight:600;
  color:var(--navy,#292369);
}
.imp__dec__yrs{
  margin:0;flex:0 0 auto;text-align:center;
  padding-inline-start:30px;
  border-inline-start:1px solid var(--line,#D9DFD0);
}
.imp__dec__yrs bdi{
  display:block;
  font-family:var(--mono,monospace);
  font-size:clamp(2rem,3.4vw,2.7rem);
  color:var(--navy,#292369);
}
.imp__dec__yrs span{
  display:block;margin-top:6px;
  font-size:.875rem;color:#474D61;
}

/* ── impact: work areas ── */
.imp__areas{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.imp__areas a{
  display:flex;align-items:center;
  min-height:44px;
  padding:12px 16px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:2px;
  font-size:1rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.imp__areas a:hover{border-color:var(--green,#7DC148);color:var(--green-ink,#4E8A24)}
.imp__areas a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px}

/* ── policies index ── */
.lgx__draft{
  margin:0 0 28px;padding:15px 18px;
  background:#FBF6EA;
  border:1px solid #E5D6AE;
  border-radius:3px;
  font-size:1rem;line-height:1.75;
  color:#6B5312;
}
.lgx__draft b{color:#5A4410}

.lgx{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:22px}
.lgx__c{
  display:flex;flex-direction:column;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  padding:22px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lgx__c:hover{border-color:#C3CDB6;box-shadow:0 2px 14px rgba(20,16,58,.07)}
.lgx__c h2{margin:0 0 10px;font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45}
.lgx__c h2 a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--navy,#292369);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.lgx__c h2 a:hover{color:var(--green-ink,#4E8A24);border-bottom-color:currentColor}
.lgx__c h2 a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}
.lgx__s{margin:0 0 14px;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.lgx__m{
  margin:auto 0 0;padding-top:13px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:.875rem;color:#474D61;
}

/* the protection policy: a document, not a page — full width so it cannot be
   mistaken for a fourth link card */
.lgx__doc{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:28px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  padding:22px 24px;
}
.lgx__doc--pending{background:var(--stone-2,#F8FAF5)}
.lgx__doc__c{min-width:0}
.lgx__doc__hd{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.lgx__doc__hd h2{margin:0;font-size:1.12rem;font-weight:var(--w-bold,800);color:var(--navy,#292369)}
.lgx__doc__a{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;min-width:220px}
.lgx__doc__a .btn{width:100%}
.lgx__why{margin:0;font-size:1rem;line-height:1.7;color:var(--body,#3C4152)}
.lgx__doc + .imp__note{margin-top:26px}

@media (prefers-reduced-motion:reduce){
  .lgx__c,.imp__areas a{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .lgx{grid-template-columns:repeat(2,1fr)}
  .imp__areas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .imp__dec{grid-template-columns:1fr;gap:20px;padding:22px}
  .imp__dec__yrs{
    padding-inline-start:0;padding-top:18px;
    border-inline-start:0;
    border-top:1px solid var(--line,#D9DFD0);
    text-align:start;
  }
  .imp__dec__yrs bdi{display:inline-block;margin-inline-end:10px}
  .imp__dec__yrs span{display:inline}
}
@media (max-width:760px){
  .lgx{grid-template-columns:1fr}
  .imp__areas{grid-template-columns:1fr}
  .lgx__doc{grid-template-columns:1fr;gap:18px}
  .lgx__doc__a{min-width:0}
}

/* ══════════════════════════════════════════════════════════════════
   §87. POLICY REGISTER (Batch 85)
   ══════════════════════════════════════════════════════════════════
   Replaces §86's `.lgx` link cards. The review's substantive point was that
   they showed no action and no status — a visitor could not tell which rules
   were in force, which is the only question this page exists to answer.

   Cards now carry status at the top, metadata in the middle and a real button
   pinned to the bottom, on the §84 type floors (16px body, 14px metadata, 44px
   controls). Non-binding policies are visually softened rather than recoloured
   — the status text does the telling, not the tint.

   The §86 `.lgx` rules that follow are RESET here rather than edited in place,
   per the append-only convention.
   ══════════════════════════════════════════════════════════════════ */

.lgx__cta{margin-top:22px}

/* ── register state line ── */
.lgx__state{
  margin:0 0 26px;padding:15px 18px;
  border-radius:3px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
  font-size:1rem;line-height:1.8;
  color:var(--body,#3C4152);
}
.lgx__state--warn{
  background:#FBF6EA;
  border-color:#E5D6AE;
  border-inline-start-color:#C9A227;
  color:#6B5312;
}
.lgx__state--warn b{color:#5A4410}

/* ── the cards ── */
.lgx{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-bottom:0;
  align-items:stretch;
}
.lgx__c{
  display:flex;flex-direction:column;
  height:100%;
  padding:22px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lgx__c:hover{border-color:#C3CDB6;box-shadow:0 2px 14px rgba(20,16,58,.07)}
/* not in force: quieter ground, same legible text */
.lgx__c--soft{background:var(--stone-2,#F8FAF5)}

.lgx__c__b{display:flex;flex-direction:column;min-width:0}
.lgx__c__hd{
  display:grid;grid-template-columns:1fr;
  gap:9px;margin-bottom:11px;
}
.lgx__c__hd h3{
  margin:0;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
  overflow-wrap:break-word;
}
.lgx__c__hd .dstat{justify-self:start}

.lgx__s{
  margin:0 0 12px;
  font-size:1rem;line-height:1.75;
  color:var(--body,#3C4152);
  overflow-wrap:break-word;
}
.lgx__meta{
  margin:0 0 12px;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:4px 18px;
}
.lgx__meta li{font-size:.875rem;line-height:1.6;color:#474D61}
.lgx__meta:empty{display:none}

/* the reason a policy is not in force is body copy, not a footnote — it holds
   the 16px floor like every other explanatory sentence on the site */
.lgx__why{
  margin:0 0 12px;
  font-size:1rem;line-height:1.75;
  color:#474D61;
}

/* action pinned to a common bottom line across the row */
.lgx__c__a{
  margin-top:auto;padding-top:15px;
  border-top:1px solid var(--line,#D9DFD0);
}
.lgx__c__a .btn{width:100%}

/* ── the safeguarding document card (reset of §86) ── */
.lgx__doc__hd h3{
  margin:0;font-size:1.12rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}

/* ── the reporting route ── */
.lgx__rep{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:30px;
  margin-top:20px;padding:22px 26px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
  border-radius:3px;
}
.lgx__rep__c h3{
  margin:6px 0 8px;
  font-size:1.18rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.lgx__rep__c p{
  margin:0;
  font-size:1rem;line-height:1.8;
  color:var(--body,#3C4152);
  max-width:78ch;
}
.lgx__rep__c b{color:var(--navy,#292369)}
.lgx__rep__a{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;min-width:236px}
.lgx__rep__a .btn{width:100%}

/* ── status + revision line on the individual policy pages ── */
.lgp__meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 18px;
  margin:0 0 18px;
}
.lgp__meta span:not(.dstat){font-size:.875rem;color:#474D61}

@media (prefers-reduced-motion:reduce){
  .lgx__c{transition:none}
}

/* ── responsive ── */
@media (max-width:900px){
  .lgx{grid-template-columns:1fr}
  .lgx__rep{grid-template-columns:1fr;gap:18px}
  .lgx__rep__a{min-width:0}
}
@media (max-width:600px){
  .lgx__c{padding:19px 17px}
  .lgx__rep{padding:19px 17px}
  .lgx__state{padding:14px 15px}
}

/* ══════════════════════════════════════════════════════════════════
   §88. IMPACT PAGE — SCOPE, OPERATIONS, METHODOLOGY (Batch 86)
   ══════════════════════════════════════════════════════════════════
   The review's substantive point drives the layout: money raised is an INPUT,
   and the page had given a publishing statistic the same visual weight as a
   result. So there are now three tiers, and the tiering is the argument:

     · headline results — .imp__figs, each with a scope label above the number
     · operational counts — .imp__ops, deliberately lighter and below
     · methodology — .imp__meth, the reviewable version of "أساس احتسابها"

   The historical record gets its own bordered block (.imp__hist) because it is
   a different scope with different records and periods, not a stat tile.

   §86's .imp__dec is superseded by .imp__hist and left in place per the
   append-only convention.
   ══════════════════════════════════════════════════════════════════ */

.imp__cta{margin-top:22px}

/* the figure grid sizes to how many figures actually survived the data test */
.imp__figs--1{grid-template-columns:minmax(0,420px)}
.imp__figs--2{grid-template-columns:repeat(2,1fr)}
.imp__figs--3{grid-template-columns:repeat(3,1fr)}

/* scope label — which measurement layer this number belongs to.
   .875rem = 14px, the metadata floor. It shipped at .75rem/12px and the measured
   audit caught it. The scope is the qualifier that stops a figure being read as a
   larger claim than it is, so it is the last thing on the page allowed to be
   hard to read. */
.imp__scope{
  margin:0 0 8px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.03em;
  color:var(--green-ink,#4E8A24);
  text-transform:none;
}

/* ── operational counts: present, but not presented as results ── */
.imp__ops{
  margin:26px 0 0;padding:18px 0 0;list-style:none;
  border-top:1px solid var(--line,#D9DFD0);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px;
}
.imp__ops li{
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
.imp__ops b{
  font-family:var(--mono,monospace);font-weight:600;
  color:var(--navy,#292369);
}
.imp__ops span{
  display:block;margin-top:3px;
  font-size:.875rem;line-height:1.6;
  color:#474D61;
}

/* ── work-area directory ── */
.imp__areas{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.imp__areas a{
  display:flex;align-items:center;
  min-height:44px;padding:12px 16px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:2px;
  font-size:1rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.imp__areas a:hover{border-color:var(--green,#7DC148);color:var(--green-ink,#4E8A24)}
.imp__areas a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px}

/* ── the historical record ──
   Bordered and set apart, in lavender rather than green: it is a different KIND
   of claim, and the distinction is provenance, not sentiment. */
.imp__hist{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:34px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--lav,#6E66B0);
  border-radius:3px;
  padding:26px 30px;
}
.imp__hist__c h2{
  margin:6px 0 10px;
  font-size:1.24rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.imp__hist__c p{
  margin:0 0 12px;
  font-size:1rem;line-height:1.85;
  color:var(--body,#3C4152);
  max-width:82ch;
}
.imp__hist__c p:last-child{margin-bottom:0}
.imp__hist__n{
  font-family:var(--mono,monospace);font-weight:600;
  color:var(--navy,#292369);
}
/* the qualification is part of the claim, not a footnote to it */
.imp__hist__q{
  display:block;margin-top:8px;
  padding-inline-start:13px;
  border-inline-start:2px solid var(--line,#D9DFD0);
  font-size:.94rem;line-height:1.75;
  color:#474D61;
}
.imp__hist__yrs{
  margin:0;flex:0 0 auto;text-align:center;
  padding-inline-start:30px;
  border-inline-start:1px solid var(--line,#D9DFD0);
}
.imp__hist__yrs bdi{
  display:block;
  font-family:var(--mono,monospace);
  font-size:clamp(2rem,3.4vw,2.7rem);
  color:var(--navy,#292369);
}
.imp__hist__yrs span{
  display:block;margin-top:6px;
  font-size:.875rem;color:#474D61;
}

/* ── methodology ── */
.imp__meth{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.imp__mrow{
  padding:20px 22px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
}
.imp__mrow__h{margin-bottom:13px}
.imp__mrow__h h3{
  margin:0 0 6px;
  font-size:1.06rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.imp__mrow dl{
  margin:0;
  display:grid;grid-template-columns:auto 1fr;
  gap:7px 14px;
  align-items:baseline;
}
.imp__mrow dt{
  font-size:.875rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  white-space:nowrap;
}
/* 1rem, not .94rem. This is the definition of what a figure counts — descriptive
   body copy, so the 16px floor applies. .94rem read as a footnote, which is the
   opposite of the point of publishing a methodology. */
.imp__mrow dd{
  margin:0;
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
/* the caveat is the honest half of the row and must not read as small print */
.imp__mrow__c{
  margin:13px 0 0;padding-top:12px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:1rem;line-height:1.7;
  color:#474D61;
}

@media (prefers-reduced-motion:reduce){
  .imp__areas a{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .imp__figs--3{grid-template-columns:repeat(2,1fr)}
  .imp__areas{grid-template-columns:repeat(2,1fr)}
  .imp__meth{grid-template-columns:1fr}
}
@media (max-width:900px){
  .imp__hist{grid-template-columns:1fr;gap:20px;padding:22px}
  .imp__hist__yrs{
    padding-inline-start:0;padding-top:18px;
    border-inline-start:0;border-top:1px solid var(--line,#D9DFD0);
    text-align:start;
  }
  .imp__hist__yrs bdi{display:inline-block;margin-inline-end:10px}
  .imp__hist__yrs span{display:inline}
}
@media (max-width:760px){
  .imp__figs--2,.imp__figs--3{grid-template-columns:1fr}
  .imp__ops{grid-template-columns:1fr}
  .imp__areas{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   §89. IMPACT PAGE — DATA-LED HERO, RESULTS PANEL, AREA CARDS (Batch 87)

   Replaces §88's layout for the impact page. §88 is left in place per the
   append-only rule; the selectors below are new names, not overrides, except
   .imp__ops and .imp__mrow which are reused as-is.

   The shape of this batch: the page had one real figure and five sections of
   explanation around it. So the figures get weight (.ires), the work areas
   become navigation with real aggregates (.iarea), and the methodology wall
   collapses into three lines plus a disclosure (.ilim / .imeth).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero: text column + data panel ──
   Only applies with .phero--split, which page-hero sets only when an `aside`
   slot is passed. Every other hero on the site is untouched. */
.phero--split .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,352px);
  gap:34px 48px;
  align-items:start;
}
.phero--split .crumb{grid-column:1/-1}
/* min-width:0 on both columns: a grid child's default min-width:auto refuses to
   shrink below its content, which is how a long unbreakable Arabic string forces
   a grid wider than its container. */
.phero__main,.phero__aside{min-width:0}

.iscope{
  padding:22px 24px 20px;
  background:var(--navy,#292369);
  border-radius:4px;
  color:#fff;
}
.iscope__k{
  margin:0 0 14px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.03em;
  color:var(--green,#7DC148);
}
.iscope__l{margin:0;padding:0;list-style:none}
.iscope__l li{
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.iscope__l li:first-child{border-top:0;padding-top:0}
.iscope__l b{
  display:block;
  font-size:1rem;font-weight:var(--w-mid,600);line-height:1.5;
  color:#fff;
}
.iscope__l span{
  display:block;margin-top:4px;
  font-size:.875rem;line-height:1.65;
  color:rgba(255,255,255,.76);
}
/* the honest line: marked, not hidden */
.iscope__no b{color:#FFD9A8}
.iscope__hist{
  margin:14px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.875rem;line-height:1.65;
  color:rgba(255,255,255,.76);
}
.iscope__hist a{color:var(--green,#7DC148);text-underline-offset:3px}

/* ── results: figures carry weight, however few there are ──
   A lone figure in a three-up grid reads as a broken row, which is what the
   review saw. The grid sizes to the count and a single figure becomes a wide
   panel rather than an orphan. */
.ires{
  margin-top:30px;
  display:grid;gap:18px;
  grid-template-columns:repeat(3,1fr);
}
.ires--1{grid-template-columns:minmax(0,620px)}
.ires--2{grid-template-columns:repeat(2,1fr)}

.ires__c{
  display:flex;flex-direction:column;
  padding:24px 26px 20px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
}
.ires__n{
  margin:0;
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:2.6rem;line-height:1.15;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.ires--1 .ires__n{font-size:3.1rem}
.ires__u{
  margin-inline-start:8px;
  font-size:1.05rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
}
.ires__l{
  margin:10px 0 0;
  font-size:1.06rem;font-weight:var(--w-mid,600);line-height:1.5;
  color:var(--navy,#292369);
}
.ires__s{
  margin:8px 0 0;
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
/* pushed to a shared bottom line so cards in a row align (the B81 lesson) */
.ires__how{
  margin-top:auto;padding-top:14px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  text-underline-offset:3px;
}

/* ── work areas as navigation ── */
.iareas{
  margin-top:30px;
  display:grid;gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.iarea{
  display:flex;flex-direction:column;
  padding:22px 24px 18px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.iarea:hover,.iarea:focus-visible{
  border-color:var(--green,#7DC148);
  box-shadow:0 6px 22px rgba(41,35,105,.09);
  transform:translateY(-2px);
}
.iarea h3{
  margin:0;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.iarea__m{
  margin:12px 0 0;
  font-size:1rem;line-height:1.6;
  color:var(--body,#3C4152);
}
.iarea__m b{
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;
  font-size:1.18rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
  margin-inline-end:5px;
}
.iarea__r{
  display:block;margin-top:5px;
  font-size:.9375rem;
  color:var(--green-ink,#4E8A24);
}
.iarea__m--none{color:#6A7080}
.iarea__go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
}
.iarea:hover .iarea__go,.iarea:focus-visible .iarea__go{text-decoration:underline;text-underline-offset:3px}

/* ── limits: three lines, not a five-card wall ── */
.ilim{
  margin:30px 0 0;padding:0;list-style:none;
  display:grid;gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.ilim li{
  padding:20px 22px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  border-top:3px solid var(--green,#7DC148);
}
.ilim li b{
  display:block;margin-bottom:8px;
  font-family:var(--mono,monospace);
  font-size:.9375rem;letter-spacing:.02em;
  color:var(--green-ink,#4E8A24);
}
.ilim li span{
  display:block;
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
/* «لا تُثبت بعد» is the limit that matters most — flagged, not buried */
.ilim--unproven{border-top-color:#C8791E}
.ilim--unproven b{color:#A2600F}

/* ── methodology, now a disclosure ── */
.imeth{margin-top:26px;border-top:1px solid var(--line,#D9DFD0)}
.imeth summary{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:12px 2px;
  font-size:1rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  cursor:pointer;list-style:none;
}
.imeth summary::-webkit-details-marker{display:none}
.imeth summary:hover span{text-decoration:underline;text-underline-offset:3px}
/* PHYSICAL borders + a direction-aware rotation. With border-inline-* the
   corner flips with direction while the rotation does not (the B79 caret bug),
   and [open] must point DOWN, not spin 180°. */
.imeth summary i{
  width:8px;height:8px;
  border-right:2px solid var(--green-ink,#4E8A24);
  border-bottom:2px solid var(--green-ink,#4E8A24);
  transform:rotate(135deg);
  transition:transform .18s ease;
}
[dir="rtl"] .imeth summary i{transform:rotate(-45deg)}
.imeth[open] summary i,[dir="rtl"] .imeth[open] summary i{transform:rotate(45deg)}
.imeth__b{
  margin-top:6px;padding-bottom:6px;
  display:grid;gap:16px;
  grid-template-columns:repeat(2,1fr);
}
/* An odd count leaves the last card alone in its row. The methodology row count
   follows the figures on the page, so it is genuinely variable — 1 to 6 — and
   cannot be designed around a fixed number. Last-of-an-odd-set spans instead. */
.imeth__b > :last-child:nth-child(odd){grid-column:1/-1}

/* ── the association's own record ── */
.ihist{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,378px);
  gap:26px 40px;align-items:center;
  padding:30px 32px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.ihist__c h2{
  margin:6px 0 12px;
  font-size:1.6rem;font-weight:var(--w-bold,800);line-height:1.35;
}
.ihist__c p{
  margin:0;
  font-size:1rem;line-height:1.75;
  color:var(--body,#3C4152);
}
.idecl{
  margin:0;padding:20px 22px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
  border-radius:3px;
}
.idecl__k{
  margin:0 0 10px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.03em;
  color:var(--green-ink,#4E8A24);
}
.idecl__n{margin:0}
.idecl__n bdi{
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;
  font-size:2.1rem;font-weight:var(--w-bold,800);line-height:1.2;
  color:var(--navy,#292369);
}
.idecl__n span{
  display:block;margin-top:5px;
  font-size:1rem;font-weight:var(--w-mid,600);line-height:1.5;
  color:var(--navy,#292369);
}
.idecl figcaption{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:.875rem;line-height:1.7;
  color:#474D61;
}
.idecl figcaption b{color:#A2600F;font-weight:var(--w-mid,600)}
.idecl figcaption a{color:var(--green-ink,#4E8A24);text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .iarea,.imeth summary i{transition:none}
  .iarea:hover,.iarea:focus-visible{transform:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .phero--split .wrap{grid-template-columns:1fr}
  .ires,.iareas,.ilim,.imeth__b{grid-template-columns:repeat(2,1fr)}
  .ires--1{grid-template-columns:1fr}
  .ihist{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ires,.ires--1,.ires--2,.iareas,.ilim,.imeth__b{grid-template-columns:1fr}
  .ires__n{font-size:2.2rem}
  .ires--1 .ires__n{font-size:2.4rem}
  .ihist{padding:24px 20px}
}

/* ══════════════════════════════════════════════════════════════════════════
   §90. IMPACT PAGE — METRIC SYSTEM, METHODOLOGY ACCORDION, REVIEW CARDS (Batch 88)

   The review's refinement pass, page-scoped. §89 is left in place per the
   append-only rule; the selectors below are new names except the .iscope and
   .ilim resets, which are the sanctioned way to change earlier sections.

   The shape of this batch: the four headline numbers become ONE metric system
   (.imx — a featured financial card at half width, three compact reach cards
   beside it), the methodology becomes a per-row accordion so «كيف احتُسب؟» can
   land on an openable target without JavaScript, work-area cards become
   articles with an explicit action, and campaign cards on this page run in
   `review` mode. No global typography tokens change here — the site-wide
   type-scale batch remains its own scheduled work.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero scope panel: readable, not fine print (reset of §89 .iscope) ── */
.iscope{padding:26px 28px 22px}
.iscope__l b{font-size:1.0625rem}
.iscope__l span{font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.82)}
.iscope__l li{padding:14px 0}
.iscope__upd{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.02em;
  color:var(--green,#7DC148);
}

/* ── the reporting range, derived — quiet metadata above the metric system ── */
.imx__range{
  margin:22px 0 0;
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
.imx__range bdi{
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;
  color:var(--navy,#292369);
}

/* ── the metric system: one featured financial card + compact reach cards ──
   Weight carries the results/reach distinction the two lists used to carry:
   the featured card is large and green-accented (a verified value), the reach
   cards are compact with navy numerals and plain labels — present, defined,
   never dressed as results. */
.imx{
  margin-top:22px;
  display:grid;gap:18px;
  align-items:stretch;
}
.imx--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.imx--row .imx__side{grid-template-columns:repeat(3,1fr)}

.imx__c{
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
}
/* white cards sit on the pale-green field here — the line token alone is too
   faint at this size, so the border deepens one step (page-scoped, no token
   change) */
.sec--framed .imx__c,.sec--framed .iarea,.sec--framed .ilim li{border-color:#C7CFBB}

.imx__f{
  display:flex;flex-direction:column;
  padding:28px 30px 22px;
}
.imx__n{
  margin:0;
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:clamp(2.6rem,3.6vw,3.2rem);line-height:1.12;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.imx__u{
  margin-inline-start:10px;
  font-size:1.1rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
}
.imx__l{
  margin:12px 0 0;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.5;
  color:var(--navy,#292369);
}
/* the public definition is part of the metric, not small print — body floor */
.imx__d{
  margin:8px 0 0;
  font-size:1rem;line-height:1.75;
  color:var(--body,#3C4152);
}

.imx__side{display:grid;gap:14px;align-content:stretch}
.imx__s{
  display:flex;flex-direction:column;
  padding:16px 20px 12px;
}
.imx__sn{
  margin:0;
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;
  font-size:1.5rem;line-height:1.2;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.imx__sl{
  margin:4px 0 0;
  font-size:1rem;font-weight:var(--w-mid,600);line-height:1.5;
  color:var(--navy,#292369);
}
.imx__sd{
  margin:6px 0 0;
  font-size:1rem;line-height:1.65;
  color:#474D61;
}

/* every metric routes to its definition — 44px target, aligned to a shared
   bottom line so cards in a row agree (the B81 lesson) */
.imx__how{
  margin-top:auto;padding-top:10px;
  display:inline-flex;align-items:center;min-height:44px;
  align-self:flex-start;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  text-underline-offset:3px;
}
.imx__how:hover{text-decoration:underline}
.imx__how:focus-visible,.iarea__go:focus-visible,.ires__how:focus-visible,
.imeth2__all:focus-visible,.imeth2__i summary:focus-visible,
.ideeds__also a:focus-visible{
  outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px;
}

/* ── work-area cards: article + explicit action (resets of §89 .iarea) ──
   The card is no longer one big anchor, so the lift-on-hover moves to the card's
   hover only as a border cue; the action link carries its own affordance. */
.iarea{transition:border-color .18s ease,box-shadow .18s ease}
.iarea:hover{
  border-color:var(--green,#7DC148);
  box-shadow:0 6px 22px rgba(41,35,105,.09);
  transform:none;
}
.iarea__go{text-decoration:none}
.iarea__go:hover{text-decoration:underline;text-underline-offset:3px}
.iarea__go--alt{color:#556070}
.iareas__note{
  margin:18px 0 0;
  font-size:1rem;line-height:1.7;
  color:#474D61;
}

/* ── the supplementary evidence-list link (open campaigns beside the archive) ── */
.ideeds__also{margin:20px 0 0;font-size:1rem}
.ideeds__also a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  text-underline-offset:3px;
}
.ideeds__also a:hover{text-decoration:underline}

/* ── limits triad: equal heights whatever the copy lengths ── */
.ilim li{display:flex;flex-direction:column}
.ilim li span{line-height:1.75}

/* ── methodology accordion (replaces §89's single .imeth disclosure) ──
   One <details> PER metric, each carrying the stable #m-<key> anchor, so a
   «كيف احتُسب؟» link lands on a row that is one click from open with no
   JavaScript at all. The caret follows the §4 rule: PHYSICAL borders with a
   direction-aware rotation, and [open] points DOWN, never a 180° flip. */
.imeth2{margin-top:26px;border-top:1px solid var(--line,#D9DFD0)}
.imeth2__hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:14px 2px 10px;
}
.imeth2__hd p{
  margin:0;
  font-size:1rem;color:var(--body,#3C4152);
}
.imeth2__all{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  text-underline-offset:3px;
}
.imeth2__all:hover{text-decoration:underline}

.imeth2__i{
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  margin-top:10px;
}
.imeth2__i summary{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:12px 18px;
  font-size:1.02rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  cursor:pointer;list-style:none;
}
.imeth2__i summary::-webkit-details-marker{display:none}
.imeth2__i summary:hover .imeth2__t{text-decoration:underline;text-underline-offset:3px}
.imeth2__t{flex:1 1 auto}
.imeth2__i summary .imp__scope{margin:0}
.imeth2__i summary i{
  flex:0 0 auto;
  width:8px;height:8px;
  border-right:2px solid var(--green-ink,#4E8A24);
  border-bottom:2px solid var(--green-ink,#4E8A24);
  transform:rotate(135deg);
  transition:transform .18s ease;
}
[dir="rtl"] .imeth2__i summary i{transform:rotate(-45deg)}
.imeth2__i[open] summary i,[dir="rtl"] .imeth2__i[open] summary i{transform:rotate(45deg)}
.imeth2__b{padding:4px 18px 18px}
.imeth2__b dl{
  margin:0;
  display:grid;grid-template-columns:auto 1fr;
  gap:7px 14px;
  align-items:baseline;
}
.imeth2__b dt{
  font-size:.875rem;font-weight:var(--w-mid,600);
  color:var(--green-ink,#4E8A24);
  white-space:nowrap;
}
.imeth2__b dd{
  margin:0;
  font-size:1rem;line-height:1.7;
  color:var(--body,#3C4152);
}
.imeth2__c{
  margin:13px 0 0;padding-top:12px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:1rem;line-height:1.7;
  color:#474D61;
}
.imeth2__upd{
  margin:16px 0 0;
  font-size:1rem;line-height:1.7;
  color:#474D61;
}
.imeth2__upd bdi{
  font-family:var(--mono,monospace);
  font-variant-numeric:tabular-nums;
  color:var(--navy,#292369);
}

/* ── review-mode campaign cards: status instead of a dead CTA ── */
.deed__st{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:#556070;
}

@media (prefers-reduced-motion:reduce){
  .iarea,.imeth2__i summary i{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .imx--split{grid-template-columns:1fr}
  .imx--row .imx__side{grid-template-columns:repeat(2,1fr)}
  .imeth2__hd{padding-inline:0}
}
@media (max-width:760px){
  .imx--row .imx__side{grid-template-columns:1fr}
  .imx__n{font-size:2.4rem}
  .imx__f{padding:22px 20px 16px}
  .imeth2__i summary{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════════════════════
   §91. IMPACT HERO — DECORATIVE BACKGROUND (Batch 89)

   The generated watercolor artwork behind the /impact hero, and nothing else:
   the class is applied only where the impact page passes
   `variant="phero--impact"` to x-page-hero, so no other hero can pick it up.

   Layered, all in CSS, no markup and no JavaScript:
     1. warm neutral fallback color   — what renders if the image never loads
     2. the artwork                   — public/images/pages/impact/…webp
     3. a light warm-white veil — softens the darkest strokes under text (the
        artwork itself is near-white; see the B89b note at the rule)
     4. the existing hero content     — normal flow, above all backgrounds

   Backgrounds paint below content by definition, so no z-index and no stacking
   games — nothing can slip behind the page. .phero already has
   overflow:hidden, so `cover` can never cause horizontal overflow, and a
   background changes no box dimensions, so there is no layout shift.

   The position is PHYSICAL `left center` on purpose, not inline-aware: the
   artwork's detail lives on its left, and in RTL the headline and actions sit
   on the right — over the quiet side — while the detail shows around the navy
   panel (which is opaque and simply paints over it). Decorative only: it must
   never read as field activity, geography, or evidence — abstract washes and
   plotted curves, nothing depictive.
   ══════════════════════════════════════════════════════════════════════════ */

/* Veil weights (B89b, corrected against the real render): the artwork is
   already a near-white watercolor — it carries its own veil. At the review's
   suggested 82–90% warm-white it disappeared entirely and the hero read as a
   plain tinted box (Wessam confirmed against production). So the overlay's job
   here is only to soften the artwork's darkest strokes under text, not to
   recreate the neutral surface the image already is. Desktop 14%; stacked
   layouts 28%; phones 38% AND the crop swaps to the artwork's quiet right side,
   because `cover` on a tall narrow box would otherwise show exactly the busiest
   left region behind every line of content. */
.phero--impact{
  background-color:#F8F8F2;
  background-image:
    linear-gradient(rgba(250,249,244,.14), rgba(250,249,244,.14)),
    url('../../images/pages/impact/impact-hero-background.webp');
  background-repeat:no-repeat;
  background-position:0 0, left center;
  background-size:auto, cover;
}

@media (max-width:1080px){
  .phero--impact{
    background-image:
      linear-gradient(rgba(250,249,244,.28), rgba(250,249,244,.28)),
      url('../../images/pages/impact/impact-hero-background.webp');
  }
}
@media (max-width:760px){
  .phero--impact{
    background-image:
      linear-gradient(rgba(250,249,244,.38), rgba(250,249,244,.38)),
      url('../../images/pages/impact/impact-hero-background.webp');
    background-position:0 0, right center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §92. FUNDED CAMPAIGNS — THE VERIFIABLE ARCHIVE (Batch 90)

   Rebuild of the eleven-batch stub (a bare title + serial list). This page is
   linked by name from five places — the impact page's evidence links land here
   — so it is the site's trust proof, and the card is built to READ as a record:
   a status chip, a labelled three-fact ledger (completion date, amount raised,
   document-publication state), an optional dated field-update line, and one
   action into the campaign's full record. Navy and mono carry the "ledger"
   feel; green is reserved for the completed-funding chip and the action.

   Names are new (`.fcard*`, `.farch*`, `.fpag`), not overrides — the donate
   "deed" card (.deed*) is a different object with a different job.
   ══════════════════════════════════════════════════════════════════════════ */

.farch{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.fcard{
  display:flex;flex-direction:column;min-width:0;   /* a 1fr track's default min-width:auto lets a long value blow the grid */
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;      /* one step deeper than --line on the framed field */
  border-radius:var(--r,4px);
  overflow:hidden;
}

/* cover: a real image or the campaign-image fallback; the chip rides on top */
.fcard__img{
  position:relative;display:block;
  aspect-ratio:16/9;background:var(--stone-2,#F8FAF5);
  border-bottom:1px solid var(--line,#D9DFD0);
}
.fcard__chip{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:2px;
  font-family:var(--mono,monospace);font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  color:#fff;
}
.fcard__chip--done{background:var(--green-ink,#4E8A24)}
.fcard__chip--closed{background:var(--navy,#292369)}

.fcard__bd{
  display:flex;flex-direction:column;
  padding:20px 22px 6px;
}
.fcard__cat{
  margin:0 0 6px;
  font-family:var(--mono,monospace);font-size:.8125rem;letter-spacing:.02em;
  color:var(--green-ink,#4E8A24);
}
.fcard__t{margin:0;font-size:1.18rem;font-weight:var(--w-bold,800);line-height:1.45}
.fcard__t a{color:var(--navy,#292369);text-decoration:none}
.fcard__t a:hover{text-decoration:underline;text-underline-offset:3px}
.fcard__t a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px}

.fcard__where{
  margin:8px 0 0;
  display:flex;align-items:center;gap:7px;
  font-size:.9375rem;color:var(--muted,#5A6076);
}
.fcard__where svg{
  flex:0 0 auto;width:15px;height:15px;
  fill:none;stroke:var(--green-ink,#4E8A24);stroke-width:1.7;
}

/* the ledger: three verifiable facts, each on its own row with a mono value */
.fcard__rec{
  margin:16px 0 0;padding:14px 0 4px;
  border-top:1px solid var(--line,#D9DFD0);
  display:grid;gap:11px;
}
.fcard__rec > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.fcard__rec dt{
  margin:0;flex:0 0 auto;
  font-size:.9375rem;color:var(--muted,#5A6076);
}
.fcard__rec dd{
  margin:0;text-align:end;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
}
.fcard__rec bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
.fcard__pct{
  display:block;margin-top:2px;
  font-family:var(--ar-body);font-weight:400;font-size:.8125rem;
  color:var(--muted,#5A6076);
}
.fcard__na{color:#8A6D1F;font-weight:var(--w-mid,600)}   /* "قيد الإعداد" / "غير مُسجَّل" — amber, honest not alarming */

/* a genuinely recorded field update — a timeline entry, not a delivery claim */
.fcard__upd{
  margin:14px 0 0;padding:12px 14px;
  background:var(--stone-2,#F8FAF5);
  border-inline-start:3px solid var(--lav,#6E66B0);
  border-radius:2px;
  font-size:.9375rem;line-height:1.65;color:var(--body,#3C4152);
}
.fcard__upd b{
  display:block;margin-bottom:3px;
  font-family:var(--mono,monospace);font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--lav,#6E66B0);
}
.fcard__upd time{
  display:block;margin-top:4px;
  font-size:.8125rem;color:var(--muted,#5A6076);
}
.fcard__upd time bdi{font-family:var(--mono,monospace)}

/* the action sits on a shared bottom line so cards in a row align */
.fcard__ft{
  margin-top:auto;padding:16px 22px 20px;
}
.fcard__ft .btn{width:100%}

/* empty archive — a statement in a panel, never an error */
.farch__none{
  text-align:center;padding:56px 26px;
  background:var(--white,#FFF);
  border:1px dashed var(--line,#D9DFD0);
  border-radius:var(--r,4px);
}
.farch__none h2{margin:0 0 12px;font-size:1.3rem;font-weight:var(--w-bold,800);color:var(--navy,#292369)}
.farch__none p{
  margin:0 auto;max-width:56ch;
  font-size:1rem;line-height:1.85;color:var(--body,#3C4152);
}
.farch__none a{color:var(--green-ink,#4E8A24);text-underline-offset:3px}

.fpag{margin-top:36px}

/* ── responsive ── */
@media (max-width:1080px){
  .farch{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .farch{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   §93. POLICY REGISTER — DELIBERATE ODD CARD, PDF ACTION, FOCUS (Batch 91)

   Three page-scoped fixes from the review. §87's `.lgx` two-column grid is
   RESET here, per the append-only convention, not edited in place.

   1. THE HALF-EMPTY ROW. «شروط استخدام الموقع» and «الشكاوى والملاحظات» each
      ended a group at an odd count, leaving a card marooned beside an empty
      column that read as a rendering fault. A group's count is data — three
      privacy subjects today, four if counsel adds one — so this cannot be
      solved by choosing a better fixed column count. The last card of an odd
      set spans the full width and re-lays itself HORIZONTALLY (text beside its
      action, like `.lgx__doc`), which reads as a deliberate wide row rather
      than a stretched card. Same count-driven principle as the documents
      page's layoutFor().

   2. THE PDF ACTION. A secondary download beside the readable page, carrying
      its own size meta — never replacing the HTML.

   3. FOCUS AND TARGETS. Page-scoped keyboard-focus states and 44px minimums
      for the new controls. The site-wide type/a11y batch stays separate.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the deliberate full-width row ── */
.lgx > .lgx__c:last-child:nth-child(odd){
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px 30px;
}
/* the body keeps its own rhythm; only the outer box changed shape */
.lgx > .lgx__c:last-child:nth-child(odd) .lgx__c__b{min-width:0}
.lgx > .lgx__c:last-child:nth-child(odd) .lgx__s{max-width:78ch}
.lgx > .lgx__c:last-child:nth-child(odd) .lgx__c__a{
  flex:0 0 auto;min-width:248px;
  margin-top:0;                     /* not pushed to a bottom line — it sits beside */
  display:flex;flex-direction:column;gap:10px;
}
.lgx > .lgx__c:last-child:nth-child(odd) .lgx__c__a .btn{width:100%}

/* ── 2. the PDF download beside the page ── */
/* .875rem = 14px: this is metadata, and the standing metadata floor is 14px.
   It was drafted at 12px and caught here rather than in review — the floor
   applies to our own new elements first. */
.lgx__pdf span,.lgp__dl span{
  display:block;margin-top:2px;
  font-family:var(--mono,monospace);
  font-size:.875rem;font-weight:400;letter-spacing:.02em;
  color:var(--muted,#5A6076);
}
.lgp__dl{margin:0 0 22px}
.lgp__dl .btn{display:inline-flex;flex-direction:column;align-items:center}

/* ── 3. page-scoped keyboard focus + touch targets ── */
.lgx__c__a .btn,.lgx__doc__a .btn,.lgx__rep__a .btn,.lgp__dl .btn{
  min-height:44px;
}
.lgx__c__a .btn:focus-visible,
.lgx__doc__a .btn:focus-visible,
.lgx__rep__a .btn:focus-visible,
.lgp__dl .btn:focus-visible,
.dlnav a:focus-visible,
.lgx__cta .btn:focus-visible{
  outline:2px solid var(--navy,#292369);
  outline-offset:3px;
}

/* ── responsive: the wide row stacks before it can crowd ── */
@media (max-width:900px){
  .lgx > .lgx__c:last-child:nth-child(odd){
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .lgx > .lgx__c:last-child:nth-child(odd) .lgx__c__a{min-width:0}
}

/* ── checkout: which terms govern this gift (B91, §93 cont.) ──
   Deliberately quiet body copy directly above the confirm button, not a boxed
   "legal" strip: it is a statement of fact the donor should read, and boxing it
   is how such lines get skipped. 16px floor — it is descriptive copy. */
.co__terms{
  margin:0 0 16px;
  font-size:1rem;line-height:1.8;
  color:var(--body,#3C4152);
}
/* navy, not --green-ink: measured, green-ink is 4.21:1 on white, which is
   AA-large only. This line is a legal statement on the payment step and its
   link is normal-size body text, so it takes the 13.65:1 colour. The wider
   green-ink question is a TOKEN decision and belongs to the agreed typography
   + accessibility batch, not to a page batch. */
.co__terms a{color:var(--navy,#292369);text-decoration:underline;text-underline-offset:3px}
.co__terms a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px}
.co__terms bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}

/* ── §93 cont. — two MEASURED contrast defects, fixed ──
   Found by probing computed colours on the rendered page rather than by eye,
   which is the only way these surface: both looked fine in review.

   1. `.dstat--ok` text measured 3.84:1 on its own pale-green chip — below AA
      for text this size. Darkened to #43761D (4.98:1 on the chip, 5.46:1 on
      white); the badge keeps its background, border and identity.
      ⚠ This is the SHARED status chip, so it also darkens the «متاحة للتحميل»
      badge on the documents page. That page is approved, but it was failing the
      same check there — a signed-off page is not a reason to ship a known AA
      failure, and the change is a shade, not a redesign.

   2. The reporting eyebrow «الإبلاغ» carried an inline `color:var(--green)`
      override and measured 2.19:1. The inline style is removed in the blade and
      the eyebrow takes navy here — it sits at 16px inside .lgx__rep__c, where
      --green-ink would still only reach 4.21:1.

   NOT fixed here, and deliberately: --green-ink on white is 4.21:1 site-wide
   (links, "more" actions, eyebrows). That is a TOKEN decision affecting every
   page and belongs to the agreed typography + accessibility batch. Recorded so
   it is a decision, not an oversight. */
.dstat--ok{color:#43761D}
.lgx__rep__c .eyebrow{color:var(--navy,#292369)}

/* ══════════════════════════════════════════════════════════════════════════
   §94. /ABOUT — THE INSTITUTIONAL PROFILE (Batch 92)

   The page was competent and forgettable: a photo-and-copy hero, then five
   interchangeable module bands. This section gives it one dominant visual
   moment and a narrative rhythm, WITHOUT depending on photography FPA has not
   verified.

   The hero is therefore built from the two things the brand actually owns: the
   navy field and the interlocking-circle logo geometry (§10's one sanctioned
   motif). The registration facts sit in it as a card rather than in a strip
   below, because "who is this organisation, legally" is the first question this
   page exists to answer.

   Names are new (`.ahero`, `.aid`, `.astory`, `.aprin`, `.arole`, `.afields`,
   `.aev`, `.agov`, `.apaths`) — the old `.ghero/.itrust/.about/.principles/
   .wproc/.astats/.gcards/.fteaser` rules are left untouched for the other pages
   that use them.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the hero ── */
.ahero{
  position:relative;overflow:hidden;
  /* Layered, in paint order (bottom last):
       1. #191446            — the fallback field if the artwork never loads
       2. the artwork        — abstract, brand-navy, claims nothing (Tier A)
       3. a directional scrim — deepens the side the Arabic headline sits on
     The scrim is not decoration: the artwork's mauve and rose passages sit on
     the RIGHT, which in RTL is exactly where the headline and lede land. It is
     angled, not flat, so the artwork stays visible on the quiet left while the
     text side keeps its contrast. Verified by sampling rendered pixels, not by
     eye — see the note in §94 about the navy-on-navy headline. */
  background-color:#191446;
  background-image:
    linear-gradient(255deg, rgba(20,16,58,.86) 0%, rgba(20,16,58,.62) 38%, rgba(20,16,58,.20) 72%, rgba(20,16,58,.10) 100%),
    url('../../images/pages/about/about-hero-background.webp');
  background-repeat:no-repeat;
  background-position:0 0, center center;
  background-size:auto, cover;
  color:#fff;
  padding:18px 0 64px;
}
/* The artwork carries its own curves, so the drawn motif drops to a whisper
   rather than competing with them. It stays because it is the brand geometry and
   because it is what renders if the image fails. */
.ahero__motif{
  position:absolute;inset-block-start:-120px;inset-inline-start:-160px;
  width:min(58vw,620px);height:auto;
  opacity:.35;pointer-events:none;
}
.ahero__wrap{position:relative;z-index:1}
.ahero .crumb{margin-bottom:30px}
/* the non-link segment defaults to --muted, which is a dark grey on navy */
.ahero .crumb span{color:rgba(255,255,255,.65)}
/* the "/" separator sampled 2.66:1 over the artwork. It is decorative, but a
   visible glyph should not sit under AA just because it is punctuation. */
.ahero .crumb i{color:rgba(255,255,255,.55)}
.ahero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,382px);
  gap:38px 54px;align-items:center;
}
.ahero__bd{min-width:0}
.ahero__eyebrow{
  margin:0 0 14px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.06em;
  color:var(--green,#7DC148);
}
/* The one dominant typographic moment on the page. clamp() so it stays a
   statement at 1440 and still fits a 390px phone without a second rule. */
/* ⚠ colour is EXPLICIT: the global `h1` rule sets navy, and it beats the white
   inherited from .ahero — which rendered the headline's first line navy-on-navy
   and nearly invisible. Caught by dumping computed colours, not by looking at a
   screenshot, where it read as "dark heading, probably intentional". */
.ahero__h{
  color:#fff;
  margin:0;
  font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:var(--w-bold,800);
  line-height:1.28;letter-spacing:-.015em;
  text-wrap:balance;
  max-width:20ch;
}
.ahero__h em{font-style:normal;color:var(--green,#7DC148)}
.ahero__lede{
  margin:20px 0 0;max-width:58ch;
  font-size:1.0625rem;line-height:1.9;
  color:rgba(255,255,255,.82);
}
.ahero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
.ahero__alt{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:var(--w-mid,600);
  color:#fff;text-underline-offset:4px;
}
.ahero__alt:hover{text-decoration:underline}
.ahero__alt:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:3px;border-radius:2px}
.ahero__alt--dark{color:var(--navy,#292369)}

/* the identity card — the legal facts as one artefact */
.aid{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  padding:24px 26px 20px;
  backdrop-filter:blur(2px);
}
.aid__ph{margin:-24px -26px 20px;overflow:hidden;border-radius:5px 5px 0 0}
.aid__ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.aid__k{
  margin:0 0 16px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.04em;
  color:var(--green,#7DC148);
}
.aid__l{margin:0}
.aid__l > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.13);
}
.aid__l > div:first-child{border-top:0;padding-top:0}
.aid__l dt{margin:0;font-size:.9375rem;color:rgba(255,255,255,.72)}
.aid__l dd{
  margin:0;text-align:end;
  font-size:1rem;font-weight:var(--w-mid,600);color:#fff;
}
.aid__l bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
.aid__go{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--green,#7DC148);text-underline-offset:3px;
}
.aid__go:hover{text-decoration:underline}
.aid__go:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:3px;border-radius:2px}

/* ── 2. the founding story ── */
.astory{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:34px 52px;align-items:start;
}
.astory__bd h2{margin:8px 0 18px}
.astory__lead{
  margin:0 0 16px;
  font-size:1.14rem;line-height:1.85;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
  max-width:62ch;
}
.astory__bd p{font-size:1rem;line-height:1.9;color:var(--body,#3C4152);max-width:66ch}
.astory__routes{
  margin:24px 0 0;padding:18px 0 0;list-style:none;
  border-top:1px solid var(--line,#D9DFD0);
  display:flex;flex-wrap:wrap;gap:8px 28px;
}
.astory__routes a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:var(--w-mid,600);
  color:var(--navy,#292369);text-underline-offset:3px;
}
.astory__routes a::after{content:'←';margin-inline-start:8px;color:var(--green-ink,#4E8A24)}
.astory__routes a:hover{text-decoration:underline}
.astory__note{
  padding:22px 24px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--navy,#292369);
  border-radius:3px;
}
.astory__note__k{
  margin:0 0 8px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--navy,#292369);
}
.astory__note p{margin:0;font-size:1rem;line-height:1.8;color:var(--body,#3C4152)}
.astory__note bdi{font-family:var(--mono,monospace)}

/* ── 3. the principles: the page's signature section ── */
.aprin{
  margin:34px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--navy,#292369);
}
.aprin li{
  padding:26px 24px 22px;
  border-inline-start:1px solid var(--line,#D9DFD0);
}
.aprin li:first-child{border-inline-start:0}
/* --green measured 1.92:1 here — below AA even at the large-text threshold.
   --green-ink is 4.21:1, which clears the 3:1 large-text minimum at 30px. */
.aprin__n{
  display:block;margin-bottom:14px;
  font-family:var(--mono,monospace);
  font-size:1.9rem;font-weight:var(--w-bold,800);line-height:1;
  color:var(--green-ink,#4E8A24);
}
.aprin h3{
  margin:0 0 10px;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.aprin p{margin:0;font-size:1rem;line-height:1.8;color:var(--body,#3C4152)}

/* ── 4. the sector role ── */
.arole{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:30px 48px;align-items:center;
  padding:30px 32px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.arole__bd h2{margin:8px 0 14px}
.arole__bd p{margin:0;font-size:1rem;line-height:1.9;color:var(--body,#3C4152);max-width:70ch}
.arole__bd bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
.arole__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.arole__term{
  padding:22px 24px;text-align:center;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
}
.arole__term__k{
  margin:0 0 8px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--navy,#292369);   /* 4.21:1 as green-ink at 14px — under AA */
}
.arole__term__v{
  margin:0;
  font-family:var(--mono,monospace);font-variant-numeric:tabular-nums;
  font-size:1.6rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.arole__term__s{
  margin:10px 0 0;
  font-size:.9375rem;line-height:1.7;color:var(--muted,#5A6076);
}

/* ── 5. fields of work: cards with real purpose text ── */
.afields{
  margin-top:30px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.afield{
  display:flex;flex-direction:column;min-width:0;
  padding:24px 24px 18px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-radius:3px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.afield:hover{border-color:var(--green,#7DC148);box-shadow:0 6px 22px rgba(41,35,105,.08)}
.afield__ic{
  width:32px;height:32px;margin-bottom:14px;
  fill:none;stroke:var(--green-ink,#4E8A24);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.afield h3{
  margin:0 0 8px;
  font-size:1.12rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.afield p{margin:0;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.afield__go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);text-underline-offset:3px;   /* AA at 15px */
}
.afield__go:hover{text-decoration:underline}
.afield__go:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px}

/* ── 6. evidence, in two visibly different registers ──
   The record group is bordered and calm (a declaration); the site group is
   green-keyed and live (a measurement). They are never in one row. */
.aev{margin-top:30px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.aev__g{
  padding:26px 28px 22px;
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.aev__g--record{background:var(--white,#FFF);border-inline-start:3px solid var(--lav,#6E66B0)}
.aev__g--site{background:var(--stone-2,#F8FAF5);border-inline-start:3px solid var(--green,#7DC148)}
.aev__k{
  margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-size:1.14rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
.aev__k span{
  font-family:var(--mono,monospace);font-size:.875rem;font-weight:400;
  color:var(--muted,#5A6076);
}
.aev__src{
  margin:8px 0 0;
  font-size:.9375rem;line-height:1.7;color:var(--muted,#5A6076);
}
.aev__row{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line,#D9DFD0);
  display:grid;gap:22px;
}
/* one figure inside a group — a block, so the two never sit side by side and
   get read as a single four-figure row again */
.aev__f{min-width:0}
.aev__n{
  margin:0;
  font-family:var(--mono,monospace);font-variant-numeric:tabular-nums;
  font-size:2.1rem;font-weight:var(--w-bold,800);line-height:1.15;
  color:var(--navy,#292369);
}
.aev__n--live{color:var(--green-ink,#4E8A24)}
.aev__n--none{color:var(--muted,#5A6076)}
.aev__u{margin-inline-start:8px;font-size:1rem;font-weight:var(--w-mid,600);color:var(--navy,#292369)}
.aev__l{
  margin:8px 0 0;
  font-size:1.0625rem;font-weight:var(--w-mid,600);line-height:1.6;
  color:var(--navy,#292369);
}
.aev__s{margin:8px 0 0;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.aev__s a{color:var(--navy,#292369);text-decoration:underline;text-underline-offset:3px}
.aev__more{
  display:inline-flex;align-items:center;min-height:44px;margin-top:16px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);text-underline-offset:3px;
}
.aev__more:hover{text-decoration:underline}

/* ── 7. governance, one band ── */
.agov{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:28px 44px;align-items:start;
  padding:30px 32px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.agov__bd h2{margin:8px 0 12px;font-size:1.5rem;font-weight:var(--w-bold,800);color:var(--navy,#292369)}
.agov__bd p{margin:0;font-size:1rem;line-height:1.85;color:var(--body,#3C4152)}
.agov__l{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.agov__l a{
  display:block;height:100%;
  padding:16px 18px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-radius:3px;
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.agov__l a:hover{border-color:var(--green,#7DC148);background:var(--white,#FFF)}
.agov__l a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px}
.agov__l b{
  display:block;margin-bottom:5px;
  font-size:1.0625rem;font-weight:var(--w-bold,800);color:var(--navy,#292369);
}
.agov__l span{display:block;font-size:1rem;line-height:1.7;color:var(--body,#3C4152)}

/* ── 8. the two paths ── */
.apaths{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.apath{
  display:flex;flex-direction:column;
  padding:28px 30px 24px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.apath--join{
  background:var(--navy,#292369);
  border-color:var(--navy,#292369);
}
.apath__k{
  margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.05em;
  color:var(--green-ink,#4E8A24);
}
.apath--join .apath__k{color:var(--green,#7DC148)}
.apath h3{margin:0 0 10px;font-size:1.3rem;font-weight:var(--w-bold,800);color:var(--navy,#292369)}
.apath p{margin:0;font-size:1rem;line-height:1.85;color:var(--body,#3C4152)}
.apath--join h3{color:#fff}
.apath--join p{color:rgba(255,255,255,.82)}
.apath__a{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px}
/* ⚠ .btn--line sets `background:var(--white)`, so overriding only the COLOUR to
   white produced a white label on a white button — invisible, and caught by
   measuring computed colours rather than by looking. The background has to go
   transparent for a ghost button on navy. */
.apath--join .btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.apath--join .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10)}

@media (prefers-reduced-motion:reduce){
  .afield,.agov__l a{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .ahero__grid,.astory,.arole,.agov{grid-template-columns:1fr}
  .aprin{grid-template-columns:repeat(2,1fr)}
  .aprin li:nth-child(3){border-inline-start:0}
  .aprin li:nth-child(n+3){border-top:1px solid var(--line,#D9DFD0)}
  .afields{grid-template-columns:repeat(2,1fr)}
  .aev{grid-template-columns:1fr}
  .agov__bd{max-width:64ch}
}
@media (max-width:760px){
  .ahero{padding-bottom:46px}
  .ahero__motif{inset-inline-start:-220px;opacity:.55}
  .aprin{grid-template-columns:1fr}
  .aprin li{border-inline-start:0}
  .aprin li + li{border-top:1px solid var(--line,#D9DFD0)}
  .afields,.apaths{grid-template-columns:1fr}
  .agov__l{grid-template-columns:1fr}
  .arole,.agov{padding:24px 20px}
  .apath{padding:24px 22px 20px}
}

/* ══════════════════════════════════════════════════════════════════════════
   §95. /ABOUT/STRATEGY — THE DECISION MODEL (Batch 94)

   The page was a mission statement followed by three long articles in a narrow
   column. The rebuild makes the STRUCTURE carry the argument: a standard, then
   a choice, then execution — visible as a model before any of it is read.

   No photography, by design. The visual language is the model itself: one
   path with three nodes in the hero, three numbered stages, then three
   chapters that all answer the same questions in the same order. Nothing here
   depicts data or implies a process FPA has not confirmed.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. hero ── */
.shero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% -20%, rgba(125,193,72,.13), transparent 60%),
    linear-gradient(172deg,#2E2775 0%,#221C57 60%,#191446 100%);
  color:#fff;
  padding:18px 0 60px;
}
.shero__path{
  position:absolute;inset-block-end:-40px;inset-inline-start:0;
  width:min(76vw,900px);height:auto;pointer-events:none;opacity:.85;
}
.shero__wrap{position:relative;z-index:1}
.shero .crumb{margin-bottom:28px}
.shero .crumb a{color:rgba(255,255,255,.72)}
.shero .crumb b{color:#fff}
.shero .crumb i{color:rgba(255,255,255,.5)}
.shero__bd{max-width:64ch}
.shero__eyebrow{
  margin:0 0 12px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.06em;
  color:var(--green,#7DC148);
}
.shero__h{
  color:#fff;margin:0;
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:var(--w-bold,800);line-height:1.25;letter-spacing:-.015em;
}
/* the formal-strategy metadata row, only rendered when it exists */
.shero__meta{
  margin:18px 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-size:.9375rem;color:rgba(255,255,255,.8);
}
.shero__meta bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums;color:#fff}
/* …and the honest alternative when it does not */
.shero__note{
  margin:20px 0 0;padding:16px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-inline-start:3px solid var(--green,#7DC148);
  border-radius:3px;
  font-size:1rem;line-height:1.85;
  color:rgba(255,255,255,.86);
}
.shero__note b{color:#fff}
.shero__lede{
  margin:20px 0 0;
  font-size:1.0625rem;line-height:1.9;
  color:rgba(255,255,255,.82);
}
.shero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.shero__alt{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:var(--w-mid,600);color:#fff;text-underline-offset:4px;
}
.shero__alt:hover{text-decoration:underline}
.shero__alt:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:3px;border-radius:2px}

/* ── 2. the registered mission, as a statement not a wall ── */
.smission{
  margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:26px 44px;align-items:start;
  padding:30px 34px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--navy,#292369);
  border-radius:4px;
}
.smission__k{
  grid-column:1/-1;margin:0;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.04em;
  color:var(--navy,#292369);
}
.smission__q{margin:0}
.smission__q p{
  margin:0;
  font-size:1.16rem;line-height:2;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
}
.smission__src{
  font-size:1rem;line-height:1.85;color:var(--body,#3C4152);
  padding-top:4px;
}
.smission__src b{color:var(--navy,#292369)}

/* ── 3. the model: three stages on one line ── */
.smodel{
  margin:32px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  position:relative;
}
/* the connector: one rule behind the three cards, so they read as a sequence
   rather than three unrelated tiles. Decorative only. */
.smodel::before{
  content:'';position:absolute;
  inset-block-start:38px;inset-inline:8%;
  height:1px;background:var(--line,#D9DFD0);
}
.smodel__i{position:relative}
.smodel__i > a{
  display:flex;flex-direction:column;height:100%;
  padding:22px 24px 18px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-radius:4px;
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.smodel__i > a:hover{border-color:var(--green,#7DC148);box-shadow:0 6px 22px rgba(41,35,105,.08)}
.smodel__i > a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}
.smodel__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-bottom:14px;
  border-radius:50%;
  background:var(--navy,#292369);
  font-family:var(--mono,monospace);font-size:.9375rem;font-weight:var(--w-bold,800);
  color:#fff;
}
.smodel__role{
  display:block;margin-bottom:6px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--green-ink,#4E8A24);
}
.smodel__t{
  display:block;margin-bottom:8px;
  font-size:1.16rem;font-weight:var(--w-bold,800);line-height:1.45;
  color:var(--navy,#292369);
}
.smodel__s{display:block;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.smodel__go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
}
.smodel__i > a:hover .smodel__go{text-decoration:underline;text-underline-offset:3px}

/* ── 4. the chapters ── */
.schap{max-width:88ch}
.schap__hd{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px}
.schap__n{
  flex:0 0 auto;
  font-family:var(--mono,monospace);
  font-size:2.6rem;font-weight:var(--w-bold,800);line-height:1;
  color:var(--green-ink,#4E8A24);
}
.schap__role{
  margin:0 0 4px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--muted,#5A6076);
}
.schap__hd h2{margin:0;font-size:1.7rem;font-weight:var(--w-bold,800);line-height:1.35}
.schap__hd h2 span{font-weight:var(--w-mid,600);color:var(--muted,#5A6076)}

/* the four-part shape every chapter shares — a label column and its answer */
.schap__l{margin:0;display:grid;gap:0}
.schap__l > div{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:10px 26px;
  padding:18px 0;
  border-top:1px solid var(--line,#D9DFD0);
}
.schap__l dt{
  margin:0;
  font-family:var(--mono,monospace);font-size:.9375rem;letter-spacing:.02em;
  color:var(--navy,#292369);
}
.schap__l dd{margin:0;font-size:1.0625rem;line-height:1.95;color:var(--body,#3C4152)}
/* what the principle REFUSES is the half that makes it a principle */
.schap__no dt{color:#8A6D1F}
.schap__no dd{color:#4A4433}
.schap__ev{
  display:inline-flex;align-items:center;min-height:44px;margin-top:20px;
  font-size:1rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);text-underline-offset:3px;
}
.schap__ev:hover{text-decoration:underline}
.schap__ev:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px}

/* ── 5. the gateway ── */
.sgate{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sgate__c{
  display:flex;flex-direction:column;
  padding:28px 30px 24px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-radius:4px;
}
.sgate__c--alt{background:var(--navy,#292369);border-color:var(--navy,#292369)}
.sgate__k{
  margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.05em;
  color:var(--green-ink,#4E8A24);
}
.sgate__c--alt .sgate__k{color:var(--green,#7DC148)}
.sgate__c h3{margin:0 0 10px;font-size:1.3rem;font-weight:var(--w-bold,800);color:var(--navy,#292369)}
.sgate__c p{margin:0;font-size:1rem;line-height:1.85;color:var(--body,#3C4152)}
.sgate__c--alt h3{color:#fff}
.sgate__c--alt p{color:rgba(255,255,255,.84)}
.sgate__a{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px}
/* .btn--line carries a white background, so on navy it needs the ghost
   treatment — the invisible-button lesson from §94. */
.sgate__c--alt .btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.sgate__c--alt .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10)}

@media (prefers-reduced-motion:reduce){
  .smodel__i > a{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .smission{grid-template-columns:1fr}
  .smodel{grid-template-columns:1fr}
  .smodel::before{display:none}
  .sgate{grid-template-columns:1fr}
}
@media (max-width:760px){
  .shero{padding-bottom:44px}
  .shero__path{opacity:.5}
  .smission{padding:24px 20px}
  .schap__hd{gap:14px}
  .schap__n{font-size:2rem}
  .schap__hd h2{font-size:1.4rem}
  .schap__l > div{grid-template-columns:1fr;gap:6px}
  .sgate__c{padding:24px 22px 20px}
}

/* ══════════════════════════════════════════════════════════════════════════
   §96. /ABOUT — THE CLOSING VERIFICATION BAND (Batch 95)

   Replaces §94's two-card `.apaths` close. The navy participation card is gone:
   on a page built from warm white and pale sage it read as a marketing banner
   parked above the footer, it competed with the verification card instead of
   concluding anything, and its flat --navy was a visibly different blue from
   both the hero gradient and the ink footer.

   §94's `.apaths` / `.apath*` rules are now dead. They are LEFT IN PLACE per the
   append-only convention — the same treatment §88's `.imp__dec` got when
   `.imp__hist` superseded it — and belong to the orphaned-CSS cleanup batch
   alongside the old `.tdoc*` block.

   No gradient, no decorative circles, no background image: the review is right
   that this band should simply conclude, quietly.
   ══════════════════════════════════════════════════════════════════════════ */

.averify{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px 40px;
  padding:30px 34px;
  background:var(--stone-2,#F8FAF5);        /* pale sage, the page's own field */
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);   /* the one accent */
  border-radius:4px;
}
.averify__bd{min-width:0}
.averify__k{
  margin:0 0 8px;
  font-family:var(--mono,monospace);
  font-size:.875rem;letter-spacing:.05em;
  color:var(--green-ink,#4E8A24);
}
.averify__bd h2{
  margin:0 0 10px;
  font-size:1.5rem;font-weight:var(--w-bold,800);line-height:1.35;
  color:var(--navy,#292369);
}
.averify__bd p{
  margin:0;max-width:70ch;
  font-size:1rem;line-height:1.85;
  color:var(--body,#3C4152);
}
.averify__a{
  display:flex;flex-wrap:wrap;gap:10px;
  flex:0 0 auto;
}
.averify__a .btn{min-height:44px}

/* participation: one quiet line, spanning under both columns, never a card */
.averify__join{
  grid-column:1/-1;
  margin:0;padding-top:18px;
  border-top:1px solid var(--line,#D9DFD0);
  font-size:1rem;line-height:1.8;
  color:var(--muted,#5A6076);
}
.averify__join a{
  color:var(--navy,#292369);
  text-decoration:underline;text-underline-offset:3px;
}
.averify__join a:hover{color:var(--green-ink,#4E8A24)}
.averify__join a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px}

@media (max-width:860px){
  .averify{grid-template-columns:1fr;padding:26px 22px}
  /* stacked, full-width, still 44px — verification stays the conclusion */
  .averify__a{flex-direction:column;align-items:stretch}
  .averify__a .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   §97. /ABOUT/STRATEGY — HERO ARTWORK + NAVY ALIGNMENT (Batch 96)

   Two refinements, both corrections of things that read as "not quite the same
   system" rather than as mistakes.

   1. THE HERO ARTWORK. Page-specific and deliberately NOT the /about image:
      two sibling pages sharing one background makes them interchangeable, and
      /about's flowing community texture says the wrong thing here. This one is
      structured — separate paths that converge and run parallel — which is the
      decision model the page then explains. Still abstract: it depicts no data
      and implies no operational process.

      §95's `.shero__path` SVG is dead (the markup is removed) and left in place
      per the append-only convention, with the other orphans.

   2. THE NAVY. `.sgate__c--alt` used flat --navy #292369 while the hero is a
      gradient #2E2775 → #191446, so the page's two dark surfaces were visibly
      different blues. The card now uses the hero's own stops, in the same
      direction, so they read as one material seen twice.
   ══════════════════════════════════════════════════════════════════════════ */

.shero{
  background-color:#191446;                    /* the fallback field, unchanged */
  background-image:
    /* restrained scrim: the artwork's detail is on the LEFT and the RTL text
       column sits RIGHT, so the overlay only needs to deepen the text side —
       not bury the artwork, which the review is right to warn against. */
    linear-gradient(255deg, rgba(20,16,58,.78) 0%, rgba(20,16,58,.52) 40%, rgba(20,16,58,.18) 74%, rgba(20,16,58,.08) 100%),
    radial-gradient(900px 460px at 12% -20%, rgba(125,193,72,.10), transparent 60%),
    url('../../images/pages/about/strategy-hero-background.webp');
  background-repeat:no-repeat;
  background-position:0 0, 0 0, left center;
  background-size:auto, auto, cover;
}

/* On phones `cover` on a tall box crops hard into the busy left edge, so the
   crop moves to the calm right and the scrim thickens. The content keeps a
   quiet field behind it at every width. */
@media (max-width:760px){
  .shero{
    background-image:
      linear-gradient(rgba(20,16,58,.72), rgba(20,16,58,.72)),
      url('../../images/pages/about/strategy-hero-background.webp');
    background-position:0 0, right center;
    background-size:auto, cover;
  }
}

/* ── the closing dark card, on the hero's own navy ── */
.sgate__c--alt{
  background-image:linear-gradient(168deg,#2E2775 0%,#221C57 60%,#191446 100%);
  background-color:#221C57;                    /* fallback = the mid stop */
  border-color:#221C57;
}

/* ══════════════════════════════════════════════════════════════════════════
   §98. /ABOUT/STRATEGY — THREE LENSES, NOT THREE STEPS (Batch 97)

   §95 gave every principle the same title/paragraph/rows shape and numbered
   them 01–03. Two problems, one of them conceptual: identical shapes are the
   reason the body read as a policy document, and the ordinals implied a
   sequence — a decision passing through three stages. It does not. The three
   questions are asked of the same decision at the same time.

   So: no ordinals anywhere, a canvas where three lenses converge on one
   decision, and three DIFFERENT compositions —

     كرامة   editorial contrast (commit / refuse) on white, spacious
     استدامة two paths meeting one considered decision, on sage
     مساءلة  a navy traceability panel, because it is about records

   All of it code-native: CSS borders for the connectors and one inline SVG
   motif, so nothing depends on a raster and everything reflows. §95's
   `.smodel` / `.schap` / `.smission` rules are superseded and left in place per
   the append-only convention, with the other orphans.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the mission, given presence ── */
.smiss{
  margin:0;max-width:74ch;
  padding:34px 38px 30px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--navy,#292369);
  border-radius:4px;
}
.smiss__k{
  margin:0 0 18px;
  font-family:var(--mono,monospace);
  font-size:.9375rem;letter-spacing:.05em;
  color:var(--navy,#292369);
}
.smiss__q{margin:0}
.smiss__q p{
  margin:0;
  font-size:clamp(1.18rem,1.9vw,1.44rem);
  line-height:2.05;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
}
.smiss__src{
  margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line,#D9DFD0);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;
}
.smiss__src span{
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--muted,#5A6076);
}
.smiss__src p{margin:0;font-size:1rem;line-height:1.85;color:var(--body,#3C4152)}
.smiss__src b{color:var(--navy,#292369)}

/* ── the decision canvas ──
   Connectors are borders on pseudo-elements: they reflow with the grid and
   vanish when it stacks, which an SVG with fixed coordinates cannot do. */
.canvas{margin-top:32px}
.canvas__core{
  margin:0 auto;width:max-content;max-width:100%;
  padding:12px 26px;
  background:var(--navy,#292369);
  border-radius:999px;
  font-size:1.0625rem;font-weight:var(--w-mid,600);
  color:#fff;text-align:center;
}
.canvas__l{
  position:relative;
  margin:0;padding:38px 0 0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
/* the stem down from the decision, and the spine the three lenses hang from */
.canvas__l::before{
  content:'';position:absolute;inset-block-start:0;inset-inline-start:50%;
  width:1px;height:18px;background:var(--line,#D9DFD0);
}
.canvas__l::after{
  content:'';position:absolute;inset-block-start:18px;inset-inline:16.6%;
  height:1px;background:var(--line,#D9DFD0);
}
.canvas__i{position:relative}
.canvas__i::before{
  content:'';position:absolute;inset-block-start:-20px;inset-inline-start:50%;
  width:1px;height:20px;background:var(--line,#D9DFD0);
}
.canvas__i > a{
  display:flex;flex-direction:column;height:100%;
  padding:24px 24px 18px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-top:3px solid var(--green,#7DC148);
  border-radius:4px;
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.canvas__i > a:hover{box-shadow:0 6px 22px rgba(41,35,105,.09)}
.canvas__i > a:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:3px}
.canvas__name{
  display:block;margin-bottom:10px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.06em;
  color:var(--green-ink,#4E8A24);
}
.canvas__q{
  display:block;margin-bottom:10px;
  font-size:1.16rem;font-weight:var(--w-bold,800);line-height:1.5;
  color:var(--navy,#292369);
}
.canvas__s{display:block;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.canvas__go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);
}
.canvas__i > a:hover .canvas__go{text-decoration:underline;text-underline-offset:3px}

/* ── shared lens scaffolding ── */
.lens{position:relative}
.lens__hd{max-width:62ch;margin-bottom:28px}
.lens__k{
  margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.9375rem;letter-spacing:.08em;
  color:var(--green-ink,#4E8A24);
}
.lens__hd h2{
  margin:0 0 12px;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  font-weight:var(--w-bold,800);line-height:1.35;
  color:var(--navy,#292369);
}
.lens__lede{margin:0;font-size:1.0625rem;line-height:1.9;color:var(--body,#3C4152)}
.lens__ev{
  display:inline-flex;align-items:center;min-height:44px;margin-top:24px;
  font-size:1rem;font-weight:var(--w-mid,600);
  color:var(--navy,#292369);text-underline-offset:3px;
}
.lens__ev:hover{text-decoration:underline}
.lens__ev:focus-visible{outline:2px solid var(--navy,#292369);outline-offset:2px;border-radius:2px}

/* ── كرامة: contrast, with air ──
   The review asked this one to feel spacious and human rather than procedural,
   so it gets the widest measure on the page and room for the motif to sit
   outside the text column without clipping. */
.lens--dignity{padding-block-start:6px}
.lens--dignity .lens__hd{margin-bottom:34px}
/* استدامة: the composition is a comparison, so it is held narrower than the
   dignity section — the two paths have to be readable side by side. */
.lens--sustain{max-width:96ch}
.lens__motif{
  position:absolute;inset-block-start:-30px;inset-inline-end:-20px;
  width:min(30vw,240px);height:auto;pointer-events:none;
}
.lens__cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  align-items:start;
}
.lens__col{
  padding:24px 26px;
  border-radius:4px;
}
.lens__col h3{
  margin:0 0 14px;
  font-size:1.12rem;font-weight:var(--w-bold,800);
}
.lens__col ul{margin:0;padding-inline-start:20px;display:grid;gap:10px}
.lens__col li{font-size:1rem;line-height:1.8}
.lens__col--do{
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
}
.lens__col--do h3{color:var(--green-ink,#4E8A24)}
.lens__col--do li{color:var(--body,#3C4152)}
.lens__col--dont{
  background:#FBF7EF;
  border:1px solid #E5D6AE;
  border-inline-start:3px solid #C8791E;
}
.lens__col--dont h3{color:#8A6D1F}
.lens__col--dont li{color:#4A4433}
.lens__pull{
  margin:28px 0 0;padding:0 0 0 0;
  max-width:52ch;
}
.lens__pull p{
  margin:0;
  font-size:clamp(1.24rem,2.2vw,1.6rem);line-height:1.7;
  font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}

/* ── استدامة: two paths meeting one decision ── */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.path{
  padding:24px 26px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-radius:4px;
}
.path__k{
  margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--muted,#5A6076);
}
.path__t{
  margin:0 0 8px;
  font-size:1.2rem;font-weight:var(--w-bold,800);line-height:1.5;
  color:var(--navy,#292369);
}
.path__s{margin:0;font-size:1rem;line-height:1.8;color:var(--body,#3C4152)}
/* the join: a centred label on a rule, so the two paths visibly converge */
.paths__join{
  position:relative;
  margin:0;padding:22px 0 20px;
  text-align:center;
  font-family:var(--mono,monospace);font-size:.9375rem;
  color:var(--muted,#5A6076);
}
.paths__join::before{
  content:'';position:absolute;inset-block-start:0;inset-inline-start:50%;
  width:1px;height:16px;background:var(--line,#D9DFD0);
}
.paths__out{
  padding:24px 26px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-top:3px solid var(--green,#7DC148);
  border-radius:4px;
}
.paths__out p{margin:0;font-size:1.0625rem;line-height:1.9;color:var(--body,#3C4152)}
.paths__out b{color:var(--navy,#292369)}
.paths__limit{
  margin-top:14px !important;padding-top:14px;
  border-top:1px solid var(--line,#D9DFD0);
  color:#4A4433 !important;
}

/* ── مساءلة: the record rail ── */
.lens--process{
  padding:34px 36px 30px;
  background-color:#221C57;
  background-image:linear-gradient(168deg,#2E2775 0%,#221C57 60%,#191446 100%);
  border-radius:5px;
}
.lens--process .lens__k{color:var(--green,#7DC148)}
.lens--process .lens__hd h2{color:#fff}
.lens--process .lens__lede{color:rgba(255,255,255,.84)}
.trace{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;
}
/* the rail the checkpoints sit on */
.trace::before{
  content:'';position:absolute;
  inset-block-start:7px;inset-inline:12.5%;
  height:1px;background:rgba(255,255,255,.24);
}
.trace li{
  position:relative;
  padding:28px 16px 0 16px;
}
.trace li::before{
  content:'';position:absolute;inset-block-start:2px;inset-inline-start:calc(50% - 5px);
  width:11px;height:11px;border-radius:50%;
  background:var(--green,#7DC148);
  box-shadow:0 0 0 4px rgba(125,193,72,.18);
}
.trace b{
  display:block;margin-bottom:6px;text-align:center;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.02em;
  color:var(--green,#7DC148);
}
.trace span{
  display:block;text-align:center;
  font-size:1rem;line-height:1.7;color:#fff;
}
.trace__notes{
  margin-top:30px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px 34px;
}
.trace__notes h3{
  margin:0 0 8px;
  font-size:1.06rem;font-weight:var(--w-bold,800);color:#fff;
}
.trace__notes p{margin:0;font-size:1rem;line-height:1.85;color:rgba(255,255,255,.84)}
.lens--process .lens__ev{color:var(--green,#7DC148)}
.lens--process .lens__ev:focus-visible{outline-color:var(--green,#7DC148)}

/* ── the closing verification band ── */
.sver{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:22px 40px;
  padding:30px 34px;
  background-color:#221C57;
  background-image:linear-gradient(168deg,#2E2775 0%,#221C57 60%,#191446 100%);
  border-radius:4px;
}
.sver__k{
  margin:0 0 8px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.05em;
  color:var(--green,#7DC148);
}
.sver__bd h2{margin:0 0 10px;font-size:1.5rem;font-weight:var(--w-bold,800);color:#fff}
.sver__bd p{margin:0;max-width:72ch;font-size:1rem;line-height:1.85;color:rgba(255,255,255,.84)}
.sver__a{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.sver__a .btn{min-height:44px}
.sver__a .btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.sver__a .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10)}

@media (prefers-reduced-motion:reduce){
  .canvas__i > a{transition:none}
}

/* ── responsive ── */
@media (max-width:1080px){
  .canvas__l{grid-template-columns:1fr;gap:14px}
  .canvas__l::before,.canvas__l::after,.canvas__i::before{display:none}
  .lens__cols,.paths,.trace__notes{grid-template-columns:1fr}
  .lens__motif{display:none}
  .trace{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .trace::before{display:none}
  .sver{grid-template-columns:1fr}
}
@media (max-width:760px){
  .smiss{padding:26px 22px 22px}
  .smiss__src{grid-template-columns:1fr;gap:4px}
  .lens--process{padding:26px 20px 22px}
  .trace{grid-template-columns:1fr;gap:18px}
  .trace li{padding:0 0 0 26px;text-align:start}
  .trace li::before{inset-block-start:6px;inset-inline-start:0}
  .trace b,.trace span{text-align:start}
  .sver{padding:26px 22px}
  .sver__a{flex-direction:column;align-items:stretch}
  .sver__a .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   §99. /ABOUT/STRATEGY — POLISH PASS (Batch 98)

   Eight refinements from the review. §98's rules are RESET here rather than
   edited in place, per the append-only convention.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 8. rhythm: the three heaviest sections lose ~25% of their band ── */
.stight{padding-block:clamp(38px,5vw,58px)}

/* ── 1. the mission: wider, 70/30, and the source note readable ── */
.smiss{
  max-width:none;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  gap:0 44px;align-items:start;
  padding:32px 36px;
}
.smiss__k{grid-column:1/-1;margin-bottom:16px}
.smiss__q p{font-size:clamp(1.16rem,1.75vw,1.38rem);line-height:1.95}
/* the source becomes a side panel, not a footnote under a rule */
.smiss__src{
  margin-top:0;padding-top:0;padding-inline-start:26px;
  border-top:0;
  border-inline-start:1px solid var(--line,#D9DFD0);
  display:block;
}
.smiss__src span{
  display:block;margin-bottom:8px;
  color:var(--navy,#292369);           /* was --muted: too quiet for a source */
  font-size:.9375rem;
}
.smiss__src p{color:#3A3F50;font-size:1rem;line-height:1.85}

/* ── 2. the explanatory label stops looking like a button ── */
.canvas__core{
  width:100%;max-width:64ch;
  padding:0 0 4px;
  background:none;border-radius:0;
  font-family:var(--ar-body);
  font-size:1rem;font-weight:400;
  color:var(--muted,#5A6076);
}

/* ── 3. the lens cards: bigger question, a motif, a clearer tie to the label ── */
.canvas__l{padding-top:30px}
.canvas__l::before{height:14px}
.canvas__l::after{inset-block-start:14px}
.canvas__i::before{inset-block-start:-16px;height:16px}
.canvas__m{
  width:44px;height:44px;margin-bottom:14px;
  stroke:var(--green-ink,#4E8A24);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.canvas__name{
  font-size:.9375rem;letter-spacing:.05em;
  color:var(--navy,#292369);
}
.canvas__q{
  font-size:clamp(1.2rem,1.7vw,1.36rem);
  line-height:1.5;
}
.canvas__i > a{border-top-width:2px}
.canvas__i > a:hover{border-color:var(--green,#7DC148);border-top-color:var(--green,#7DC148)}

/* ── 4. dignity: the motif sits behind the comparison, clipped ── */
.lens__space{position:relative;overflow:hidden;border-radius:4px}
.lens__motif{
  position:absolute;inset-block-start:50%;inset-inline-start:-70px;
  transform:translateY(-50%);
  width:min(34vw,300px);height:auto;
  pointer-events:none;z-index:0;
}
.lens__cols{position:relative;z-index:1}
/* the pull-out is the section's conclusion — it should read like one */
.lens__pull{
  margin-top:30px;padding:22px 26px;
  max-width:none;
  background:var(--stone-2,#F8FAF5);
  border-inline-start:3px solid var(--navy,#292369);
  border-radius:4px;
}
.lens__pull p{font-size:clamp(1.34rem,2.4vw,1.78rem);line-height:1.6}

/* ── 5. sustainability: a shared decision point and a shared foundation ── */
.paths__from{
  position:relative;
  margin:0 auto;width:max-content;max-width:100%;
  padding:10px 22px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-radius:3px;
  font-family:var(--mono,monospace);font-size:.9375rem;
  color:var(--navy,#292369);text-align:center;
}
.paths{position:relative;padding-top:30px}
/* stem down from the decision point, then a spine to both paths — no arrowheads:
   neither branch is the default */
.paths::before{
  content:'';position:absolute;inset-block-start:0;inset-inline-start:50%;
  width:1px;height:14px;background:var(--line,#D9DFD0);
}
.paths::after{
  content:'';position:absolute;inset-block-start:14px;inset-inline:25%;
  height:1px;background:var(--line,#D9DFD0);
}
.path{position:relative}
.path::before{
  content:'';position:absolute;inset-block-start:-16px;inset-inline-start:50%;
  width:1px;height:16px;background:var(--line,#D9DFD0);
}
.paths__join{padding:20px 0 16px}
/* the outcome is the shared FOUNDATION under both paths, not a third card */
.paths__out{
  border:1px solid #C7CFBB;
  border-top:0;
  border-block-start:3px solid var(--green,#7DC148);
  border-radius:0 0 4px 4px;
  box-shadow:0 -1px 0 0 rgba(199,207,187,.7);
}

/* ── 6. accountability: legibility on navy ── */
.trace{gap:0 14px}
.trace::before{inset-block-start:9px;height:2px;background:rgba(255,255,255,.34)}
.trace li{padding:34px 10px 0}
.trace li::before{
  inset-block-start:2px;inset-inline-start:calc(50% - 8px);
  width:16px;height:16px;
  box-shadow:0 0 0 5px rgba(125,193,72,.22);
}
.trace b{font-size:.9375rem;letter-spacing:.03em}
.trace span{font-size:1.0625rem;line-height:1.65;color:rgba(255,255,255,.94)}
.trace__notes p{font-size:1.0625rem;color:rgba(255,255,255,.9)}
.lens--process .lens__lede{color:rgba(255,255,255,.9)}

/* ── 7. the closing band goes light, so the page does not end on two navies ── */
.sver{
  background-color:var(--stone-2,#F8FAF5);
  background-image:none;
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
}
.sver__k{color:var(--green-ink,#4E8A24)}
.sver__bd h2{color:var(--navy,#292369)}
.sver__bd p{color:var(--body,#3C4152)}
.sver__a .btn--line{
  background:var(--white,#FFF);
  border-color:var(--line,#D9DFD0);
  color:var(--navy,#292369);
}
.sver__a .btn--line:hover{border-color:var(--navy,#292369);background:var(--white,#FFF)}

/* ── responsive ── */
@media (max-width:1080px){
  .smiss{grid-template-columns:1fr;gap:22px}
  .smiss__src{
    padding-inline-start:0;padding-top:18px;
    border-inline-start:0;border-top:1px solid var(--line,#D9DFD0);
  }
  .lens__motif{display:none}
  /* the trace reads top-to-bottom well before the cards get cramped */
  .trace{grid-template-columns:1fr;gap:20px}
  .trace li{padding:0 0 0 30px;text-align:start}
  .trace li::before{inset-block-start:5px;inset-inline-start:0}
  .trace b,.trace span{text-align:start}
  .paths::before,.paths::after,.path::before{display:none}
  .paths{padding-top:18px}
  .paths__out{border-top:1px solid #C7CFBB;border-block-start:3px solid var(--green,#7DC148);border-radius:4px;box-shadow:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   §100. /ABOUT/STRATEGY — LAYOUT NORMALISATION (Batch 99)

   The concepts were right; the geometry was not. Every section had been tuned
   on its own, so the page read as assembled parts. This section imposes ONE
   container, ONE heading axis and ONE spacing scale on the whole body.

   ⚠ The clearest defect was mine: B97 gave `.lens--sustain` a `max-width:96ch`
   purely to satisfy the class audit's "every class must be defined" rule. That
   is how a section ends up narrower than the five around it — a rule satisfied
   with a declaration that had no design reason to exist.

   THE SCALE (desktop), applied everywhere below:
     section band        80px      eyebrow → heading      10px
     heading → intro     14px      intro → content        36px
     card ↔ card         22px      content → conclusion   28px
     conclusion → link   22px
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. one container: nothing narrows its own section ── */
.lens--sustain{max-width:none}

/* ── 3. the band, back in the site's range (the default .sec is 92px) ── */
.stight{padding-block:clamp(56px,6vw,80px)}

/* ── 2. one heading axis + one rhythm inside every section ── */
.lens__k{margin:0 0 10px}
.lens__hd h2{margin:0 0 14px}
.lens__hd{margin-bottom:36px}
.lens--dignity .lens__hd{margin-bottom:36px}   /* was 34: one value, not two */
.lens__ev{margin-top:22px}

/* the canvas section uses x-section-head, so its content offset is set here to
   the same 36px the lens sections use */
.canvas{margin-top:36px}

/* ── 4. the three lens cards behave as ONE component ──
   Fixed zones rather than subgrid: the motif is a fixed box, the label is one
   line, and the question and description reserve two lines each — so every
   card's icon, label, question and description start on the same baseline and
   «اقرأ التفصيل» pins to the bottom, whatever the copy length. */
.canvas__core{
  margin-inline:auto;margin-bottom:0;
  text-align:center;
  max-width:56ch;
}
.canvas__l{padding-top:22px;gap:22px}
.canvas__l::before{height:10px}
.canvas__l::after{inset-block-start:10px}
.canvas__i::before{inset-block-start:-12px;height:12px}
.canvas__i > a{padding:24px 24px 16px}
.canvas__m{margin-bottom:14px;flex:0 0 auto}
.canvas__name{margin-bottom:10px}
.canvas__q{min-height:3em;margin-bottom:10px}      /* 2 lines at line-height 1.5 */
.canvas__s{min-height:3.5em}                        /* 2 lines at line-height 1.75 */
.canvas__go{padding-top:18px}

/* ── 5. dignity: two equal columns, one pull-quote offset ── */
.lens__cols{gap:22px;align-items:stretch}
.lens__col{display:flex;flex-direction:column;padding:24px 26px}
.lens__col h3{margin:0 0 14px}
.lens__pull{margin-top:28px}

/* ── 6. sustainability as ONE component on the shared grid ──
   The decision point is the component's HEAD — full width, same edges as the
   cards — instead of a chip floating between the intro and the comparison. */
.paths__from{
  display:block;width:auto;max-width:none;
  margin:0;padding:16px 24px;
  background:var(--white,#FFF);
  border:1px solid #C7CFBB;
  border-block-start:3px solid var(--navy,#292369);
  border-radius:4px 4px 0 0;
  text-align:start;
}
.paths__from span{
  display:block;margin-bottom:4px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--muted,#5A6076);
}
.paths__from b{
  display:block;
  font-size:1.12rem;font-weight:var(--w-bold,800);
  color:var(--navy,#292369);
}
/* the two paths hang from it, then the conclusion closes the same box */
.paths{padding-top:22px;gap:22px}
.paths::before{inset-block-start:0;height:10px}
.paths::after{inset-block-start:10px}
.path::before{inset-block-start:-12px;height:12px}
.paths__join{padding:18px 0 14px}
.paths__out{border-radius:0 0 4px 4px}

/* ── 7. accountability: exact internal geometry ── */
.lens--process{padding:34px 36px 32px}
.trace{gap:0 18px}
.trace li{padding:34px 6px 0}
.trace b{max-width:22ch;margin-inline:auto}
.trace span{max-width:26ch;margin-inline:auto}
.trace__notes{margin-top:38px;padding-top:26px;gap:26px 40px}

/* ── 8. the closing band: a deliberate two-column grid ── */
.sver{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px 40px;
  padding:30px 34px;
}
.sver__a{gap:12px;align-items:center}

/* ── 9. responsive: one padding rhythm, no orphaned connectors ── */
@media (max-width:1080px){
  .canvas__core{max-width:none}
  /* the head keeps its box when the paths stack under it */
  .paths__from{border-radius:4px}
  .paths{padding-top:18px}
  .canvas__q,.canvas__s{min-height:0}
  .trace b,.trace span{max-width:none;margin-inline:0}
}
@media (max-width:760px){
  .stight{padding-block:clamp(40px,9vw,56px)}
  .lens__hd,.lens--dignity .lens__hd{margin-bottom:26px}
  .lens--process{padding:26px 20px 24px}
  .sver{padding:26px 22px;gap:20px}
  .sver__a{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   §101. /ABOUT/BOARD — THE GOVERNANCE PROFILE (Batch 100)

   The page was a legal introduction, three numbered definitions and five
   contact cards. It is now: who is responsible, how the bodies relate, who the
   people are, and how to check any of it.

   The 01/02/03 «steps» are gone — three related governance bodies are not a
   sequence — replaced by a relationship map built from borders with a full text
   alternative. Portraits are 4:5 editorial crops, rectangular rather than
   circular, and a monogram is a PENDING state rather than a design choice.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. hero ── */
/* B101: the supplied artwork replaces both the gradient AND the drawn SVG —
   the image carries its own line-work, and two line systems would clutter.
   The artwork's field sits around rgb(18,28,54) so white copy measures ~15:1
   before the overlay even applies; the overlay deepens only the text zone
   (inline-end in RTL) and the fallback colour matches the artwork's own field,
   so a slow or failed image changes nothing but texture. */
.ghov{
  position:relative;overflow:hidden;
  background-color:#141c36;
  background-image:
    linear-gradient(to left, rgba(16,20,44,.55) 0%, rgba(16,20,44,.28) 45%, rgba(16,20,44,.08) 100%),
    url('../../images/pages/about/board-hero-background.webp');
  background-size:auto,cover;
  background-position:center,center;
  color:#fff;
  padding:18px 0 60px;
}
.ghov__wrap{position:relative;z-index:1}
.ghov .crumb{margin-bottom:28px}
.ghov .crumb a{color:rgba(255,255,255,.72)}
.ghov .crumb b{color:#fff}
.ghov .crumb i{color:rgba(255,255,255,.55)}
.ghov__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:34px 50px;align-items:center;
}
.ghov__bd{min-width:0}
.ghov__k{
  margin:0 0 12px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.06em;
  color:var(--green,#7DC148);
}
.ghov__h{
  color:#fff;margin:0;
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:var(--w-bold,800);line-height:1.25;letter-spacing:-.015em;
}
.ghov__lede{margin:18px 0 0;max-width:56ch;font-size:1.0625rem;line-height:1.9;color:rgba(255,255,255,.84)}
.ghov__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.ghov__alt{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:var(--w-mid,600);color:#fff;text-underline-offset:4px;
}
.ghov__alt:hover{text-decoration:underline}
.ghov__alt:focus-visible{outline:2px solid var(--green,#7DC148);outline-offset:3px;border-radius:2px}

/* the status rail — where "not published" is itself a stated value */
.grail{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  padding:22px 24px 20px;
}
.grail__k{
  margin:0 0 14px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.04em;
  color:var(--green,#7DC148);
}
.grail__l{margin:0}
.grail__l > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.13);
}
.grail__l > div:first-child{border-top:0;padding-top:0}
.grail__l dt{margin:0;font-size:.9375rem;color:rgba(255,255,255,.74)}
.grail__l dd{margin:0;text-align:end;font-size:1rem;font-weight:var(--w-mid,600);color:#fff}
.grail__l bdi{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
/* The only control inside the rail. It was 19px tall — a real link at a real
   size that no screenshot would flag, caught by measure.py. Made a chip so it
   clears the 44px target without stretching the rows that carry no link. */
.grail__l a{
    display:inline-flex;align-items:center;min-height:44px;
    padding-inline:.7rem;margin-block:-.55rem;
    border:1px solid rgba(125,193,72,.42);border-radius:999px;
    color:var(--green,#7DC148);text-decoration:none;
    transition:background .18s ease,border-color .18s ease;
}
.grail__l a:hover,.grail__l a:focus-visible{background:rgba(125,193,72,.14);border-color:rgba(125,193,72,.7)}
/* neutral: «not published» is the site's honesty about what it can show,
   not an internal fault — so it must not read as an alert. Only the one
   state that genuinely warrants attention (the formation document) is amber. */
.grail__no{color:rgba(255,255,255,.66);font-weight:var(--w-mid,600)}
.grail__warn{color:#FFD9A8;font-weight:var(--w-mid,600)}
.grail__note{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:1rem;line-height:1.75;color:rgba(255,255,255,.82);
}

/* the map's text alternative: available to assistive tech, never painted.
   Not previously defined anywhere in this stylesheet. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── 2. the relationship map ── */
.gmap{margin:36px 0 0}
/* ── 2. the map ──
   B106: the two framed «group panels» read as admin boxes inside boxes. Gone.
   The internal chain is now two SOLID navy blocks — the hero's own language —
   joined by a labelled connector; the external bodies attach as edge-marked
   cards whose relation is named on the card. */
.gmap{margin:40px 0 0}
/* each half of the figure is a labelled side: internal governance vs external
   review & oversight. The heading tells the reader which relationship they are
   looking at before they read the nodes. */
.gmap__side{min-width:0}
.gmap__sk{
  margin:0 0 16px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.05em;
  color:var(--navy,#292369);
  padding-bottom:10px;border-bottom:2px solid var(--green,#7DC148);
}
.gmap__flow{max-width:520px;margin-inline:auto}
.gmap__node{
  padding:24px 28px;
  background-image:linear-gradient(160deg,#2E2775 0%,#221C57 62%,#191446 100%);
  background-color:#221C57;
  border-radius:6px;
  text-align:center;
  box-shadow:0 16px 36px -18px rgba(6,4,26,.45);
}
/* the source of authority carries the green rule */
.gmap__node--top{border-top:3px solid var(--green,#7DC148)}
.gmap__t{margin:0;font-size:1.22rem;font-weight:var(--w-bold,800);color:#fff}
.gmap__s{margin:5px 0 0;font-size:1rem;color:rgba(255,255,255,.82)}
/* the relation label sits ON the connector, so the line reads as a sentence */
.gmap__rel{
  position:relative;
  margin:0;padding:28px 0;
  text-align:center;
  font-family:var(--mono,monospace);font-size:.9375rem;font-weight:600;
  color:var(--navy,#292369);
}
.gmap__rel::before,.gmap__rel::after{
  content:'';position:absolute;inset-inline-start:50%;
  width:2px;height:16px;background:var(--green,#7DC148);
}
.gmap__rel::before{inset-block-start:2px}
.gmap__rel::after{inset-block-end:2px}
/* the frame makes the SUBJECT explicit: both external bodies act on «the
   association» as a whole, never on the board directly. */
.gmap__subject{
  padding:18px;
  border:1px dashed var(--green,#7DC148);
  border-radius:8px;
  background:rgba(125,193,72,.05);
}
.gmap__subject-k{
  margin:0 0 14px;
  text-align:center;
  font-family:var(--mono,monospace);font-size:.8125rem;letter-spacing:.04em;
  color:#467C20;   /* AA on the tinted frame; see grole__lbl note */
}
.gmap__ext{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.gmap__x{
  padding:20px 24px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
  border-radius:6px;
}
/* dotted edge = an external supervisory relationship, not an internal organ */
.gmap__x--dotted{border-inline-start-style:dotted;border-inline-start-color:var(--navy,#292369)}
/* the RELATION each external body has to the association, named on the card */
.gmap__xr{
  margin:0 0 4px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.04em;
  color:var(--muted,#5A6076);
}
.gmap__xk{
  margin:0 0 6px;
  font-size:1.06rem;font-weight:var(--w-bold,800);color:var(--navy,#292369);
}
.gmap__x p{margin:0;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}

/* ── 3. members — the flagship band ──
   B106: one component, one size, a uniform 3-column grid — the horizontal
   «lead» variant was a different design in the same row, and the flat ink slab
   behind it had none of the hero's texture. The band now carries the same
   artwork as the hero under a deep overlay, and every monogram plate carries
   it too, so a pending portrait reads as a branded tile rather than an empty
   navy rectangle. */
.bmband{
  background-image:
    linear-gradient(to bottom, rgba(16,12,46,.86), rgba(16,12,46,.94)),
    url('../../images/pages/about/board-hero-background.webp');
  background-size:auto,cover;
  background-position:center,center;
}
.bmband .eyebrow{color:var(--green,#7DC148)}
.bmband .eyebrow::after{background:rgba(255,255,255,.22)}

/* 2+3: the top row of two is centred and width-matched to the row of three
   below (two cards ≈ same width as three), so the chair and deputy read as the
   lead without a left-hand gap or an oversized card. */
.bmg{display:grid;gap:24px}
.bmg--two{
  grid-template-columns:repeat(2,1fr);
  max-width:calc(66.66% - 8px);margin:44px auto 0;
}
.bmg--three{grid-template-columns:repeat(3,1fr);margin-top:24px}

/* the card: white, portrait-led, identical for every member */
.bmv{
  display:grid;grid-template-rows:auto 1fr;
  background:var(--white,#FFF);
  border-radius:6px;overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(6,4,26,.55);
}

/* ── the portrait plate ──
   4:5 editorial crop, rectangular on purpose: a circle crops a real face badly
   and reads as an avatar. Until a real photograph exists, the plate shows the
   page's own hero artwork — texture, line-work, green dots — with the member's
   initial over it: a branded pending tile, never mistakable for a photo. */
.bmv__ph{
  position:relative;
  aspect-ratio:4/5;
  display:grid;place-items:center;
  overflow:hidden;
  background-color:#141c36;
  background-image:
    linear-gradient(180deg, rgba(16,20,44,.30), rgba(16,20,44,.55)),
    url('../../images/pages/about/board-hero-background.webp');
  background-size:auto,cover;
  background-position:center,center;
}
.bmv__mono{
  font-family:var(--ar-display,inherit);
  font-size:clamp(3.4rem,6vw,5rem);font-weight:var(--w-bold,800);
  color:rgba(255,255,255,.94);
  line-height:1;
}
/* The portrait covers the plate rather than replacing it, so a file that never
   arrives degrades to the branded tile instead of a broken-image icon. The
   zeroed type suppresses the alt-text PAINT of a broken image (which would
   cover the monogram) while assistive technology still announces the person. */
.bmv__ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;
  font-size:0;color:transparent;
}

.bmv__bd{padding:20px 22px 22px;display:flex;flex-direction:column}
.bmv__role{
  margin:0 0 10px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.03em;
  color:var(--navy,#292369);
  padding-bottom:8px;border-bottom:2px solid var(--green,#7DC148);
  align-self:flex-start;
}
.bmv__name{
  margin:2px 0 0;
  font-size:1.16rem;font-weight:var(--w-bold,800);line-height:1.5;
  color:var(--navy,#292369);
}
/* rank reads from order and a slightly larger name — same component, same size */
.bmv--lead .bmv__name{font-size:1.24rem}
.bmv__bg{margin:8px 0 0;font-size:1rem;line-height:1.75;color:var(--body,#3C4152)}
.bmv__bio{margin:10px 0 0;font-size:1rem;line-height:1.85;color:var(--body,#3C4152)}
.bmv__term{
  margin:10px 0 0;
  font-family:var(--mono,monospace);font-size:.875rem;color:var(--muted,#5A6076);
}

.bm__note{
  margin:26px 0 0;
  font-size:1rem;line-height:1.75;color:rgba(255,255,255,.78);
}
/* the note only renders inside the ink band, but keep it legible if the band
   ever steps down */
.sec--framed .bm__note{color:var(--muted,#5A6076)}

.bm__former{
  margin-top:36px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
}
.bm__former h3{margin:0 0 14px;font-size:1.12rem;font-weight:var(--w-bold,800);color:#fff}
.bm__former ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bm__former li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:1rem}
.bm__former b{color:#fff}
.bm__former span{color:rgba(255,255,255,.78)}
.bm__former time{font-family:var(--mono,monospace);font-size:.875rem;color:rgba(255,255,255,.62)}

/* ── 4. roles and limits ──
   B106: the three-column rows read as a spreadsheet. Now a 2×2 of cards in the
   map's own language — navy-ruled white cards — each carrying the body, what
   it does, and the boundary it does not cross, marked as its own line. */
.grole{
  margin-top:36px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.grole__r{
  padding:24px 26px;
  background:var(--white,#FFF);
  border:1px solid var(--line,#D9DFD0);
  border-top:3px solid var(--navy,#292369);
  border-radius:6px;
  box-shadow:0 12px 30px -20px rgba(6,4,26,.25);
}
.grole__r h3{
  margin:0 0 10px;
  font-size:1.1rem;font-weight:var(--w-bold,800);line-height:1.5;
  color:var(--navy,#292369);
}
.grole__do{margin:0;font-size:1rem;line-height:1.8;color:var(--body,#3C4152)}
.grole__not{
  margin:14px 0 0;padding-top:12px;
  border-top:1px dashed var(--line,#D9DFD0);
  font-size:1rem;line-height:1.8;color:var(--body,#3C4152);
}
/* an explicit label, not an ambiguous «حد» badge: the reader is told plainly
   this line is the boundary of the role. */
.grole__lbl{
  display:block;margin-bottom:4px;
  font-family:var(--mono,monospace);font-size:.8125rem;letter-spacing:.04em;
  /* #467C20 = 5.0:1 on white — the site-wide --green-ink (4.21:1) is deferred
     to the typography batch, but a NEW label must not ship below AA. */
  font-weight:700;color:#467C20;
}
.grole__src{
  grid-column:1 / -1;
  margin:4px 0 0;padding:16px 22px;
  background:var(--stone-2,#F8FAF5);
  border:1px solid var(--line,#D9DFD0);
  border-inline-start:3px solid var(--green,#7DC148);
  border-radius:6px;
  font-size:1rem;line-height:1.8;color:var(--body,#3C4152);
}
.grole__src a{color:var(--navy,#292369);font-weight:var(--w-mid,600);text-underline-offset:3px}

/* ── 5. verification close ──
   B106: the flat white card was the one section with none of the page's
   palette. Now the navy gradient card — the same block language as the hero
   and the map nodes — closing the page the way it opened. */
.gver{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:24px 40px;
  padding:32px 36px;
  background-color:#221C57;
  background-image:
    radial-gradient(600px 260px at 12% -30%, rgba(125,193,72,.14), transparent 60%),
    linear-gradient(168deg,#2E2775 0%,#221C57 60%,#191446 100%);
  border-radius:6px;
}
.gver__bd{min-width:0}
.gver__k{
  margin:0 0 8px;
  font-family:var(--mono,monospace);font-size:.875rem;letter-spacing:.05em;
  color:var(--green,#7DC148);
}
.gver__bd h2{margin:0 0 10px;font-size:1.5rem;font-weight:var(--w-bold,800);color:#fff}
.gver__bd p{margin:0;max-width:72ch;font-size:1rem;line-height:1.85;color:rgba(255,255,255,.86)}
.gver__a{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
.gver__a .btn{min-height:44px}
.gver__a .btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.gver__a .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10)}

/* ── responsive ── */
/* One composition on desktop: the internal chain on one side, the two external
   relationships beside it. Stacked, the 560px flow floated against a full-bleed
   pair below it and the figure read as two unrelated blocks. */
@media (min-width:1081px){
  .gmap{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;align-items:start;
  }
  .gmap__flow{max-width:none;margin-inline:0}
  .gmap__ext{grid-template-columns:1fr;gap:14px}
}

@media (max-width:1080px){
  .ghov__grid{grid-template-columns:1fr}
  /* the two-row loses its centring constraint and the second row drops to two,
     so no card is orphaned at three-up on a narrow tablet */
  .bmg--two{max-width:none;margin-top:36px}
  .bmg--three{grid-template-columns:repeat(2,1fr)}
  .grole{grid-template-columns:1fr}
  .gmap__side + .gmap__side{margin-top:26px}
  .gmap__ext{grid-template-columns:1fr}
  .gver{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ghov{padding-bottom:44px}
  /* every card goes compact-horizontal: a fixed 132px portrait column beside
     the text. Five full-width 4:5 plates would be ~2400px of scroll on a
     phone; the plate keeps its crop, the page keeps its pace. */
  .bmg,.bmg--two,.bmg--three{grid-template-columns:1fr;gap:16px;max-width:none;margin-inline:0}
  .bmg--three{margin-top:16px}
  .bmv,.bmv--lead{grid-template-rows:none;grid-template-columns:minmax(0,132px) minmax(0,1fr)}
  /* horizontal compact: the plate fills the card's full height — a fixed 4:5
     here measured 37px short of the card and left a white gap under the crop */
  .bmv__ph,.bmv--lead .bmv__ph{aspect-ratio:auto;min-height:100%}
  .bmv__mono{font-size:2.6rem}
  .bmv__bd,.bmv--lead .bmv__bd{padding:16px 18px}
  .bmv--lead .bmv__name{font-size:1.16rem}
  .grole__r,.grole__src{padding-inline:18px}
  .gver{padding:26px 22px}
  .gver__a{width:100%}
  .gver__a .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   §102 — ACCESSIBILITY & TYPE-FLOOR PASS (B16)
   Append-only, per the CSS convention: this section RESETS a handful of
   earlier declarations rather than editing them in place. Keyboard focus
   states already exist site-wide (:focus-visible, §1) and are left as they are.
   ══════════════════════════════════════════════════════════════════ */

/* 1. AA green for SMALL text. --green-ink was #4E8A24 = 4.21:1 on white — below
   the 4.5:1 floor, and worse on the stone body field. #42761C clears 4.5:1 on
   white (5.5), stone #EEF1EA (4.8) and green-pale #F0F7E7 (5.0), so green-ink
   small text is AA on every light ground it lands on. Larger/decorative greens
   (--green, --green-disp) are unchanged. The ten hard-coded #467C20 accents sit
   on white/tinted grounds where they already pass, and the convention forbids
   editing their earlier sections, so they stay. */
:root{ --green-ink:#42761C; }

/* 2. Arabic is a joined script: letter-spacing fragments it and uppercase is a
   no-op on it (§4). Remove both from the mono eyebrow/category labels, which
   carry Arabic. Eyebrow size is unified to the .78rem (12.48px) the work-area
   and give contexts already use — up from a too-small .71rem/11.36px, and
   within the 12–13px the review asked for. */
.eyebrow{ font-size:.78rem; letter-spacing:normal; text-transform:none; }
.wa-hero .eyebrow, .wa-sec .eyebrow, .gv .eyebrow{ letter-spacing:normal; text-transform:none; }
.deed__cat{ letter-spacing:normal; text-transform:none; }

/* 3. Metadata/body raised to the standing floors, chosen where it SHRINKS the
   measure baseline with no new findings: breadcrumbs to the 14px metadata floor
   at every width, and the campaign-card description to the 16px body floor
   (already 1rem in the campaign/work/give contexts — this lifts the base the
   funded archive uses). */
.crumb{ font-size:.875rem; }
.deed__txt{ font-size:1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   §103 — ZAKAT FLAGSHIP: KARAT GOLD · SILVER · HAWL BASIS (zakat batch)

   Extends §71–§73 without editing them. New surfaces: the metal-price pair, the
   per-karat gold grid with derived per-gram prices, and the hawl (lunar/solar)
   segmented choice. Reuses the existing .zk / .zin / .f__hint language so the
   additions read as one tool, not bolt-ons. Metadata text is held at the 14px
   floor (§102) so nothing new drops below it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* seed note under the two-price row */
.zk__seed{margin-top:10px}

/* per-karat gold grid */
.zk__metal{margin-bottom:18px}
.zk__sublbl{font-size:.98rem;font-weight:600;color:var(--navy);margin:0 0 10px}
.zk__karats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.zk__kf{margin-bottom:0}
.zk__kf>label{font-size:.95rem;font-weight:600;margin-bottom:8px}
.zk__kf .zin input{min-height:50px;font-size:1.05rem}
.zk__kprice{
  display:block;margin-top:7px;min-height:1.2em;
  font-family:var(--mono);font-size:.875rem;line-height:1.5;color:var(--green-ink);
}
.zk__khint{margin-top:10px}

/* hawl basis: two segmented radio options */
.zk__hawl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.zk__hopt{position:relative;display:block;cursor:pointer}
.zk__hopt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.zk__hopt-bd{
  display:grid;gap:4px;padding:14px 16px;min-height:64px;align-content:center;
  background:var(--white);border:1.5px solid #CFCCBF;border-radius:var(--r);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.zk__hopt-bd b{font-size:1rem;color:var(--navy);font-weight:700}
.zk__hopt-bd em{font-style:normal;font-family:var(--mono);font-size:.85rem;color:var(--body)}
.zk__hopt input:checked + .zk__hopt-bd{
  border-color:var(--green);background:var(--green-pale);
  box-shadow:0 0 0 1px var(--green) inset;
}
.zk__hopt input:checked + .zk__hopt-bd em{color:var(--green-ink)}
.zk__hopt input:focus-visible + .zk__hopt-bd{outline:2px solid var(--navy);outline-offset:2px}

/* result: the applied-rate row reads as a value, not a number column */
.zk__brk #zRate{font-family:var(--ar-body);font-size:.9rem;color:var(--navy);white-space:normal}

/* responsive: karat grid and hawl stay usable on narrow screens */
@media (max-width:980px){
  .zk__karats{gap:12px}
}
@media (max-width:560px){
  .zk__karats{grid-template-columns:1fr;gap:14px}
  .zk__hawl{grid-template-columns:1fr}
}

/* §103 cont. — silver price field gets a cool tint parallel to .zk__f--gold, so
   the two-metal price row reads as a matched pair. */
.zk__f--silver{
  padding:18px 18px 16px;border-radius:var(--r);
  background:linear-gradient(180deg,#F4F5F7 0%,#FAFAFB 100%);
  border:1px solid #D5D9E0;border-inline-start:3px solid #9AA3B2;
}
.zk__f--silver>label{color:#4A5261}
.zk__f--silver .zin__u{background:#EBEDF1;color:#4A5261;border-inline-start-color:#D5D9E0}

/* §103 cont. — the junk-input notice toggles [hidden] in zakat.js, but .f__err is
   display:none unless a .f[data-err] ancestor flips it (§ near line 1569) — which
   #zBad never had, so the notice was a latent no-op. Bind visibility to the same
   [hidden] the script controls. */
.zk__err:not([hidden]){display:block}

/* §103 cont. — the reset control was 40px; the B16 pass floors interactive
   controls at 44px, and this page now enters measure.py, so lift it. */
.zk__reset{min-height:44px}

/* §103 cont. — price cards equal height. .zk__f carries a block-flow
   margin-bottom:18px, but as a grid item inside .zk__row that margin makes the
   stretched card 18px shorter than its :last-child sibling (whose margin is 0),
   so the gold price card rendered shorter than the silver one. Grid gap owns the
   spacing between grid items, so the item margin is redundant here — zero it. */
.zk__row > .zk__f{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════════
   §104 — DESKTOP HEADER: CASE-REGISTRATION ACTION (findability fix)

   «تسجيل حالة» works (/cases/new) and lives in the mobile drawer + the homepage
   dual-CTA, but had NO desktop header entry, so from any inner page on desktop it
   was unreachable. Add it as a secondary action paired with the donate CTA, and
   hide the pair on mobile exactly where the nav/CTA already hide (≤1080px) — the
   drawer carries both actions there.
   ═══════════════════════════════════════════════════════════════════════════ */
.hdr__actions{display:flex;align-items:center;gap:10px;flex:none}
.hdr__actions .hdr__cta{margin-inline-start:0}
.hdr__case{flex:none}
@media (max-width:1080px){
  .hdr__actions{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §105 — CASE REGISTRATION: FLAGSHIP REBUILD

   Dignity-first flagship: calm and confident, never marketing-loud. The person
   here is asking for help. Presence comes from generous space, a clear timeline,
   segmented choices and strong trust signals — not urgency or a dark hero.
   Namespaced `.cr__*`; reuses tokens + shared .btn/.f__err/.f__hint/.priv.
   ═══════════════════════════════════════════════════════════════════════════ */

/* hero: subtle decorative lift over the light page-hero */
.phero--case{
  background:
    radial-gradient(120% 120% at 88% -10%, var(--green-pale) 0%, transparent 46%),
    linear-gradient(180deg, var(--stone-2) 0%, var(--stone) 100%);
  border-bottom:1px solid var(--line);
}
.phero--case .phero__h .lt{color:var(--green-ink)}

/* hero reassurance chips — the three fears, answered up front */
.cr__assure{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:none;
}
.cr__assure li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-sm);
}
.cr__assure li span:last-child{font-size:1rem;line-height:1.7;color:var(--body)}
.cr__assure li b{display:block;color:var(--navy);font-weight:700;margin-bottom:2px}
.cr__assure-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--green-pale)}
.cr__assure-ic svg{width:19px;height:19px;fill:none;stroke:var(--green-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* two-column: form + journey */
.cr__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.cr__main{min-width:0}

/* the form card */
.cr__form-hd{margin-bottom:24px}
.cr__form-h{font-size:1.5rem;font-weight:700;color:var(--navy);margin:0 0 6px}
.cr__form-s{font-size:1rem;line-height:1.8;color:var(--body);margin:0;max-width:56ch}

.cr__field{margin-bottom:22px}
.cr__field:last-child{margin-bottom:0}
.cr__lbl{display:block;font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:9px}
.cr__lbl em{font-style:normal;font-weight:400;font-size:.85rem;color:var(--muted)}
.cr__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* inputs — taller, calm, clear focus */
.cr__in{
  width:100%;min-height:52px;font-size:1.05rem;padding:13px 16px;
  font-family:var(--ar-body);background:var(--white);
  border:1px solid #CFCCBF;border-radius:var(--r);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.cr__in::placeholder{color:#9A9C93}
.cr__in:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,35,105,.12)}
.cr__area{min-height:132px;line-height:1.8;resize:vertical}
.cr__sel{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6076' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 16px center;background-size:18px;padding-inline-start:46px}
html[dir="ltr"] .cr__sel{background-position:right 16px center;padding-inline-start:16px;padding-inline-end:46px}

/* who is this for — segmented option cards */
.cr__who{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cr__who-opt{position:relative;display:block;cursor:pointer}
.cr__who-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.cr__who-bd{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:2px;align-items:center;
  padding:16px 18px;min-height:72px;
  background:var(--white);border:1.5px solid #CFCCBF;border-radius:var(--r);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.cr__who-bd svg{grid-row:1 / span 2;width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cr__who-bd b{font-size:1.05rem;color:var(--navy);font-weight:700}
.cr__who-bd em{font-style:normal;font-size:.9rem;color:var(--muted)}
.cr__who-opt input:checked + .cr__who-bd{border-color:var(--green);background:var(--green-pale);box-shadow:0 0 0 1px var(--green) inset}
.cr__who-opt input:checked + .cr__who-bd svg{stroke:var(--green-ink)}
.cr__who-opt input:focus-visible + .cr__who-bd{outline:2px solid var(--navy);outline-offset:2px}

/* privacy note sits a touch apart, then submit */
.cr .priv{margin-top:26px}
.cr__submit{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cr__submit .btn--lg{min-width:200px}
.cr__submit-note{font-size:.9rem;color:var(--muted);line-height:1.6}

/* journey — a vertical timeline card */
.cr__journey{
  background:var(--stone-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 22px;position:sticky;top:calc(var(--hd-h) + 16px);
}
.cr__journey-hd{margin-bottom:20px}
.cr__journey-eyebrow{display:block;font-family:var(--mono);font-size:.8rem;color:var(--green-ink);margin-bottom:6px}
.cr__journey-h{font-size:1.2rem;font-weight:700;color:var(--navy);margin:0}
.cr__steps{list-style:none;margin:0;padding:0;position:relative}
.cr__steps::before{content:'';position:absolute;inset-inline-start:17px;top:16px;bottom:34px;width:2px;background:var(--line)}
.cr__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:22px}
.cr__step:last-child{padding-bottom:0}
.cr__step-node{
  position:relative;z-index:1;flex:none;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;background:var(--white);border:2px solid var(--green);
}
.cr__step-node svg{width:19px;height:19px;fill:none;stroke:var(--green-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cr__step-bd{padding-top:5px}
.cr__step-bd b{display:block;font-size:1.05rem;color:var(--navy);font-weight:700;margin-bottom:3px}
.cr__step-bd span{font-size:1rem;line-height:1.7;color:var(--body)}
.cr__retain{
  display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;padding-top:18px;
  border-top:1px solid var(--line);font-size:.92rem;line-height:1.7;color:var(--muted);
}
.cr__retain svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--green-ink);stroke-width:2;margin-top:2px}

/* success state */
.cr__done{text-align:center;max-width:44ch;margin:0 auto;padding:24px 0}
.cr__done-ic{display:inline-grid;place-items:center;width:76px;height:76px;margin-bottom:18px}
.cr__done-ic svg{width:76px;height:76px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cr__done-h{font-size:1.6rem;font-weight:700;color:var(--navy);margin:0 0 8px}
.cr__done-ref{font-size:1.05rem;color:var(--body);margin:0 0 14px}
.cr__done-ref b{font-family:var(--mono);font-size:1.25rem;color:var(--navy);margin-inline-start:6px}
.cr__done-t{font-size:1rem;line-height:1.9;color:var(--body);margin:0 0 22px}
.cr__done-tel{font-family:var(--mono);color:var(--green-ink);font-weight:600;border-bottom:1px solid rgba(66,118,28,.4)}

/* dignity pillars band */
.cr__pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cr__pillars li{display:grid;gap:8px}
.cr__pillar-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.cr__pillar-ic svg{width:24px;height:24px;fill:none;stroke:var(--green-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cr__pillars b{font-size:1.1rem;color:var(--navy);font-weight:700}
.cr__pillars li span{font-size:1rem;line-height:1.8;color:var(--body)}

/* responsive */
@media (max-width:980px){
  .cr__grid{grid-template-columns:1fr;gap:28px}
  .cr__journey{position:static}
  .cr__assure{grid-template-columns:1fr}
  .cr__pillars{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
  .cr__row,.cr__who{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §106 — HERO CONSOLE: ZAKAT CALCULATOR ENTRY (FPA request)

   A quiet accent row under the type selector, shown by pages.js only on the
   zakat type — a route to the calculator for the donor unsure of the amount,
   without competing with the console's primary «تبرع الآن» action.
   ═══════════════════════════════════════════════════════════════════════════ */
.cons__calc{
  display:flex;align-items:center;gap:9px;margin-top:10px;
  padding:10px 13px;border-radius:var(--r);
  background:var(--green-pale);border:1px solid rgba(125,193,72,.4);
  color:var(--green-ink);font-size:.9rem;line-height:1.5;
}
.cons__calc:hover{border-color:var(--green);background:#E8F3D8}
.cons__calc:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cons__calc b{font-weight:700;color:var(--green-ink)}
.cons__calc svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--green-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cons__calc-arw{width:15px;height:15px;margin-inline-start:auto}

/* ═══════════════════════════════════════════════════════════════════════════
   §107 — VOLUNTEER: GUARDIAN BLOCK (Phase II, under-18 volunteers)

   The under-18 guardian fields on the volunteer form. Grouped in a quiet
   stone card with a green start-border so it reads as a conditional extension
   of the form, not a separate section. It sits INSIDE .frm, so the inputs and
   the .frm__row grid inherit the form's own field styling — only the wrapper
   chrome is defined here.

   Visibility is the `hidden` attribute (global [hidden]{display:none!important}
   at ~line 1802) — opened server-side via $showGuardian on a validation-error
   reload, and live by the DOB field's JS toggling el.hidden. No display class
   is set here, so nothing fights the global rule (§2 gotcha).
   ═══════════════════════════════════════════════════════════════════════════ */
.vguard{
  margin:2px 0 20px;
  padding:18px 18px 4px;
  border:1px solid #E3E8DD;
  border-inline-start:3px solid var(--green);
  border-radius:var(--r);
  background:var(--stone-2);
}
.vguard__t{
  display:flex;align-items:center;gap:9px;
  margin:0 0 6px;
  font-weight:700;color:var(--ink);font-size:1rem;line-height:1.5;
}
.vguard__t svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--green-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vguard__s{margin:0 0 14px;color:var(--muted);font-size:.9rem;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════════
   §108 — VOLUNTEERING CERTIFICATE (print artifact, B123)

   The printable certificate (pages/certificate.blade via layouts/print). It is a
   public-brand artifact, not admin chrome, so it lives here with the public
   tokens. "Download" = Save as PDF from the browser (no PDF library; the browser
   shapes Arabic perfectly). All print rules are SCOPED to .cert* selectors, so
   they only ever affect this page's own elements — safe to sit in the global
   sheet. No @page rule (that would force every page's print size); the certificate
   is designed for the default portrait sheet.
   ═══════════════════════════════════════════════════════════════════════════ */
.printbody{background:var(--stone);margin:0;padding:28px 16px 48px}

.cert-actions{max-width:1000px;margin:0 auto 20px;text-align:center}
.cert-actions__hint{margin:10px 0 0;color:var(--muted);font-size:.9rem}

.cert{
  max-width:1000px;margin:0 auto;background:#fff;border-radius:var(--r);
  box-shadow:0 18px 50px rgba(20,16,58,.12);padding:22px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.cert__frame{
  border:2px solid var(--green);border-radius:calc(var(--r) - 4px);
  padding:44px 48px 40px;position:relative;
  background:
    radial-gradient(circle at 100% 0,var(--green-pale),transparent 38%),
    radial-gradient(circle at 0 100%,var(--green-pale),transparent 38%),#fff;
}
.cert__head{text-align:center;border-bottom:1px solid rgba(41,35,105,.12);padding-bottom:22px;margin-bottom:30px}
.cert__org{
  margin:0;font-family:"Noto Kufi Arabic","Alexandria",sans-serif;
  font-weight:800;font-size:1.5rem;line-height:1.4;color:var(--navy);
}
.cert__kicker{margin:8px 0 0;color:var(--green-ink);font-weight:700;letter-spacing:.14em;font-size:.95rem}

.cert__body{text-align:center;padding:6px 0 26px}
.cert__pre{margin:0 0 12px;color:var(--muted);font-size:1.05rem}
.cert__name{
  margin:0 auto 18px;display:inline-block;
  font-family:"Noto Kufi Arabic","Alexandria",sans-serif;font-weight:800;
  font-size:2.5rem;line-height:1.3;color:var(--ink);
  border-bottom:3px solid var(--green);padding-bottom:8px;
}
.cert__cite{margin:0 auto;max-width:60ch;color:var(--body);font-size:1.12rem;line-height:1.9}
.cert__cite b{color:var(--navy);font-weight:700}

.cert__foot{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(41,35,105,.12);padding-top:26px;margin-top:8px;
}
.cert__meta{display:flex;flex-direction:column;gap:12px}
.cert__meta p{margin:0;display:flex;flex-direction:column;gap:2px}
.cert__meta span{color:var(--muted);font-size:.82rem}
.cert__meta b{color:var(--ink);font-weight:700;font-size:1.02rem}

.cert__verify{
  text-align:center;background:var(--stone-2);border:1px solid rgba(125,193,72,.4);
  border-radius:var(--r);padding:14px 20px;min-width:230px;
}
.cert__verify-t{margin:0;color:var(--green-ink);font-weight:700;font-size:.82rem;letter-spacing:.08em}
.cert__code{margin:4px 0 6px;font-weight:600;font-size:1.6rem;letter-spacing:.22em;color:var(--navy)}
.cert__verify-s{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6;max-width:30ch}

.cert__revoked-mark{
  margin:26px 0 0;text-align:center;color:#8a1c1c;font-weight:700;
  border:1.5px solid #d98a8a;border-radius:var(--r);padding:12px;background:#fbeaea;
}
.cert--revoked .cert__frame{border-color:#d98a8a}

@media (max-width:640px){
  .cert__frame{padding:30px 22px}
  .cert__name{font-size:1.9rem}
  .cert__foot{flex-direction:column;align-items:stretch}
}

@media print{
  .printbody{background:#fff;padding:0}
  .cert-actions{display:none !important}
  .cert{max-width:none;margin:0;box-shadow:none;padding:0;border-radius:0}
  .cert__frame{border-radius:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §109 — CERTIFICATE VERIFICATION (public, B124)

   The public «تحقّق من شهادة» page: a code-entry card and a result panel whose
   tone follows the outcome (valid / revoked / not-found). Public brand tokens;
   only what the printed certificate already shows is ever rendered here.
   ═══════════════════════════════════════════════════════════════════════════ */
.vfy{max-width:660px;margin:0 auto}

.vfy__form{
  background:var(--stone-2);border:1px solid #E3E8DD;border-radius:var(--r);
  padding:22px 22px 18px;
}
.vfy__lbl{display:block;font-weight:700;color:var(--ink);margin:0 0 10px}
.vfy__row{display:flex;gap:12px;flex-wrap:wrap}
.vfy__in{
  flex:1;min-width:200px;height:52px;padding:0 16px;
  border:1.5px solid rgba(41,35,105,.22);border-radius:var(--r);background:#fff;
  font-size:1.35rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);text-align:center;
}
.vfy__in:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.vfy__row .btn{height:52px}
.vfy__hint{margin:12px 0 0;color:var(--muted);font-size:.9rem}

.vfy__result{margin-top:20px;border-radius:var(--r);padding:24px;border:1px solid}
.vfy__result--ok{background:var(--green-pale);border-color:rgba(125,193,72,.5)}
.vfy__result--revoked{background:#fbeaea;border-color:#d98a8a}
.vfy__result--none{background:var(--stone-2);border-color:#E3E8DD}

.vfy__ic{display:inline-flex;margin-bottom:10px}
.vfy__ic svg{width:44px;height:44px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vfy__result--ok .vfy__ic svg{stroke:var(--green-ink)}
.vfy__result--revoked .vfy__ic svg{stroke:#a02525}

.vfy__state{margin:0 0 4px;font-weight:800;font-size:1.25rem;color:var(--ink);line-height:1.4}
.vfy__result--revoked .vfy__state{color:#8a1c1c}

.vfy__facts{margin:16px 0 0;display:grid;gap:12px}
.vfy__facts > div{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;border-top:1px solid rgba(41,35,105,.10);padding-top:12px}
.vfy__facts > div:first-child{border-top:0;padding-top:0}
.vfy__facts dt{min-width:110px;color:var(--muted);font-size:.9rem;margin:0}
.vfy__facts dd{margin:0;color:var(--ink);font-weight:600;flex:1;min-width:0}
.vfy__note{margin:16px 0 0;color:var(--muted);font-size:.9rem;line-height:1.7}

@media (max-width:520px){
  .vfy__row .btn{width:100%}
  .vfy__facts dt{min-width:0;flex-basis:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §110 — CERTIFICATE: PREMIUM REDESIGN (B126)

   Elevates the B123 certificate (§108) to a premium, brand-forward artifact: the
   real FPA logo, a navy frame with a gold hairline keyline, ornamental corners, a
   faint emblem watermark, a wax-style seal beside a signature line, and refined
   typography. Overrides §108's `.cert*` (append-only: later section wins). Print
   rules stay scoped to `.cert*`; no `@page` (default sheet).
   ═══════════════════════════════════════════════════════════════════════════ */
.printbody{background:#E7EBE1;margin:0;padding:34px 16px 56px}

.cert{
  max-width:960px;margin:0 auto;background:#FCFBF6;border:2.5px solid var(--navy);
  border-radius:2px;box-shadow:0 24px 64px rgba(20,16,58,.18);padding:0;
  position:relative;overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.cert--revoked{border-color:#a02525}

.cert__frame{position:relative;margin:0;border:0;border-radius:0;padding:54px 58px 38px;background:transparent}
.cert__frame::before{content:"";position:absolute;inset:9px;border:1.2px solid #B08D57;pointer-events:none;z-index:2}
.cert--revoked .cert__frame::before{border-color:#d98a8a}
.cert__frame > *:not(.cert__corner):not(.cert__wm){position:relative;z-index:3}

/* ornamental corners */
.cert__corner{position:absolute;width:56px;height:56px;z-index:4;pointer-events:none}
.cert__corner svg{width:100%;height:100%;fill:none}
.cert__corner-n{stroke:var(--navy);stroke-width:1.4}
.cert__corner-g{stroke:var(--green);stroke-width:1.2}
.cert__corner-d{fill:#B08D57;stroke:none}
.cert__corner--tl{top:22px;left:22px}
.cert__corner--tr{top:22px;right:22px;transform:scaleX(-1)}
.cert__corner--bl{bottom:22px;left:22px;transform:scaleY(-1)}
.cert__corner--br{bottom:22px;right:22px;transform:scale(-1,-1)}

/* faint emblem watermark */
.cert__wm{position:absolute;top:50%;left:50%;width:330px;height:auto;transform:translate(-50%,-46%);opacity:.045;z-index:1;filter:grayscale(1)}

/* header */
.cert__head{text-align:center;border:0;padding:0 0 22px;margin:0 0 24px;position:relative}
.cert__head::after{content:"";position:absolute;left:24%;right:24%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(41,35,105,.3),transparent)}
.cert__logo{width:150px;height:auto;margin:0 auto 14px;display:block}
.cert__legal{margin:0;color:var(--navy);font-family:"Noto Kufi Arabic","Alexandria",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.01em}
.cert__kicker{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 0;color:#9c7b45;font-weight:700;letter-spacing:.2em;font-size:.92rem}
.cert__kicker-rule{width:34px;height:1px;background:#B08D57;opacity:.75}

/* body */
.cert__body{text-align:center;padding:6px 0 24px}
.cert__pre{margin:0 0 14px;color:var(--muted);font-size:1.05rem;letter-spacing:.02em}
.cert__name{margin:0 auto;display:inline-block;border:0;padding:0;font-family:"Noto Kufi Arabic","Alexandria",sans-serif;font-weight:800;font-size:2.7rem;line-height:1.3;color:var(--navy)}
.cert__divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px auto 22px;width:min(58%,340px)}
.cert__divider i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--green))}
.cert__divider i:last-child{background:linear-gradient(90deg,var(--green),transparent)}
.cert__divider svg{width:17px;height:17px;fill:#B08D57;flex:none}
.cert__cite{margin:0 auto;max-width:58ch;color:var(--body);font-size:1.14rem;line-height:2}
.cert__cite b{color:var(--navy);font-weight:700}

/* footer: seal + signature, beside the verify panel */
.cert__foot{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between;border:0;padding:24px 0 0;margin:20px 0 0}
.cert__attest{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:220px;flex:1}
.cert__seal{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--navy);box-shadow:0 0 0 3px #FCFBF6,0 0 0 4px rgba(176,141,87,.55)}
.cert__seal-mark{width:58px;height:58px;object-fit:contain}
.cert__sig-line{width:210px;max-width:100%;height:1.5px;background:var(--navy);opacity:.5}
.cert__sig-label{color:var(--muted);font-size:.85rem;text-align:center}

.cert__verify{text-align:center;background:#fff;border:1px solid rgba(176,141,87,.5);border-radius:6px;padding:16px 22px;min-width:236px}
.cert__verify-t{margin:0;color:#9c7b45;font-weight:700;font-size:.8rem;letter-spacing:.12em}
.cert__code{margin:6px 0 8px;font-weight:600;font-size:1.55rem;letter-spacing:.24em;color:var(--navy)}
.cert__verify-s{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6;max-width:30ch}

/* fine-print ids */
.cert__ids{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;margin:24px 0 0;padding:14px 0 0;border-top:1px solid rgba(41,35,105,.12);color:var(--muted);font-size:.86rem}
.cert__ids b{color:var(--ink);font-weight:700}

.cert__revoked-mark{margin:20px 0 0;text-align:center;color:#8a1c1c;font-weight:700;border:1.5px solid #d98a8a;border-radius:6px;padding:12px;background:#fbeaea}

@media (max-width:640px){
  .cert__frame{padding:38px 24px 28px}
  .cert__name{font-size:2rem}
  .cert__foot{flex-direction:column;align-items:stretch;gap:20px}
  .cert__verify{min-width:0}
  .cert__corner{width:40px;height:40px}
}

@media print{
  .printbody{background:#fff;padding:0}
  .cert-actions{display:none !important}
  .cert{max-width:none;margin:0;box-shadow:none;border-radius:0;width:100%}
  .cert__frame{padding:44px 50px 34px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §111 — OFFICIAL DONATION RECEIPT (print artifact, B127)

   The printable/downloadable receipt (pages/receipt.blade via layouts/print),
   reached signed from the thank-you page and the receipt email. Formal and
   official rather than ornate — a clean header with the FPA logo, a bordered
   details table, and a footer with the seal + registration line. Reuses the
   certificate's screen-only `.cert-actions` bar. Print rules scoped to `.rdoc*`;
   no `@page`.
   ═══════════════════════════════════════════════════════════════════════════ */
.rdoc{
  max-width:820px;margin:0 auto;background:#fff;border-radius:6px;
  border-top:4px solid var(--navy);
  box-shadow:0 18px 50px rgba(20,16,58,.14);padding:34px 40px 30px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}

/* not-issued-yet notice */
.rdoc__pending{text-align:center;padding:26px 8px}
.rdoc__pending-ic{display:inline-flex;margin-bottom:12px}
.rdoc__pending-ic svg{width:52px;height:52px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rdoc__pending h1{margin:0 0 10px;font-size:1.5rem;color:var(--ink)}
.rdoc__pending p{margin:0 auto 20px;max-width:52ch;color:var(--body);line-height:1.9}

/* header */
.rdoc__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid rgba(41,35,105,.14);position:relative}
.rdoc__head::after{content:"";position:absolute;bottom:-2px;right:0;width:120px;height:2px;background:#B08D57}
.rdoc__logo{width:132px;height:auto}
.rdoc__head-r{text-align:end}
.rdoc__badge{margin:0;display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.06em;padding:6px 14px;border-radius:5px}
.rdoc__no{margin:10px 0 0;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.rdoc__no span{color:var(--muted);font-size:.78rem}
.rdoc__no b{color:var(--navy);font-weight:700;font-size:1.15rem}

.rdoc__legal{margin:12px 0 0;color:var(--muted);font-size:.82rem;line-height:1.6}
.rdoc__intro{margin:20px 0 18px;color:var(--body);font-size:1.02rem;line-height:1.9}
.rdoc__intro b{color:var(--navy);font-weight:700}

/* details table */
.rdoc__table{border:1px solid #E3E8DD;border-radius:8px;overflow:hidden}
.rdoc__row{display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:11px 16px;border-bottom:1px solid #EFEEE7}
.rdoc__row:last-child{border-bottom:0}
.rdoc__row > span:first-child{color:var(--muted);font-size:.92rem;flex:none;min-width:120px}
.rdoc__row > span:last-child{color:var(--ink);font-weight:600;text-align:end}
.rdoc__row--total{background:var(--stone-2);font-weight:700}
.rdoc__row--total > span:first-child{color:var(--ink)}
.rdoc__ok{color:var(--green-ink);font-weight:700}

.rdoc__ded{margin:16px 0 0;padding:12px 16px;background:var(--stone-2);border:1px solid #E3E8DD;border-radius:8px}
.rdoc__ded > span{color:var(--muted);font-size:.82rem}
.rdoc__ded p{margin:4px 0 0;color:var(--ink);line-height:1.8}
.rdoc__zakat{margin:14px 0 0;padding:12px 16px;background:var(--green-pale);border:1px solid rgba(125,193,72,.4);border-radius:8px;color:var(--green-ink);font-size:.9rem;line-height:1.8}

/* footer */
.rdoc__foot{display:flex;align-items:center;gap:16px;margin:24px 0 0;padding:18px 0 0;border-top:1px solid rgba(41,35,105,.12)}
.rdoc__seal{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid rgba(176,141,87,.6)}
.rdoc__seal img{width:38px;height:38px;object-fit:contain}
.rdoc__foot-txt{flex:1;min-width:0}
.rdoc__foot-txt p{margin:0 0 3px;color:var(--muted);font-size:.86rem;line-height:1.6}
.rdoc__fine{margin-top:6px !important;font-size:.78rem !important;color:var(--muted)}

@media (max-width:560px){
  .rdoc{padding:26px 22px}
  .rdoc__head{gap:14px}
  .rdoc__row{flex-direction:column;gap:2px}
  .rdoc__row > span:last-child{text-align:start}
}

@media print{
  .printbody{background:#fff;padding:0}
  .cert-actions{display:none !important}
  .rdoc{max-width:none;margin:0;box-shadow:none;border-radius:0;border-top:4px solid var(--navy)}
}


/* ════════════════════════════════════════════════════════════════════════
   §112 — DONOR ACCOUNT / AUTH UI (B128)
   The member-facing auth surface (register · login · verify · reset) and the
   authenticated account shell. Reuses the button + field kits; adds only a
   centered card frame, the auth field styling, and the account-landing panels.
   The whole surface is gated behind config('fpa.accounts') until launch.
   Append-only per the handoff — this is the new numbered section after §111.
   ════════════════════════════════════════════════════════════════════════ */

.acct{background:var(--stone-2);padding:56px 0 76px;min-height:62vh}
.acct__wrap{max-width:520px;margin-inline:auto}

/* the card */
.acct__card{background:#fff;border:1px solid var(--stone);border-radius:16px;
  padding:34px 32px 30px;box-shadow:0 18px 44px -30px rgba(20,16,58,.35)}
.acct__card--center{text-align:center}

.acct__head{margin:0 0 22px}
.acct__h{margin:0 0 8px;font-family:var(--font-display,inherit);font-size:1.55rem;
  line-height:1.3;color:var(--ink);font-weight:800}
.acct__sub{margin:0;color:var(--body);font-size:1rem;line-height:1.85}

/* a status / confirmation note */
.acct__note{margin:0 0 20px;padding:12px 16px;background:var(--green-pale);
  border:1px solid rgba(125,193,72,.4);border-radius:10px;color:var(--green-ink);
  font-size:.94rem;line-height:1.7}

/* the verify icon */
.acct__icon{width:64px;height:64px;margin:2px auto 18px;border-radius:50%;
  display:grid;place-items:center;background:var(--green-pale);
  border:1px solid rgba(125,193,72,.45)}
.acct__icon svg{width:30px;height:30px;fill:none;stroke:var(--green-ink);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* fields */
.acct__form{display:flex;flex-direction:column;gap:16px;margin:0}
.acct__field{display:flex;flex-direction:column;gap:6px}
.acct__lbl{font-size:.95rem;font-weight:700;color:var(--ink)}
.acct__lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.acct__mini{font-size:.85rem;color:var(--green-ink);text-decoration:none}
.acct__mini:hover{text-decoration:underline}
.acct__in{width:100%;min-height:48px;padding:12px 14px;font-size:1rem;
  color:var(--ink);background:var(--stone-2);border:1.5px solid var(--stone);
  border-radius:10px;transition:border-color .15s,background .15s}
.acct__in:focus{outline:none;border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(125,193,72,.18)}

/* consent / remember checkbox row */
.acct__check{display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;
  font-size:.92rem;line-height:1.7;color:var(--body);cursor:pointer}
.acct__check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--green)}
.acct__check a{color:var(--green-ink)}

.acct__submit{width:100%;margin-top:6px;justify-content:center}

.acct__alt{margin:20px 0 0;text-align:center;font-size:.95rem;color:var(--muted)}
.acct__alt a{color:var(--green-ink);font-weight:700;text-decoration:none}
.acct__alt a:hover{text-decoration:underline}

/* ── the authenticated account landing (shell; B129 fills it) ── */
.acct--home{padding-top:48px}
.acct__welcome{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--stone)}
.acct__avatar{width:56px;height:56px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--navy);color:#fff;font-size:1.15rem;font-weight:800}
.acct__email{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.acct__logout{margin-inline-start:auto}

.acct__panels{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.acct__panel{background:#fff;border:1px solid var(--stone);border-radius:14px;padding:24px 22px}
.acct__panel-h{margin:0 0 10px;font-size:1.15rem;font-weight:800;color:var(--ink)}
.acct__panel-t{margin:0 0 16px;color:var(--body);font-size:.96rem;line-height:1.8}

@media (max-width:640px){
  .acct{padding:36px 0 56px}
  .acct__card{padding:26px 20px 24px}
  .acct__panels{grid-template-columns:1fr}
  .acct__logout{margin-inline-start:0;width:100%}
  .acct__logout .btn{width:100%}
}


/* ════════════════════════════════════════════════════════════════════════
   §113 — ACCOUNT ENTRY IN SITE CHROME (B129)
   Native, member-aware sign-in entry points woven into the existing chrome —
   the dark utility strip (primary), the mobile drawer, and the footer (which
   reuses the footer list styling, no new classes). Every entry is rendered only
   when fpa_accounts_enabled() is true, so nothing here can appear over a 404.
   Append-only per the handoff — the new numbered section after §112.
   ════════════════════════════════════════════════════════════════════════ */

/* ── utility bar (dark strip: --ink bg, muted #A9ADC8, white/green accents) ── */
.util__acct,.util__acctme{display:flex;align-items:center;gap:12px}
.util__login,.util__signup{text-decoration:none;white-space:nowrap}
.util__login{color:#fff}
.util__signup{color:#A9ADC8}
.util__login:hover,.util__signup:hover{color:var(--green)}
.util__me{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.util__me:hover{color:var(--green)}
.util__ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:var(--ink);font-size:.68rem;font-weight:700;flex:none}
.util__me-t{font-weight:600}
.util__logout{margin:0;display:inline-flex}
.util__logoutb{background:none;border:0;color:#A9ADC8;font:inherit;font-size:.72rem;cursor:pointer;padding:0}
.util__logoutb:hover{color:var(--green)}
.util__sep{width:1px;height:14px;background:var(--navy-soft);flex:none}

/* ── mobile drawer (light nav surface below the navy header) ── */
.drawer__acct{padding:14px 20px;border-bottom:1px solid var(--stone);
  display:flex;flex-direction:column;gap:10px}
.drawer__me{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.drawer__ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:.95rem;font-weight:700;flex:none}
.drawer__me-c{display:flex;flex-direction:column;min-width:0}
.drawer__me-c b{font-size:1rem;color:var(--ink)}
.drawer__me-c span{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.drawer__signout{background:none;border:1px solid var(--stone);border-radius:8px;
  color:var(--body);font:inherit;font-size:.9rem;padding:8px 12px;cursor:pointer;width:100%}
.drawer__signout:hover{border-color:var(--muted)}
.drawer__authbtn{width:100%;justify-content:center}


/* ════════════════════════════════════════════════════════════════════════
   §114 — DONOR DASHBOARD: MY DONATIONS + PROFILE (B130)
   The authenticated account landing becomes a real dashboard — a derived
   summary and the member's donation history (matched by verified email, read
   only) — plus the profile edit / change-password screen. Builds on the §112
   .acct* kit; adds the summary strip, the history rows, status badges, and the
   profile locked-field. Append-only per the handoff.
   ════════════════════════════════════════════════════════════════════════ */

.acct__welcome-act{margin-inline-start:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* summary strip — derived from confirmed gifts only */
.acct__sum{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 26px}
.acct__sum-cell{background:#fff;border:1px solid var(--stone);border-radius:14px;padding:20px 22px;
  display:flex;flex-direction:column;gap:4px}
.acct__sum-fig{font-size:1.6rem;font-weight:800;color:var(--ink);font-family:var(--mono)}
.acct__sum-cur{font-size:.9rem;font-weight:600;color:var(--muted);font-family:inherit}
.acct__sum-lbl{font-size:.9rem;color:var(--muted)}

/* history */
.acct__hist-h{margin:0 0 14px;font-size:1.2rem;font-weight:800;color:var(--ink)}
.acct__empty{background:#fff;border:1px dashed var(--stone);border-radius:14px;padding:30px 24px;text-align:center}
.acct__empty p{margin:0 0 16px;color:var(--body);line-height:1.9}

.acct__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.acct__row{background:#fff;border:1px solid var(--stone);border-radius:12px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acct__row-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.acct__row-label{font-weight:700;color:var(--ink)}
.acct__row-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct__row-date{font-size:.85rem;color:var(--muted)}
.acct__row-tag{font-size:.72rem;font-weight:700;color:var(--green-ink);background:var(--green-pale);
  border-radius:999px;padding:1px 9px}
.acct__row-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.acct__row-amt{font-family:var(--mono);font-weight:700;color:var(--ink)}
.acct__row-cur{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--muted)}

.acct__badge{font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 11px;white-space:nowrap}
.acct__badge--paid{color:var(--green-ink);background:var(--green-pale)}
.acct__badge--pending{color:#946200;background:#FBF3DF}
.acct__badge--refunded{color:var(--muted);background:var(--stone)}

.acct__receipt{font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.acct__receipt:hover{text-decoration:underline;color:var(--green-ink)}

/* profile */
.acct__back{margin:0 0 16px}
.acct__back a{color:var(--green-ink);font-weight:700;text-decoration:none}
.acct__back a:hover{text-decoration:underline}
.acct__card--stack{margin-top:20px}
.acct__h--sm{font-size:1.2rem}
.acct__in--locked{background:var(--stone);color:var(--muted);cursor:not-allowed}

@media (max-width:640px){
  .acct__sum{grid-template-columns:1fr}
  .acct__welcome-act{margin-inline-start:0;width:100%}
  .acct__row-side{width:100%;justify-content:space-between}
}


/* ════════════════════════════════════════════════════════════════════════
   §115 — REVEAL VALIDATION ERRORS ON THE ACCOUNT / AUTH FORMS (B130 hotfix)
   The shared `.f__err` is display:none unless a `.f[data-err="true"]` ancestor
   flips it (see §~1569). The account forms (register/login/forgot/reset/profile)
   use `.acct__field` wrappers and never set `data-err`, so their SERVER-SIDE
   validation messages were present in the returned HTML but invisible — a submit
   with, say, a short password looked like it silently did nothing. Reveal any
   NON-EMPTY `.f__err` inside the account surface (an empty one — no error — stays
   hidden via :empty), and tint the field red to match the site's error affordance.
   ════════════════════════════════════════════════════════════════════════ */
.acct .f__err:not(:empty){display:block}
.acct .acct__field:has(.f__err:not(:empty)) .acct__in{border-color:#D8452C;background:#FEF7F5}


/* ════════════════════════════════════════════════════════════════════════
   §116 — DONOR DASHBOARD, FLAGSHIP REDESIGN (B132)
   Replaces the flat §112/§114 account landing with a premium member portal: a
   navy identity hero with a gold hairline, an impact stat strip, and a refined
   donation list with status rails. Reads the same rows as before (read-only,
   never a money path). Gold accent #B08D57 echoes the premium certificate (§110).
   ════════════════════════════════════════════════════════════════════════ */

.dash{background:var(--stone-2);padding:40px 0 76px}
.dash .wrap{max-width:1060px}

/* ── hero identity card ── */
.dash__hero{position:relative;overflow:hidden;border-radius:22px;
  background:linear-gradient(135deg,#2c2670 0%,var(--navy) 46%,var(--ink) 100%);
  border-top:3px solid #B08D57;
  box-shadow:0 26px 60px -34px rgba(20,16,58,.75);
  padding:34px 38px;display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap}
.dash__hero-glow{position:absolute;inset-inline-end:-120px;top:-120px;width:360px;height:360px;
  background:radial-gradient(circle,rgba(125,193,72,.28),transparent 62%);pointer-events:none}
.dash__id{display:flex;align-items:center;gap:20px;min-width:0;position:relative}
.dash__avatar{width:74px;height:74px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy-soft),#332c7d);
  box-shadow:0 0 0 2px rgba(176,141,87,.9),0 0 0 7px rgba(176,141,87,.18)}
.dash__avatar span{font-family:var(--ar-display);font-size:1.55rem;font-weight:800;color:#fff;letter-spacing:.02em}
.dash__eyebrow{margin:0 0 6px;font-size:.76rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#B08D57}
.dash__h{margin:0 0 6px;font-family:var(--ar-display);font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:800;color:#fff;line-height:1.2}
.dash__email{margin:0;color:#B9BCE0;font-size:.9rem;font-family:var(--mono)}
.dash__hero-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative}
.dash__ghost{color:#D8DAF2;text-decoration:none;font-size:.92rem;font-weight:600;
  background:none;border:0;font-family:inherit;cursor:pointer;padding:6px 2px;transition:color .15s}
.dash__ghost:hover{color:#fff}
.dash__ghost--btn{color:#9FA2CE}
.acct__logout{margin:0;display:inline-flex}

.dash__note{margin:22px 0 0;padding:13px 18px;background:var(--green-pale);
  border:1px solid rgba(125,193,72,.4);border-radius:12px;color:var(--green-ink);
  font-size:.95rem;line-height:1.7}

/* ── impact stats ── */
.dash__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 34px}
.dash__stat{position:relative;background:#fff;border:1px solid var(--stone);border-radius:16px;
  padding:24px 24px 22px;overflow:hidden}
.dash__stat::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--stone)}
.dash__stat--lead::before{background:linear-gradient(var(--green),var(--green-ink))}
.dash__stat-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--stone-2);border:1px solid var(--stone);margin-bottom:16px}
.dash__stat-ic svg{width:21px;height:21px;fill:none;stroke:var(--navy);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.dash__stat--lead .dash__stat-ic{background:var(--green-pale);border-color:rgba(125,193,72,.4)}
.dash__stat--lead .dash__stat-ic svg{stroke:var(--green-ink);fill:var(--green-ink)}
.dash__stat-fig{display:block;font-family:var(--mono);font-size:1.85rem;font-weight:700;
  color:var(--ink);line-height:1.1}
.dash__stat-fig em{font-family:var(--ar-body);font-style:normal;font-size:.92rem;font-weight:600;color:var(--muted)}
.dash__stat-lbl{display:block;margin-top:6px;font-size:.9rem;color:var(--muted)}

/* ── donation history ── */
.dash__hist-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.dash__hist-h{margin:0;font-family:var(--ar-display);font-size:1.35rem;font-weight:800;color:var(--ink)}
.dash__hist-add{color:var(--green-ink);font-weight:700;font-size:.92rem;text-decoration:none;
  padding:8px 14px;border:1px solid rgba(125,193,72,.45);border-radius:999px;transition:background .15s}
.dash__hist-add:hover{background:var(--green-pale)}

.dash__empty{background:#fff;border:1px dashed var(--line);border-radius:18px;
  padding:44px 28px;text-align:center}
.dash__empty-ic{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-pale)}
.dash__empty-ic svg{width:28px;height:28px;fill:var(--green-ink);stroke:none}
.dash__empty h3{margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--ink)}
.dash__empty p{margin:0 auto 20px;max-width:440px;color:var(--body);line-height:1.85}

.dash__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dash__gift{position:relative;overflow:hidden;background:#fff;border:1px solid var(--stone);
  border-radius:14px;padding:18px 22px 18px 26px;display:grid;
  grid-template-columns:1fr auto auto;align-items:center;gap:18px;
  transition:box-shadow .16s,transform .16s,border-color .16s}
.dash__gift:hover{box-shadow:0 16px 34px -26px rgba(20,16,58,.5);transform:translateY(-1px);border-color:var(--line)}
.dash__gift-rail{position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px}
.dash__gift.is-paid .dash__gift-rail{background:var(--green)}
.dash__gift.is-pending .dash__gift-rail{background:#E0A93B}
.dash__gift.is-refunded .dash__gift-rail{background:var(--muted)}
.dash__gift-main{min-width:0}
.dash__gift-title{display:block;font-weight:700;color:var(--ink);font-size:1.02rem;margin-bottom:5px}
.dash__gift-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash__gift-date{font-size:.86rem;color:var(--muted)}
.dash__tag{font-size:.71rem;font-weight:700;color:var(--green-ink);background:var(--green-pale);
  border-radius:999px;padding:2px 10px}
.dash__gift-amt{font-family:var(--mono);font-weight:700;font-size:1.12rem;color:var(--ink);white-space:nowrap}
.dash__gift-amt em{font-family:var(--ar-body);font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted)}
.dash__gift-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.dash__badge{font-size:.75rem;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap}
.dash__badge.is-paid{color:var(--green-ink);background:var(--green-pale)}
.dash__badge.is-pending{color:#946200;background:#FBF3DF}
.dash__badge.is-refunded{color:var(--muted);background:var(--stone)}
.dash__receipt{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;
  color:var(--navy);text-decoration:none;white-space:nowrap}
.dash__receipt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash__receipt:hover{color:var(--green-ink)}

@media (max-width:760px){
  .dash__hero{padding:26px 22px}
  .dash__stats{grid-template-columns:1fr;gap:12px}
  .dash__hero-act{width:100%}
}
@media (max-width:560px){
  .dash__gift{grid-template-columns:1fr auto;gap:10px 14px}
  .dash__gift-side{grid-column:1 / -1;justify-content:space-between}
  .dash__avatar{width:60px;height:60px}
}


/* ════════════════════════════════════════════════════════════════════════
   §117 — UTILITY-BAR ACCOUNT CONTROLS, REFINED (B132)
   Replaces the bare §113 login/register + account text with a cohesive account
   chip (gold-ringed avatar echoing the dashboard) and a defined "create account"
   pill, on the dark utility strip. Only when the surface is live (flag-gated).
   ════════════════════════════════════════════════════════════════════════ */

.uacct{display:inline-flex;align-items:center;gap:10px}
.uacct__sep{width:1px;height:16px;background:rgba(255,255,255,.16);flex:none}

/* signed-in chip */
.uacct__chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:4px 12px 4px 5px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);transition:background .15s,border-color .15s}
.uacct__chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.uacct__ava{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green),var(--green-ink));color:#0F2405;
  font-size:.66rem;font-weight:800;box-shadow:0 0 0 1.5px rgba(176,141,87,.85)}
.uacct__name{color:#fff;font-size:.8rem;font-weight:600}

/* sign-out */
.uacct__out{margin:0;display:inline-flex}
.uacct__out-b{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  color:#A9ADC8;font:inherit;font-size:.74rem;cursor:pointer;padding:2px 2px}
.uacct__out-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uacct__out-b:hover{color:var(--green)}

/* signed-out */
.uacct__login{color:#D5D7EA;text-decoration:none;font-size:.8rem;font-weight:500;transition:color .15s}
.uacct__login:hover{color:#fff}
.uacct__reg{color:#0F2405;background:var(--green);text-decoration:none;font-size:.78rem;font-weight:700;
  padding:5px 14px;border-radius:999px;line-height:1;transition:filter .15s}
.uacct__reg:hover{filter:brightness(1.06)}

@media (max-width:560px){
  .uacct__login{display:none}   /* keep the strip uncluttered on small screens; login lives in the drawer */
}


/* ════════════════════════════════════════════════════════════════════════
   §118 — DONATION CONFIRMATION / PENDING PAGE, REDESIGN (B132)
   Replaces the flat .done/.rcpt/.nexts stack with a premium status hero + a
   progress rail, a two-column body (transfer instructions / next-steps timeline
   beside a receipt summary card), and a refined monthly upsell. Pending gifts get
   an amber treatment, confirmed gifts green. Every value is from the donation row.
   ════════════════════════════════════════════════════════════════════════ */

.cfrm{background:var(--stone-2);padding:44px 0 80px}
.cfrm .wrap{max-width:980px}

/* ── status hero ── */
.cfrm__hero{text-align:center;max-width:660px;margin:0 auto 40px}
.cfrm__badge{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center}
.cfrm__badge svg{width:34px;height:34px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfrm--wait .cfrm__badge{background:#FBF3DF;box-shadow:0 0 0 8px rgba(224,169,59,.14)}
.cfrm--wait .cfrm__badge svg{stroke:#B37F16}
.cfrm--ok .cfrm__badge{background:var(--green-pale);box-shadow:0 0 0 8px rgba(125,193,72,.16)}
.cfrm--ok .cfrm__badge svg{stroke:var(--green-ink)}
.cfrm__h{margin:0 0 12px;font-family:var(--ar-display);font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:800;color:var(--ink);line-height:1.25}
.cfrm__lede{margin:0;color:var(--body);font-size:1.02rem;line-height:1.9}

/* progress rail */
.cfrm__prog{list-style:none;display:flex;justify-content:center;gap:0;margin:30px 0 0;padding:0}
.cfrm__prog li{position:relative;flex:1;max-width:150px;display:flex;flex-direction:column;
  align-items:center;gap:9px;color:var(--muted);font-size:.82rem;font-weight:600}
.cfrm__prog li b{width:15px;height:15px;border-radius:50%;background:var(--line);
  box-shadow:0 0 0 4px var(--stone-2);z-index:1}
.cfrm__prog li::before{content:"";position:absolute;top:7px;height:2px;background:var(--line);
  inset-inline-start:-50%;width:100%;z-index:0}
.cfrm__prog li:first-child::before{display:none}
.cfrm__prog li.is-done{color:var(--green-ink)}
.cfrm__prog li.is-done b{background:var(--green)}
.cfrm__prog li.is-done::before{background:var(--green)}
.cfrm__prog li.is-now{color:#B37F16}
.cfrm__prog li.is-now b{background:#E0A93B;box-shadow:0 0 0 4px var(--stone-2),0 0 0 7px rgba(224,169,59,.28)}

/* ── two-column body ── */
.cfrm__grid{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}
.cfrm__main{display:flex;flex-direction:column;gap:22px;min-width:0}

/* reference callout */
.cfrm__ref{background:#fff;border:1px solid #EBD9B4;border-top:3px solid #B08D57;border-radius:16px;
  padding:22px 24px;text-align:center;box-shadow:0 14px 34px -28px rgba(176,141,87,.6)}
.cfrm__ref-lbl{display:block;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:#94711E;margin-bottom:8px}
.cfrm__ref-no{display:block;font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:.06em}
.cfrm__ref-note{margin:12px 0 0;font-size:.9rem;line-height:1.75;color:var(--body)}

/* bank details */
.cfrm__bank{background:#fff;border:1px solid var(--stone);border-radius:16px;padding:24px 26px}
.cfrm__bank-h{margin:0 0 16px;font-size:1.08rem;font-weight:800;color:var(--ink)}
.cfrm__bank-rows{display:flex;flex-direction:column}
.cfrm__brow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--stone)}
.cfrm__brow:last-child{border-bottom:0}
.cfrm__brow > span:first-child{color:var(--muted);font-size:.92rem}
.cfrm__brow > span:last-child{color:var(--ink);font-weight:600;text-align:end}
.cfrm__bank-note{margin:16px 0 0;font-size:.86rem;line-height:1.8;color:var(--muted)}
.cfrm__bank-note a{color:var(--navy);font-weight:600}

/* confirmed: mailed note */
.cfrm__mailed{background:#fff;border:1px solid var(--stone);border-radius:16px;padding:24px 26px;
  display:flex;gap:18px;align-items:flex-start}
.cfrm__mailed-ic{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--green-pale)}
.cfrm__mailed-ic svg{width:24px;height:24px;fill:none;stroke:var(--green-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfrm__mailed-h{margin:0 0 6px;font-size:1.05rem;font-weight:800;color:var(--ink)}
.cfrm__mailed p{margin:0 0 14px;color:var(--body);line-height:1.8}

/* next-steps timeline */
.cfrm__next{background:#fff;border:1px solid var(--stone);border-radius:16px;padding:24px 26px}
.cfrm__next-h{margin:0 0 18px;font-size:1.08rem;font-weight:800;color:var(--ink)}
.cfrm__steps{list-style:none;margin:0;padding:0}
.cfrm__step{position:relative;display:flex;gap:16px;padding:0 0 22px}
.cfrm__step::before{content:"";position:absolute;top:30px;bottom:0;inset-inline-start:14px;width:2px;background:var(--stone)}
.cfrm__step:last-child{padding-bottom:0}
.cfrm__step:last-child::before{display:none}
.cfrm__step-n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--mono);font-weight:600;font-size:.9rem;z-index:1}
.cfrm__step-tx h3{margin:4px 0 5px;font-size:1rem;font-weight:700;color:var(--ink)}
.cfrm__step-tx p{margin:0;color:var(--body);font-size:.94rem;line-height:1.8}

/* ── receipt summary card ── */
.cfrm__side{position:sticky;top:20px}
.cfrm__card{background:#fff;border:1px solid var(--stone);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 50px -34px rgba(20,16,58,.5)}
.cfrm__card-hd{background:var(--navy);color:#fff;padding:14px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.cfrm__card-hd > span:first-child{font-weight:700;font-size:.95rem}
.cfrm__card-no{color:var(--green);font-size:.82rem;letter-spacing:.04em}
.cfrm__amt{padding:22px 20px 16px;text-align:center;border-bottom:1px solid var(--stone)}
.cfrm__amt .num{font-family:var(--mono);font-size:2.05rem;font-weight:700;color:var(--ink)}
.cfrm__amt em{font-style:normal;font-size:1rem;font-weight:600;color:var(--muted)}
.cfrm__rows{padding:8px 20px 18px}
.cfrm__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--stone);font-size:.9rem}
.cfrm__row:last-child{border-bottom:0}
.cfrm__row > span:first-child{color:var(--muted);flex:none}
.cfrm__row > span:last-child{color:var(--ink);font-weight:600;text-align:end}
.cfrm__status{padding:2px 10px;border-radius:999px;font-size:.8rem}
.cfrm__status.is-wait{color:#946200;background:#FBF3DF}
.cfrm__status.is-ok{color:var(--green-ink);background:var(--green-pale)}
.cfrm__zk{margin:0;padding:14px 20px;background:var(--green-pale);color:var(--green-ink);
  font-size:.84rem;line-height:1.7;border-top:1px solid rgba(125,193,72,.3)}
.cfrm__dl{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:15px 20px;
  background:var(--stone-2);border-top:1px solid var(--stone);color:var(--navy);
  font-weight:700;font-size:.92rem;text-decoration:none}
.cfrm__dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfrm__dl:hover{color:var(--green-ink)}

/* ── monthly upsell ── */
.cfrm__upsell{margin-top:26px;background:linear-gradient(135deg,var(--navy),var(--ink));
  border-radius:18px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;border-top:3px solid #B08D57}
.cfrm__upsell-tx{flex:1;min-width:260px}
.cfrm__upsell h2{margin:0 0 8px;font-family:var(--ar-display);font-size:1.3rem;font-weight:800;color:#fff}
.cfrm__upsell p{margin:0;color:#C7CAE8;font-size:.96rem;line-height:1.85}
.cfrm__upsell-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cfrm__upsell-alt{color:#D8DAF2;text-decoration:none;font-weight:600;font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.cfrm__upsell-alt:hover{color:#fff;border-color:#fff}

@media (max-width:820px){
  .cfrm__grid{grid-template-columns:1fr}
  .cfrm__side{position:static}
  .cfrm__prog li span{font-size:.74rem}
}