/* ============================================================================
   CAMPAIGN LANDING PAGES — component library
   Adsorse Technologies · August 2026

   Requires shared.css FIRST (tokens, base, chrome, footer, reveals).
   Used by campaign-kit.html and every campaign-*.html page.

   Layout principle: prose stays in a ~68ch READING SPINE so long-form copy
   (these pages run 650–2,500 words) stays readable. Feature blocks — giving
   levels, stat bands, field story, cross-sell, FAQ — break out full width
   onto their own ground. Section ORDER matches the live pages exactly.
   ========================================================================= */

/* ---------------------------------------------------------------- LAYOUT  */
.spine{
  width:100%; max-width:68ch; margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);
}
.spine--wide{max-width:82ch}
.spine > * + *{margin-top:1.1em}
.spine p{font-size:1.06rem; line-height:1.7; color:var(--ink-2)}
.band--maroon .spine p,.band--dark .spine p,.band--lattice .spine p,.band--contour .spine p,.demo--onDark .spine p{color:var(--on-dark-2)}
.spine strong{color:var(--ink); font-weight:700}
.band--maroon .spine strong,.band--dark .spine strong,.band--lattice .spine strong,.band--contour .spine strong,.demo--onDark .spine strong{color:#fff}

.c-section{padding-block:var(--pad-s)}
.c-section--tight{padding-block:clamp(40px,5vw,68px)}

/* Eyebrow + heading pair, the atom every section starts with */
.c-head{max-width:68ch; margin-inline:auto; padding-inline:clamp(18px,4vw,32px); margin-bottom:clamp(22px,3vw,34px)}
.c-head--center{text-align:center}
.c-head--wide{max-width:var(--shell)}

/* ==========================================================================
   SURFACES — four grounds. No two adjacent sections may share one.
   ========================================================================= */
.band--dark{background:#141110; color:var(--on-dark-2)}

/* Geometric lattice — CSS-drawn, no asset to ship. */
.band--lattice{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--maroon); color:var(--on-dark-2);
}
.band--lattice::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:
    repeating-linear-gradient(45deg,  transparent 0 26px, rgba(255,190,185,.10) 26px 28px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,190,185,.10) 26px 28px),
    repeating-linear-gradient(90deg,  transparent 0 52px, rgba(255,190,185,.06) 52px 53px),
    repeating-linear-gradient(0deg,   transparent 0 52px, rgba(255,190,185,.06) 52px 53px);
}
.band--lattice::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(75% 90% at 30% 45%, rgba(74,14,16,.92) 0%, rgba(74,14,16,.4) 55%, transparent 80%);
}

/* Contour lines — for water / geography campaigns. */
.band--contour{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--maroon); color:var(--on-dark-2);
}
.band--contour::before{
  content:""; position:absolute; inset:-20%; z-index:-1; opacity:.55;
  background:
    repeating-radial-gradient(ellipse 62% 34% at 22% 40%, transparent 0 38px, rgba(255,190,185,.11) 38px 40px),
    repeating-radial-gradient(ellipse 70% 42% at 84% 78%, transparent 0 46px, rgba(255,190,185,.08) 46px 48px);
}

/* Radial glow behind stat bands — lifts numbers off a flat ground. */
.band--glow{position:relative; isolation:isolate; overflow:hidden}
.band--glow::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 80% at 50% 0%, rgba(227,34,38,.16) 0%, transparent 70%);
}

/* ==========================================================================
   C1 · CAMPAIGN BANNER
   ========================================================================= */
.cbanner{
  position:relative; z-index:0; isolation:isolate; overflow:hidden;
  margin-top:calc(var(--header-h, 86px) * -1);
  background:var(--maroon-2);
}
.cbanner__media{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:58% 42%}
.cbanner__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(38,6,8,.95) 0%, rgba(48,8,10,.87) 34%, rgba(58,10,12,.55) 60%, rgba(58,10,12,.24) 86%),
    linear-gradient(to top, rgba(24,5,6,.7) 0%, transparent 44%);
}
.cbanner__in{
  position:relative; color:#fff;
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
  padding-block:calc(clamp(72px,10vw,132px) + var(--header-h, 86px)) clamp(72px,10vw,124px);
}
.cbanner__copy{max-width:34rem}
.cbanner__kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(227,34,38,.92); padding:6px 14px; border-radius:var(--r-pill);
}
.cbanner h1{
  margin:0 0 16px; font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.05;
  letter-spacing:-.03em; font-weight:800; text-wrap:balance;
}
.cbanner h1 em{font-family:var(--serif); font-style:italic; font-weight:500; color:#fff}
.cbanner__lede{font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.6; color:#F3DCD9; margin-bottom:24px}
.cbanner__actions{display:flex; gap:12px; flex-wrap:wrap}

/* Zakat-eligible badge — sits beside the category kicker above the headline. */
.tag--zakat{
  display:inline-flex; align-items:center; gap:6px;
  background:#E7F3E9; color:#1F7A34;
  margin:0 0 14px 8px;
}
.tag--zakat svg{width:13px; height:13px}
.cbanner__kicker + .tag--zakat{margin-left:8px}

/* Variant: the creative-with-baked-text banner the live site uses today */
.cbanner--creative{margin-top:0; background:var(--sand); padding-block:clamp(24px,3vw,40px)}
.cbanner--creative .cbanner__art{
  display:block; width:100%; max-width:var(--shell); margin-inline:auto;
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
}

/* ---- Variant: SPLIT — copy left, a card right ---------------------------
   Two payloads work in the right slot: a compact giving-levels card
   (conversion-first) or the campaign creative as an elevated thumbnail
   (uses the artwork marketing has already produced).                      */
.cbanner--split .cbanner__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
.cbanner--split .cbanner__copy{max-width:none}
.cbanner--split h1,.cbanner--split .h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}

/* the creative, shown as a card rather than full-bleed */
.cbanner__thumb{
  display:block; width:100%; border-radius:var(--r-lg);
  box-shadow:0 8px 24px rgba(12,3,4,.34), 0 28px 64px rgba(12,3,4,.4);
  border:1px solid rgba(255,255,255,.16);
}

/* compact giving card for the hero slot */
.herogive{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg); padding:24px 24px 20px; backdrop-filter:blur(8px);
}
.herogive__label{
  margin:0 0 14px; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-3);
}
.herogive__tiers{display:grid; grid-template-columns:repeat(auto-fit, minmax(76px,1fr)); gap:9px; margin-bottom:12px}
.herogive__tier{
  display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center;
  padding:14px 8px; border-radius:var(--r-md); text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.herogive__tier:hover{background:#fff; border-color:#fff; color:var(--maroon); transform:translateY(-2px)}
.herogive__tier b{font-size:1.15rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.herogive__tier span{font-size:.68rem; opacity:.8; text-align:center; line-height:1.25}
.herogive .btn{width:100%}
.herogive__note{margin:12px 0 0; font-size:.72rem; color:var(--on-dark-3); text-align:center}

/* ---- Variant: COMPACT + THUMBNAIL RAIL ---------------------------------
   Short banner, then a strip of campaign creatives. Good for a campaign
   index, or the top of a page where the donor may be on the wrong appeal. */
.cbanner--compact .cbanner__in{padding-block:calc(clamp(34px,5vw,60px) + var(--header-h,86px)) clamp(28px,4vw,44px)}
.cbanner--compact h1,.cbanner--compact .h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:10px}
.cbanner--compact .cbanner__lede{margin-bottom:0}

/* Boxed layout (kit option E) — a rounded card inside the normal .shell
   container instead of a full-bleed hero pulled under the fixed header.
   `.cbanner-wrap` (see HCI_Widget_Campaign_Banner::render_boxed()) is a
   dedicated wrapper — NOT `.section` — because `.section`'s own
   padding-block (--pad-s, ~56-104px on *both* edges) stacked with this
   card's own inner padding read as a large, pointless gap above and below
   the banner. This wrapper supplies exactly the fixed-header clearance and
   nothing else: no bottom padding, so whatever follows sits right after
   the card/rail with only its own normal top spacing. */
.cbanner-wrap{
  padding-top:var(--header-h, 86px);
}
.cbanner--boxed{
  position:relative; margin-top:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  min-height:clamp(220px,32vw,340px); display:flex; align-items:flex-end;
}
/* .cbanner__in's base rule (for the full-bleed variant) sets its own
   max-width:var(--shell); margin-inline:auto — correct when .cbanner spans
   the full viewport and .cbanner__in needs to re-center itself within it,
   but wrong here: .cbanner--boxed is already shell-width (it's sitting
   inside the wrapping <div class="shell">), so that second shell-width
   constraint + auto-margin was pushing the text ~280px further right than
   the card's own edge — content should start at the card's own inline
   padding, not at a second, independently-centered shell inside it. */
.cbanner--boxed .cbanner__in{max-width:none; margin-inline:0}
.cbanner--boxed.cbanner--compact .cbanner__in{padding-block:clamp(28px,4vw,44px)}
.cbanner__crumbs{
  display:flex; align-items:center; gap:6px; margin:0 0 14px;
  font-size:.78rem; font-weight:500; color:rgba(255,255,255,.6);
}
.cbanner__crumbs a{color:rgba(255,255,255,.88); text-decoration:none; transition:color .18s var(--ease)}
.cbanner__crumbs a:hover{color:#fff; text-decoration:underline}
.cbanner__crumb-sep{
  width:9px; height:9px; flex:none; color:rgba(255,255,255,.45);
  transition:transform .18s var(--ease);
}
.cbanner__crumbs a:hover + .cbanner__crumb-sep{
  transform:translateX(2px);
}

.thumbrail{background:var(--sand); padding-block:clamp(20px,2.6vw,30px); border-radius:var(--r-lg); margin-top:16px}
.thumbrail__in{
  display:flex; gap:14px; overflow-x:auto; scrollbar-width:none;
  max-width:var(--shell); margin-inline:auto;
  padding:6px clamp(18px,4vw,32px) 12px; scroll-snap-type:x mandatory;
}
.thumbrail__in::-webkit-scrollbar{display:none}
.thumb{
  flex:0 0 clamp(190px,20vw,230px); scroll-snap-align:start;
  display:block; text-decoration:none; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:#fff; box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.thumb:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#EDD2CF}
.thumb img{width:100%; aspect-ratio:1400/628; object-fit:cover; display:block}
.thumb span{display:block; padding:10px 13px 12px; font-size:.84rem; font-weight:700; color:var(--ink)}
.thumb.is-current{border-color:var(--red); box-shadow:0 0 0 2px rgba(227,34,38,.18)}
.thumb.is-current span{color:var(--red-dark)}

/* ==========================================================================
   C2 · GIVING LEVELS — the money block. Every campaign has one.
   ========================================================================= */
.levels__grid{
  display:grid; gap:var(--hci-gap);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
/* li is the grid item; the card must stretch to fill it or a row of tiers
   ends up ragged because impact lines differ in length. */
.levels__grid > li{display:flex}
.levels__grid .level{width:100%}

/* Six tiers (five amounts + custom) read best as two rows of three.
   auto-fit left a single orphaned card on row two. */
.levels__grid--5{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .levels__grid--5{grid-template-columns:repeat(2,1fr)} }

.level{
  display:flex; flex-direction:column; gap:8px; position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 22px 22px; text-decoration:none; box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.level:hover,.level:focus-visible{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:#EDD2CF}
.level__amount{
  font-size:clamp(1.7rem,2.6vw,2.15rem); font-weight:800; letter-spacing:-.035em;
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;
}
.level__impact{font-size:.88rem; line-height:1.5; color:var(--ink-3); flex:1}
.level__go{
  display:inline-flex; align-items:center; gap:.4em; margin-top:4px;
  font-size:.85rem; font-weight:700; color:var(--red-dark);
}
.level__go svg{width:14px; height:14px; transition:transform .24s var(--ease)}
.level:hover .level__go svg{transform:translateX(4px)}

/* Featured tier — one per set, the amount you most want chosen */
.level--featured{background:var(--maroon); border-color:var(--maroon); color:var(--on-dark-2)}
.level--featured .level__amount{color:#fff}
.level--featured .level__impact{color:var(--on-dark-3)}
.level--featured .level__go{color:var(--accent-dark)}
.level__flag{
  position:absolute; top:-11px; left:22px;
  font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:4px 10px; border-radius:5px;
}

/* Variant: amount only, no impact line (Sadaqah Jariyah pattern) */
.level--bare{align-items:center; text-align:center; padding-block:30px}
.level--bare .level__amount{font-size:clamp(1.9rem,3vw,2.4rem)}

/* Custom-amount tile, always last */
.level--custom{
  align-items:center; justify-content:center; text-align:center;
  background:transparent; border-style:dashed; box-shadow:none; min-height:150px;
}
.level--custom:hover{background:#fff; border-style:solid}
.level--custom .level__amount{font-size:1.15rem; color:var(--red-dark)}

/* Frequency toggle above the grid */
.levels__toggle{
  display:flex; justify-content:center; margin-bottom:var(--hci-gap);
}
.levels__toggle .segmented{background:rgba(74,14,16,.08)}
.levels__toggle .segmented__btn{color:var(--ink-2)}
.levels__toggle .segmented__btn.is-on{background:var(--maroon); color:#fff}

/* Tabbed groups (Orphan Care: Group A / B / C) */
.levels__tabs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.ltab{
  padding:9px 20px; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  background:#fff; font-size:.86rem; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.ltab:hover{border-color:var(--red)}
.ltab.is-on{background:var(--maroon); border-color:var(--maroon); color:#fff}
.levels__where{
  text-align:center; font-size:.82rem; color:var(--ink-3);
  margin:0 0 var(--hci-gap);
}
.levels__where b{color:var(--ink-2)}
.lpanel[hidden]{display:none}

/* Disclaimer block (Water Aid pattern) */
.levels__disclaimer{
  max-width:var(--shell); margin:0 auto var(--hci-gap); padding:16px 20px;
  border-left:3px solid var(--red); background:rgba(227,34,38,.05);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.85rem; line-height:1.55; color:var(--ink-2);
}
.levels__disclaimer b{display:block; color:var(--red-dark); margin-bottom:3px}

/* Policy line under the grid */
.levels__policy{
  text-align:center; margin:var(--hci-gap) auto 0; font-size:.82rem; color:var(--ink-3);
  max-width:var(--shell); padding-inline:clamp(18px,4vw,32px);
}
.levels__policy a{color:var(--red-dark); font-weight:700}

/* ==========================================================================
   C · SCRIPTURE QUOTE — appears on 7 of 15 live pages, usually twice
   ========================================================================= */
.ayah-card{
  max-width:68ch; margin-inline:auto; padding:20px 24px;
  border-left:3px solid var(--red); background:var(--sand);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.ayah-card q,.ayah-card blockquote{
  display:block; margin:0; quotes:"\201C" "\201D";
  font-family:var(--serif); font-style:italic; font-size:1.1rem; line-height:1.55; color:var(--ink);
}
.ayah-card cite{
  display:block; margin-top:10px; font-family:var(--sans); font-style:normal;
  font-size:.78rem; letter-spacing:.06em; color:var(--ink-3);
}

/* Variant: centred, on a dark band */
.ayah-band{text-align:center; max-width:56ch; margin-inline:auto}
.ayah-band blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.65rem); line-height:1.45; color:#fff;
}
.ayah-band cite{
  display:block; margin-top:16px; font-family:var(--sans); font-style:normal;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3);
}

/* ==========================================================================
   NUMBERS — three distinct kinds, deliberately styled apart
   ========================================================================= */

/* ---- The crisis SECTION composition -------------------------------------
   A centred 68ch column of prose on a 1240px band leaves ~300px of dead
   margin either side and reads as an empty section. Pairing the copy with
   the stats in two columns fills the width and gives the scripture quote
   somewhere to belong instead of floating in its own band.               */
.crisis-lead{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:start;
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.crisis-lead .c-head,.crisis-lead .spine{max-width:none; margin-inline:0; padding-inline:0}
.crisis-lead__copy > * + *{margin-top:1.05em}
.crisis-lead .ayah-card{margin-top:26px; max-width:none}

/* 1 · CRISIS STATS — the problem. Externally sourced, so they carry a source. */
.crisis{
  display:grid; gap:var(--hci-gap); grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.crisis li{
  border-top:3px solid var(--red); padding-top:16px;
}

/* Stacked variant — sits in the right column beside the copy */
.crisis--stacked{
  grid-template-columns:1fr; gap:0; max-width:none; padding-inline:0;
}
.crisis--stacked li{
  border-top:0; border-bottom:1px solid var(--line);
  padding:20px 0; display:grid; grid-template-columns:auto 1fr;
  column-gap:22px; align-items:baseline;
}
.crisis--stacked li:first-child{padding-top:0}
.crisis--stacked li:last-child{border-bottom:0; padding-bottom:0}
.crisis--stacked .crisis__n{font-size:clamp(2.4rem,4vw,3.2rem); min-width:3.2em}
.crisis--stacked .crisis__l{grid-column:2; margin-top:0; font-size:.95rem}
.crisis--stacked .crisis__src{grid-column:2}
/* Closes the column so the stats don't leave a void beside the copy. */
.crisis__cta{
  display:block !important; margin-top:26px; padding:20px 22px !important;
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r-md);
}
.crisis__cta p{margin:0 0 14px; font-size:.95rem; line-height:1.55; color:var(--ink-2)}
.crisis__cta b{color:var(--ink)}
.crisis__n{
  display:block; font-size:clamp(2.1rem,3.6vw,2.9rem); font-weight:800;
  letter-spacing:-.04em; color:var(--red-dark); line-height:1; font-variant-numeric:tabular-nums;
}
.crisis__l{display:block; margin-top:8px; font-size:.92rem; line-height:1.45; color:var(--ink-2)}
.crisis__src{display:block; margin-top:8px; font-size:.72rem; color:var(--ink-3); letter-spacing:.03em}

/* 2 · IMPACT STATS — what HCI delivered. Counters, on a dark ground. */
.impact-grid{
  display:grid; gap:1px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:var(--shell); margin-inline:auto;
}
.impact-grid li{background:var(--maroon); padding:26px 24px}
.impact-grid .icon{width:30px; height:30px; color:var(--accent-dark); display:block; margin-bottom:14px}
.impact__n{
  display:block; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; letter-spacing:-.035em;
  color:#fff; line-height:1.05; font-variant-numeric:tabular-nums;
}
.impact__l{display:block; margin-top:6px; font-size:.85rem; line-height:1.4; color:var(--on-dark-3)}

/* 3 · TRUST STRIP — credentials. Quiet, inline, never shouty. */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); justify-content:center;
  max-width:var(--shell); margin-inline:auto; padding:22px clamp(18px,4vw,32px);
  border-block:1px solid var(--line);
}
.trust-strip li{display:flex; align-items:center; gap:11px; font-size:.85rem; color:var(--ink-3)}
.trust-strip .icon{width:22px; height:22px; color:var(--red); flex:none}
.trust-strip b{color:var(--ink); font-weight:700}
.trust-strip--onDark li{color:var(--on-dark-3)}
.trust-strip--onDark .icon{color:var(--accent-dark)}
.trust-strip--onDark b{color:#fff}

/* Single hero statistic — one number, given the whole band */
.bigstat{text-align:center; max-width:44ch; margin-inline:auto}
.bigstat__n{
  display:block; font-size:clamp(3.2rem,9vw,6rem); font-weight:800; letter-spacing:-.05em;
  line-height:.95; color:#fff; font-variant-numeric:tabular-nums;
}
.bigstat__l{display:block; margin-top:16px; font-size:1.05rem; line-height:1.5; color:var(--on-dark-2)}

/* ==========================================================================
   PROGRESS — net-new. No HCI page currently has one.
   ========================================================================= */
.progress{max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.progress__top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.progress__raised{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.band--maroon .progress__raised,.band--lattice .progress__raised,.band--contour .progress__raised,.demo--onDark .progress__raised{color:#fff}
.progress__goal{font-size:.88rem; color:var(--ink-3)}
.band--maroon .progress__goal,.band--lattice .progress__goal,.band--contour .progress__goal,.demo--onDark .progress__goal{color:var(--on-dark-3)}
.progress__track{
  height:14px; border-radius:var(--r-pill); background:var(--line);
  overflow:hidden; position:relative;
}
.band--maroon .progress__track,.band--lattice .progress__track,.band--contour .progress__track,.demo--onDark .progress__track{background:rgba(255,255,255,.16)}
.progress__fill{
  height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--red-dark),var(--red));
  transition:width 1.4s cubic-bezier(.22,.61,.36,1);
}
.progress__meta{display:flex; justify-content:space-between; gap:16px; margin-top:10px; font-size:.8rem; color:var(--ink-3)}
.band--maroon .progress__meta,.band--lattice .progress__meta,.band--contour .progress__meta,.demo--onDark .progress__meta{color:var(--on-dark-3)}

/* Unit tally — "wells built", a dot per unit */
.tally{max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.tally__dots{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.tally__dots i{width:15px; height:15px; border-radius:4px; background:var(--line-2); display:block}
.tally__dots i.is-on{background:var(--red)}
.tally__label{font-size:.9rem; color:var(--ink-2)}
.tally__label b{color:var(--ink)}

/* ==========================================================================
   CARDS
   ========================================================================= */
/* "Why it matters" — 3 up. Live site stacks these full-width; this fixes it. */
.wcards{
  display:grid; gap:var(--hci-gap); grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.wcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.wcard:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.wcard .icon{width:40px; height:40px; color:var(--red); margin-bottom:14px}
.wcard:hover .icon{animation:draw 1.6s cubic-bezier(.33,.9,.28,1) both}
.wcard h3{margin:0 0 8px; font-size:1.08rem; font-weight:700; letter-spacing:-.012em}
.wcard p{margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-3)}
.wcard b{color:var(--ink)}

/* Programme / country row (Education page pattern) */
.prow{
  display:flex; align-items:flex-start; gap:18px; padding:20px 0;
  border-bottom:1px solid var(--line);
}
.prow:last-child{border-bottom:0}
.prow__flag{font-size:1.5rem; line-height:1; flex:none; width:34px}
.prow h3{margin:0 0 4px; font-size:1rem; font-weight:700}
.prow p{margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-3)}
.prow__n{
  margin-left:auto; flex:none; text-align:right;
  font-size:1.1rem; font-weight:800; color:var(--red-dark); font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   FIELD STORY — a named place, not a generic photo
   ========================================================================= */
.story{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.story__img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--sh-3)}
.story__place{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dark);
}
.story__place svg{width:14px; height:14px}
.story h3{margin:0 0 14px; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.15; letter-spacing:-.02em; color:#fff}
.story p{font-size:1rem; line-height:1.65; color:var(--on-dark-2)}
.story__ba{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
.story__ba div{
  flex:1 1 140px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.story__ba dt{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:5px}
.story__ba dd{margin:0; font-size:.95rem; font-weight:700; color:#fff}

/* .story defaults to dark-ground type (h3/p white) because the original
   pattern always sits on .band--contour. Used on a plain white/sand demo
   card instead, that text goes invisible — this modifier makes it legible
   on a light ground without touching the dark default other pages use. */
.story--light .story__place{color:var(--red-dark)}
.story--light h3{color:var(--ink)}
.story--light p{color:var(--ink-2)}
.story--light .story__ba div{background:var(--sand); border-color:var(--line)}
.story--light .story__ba dt{color:var(--ink-3)}
.story--light .story__ba dd{color:var(--ink)}

/* ==========================================================================
   PROCESS — numbered steps
   ========================================================================= */
.steps-h{
  display:grid; gap:clamp(24px,3.4vw,44px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
  counter-reset:cstep;
}
.steps-h li{position:relative; padding-top:6px}
.steps-h li::before{
  counter-increment:cstep; content:counter(cstep,decimal-leading-zero);
  position:absolute; right:0; top:0; font-size:2.4rem; font-weight:800;
  letter-spacing:-.04em; color:rgba(227,34,38,.10); line-height:1;
}
.band--maroon .steps-h li::before,.band--lattice .steps-h li::before,.demo--onDark .steps-h li::before{color:rgba(255,255,255,.09)}
.steps-h .icon{width:42px; height:42px; color:var(--red); margin-bottom:12px}
.band--maroon .steps-h .icon,.band--lattice .steps-h .icon,.demo--onDark .steps-h .icon{color:var(--accent-dark)}
.steps-h h3{margin:0 0 6px; font-size:1.02rem; font-weight:700}
.steps-h p{margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-3)}
.band--maroon .steps-h p,.band--lattice .steps-h p,.demo--onDark .steps-h p{color:var(--on-dark-3)}
.band--maroon .steps-h h3,.band--lattice .steps-h h3,.demo--onDark .steps-h h3{color:#fff}

/* Vertical timeline */
.steps-v{max-width:68ch; margin-inline:auto; padding-inline:clamp(18px,4vw,32px); counter-reset:vstep}
.steps-v li{position:relative; padding:0 0 28px 52px}
.steps-v li:last-child{padding-bottom:0}
.steps-v li::before{
  counter-increment:vstep; content:counter(vstep);
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--red); color:#fff;
  font-size:.85rem; font-weight:700;
}
.steps-v li::after{
  content:""; position:absolute; left:15.5px; top:36px; bottom:8px; width:1.5px; background:var(--line-2);
}
.steps-v li:last-child::after{display:none}
.steps-v h3{margin:4px 0 5px; font-size:1rem; font-weight:700}
.steps-v p{margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-3)}

/* ==========================================================================
   INFOGRAPHICS
   ========================================================================= */
/* Comparison table (Zakat vs Sadaqah) */
.compare{
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--hci-gap);
}
.compare__col{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1);
}
.compare__col--accent{border-color:var(--maroon)}
.compare__hd{padding:18px 22px; background:var(--sand); border-bottom:1px solid var(--line)}
.compare__col--accent .compare__hd{background:var(--maroon); border-bottom-color:var(--maroon)}
.compare__hd h3{margin:0 0 3px; font-size:1.05rem; font-weight:700}
.compare__col--accent .compare__hd h3{color:#fff}
.compare__hd span{font-size:.8rem; color:var(--ink-3)}
.compare__col--accent .compare__hd span{color:var(--on-dark-3)}
.compare__col dl{margin:0; padding:6px 22px 20px}
.compare__col dt{
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-top:16px;
}
.compare__col dd{margin:4px 0 0; font-size:.92rem; line-height:1.5; color:var(--ink-2)}

/* Category grid (the 8 Asnaf) */
.cats{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
  counter-reset:cat;
}
.cats li{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 18px; position:relative;
}
.cats li::before{
  counter-increment:cat; content:counter(cat);
  font-size:.68rem; font-weight:700; color:var(--red-dark);
  background:var(--red-tint); border-radius:4px; padding:2px 7px;
  display:inline-block; margin-bottom:8px;
}
.cats b{display:block; font-size:.94rem; margin-bottom:3px}
.cats span{display:block; font-size:.8rem; line-height:1.45; color:var(--ink-3)}

/* Legend variant — an icon key isn't an ordered list, so the auto-numbered
   ::before badge (built for the 8 Asnaf category grid) doesn't apply here. */
.cats--legend li::before{display:none}

/* ==========================================================================
   VOICES
   ========================================================================= */
.voices{
  display:grid; gap:var(--hci-gap); grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.voice{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:14px;
}
.voice blockquote{margin:0; font-size:.96rem; line-height:1.6; color:var(--ink-2); flex:1}
.voice blockquote::before{content:"\201C"}
.voice blockquote::after{content:"\201D"}
.voice__who{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.voice__who b{display:block; font-size:.9rem}
.voice__who span{display:block; font-size:.78rem; color:var(--ink-3)}

/* Single pull quote */
.pull{
  max-width:52ch; margin-inline:auto; text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.4; color:var(--ink);
}
.pull cite{
  display:block; margin-top:18px; font-family:var(--sans); font-style:normal;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* ==========================================================================
   CROSS-SELL
   ========================================================================= */
.xsell{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center;
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.xcards{
  display:grid; gap:var(--hci-gap); grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px);
}
.xcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.xcard:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.xcard img{width:100%; aspect-ratio:1400/628; object-fit:cover; display:block; background:var(--sand)}
.xcard__body{padding:18px 20px 20px}
.xcard h3{margin:0 0 5px; font-size:1rem; font-weight:700}
.xcard p{margin:0 0 10px; font-size:.85rem; line-height:1.5; color:var(--ink-3)}

/* ==========================================================================
   FAQ
   ========================================================================= */
.faq{max-width:68ch; margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:1.02rem; font-weight:700; line-height:1.4; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:26px;
  width:11px; height:11px; border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .24s var(--ease);
}
.faq details[open] summary{color:var(--red-dark)}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq summary:hover{color:var(--red-dark)}
.faq__a{padding:0 0 22px; font-size:.95rem; line-height:1.65; color:var(--ink-2)}
.faq__a p{margin:0 0 .8em}
.faq__a p:last-child{margin-bottom:0}

/* ==========================================================================
   CTA BANDS
   ========================================================================= */
.cta-inline{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px);
  flex-wrap:wrap; max-width:var(--shell); margin-inline:auto;
  padding:26px clamp(22px,3vw,34px);
  background:var(--maroon); border-radius:var(--r-lg); color:var(--on-dark-2);
}
.cta-inline p{margin:0; font-size:1.02rem; max-width:46ch}
.cta-inline b{color:#fff}

.cta-close{text-align:center; max-width:52ch; margin-inline:auto}
.cta-close h2{color:#fff}
.cta-close p{margin:0 0 26px; font-size:1.05rem; color:var(--on-dark-2)}
.cta-close__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ==========================================================================
   PRESERVED SWIPEABLE RAIL — kit-only. This is the original homepage
   "Give in one step" carousel (styles.css, pre-grid), kept here so the
   pattern stays documented and usable even though the live homepage now
   uses a grid instead. Not used anywhere outside campaign-kit.html.
   ========================================================================= */
.shelf__nav{display:flex; gap:8px; flex:none}
.shelf__controls{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px}
.shelf__railwrap{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.rail{
  display:flex; gap:var(--hci-gap); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-block:22px 40px; margin-block:-16px -28px;
  scrollbar-width:none; --per:4;
}
.rail::-webkit-scrollbar{display:none}
.rail>li{flex:0 0 calc((100% - (var(--per) - 1) * var(--hci-gap)) / var(--per)); scroll-snap-align:start; display:flex}
.qcard{
  display:flex; flex-direction:column; gap:9px; width:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 19px 18px;
  text-decoration:none; box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.qcard:hover,.qcard:focus-visible{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:#EDD2CF}
.qcard__ico{width:42px; height:42px; color:var(--red)}
.qcard__name{font-size:1.02rem; font-weight:700; letter-spacing:-.015em}
.qcard__impact{font-size:.86rem; line-height:1.45; color:var(--ink-3); flex:1}
.qcard__impact b{color:var(--ink); font-weight:700}
.qcard__go{display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; font-weight:700; color:var(--red-dark); margin-top:2px}
.qcard__go svg{width:14px; height:14px; transition:transform .24s var(--ease)}
.qcard:hover .qcard__go svg{transform:translateX(4px)}
.dots{display:flex; gap:7px; justify-content:center; margin-top:4px}
.dots button{width:8px; height:8px; border-radius:var(--r-pill); background:var(--line-2); transition:background-color .2s var(--ease), width .2s var(--ease)}
.dots button.is-on{background:var(--red); width:24px}

/* Smooth auto-scrolling strip — CSS-only, no navigation */
.smooth-track{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.smooth-track__in{display:flex; gap:20px; width:max-content; animation:smoothScroll 28s linear infinite}
.smooth-track img{height:120px; width:auto; border-radius:var(--r-md); flex:none}
.smooth-track:hover .smooth-track__in{animation-play-state:paused}
@keyframes smoothScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.smooth-track__in{animation:none}}

/* Smooth text marquee — .marquee-wrap supplies the theme's background
   (band--maroon/band--sand), since .marquee itself has none of its own and
   the kit's own demo only ever showed it already sitting on a dark ground. */
.marquee-wrap{padding-block:14px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{
  display:flex; gap:14px; width:max-content; white-space:nowrap;
  animation:marqueeScroll 22s linear infinite;
  font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--on-dark-2);
}
.marquee-wrap.band--sand .marquee__track{color:var(--ink-2)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ==========================================================================
   KIT PAGE CHROME — only used by campaign-kit.html
   ========================================================================= */
.kit-head{border-bottom:1px solid var(--line); padding-block:clamp(40px,6vw,72px) clamp(30px,4vw,48px)}
.kit-nav{
  position:sticky; top:calc(var(--header-h,86px) + 8px); z-index:40;
  background:rgba(251,250,248,.92); backdrop-filter:blur(10px);
  border-block:1px solid var(--line); padding:10px 0; margin-bottom:8px;
}
.kit-nav ul{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-inline:clamp(18px,4vw,32px); max-width:var(--shell); margin-inline:auto}
.kit-nav ul::-webkit-scrollbar{display:none}
.kit-nav a{
  white-space:nowrap; padding:7px 14px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; color:var(--ink-2); text-decoration:none;
}
.kit-nav a:hover{background:var(--red-tint); color:var(--red-dark)}
.kit-nav a.is-on{background:var(--red-tint); color:var(--red-dark)}

/* Desktop sidebar — replaces .kit-nav ≥1000px */
.kit-sidebar{
  display:none;
  position:fixed; left:0; top:var(--header-h,86px); bottom:0; z-index:39;
  width:234px; overflow-y:auto;
  background:#fff; border-right:1px solid var(--line);
  padding:22px 14px 40px;
}
.kit-sidebar__group{margin-bottom:22px}
.kit-sidebar__group h4{
  margin:0 0 6px; padding-inline:10px;
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.kit-sidebar a{
  display:block; padding:7px 10px; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:600; color:var(--ink-2); text-decoration:none;
}
.kit-sidebar a:hover{background:var(--red-tint); color:var(--red-dark)}
.kit-sidebar a.is-on{background:var(--red-tint); color:var(--red-dark)}

@media (min-width:1000px){
  .kit-nav{display:none}
  .kit-sidebar{display:block}
  .kit-main{padding-left:234px}
  .kit-head{margin-left:-234px; padding-left:234px}
}

.swatch-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.swatch{display:flex; flex-direction:column; gap:4px; font-size:.82rem}
.swatch__chip{display:block; height:56px; border-radius:var(--r-sm); margin-bottom:4px}
.swatch code{font-size:.76rem; color:var(--ink-3)}

.spec{
  max-width:var(--shell); margin:0 auto clamp(20px,3vw,30px);
  padding-inline:clamp(18px,4vw,32px);
}
.spec__id{
  display:inline-block; font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:.7rem; font-weight:700; color:var(--red-dark);
  background:var(--red-tint); border-radius:5px; padding:3px 9px; margin-bottom:10px;
}
.spec h3{margin:0 0 6px; font-size:1.25rem; letter-spacing:-.015em}
.spec__use{margin:0; font-size:.92rem; color:var(--ink-2); max-width:68ch}
.spec__el{
  margin:10px 0 0; font-size:.8rem; color:var(--ink-3); max-width:68ch;
  padding-left:14px; border-left:2px solid var(--line-2);
}
.spec__el b{color:var(--ink-2)}

/* Boxed, like .spec/.note above it — was unconstrained before and ran
   edge-to-edge at every viewport width while its own description sat in
   a contained column. Same gutter value as .spec's padding-inline, but
   as true margin so the card itself sits inset with background visible
   on both sides, not just its text. */
.demo{
  position:relative;
  width:calc(100% - 2*clamp(18px,4vw,32px));
  max-width:var(--shell);
  margin:0 auto clamp(30px,4vw,48px);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff;
}
.demo--onDark{background:var(--maroon)}
.demo--sand{background:var(--sand)}
.demo__label{
  position:absolute; top:0; left:0; z-index:5;
  font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:5px 11px; border-radius:0 0 var(--r-sm) 0;
}
.demo__body{padding:clamp(30px,4vw,48px) clamp(18px,4vw,32px)}
.demo__body--flush{padding:0}

/* A .demo nested inside a .shell (Typography/Buttons/Badges/Borders/Inputs)
   is already inset by the shell's own gutter — don't inset it a second time. */
.shell .demo{width:100%; max-width:none; margin-inline:0}

/* ==========================================================================
   FORMS — brand-matched, on a light .demo ground.
   .field/.segmented/.amount are styled in shared.css for the dark donate
   bar (translucent white on maroon); shown on a white/sand .demo card
   instead, that same styling is white-on-white, so this re-themes them
   dark-on-light AND gives .field a proper resting/hover/focus treatment
   instead of the bare border it had before.
   ========================================================================= */
.demo:not(.demo--onDark) .field{
  background-color:#fff; border:1.5px solid var(--line); color:var(--ink);
  box-shadow:0 1px 2px rgba(21,19,18,.04);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.demo:not(.demo--onDark) .field:hover{border-color:var(--line-2)}
.demo:not(.demo--onDark) .field::placeholder{color:var(--ink-3)}
.demo:not(.demo--onDark) .field:focus-visible{
  outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-tint);
}
.demo:not(.demo--onDark) .field--select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.demo:not(.demo--onDark) .field--textarea{width:100%; resize:vertical; font-family:var(--sans); line-height:1.55}
.demo:not(.demo--onDark) .amount__sym{color:var(--ink-3)}
.demo:not(.demo--onDark) .segmented{background:var(--sand); border:1px solid var(--line)}
.demo:not(.demo--onDark) .segmented__btn{color:var(--ink-2)}
.demo:not(.demo--onDark) .segmented__btn.is-on{background:#fff; color:var(--maroon); box-shadow:var(--sh-1)}

.form-field{display:flex; flex-direction:column; gap:7px}
.form-field__label{font-size:.82rem; font-weight:600; color:var(--ink-2)}
.form-field__optional{font-weight:400; color:var(--ink-3)}

/* Icon-prefixed field/select — icon absolutely placed over a normal .field,
   input gets left padding to clear it. Works for both <input> and <select>. */
.field-icon{position:relative; display:block}
.field-icon > svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--ink-3); pointer-events:none;
}
.field-icon .field{width:100%; padding-left:40px}

/* Simple radio/checkbox — custom-drawn so it renders identically across
   browsers/OSes instead of relying on native accent-color rendering. */
.opt-simple{display:flex; align-items:flex-start; gap:11px; padding:7px 4px; font-size:.9rem; color:var(--ink-2); cursor:pointer}
.opt-simple input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.opt-simple__mark{
  position:relative; flex:none; width:20px; height:20px; margin-top:1px;
  border:1.5px solid var(--line-2); background:#fff;
  transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
.opt-simple--radio .opt-simple__mark{border-radius:50%}
.opt-simple--check .opt-simple__mark{border-radius:6px}
.opt-simple--radio .opt-simple__mark::after{
  content:""; position:absolute; opacity:0; inset:5px; border-radius:50%; background:#fff;
  transition:opacity .15s var(--ease);
}
.opt-simple--check .opt-simple__mark::after{
  content:""; position:absolute; opacity:0; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  transition:opacity .15s var(--ease);
}
.opt-simple input:checked + .opt-simple__mark{background:var(--red); border-color:var(--red)}
.opt-simple input:checked + .opt-simple__mark::after{opacity:1}
.opt-simple input:focus-visible + .opt-simple__mark{outline:2px solid var(--red); outline-offset:2px}

/* Radio/checkbox as a colored icon card — for a small set of higher-stakes
   choices (which fund, which add-on) where a plain list undersells the
   decision. Hidden native input drives an adjacent styled card via
   sibling selectors; no JS needed for the visual state. */
.option-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.option-card{position:relative; display:block; cursor:pointer}
.option-card input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.option-card__body{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:22px 14px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:#fff; transition:border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.option-card__body .icon{width:28px; height:28px; color:var(--ink-3); transition:color .15s var(--ease)}
.option-card__body b{font-size:.86rem; font-weight:700; color:var(--ink)}
.option-card input:checked + .option-card__body{
  border-color:var(--red); background:var(--red-tint); box-shadow:0 0 0 1px var(--red);
}
.option-card input:checked + .option-card__body .icon{color:var(--red-dark)}
.option-card input:focus-visible + .option-card__body{outline:2px solid var(--red); outline-offset:2px}
.option-card__check{
  position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:6px;
  border:1.5px solid var(--line-2); background:#fff;
  transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
.option-card__check::after{
  content:""; position:absolute; opacity:0; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  transition:opacity .15s var(--ease);
}
.option-card--check input:checked + .option-card__body .option-card__check{background:var(--red); border-color:var(--red)}
.option-card--check input:checked + .option-card__body .option-card__check::after{opacity:1}

/* Gradient variant — selecting fills the card with a dark maroon-to-red
   gradient (the donate bar's own palette) instead of a light tint with a
   border. Resting state sits translucent-on-dark, matching the .demo--onDark
   ground this variant is shown on. */
.option-card--gradient .option-card__body{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18);
}
.option-card--gradient .option-card__body .icon{color:var(--on-dark-3)}
.option-card--gradient .option-card__body b{color:#fff}
.option-card--gradient input:checked + .option-card__body{
  background:linear-gradient(135deg, var(--red) 0%, var(--maroon-2) 100%);
  border-color:var(--red);
  box-shadow:0 8px 22px rgba(227,34,38,.38);
}
.option-card--gradient input:checked + .option-card__body .icon,
.option-card--gradient input:checked + .option-card__body b{color:#fff}
.option-card--gradient.option-card--check .option-card__check{
  border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08);
}
.option-card--gradient.option-card--check input:checked + .option-card__body .option-card__check{
  background:#fff; border-color:#fff;
}
.option-card--gradient.option-card--check .option-card__check::after{border-color:var(--red)}

.switch-row{display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.88rem; color:var(--ink-2); cursor:pointer}
.switch{position:relative; display:inline-flex; width:42px; height:24px; flex:none}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.switch__track{
  position:absolute; inset:0; border-radius:var(--r-pill); background:var(--line-2);
  transition:background-color .18s var(--ease);
}
.switch__track::before{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--sh-1);
  transition:transform .18s var(--ease);
}
.switch input:checked + .switch__track{background:var(--red)}
.switch input:checked + .switch__track::before{transform:translateX(18px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--red); outline-offset:2px}

/* Field error state */
.form-field--error .field{border-color:#C22A2E}
.form-field--error .field:focus-visible{border-color:#C22A2E; box-shadow:0 0 0 4px #FDECEC}
.form-field__error{display:flex; align-items:center; gap:6px; margin-top:1px; font-size:.78rem; font-weight:600; color:#C22A2E}
.form-field__error svg{width:13px; height:13px; flex:none}

/* Alert banners */
.alert{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md); border:1px solid; font-size:.86rem; line-height:1.5}
.alert svg{width:20px; height:20px; flex:none; margin-top:1px}
.alert b{display:block; margin-bottom:2px}
.alert--error{background:#FDECEC; border-color:#F3C6C6; color:#8A2426}
.alert--error svg{color:#C22A2E}
.alert--success{background:#EAF6EC; border-color:#BFE3C6; color:#1F5C2E}
.alert--success svg{color:#2E9147}
.alert--warning{background:#FFF6E5; border-color:#F3DDA0; color:#7A5B12}
.alert--warning svg{color:#C68A1B}
.alert--info{background:#EAF2FA; border-color:#BEDAF0; color:#1E4E73}
.alert--info svg{color:#2E7BC4}

/* Form footer actions + a loading button state */
.form-actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap}
.btn--loading{position:relative; color:transparent !important; pointer-events:none}
.btn--loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn--loading::after{animation-duration:1.4s}}

.variant-grid{display:grid; gap:clamp(20px,3vw,30px)}

/* ==========================================================================
   BANNER COLOR THEMING — kit demo only, layered on top of the brand tokens.
   Scope everything to .theme-demo so it never leaks onto live pages.
   ========================================================================= */
.theme-toggle{
  max-width:var(--shell); margin:0 auto clamp(18px,3vw,26px);
  padding-inline:clamp(18px,4vw,32px);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.theme-toggle__label{font-size:.82rem; font-weight:600; color:var(--ink-2)}
.theme-toggle__picker{display:flex; align-items:center; gap:10px}
.color-picker{
  display:inline-flex; width:34px; height:34px; border-radius:50%; overflow:hidden;
  border:1.5px solid var(--line); cursor:pointer; flex:none;
}
.color-picker input[type="color"]{
  width:44px; height:44px; margin:-5px; border:none; padding:0; cursor:pointer; background:none;
}
.theme-toggle__hex{
  font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:.82rem;
  font-weight:600; color:var(--ink-2); min-width:6.5ch;
}

.theme-demo{ --t-accent:var(--red) }
.theme-demo .cbanner__kicker{background:var(--t-accent); transition:background-color .15s var(--ease)}
.theme-demo .cbanner__actions .btn--primary,
.theme-demo .herogive .btn--primary{
  background:var(--t-accent); box-shadow:none;
  transition:background-color .15s var(--ease);
}
.theme-demo .cbanner__actions .btn--primary:hover,
.theme-demo .herogive .btn--primary:hover{background:color-mix(in srgb, var(--t-accent) 80%, black)}
.theme-demo .thumb.is-current{border-color:var(--t-accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--t-accent) 20%, transparent)}
.theme-demo .thumb.is-current span{color:color-mix(in srgb, var(--t-accent) 70%, black)}

.note{
  max-width:var(--shell); margin:0 auto clamp(30px,4vw,44px);
  padding:14px 18px; border-left:3px solid var(--red);
  background:rgba(227,34,38,.05); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.85rem; line-height:1.6; color:var(--ink-2);
}
.note b{color:var(--red-dark)}
.note code{font-size:.82em; background:#fff; padding:2px 5px; border-radius:4px; border:1px solid var(--line)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .story,.xsell,.crisis-lead{grid-template-columns:1fr}
  .story__media{order:-1}
  .cbanner--split .cbanner__in{grid-template-columns:1fr}
  .cbanner--split .cbanner__thumb{max-width:520px}
}

@media (max-width:640px){
  .cbanner h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .cbanner__actions .btn{flex:1 1 auto; justify-content:center}
  .levels__grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .levels__grid--5{grid-template-columns:repeat(2,1fr)}
  .level{padding:18px 16px}
  .level__amount{font-size:1.45rem}
  .level__impact{font-size:.82rem}
  .crisis{grid-template-columns:1fr}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .trust-strip{flex-direction:column; align-items:flex-start; gap:12px}
  .cta-inline{flex-direction:column; align-items:stretch; text-align:left}
  .prow{flex-wrap:wrap}
  .prow__n{margin-left:0; width:100%; text-align:left}
  .crisis--stacked li{grid-template-columns:1fr; row-gap:4px}
  .crisis--stacked .crisis__l,.crisis--stacked .crisis__src{grid-column:1}
  .herogive__tiers{grid-template-columns:repeat(auto-fit, minmax(64px,1fr)); gap:7px}
  .herogive__tier{padding:11px 5px}
  .herogive__tier b{font-size:1rem}
  .thumb{flex:0 0 62vw}
}

/* ==========================================================================
   DONATE FLOW — net-new. donate.html's 3-step giving form: stepper, a
   light-on-sand re-theme of .field (same fix .demo:not(.demo--onDark)
   applies for the kit page, scoped here to .donate-form instead), giving-
   level cards, the additional-help slider, payment method row and mock
   card element. Elementor: the stepper and slider have no widget
   equivalent and need the small custom scripts in donate.js; everything
   else maps onto Forms widget field types same as the rest of the kit.
   ========================================================================= */
.donate-shell{max-width:760px; margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}

/* Campaign thumbnail — the photo runs the full width of the step at its
   own aspect ratio (like .ccard__media) instead of being cropped
   full-bleed into a darkened background with text stamped over it.
   Details flow directly below as plain text — no nested box, the form
   card already provides that framing. */
.donate-banner__media{
  width:100%; aspect-ratio:1400/628; object-fit:cover; display:block;
  border-radius:var(--r-md); margin-bottom:14px;
}
.donate-banner .eyebrow{margin-bottom:6px}
.donate-banner h3{
  margin:0 0 6px; font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.15; color:var(--ink);
}
.donate-banner__desc{font-size:.88rem; line-height:1.5; color:var(--ink-3); margin:0; max-width:60ch}

/* Step indicator */
.stepper{display:flex; align-items:center; justify-content:center; gap:0; list-style:none; margin:0 0 clamp(28px,4vw,40px); padding:0}
.stepper__step{display:flex; align-items:center; gap:9px; color:var(--ink-3); font-size:.84rem; font-weight:700}
.stepper__step:not(:last-child)::after{
  content:""; width:clamp(28px,6vw,64px); height:1.5px; background:var(--line-2); margin:0 10px;
}
.stepper__num{
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line-2); background:#fff; font-size:.8rem; transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.stepper__step.is-active{color:var(--ink)}
.stepper__step.is-active .stepper__num{border-color:var(--maroon); background:var(--maroon); color:#fff}
.stepper__step.is-done .stepper__num{border-color:var(--red); background:var(--red); color:#fff}
.stepper__step.is-done:not(:last-child)::after{background:var(--red)}
@media (max-width:520px){ .stepper__label{display:none} }

/* Light-on-sand field re-theme, scoped to the donation form only */
.donate-form .field{
  background-color:#fff; border:1.5px solid var(--line); color:var(--ink);
  box-shadow:0 1px 2px rgba(21,19,18,.04);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.donate-form .field:hover{border-color:var(--line-2)}
.donate-form .field::placeholder{color:var(--ink-3)}
.donate-form .field:focus-visible{outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-tint)}
.donate-form .field--select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.donate-form .field--textarea{width:100%; resize:vertical; font-family:var(--sans); line-height:1.55}
.donate-form .amount__sym{color:var(--ink-3)}

/* Form card — contains the step panels so the flow reads as one
   contained, elevated surface on the sand section background instead
   of floating loose fields directly on the band. */
.donate-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:clamp(22px,3.5vw,34px);
}

.step-panel[hidden]{display:none}
.step-panel{display:flex; flex-direction:column; gap:18px; animation:stepIn .35s var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .step-panel{animation:none} }

/* Fills the viewport below the header so Step 1 is visible in full on
   common desktop heights without extra scrolling past the banner.
   Pulled up by the header's measured height (same trick as .hero/.cbanner)
   so the band--sand background runs behind the transparent header instead
   of leaving a white strip above it, then padded back down by the same
   amount so the content itself still starts below the header. */
.donate-section{
  margin-top:calc(var(--header-h, 86px) * -1);
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h, 86px) + clamp(28px,4vw,44px));
  padding-bottom:clamp(28px,4vw,44px);
}

.freq-row{display:flex; justify-content:center; margin-bottom:14px}

.donate-fund-progress{max-width:360px; padding-inline:0; margin:6px auto 0}
.donate-fund-progress .progress__track{height:7px}
.donate-fund-progress .progress__raised{font-size:.85rem}
.donate-fund-progress .progress__goal{font-size:.76rem}

/* Giving-level radio cards — extends the base .option-card with an
   amount + impact line instead of just an icon + label. */
.levels-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.option-card--level .option-card__body{align-items:flex-start; text-align:left; gap:6px; padding:18px 16px 16px}
.option-card--level .option-card__body .icon{width:24px; height:24px}
.option-card__amt{
  font-size:1.3rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.option-card input:checked + .option-card__body .option-card__amt{color:var(--red-dark)}
.option-card__impact{font-size:.78rem; line-height:1.4; color:var(--ink-3)}

.custom-amount{max-width:220px; margin-inline:auto}

/* Additional-help disclosure + slider */
.help-slider{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden}
.help-slider__toggle{
  display:flex; align-items:center; gap:9px; width:100%; padding:13px 16px; font-size:.86rem; font-weight:600;
  color:var(--ink-2); background:transparent; cursor:pointer;
}
.help-slider__toggle svg{width:18px; height:18px; color:var(--red-dark); flex:none}
.help-slider__panel{padding:4px 16px 16px}
.help-slider__panel[hidden]{display:none}
.help-slider__row{display:flex; align-items:center; gap:14px}
.help-slider__row input[type="range"]{
  flex:1; height:6px; border-radius:var(--r-pill); background:var(--line); appearance:none; cursor:pointer;
}
.help-slider__row input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:18px; height:18px; border-radius:50%; background:var(--red);
  border:3px solid #fff; box-shadow:0 0 0 1px var(--red); cursor:pointer;
}
.help-slider__row input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--red);
  border:3px solid #fff; box-shadow:0 0 0 1px var(--red); cursor:pointer; border:none;
}
.help-slider__pct{font-size:.9rem; font-weight:700; color:var(--red-dark); font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right}
.help-slider__note{font-size:.78rem; color:var(--ink-3); margin:10px 0 0}

/* Gift breakdown — base amount, admin fee, total. Amounts are counted
   up/down smoothly on change (donate.js), so this stays subtle rather
   than a jump-cut every time the level or fee % changes. */
.gift-breakdown{
  display:flex; flex-direction:column; gap:8px; padding:16px 18px;
  background:var(--red-tint); border-radius:var(--r-md);
}
.gift-breakdown__row{display:flex; align-items:baseline; justify-content:space-between}
.gift-breakdown__row span{font-size:.84rem; color:var(--ink-2)}
.gift-breakdown__row b{font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums}
.gift-breakdown__row--fee span,.gift-breakdown__row--fee b{color:var(--ink-3); font-size:.8rem}
.gift-breakdown__row--total{
  padding-top:10px; margin-top:2px; border-top:1px solid rgba(227,34,38,.2);
}
.gift-breakdown__row--total span{font-size:.86rem; font-weight:600; color:var(--ink-2)}
.gift-breakdown__row--total b{font-size:1.5rem; color:var(--red-dark)}

.form-grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
.form-grid--tight{grid-template-columns:repeat(2,1fr); gap:16px}
.form-field--wide{grid-column:1 / -1}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr} }

.dedication-toggle{padding:2px 0}
.dedication-fields{display:grid; gap:16px; padding-left:31px}
.dedication-fields[hidden]{display:none}

.donate-form__subhead{font-size:.98rem; font-weight:700; color:var(--ink); margin:8px 0 -4px}

.form-actions--split{justify-content:space-between}

/* Order summary + payment methods (Step 3) */
.order-summary{
  display:flex; flex-direction:column; gap:2px; padding:16px 18px;
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r-md);
}
.order-summary__label{font-size:.78rem; color:var(--ink-3)}
.order-summary__amount{font-size:1.3rem; font-weight:800; color:var(--ink)}
.order-summary__fund{font-size:.84rem; color:var(--ink-2)}

.pay-methods{display:flex; flex-wrap:wrap; gap:9px}
.pay-method{position:relative; cursor:pointer}
.pay-method input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.pay-method__body{
  display:flex; align-items:center; gap:7px; padding:10px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-pill); font-size:.84rem; font-weight:600; color:var(--ink-2);
  transition:border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.pay-method__body svg{width:20px; height:18px}
.pay-method input:checked + .pay-method__body{border-color:var(--red); background:var(--red-tint); color:var(--ink)}
.pay-method input:focus-visible + .pay-method__body{outline:2px solid var(--red); outline-offset:2px}

.pay-panel{display:flex; flex-direction:column; gap:14px}
.pay-panel[hidden]{display:none}
.pay-panel__note{
  display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-3); margin:0;
}
.pay-panel__note svg{width:14px; height:14px; flex:none; color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .stepper__num,.option-card__body,.pay-method__body,.help-slider__row input[type="range"]::-webkit-slider-thumb{transition:none}
}

/* ==========================================================================
   THANK YOU PAGE — net-new. thankyou.html: minimal top bar (no mega menu,
   no sticky donate bar), summary card, message + impact video, and the
   "what happens next" steps (reuses .steps-h — same pattern the campaign
   pages already use for numbered process steps).
   ========================================================================= */
/* Pulled up under the header, same trick as .donate-section/.hero/
   .cbanner, so the maroon background runs behind the transparent
   header instead of leaving a white strip above it. */
.ty-hero{
  text-align:center;
  margin-top:calc(var(--header-h, 86px) * -1);
  padding-top:calc(var(--pad-s) + var(--header-h, 86px));
}
.ty-hero__in{max-width:640px; margin-inline:auto}
.ty-hero__icon{
  width:60px; height:60px; margin:0 auto 18px; border-radius:50%;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center;
}
.ty-hero__icon svg{width:30px; height:30px; color:#fff}
.ty-hero .eyebrow--onDark{justify-content:center}
.ty-hero__sub{font-size:1rem; line-height:1.6; color:var(--on-dark-2); margin:10px 0 0}

.ty-grid{display:grid; gap:clamp(20px,3vw,28px); grid-template-columns:1fr}
@media (min-width:900px){ .ty-grid{grid-template-columns:minmax(280px,360px) 1fr} }

.ty-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:clamp(22px,3vw,28px);
}
.ty-card--flush{padding:0; overflow:hidden; display:flex; flex-direction:column}

.ty-card__head{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.ty-card__head h3{margin:0; font-size:1.05rem}
.ty-icon-circle{
  width:44px; height:44px; flex:none; border-radius:var(--r-md);
  background:var(--red-tint); display:flex; align-items:center; justify-content:center;
}
.ty-icon-circle svg{width:22px; height:22px; color:var(--red-dark)}

.ty-details{display:flex; flex-direction:column; gap:13px; margin-bottom:20px}
.ty-details__row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.ty-details__label{font-size:.82rem; color:var(--ink-3); flex:none}
.ty-details__value{font-size:.9rem; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.ty-details__value--accent{color:var(--red-dark)}

.ty-card__footer{
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--line); padding-top:20px;
}
.ty-card__footer h4{margin:0 0 4px; font-size:.95rem; color:var(--ink)}
.ty-card__footer p{margin:0 0 2px; font-size:.82rem; line-height:1.45; color:var(--ink-3)}

.ty-note{
  margin-top:18px; background:var(--red-tint); border:1px solid rgba(227,34,38,.15);
  border-radius:var(--r-md); padding:12px 14px; font-size:.78rem; line-height:1.5; color:var(--ink-2);
}
.ty-note b{color:var(--red-dark)}

.ty-stack{display:flex; flex-direction:column; gap:clamp(20px,3vw,28px)}

.ty-message p{margin:0 0 14px; font-size:.95rem; line-height:1.6; color:var(--ink-2)}
.ty-message p:last-child{margin-bottom:0}
.ty-message strong{color:var(--red-dark)}

.ty-video__banner{background:var(--maroon); color:#fff; padding:20px 24px}
.ty-video__banner h3{margin:0; font-size:1.05rem; color:#fff}
.ty-video__banner p{margin:4px 0 0; font-size:.82rem; color:var(--on-dark-3)}
.ty-card--flush .video{border-radius:0; box-shadow:none}

.ty-prototype-note{margin-top:clamp(28px,4vw,40px)}

/* ==========================================================================
   YOUTUBE FACADE — click-to-load video, moved here from styles.css since
   it's no longer homepage-only (thankyou.html reuses it). The iframe is
   injected on click only — see main.js — so a third-party player never
   loads for visitors who don't ask for it.
   ========================================================================= */
.video{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--sh-3); background:#1a0d0c;
}
.video__poster{width:100%; height:100%; object-fit:cover; display:block}
.video__play{position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; cursor:pointer}
.video__btn{
  width:78px; height:78px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--red);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.video__btn svg{width:34px; height:34px; margin-left:2px}
.video__play:hover .video__btn,.video__play:focus-visible .video__btn{transform:scale(1.09); background:#fff}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video.is-playing .video__play,.video.is-playing .video__len{display:none}
.video__len{
  position:absolute; top:14px; right:14px; font-size:.72rem; font-weight:700; color:#fff;
  letter-spacing:.05em; background:rgba(0,0,0,.55); padding:4px 9px; border-radius:6px;
  font-variant-numeric:tabular-nums;
}