/* ─────────────────────────────────────────────────────────────
   Campaign landing pages — currently /help-local-families/.
   Loaded only by that page (see its <x-slot:head>). Built on the
   site tokens in styles.css (navy / crimson / stone / mist, Spectral
   + IBM Plex) so the page reads as part of SSA, not a microsite.
   Rhythm: open hero → compact trust strip → editorial need → structured
   response → bold navy proof → narrative "why money" → dominant navy
   donation block → monthly continuity → institutional trust → FAQ →
   image-led close.
   ───────────────────────────────────────────────────────────── */

.hlf{ --hlf-radius: 4px; }
.hlf img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.hlf figure{ margin: 0; }
.hlf p{ text-wrap: pretty; }
.hlf .h2{ text-wrap: balance; }

.hlf-btn-lg{ --bh: 3.9rem; padding-inline: 2.1rem; font-size: 1.0313rem; }
.hlf-micro{ margin-top: .8rem; font-size: .9688rem; color: var(--silver-tx); }
.hlf-micro--light{ color: var(--text-light); }
.hlf-h3{
  font: 500 clamp(1.35rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--display);
  color: var(--navy); letter-spacing: -.01em; text-wrap: balance;
}
.hlf-nowrap{ white-space: nowrap; }
.hlf-textlink{
  display: inline-block; margin-top: 1.25rem; font-size: 1.0625rem;
  color: var(--crimson); font-weight: 500; text-decoration: underline;
  text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.hlf-textlink:hover{ color: var(--crimson-lt); }

/* ── 1. Hero ─────────────────────────────────────────────── */
.hlf-hero{ background: var(--paper); padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2.25rem, 4vw, 3.5rem); }
.hlf-hero__grid{
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}
.hlf-hero__h{
  margin-top: .9rem;
  font: 500 clamp(2.45rem, 1.5rem + 3.7vw, 4.2rem)/1.05 var(--display);
  color: var(--navy); letter-spacing: -.022em; text-wrap: balance; max-width: 18ch;
}
.hlf-hero__lead{ margin-top: 1.5rem; font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.375rem); line-height: 1.6; color: var(--text-mid); max-width: 54ch; }
.hlf-hero__cta{ margin-top: 2.25rem; }
.hlf-hero__media{ aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--hlf-radius); background: var(--stone); }
.hlf-hero__media img{ object-position: 50% 45%; }

/* ── 2. Trust strip ─────────────────────────────────────── */
.hlf-trust{ background: var(--stone); border-block: 1px solid var(--stone-2); }
.hlf-trust__list{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3.25rem;
  padding-block: 1.5rem; list-style: none; margin: 0;
}
.hlf-trust__list li{ display: inline-flex; align-items: center; gap: .7rem; font-size: 1.0938rem; font-weight: 500; color: var(--navy); }
.hlf-trust__list svg{ width: 28px; height: 28px; flex: none; fill: none; stroke: var(--crimson); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── 3. Community need (editorial) ──────────────────────── */
.hlf-need{ background: var(--paper); padding-block: var(--chapter); }
.hlf-need__grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hlf-need__h{ position: sticky; top: calc(var(--head-h) + 2rem); }
.hlf-need__body{ max-width: 62ch; }
.hlf-need__body p{ font-size: 1.125rem; line-height: 1.75; color: var(--text-mid); }
.hlf-need__body p + p{ margin-top: 1.1rem; }
.hlf-need__first{ font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.65rem)/1.45 var(--display) !important; color: var(--navy) !important; }
.hlf-need__turn{
  padding-left: 1.1rem; border-left: 3px solid var(--crimson);
  font: italic 400 clamp(1.15rem, 1.05rem + .5vw, 1.35rem)/1.5 var(--display) !important; color: var(--navy) !important;
}

/* ── 4. SSA response (structured) ───────────────────────── */
.hlf-response{ background: var(--mist); padding-block: var(--chapter); }
.hlf-response__head{ max-width: 46rem; }
.hlf-response__head .lead{ margin-top: 1rem; }
.hlf-response__grid{
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4.5vw, 4rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); align-items: start;
}
.hlf-response__media{ aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hlf-radius); position: sticky; top: calc(var(--head-h) + 2rem); }
.hlf-areas{ list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hlf-areas li{ display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem 1rem; padding-block: 1.35rem; border-top: 1px solid var(--mist-2); }
.hlf-areas li:first-child{ border-top: 0; padding-top: 0; }
.hlf-areas__n{ font: 500 .875rem/2.1 var(--mono); color: var(--crimson); letter-spacing: .04em; }
.hlf-areas h3{ font: 600 1.25rem/1.35 var(--body); color: var(--navy); }
.hlf-areas p{ margin-top: .45rem; font-size: 1.0938rem; color: var(--text-mid); line-height: 1.7; }

.hlf-beyond{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(2.75rem, 5vw, 4rem); padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper); border-radius: var(--hlf-radius);
}
.hlf-beyond__media{ aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; }
.hlf-beyond__copy p{ margin-top: .85rem; font-size: 1.0938rem; color: var(--text-mid); line-height: 1.75; max-width: 60ch; }
.hlf-beyond__copy .btn{ margin-top: 1.5rem; }

/* ── 5. Impact / proof (bold, navy) ─────────────────────── */
.hlf-impact{ background: var(--navy); color: #fff; padding-block: var(--chapter); }
.hlf-impact__head{ max-width: 44rem; }
.hlf-impact__intro{ margin-top: 1rem; font-size: 1.125rem; line-height: 1.7; color: var(--text-light); }
.hlf-proof{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
}
.hlf-proof__item{ padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.22); }
.hlf-proof__big{ font: 500 clamp(1.45rem, 1.1rem + 1.2vw, 1.95rem)/1.15 var(--display); color: #fff; letter-spacing: -.012em; text-wrap: balance; }
.hlf-proof__item--num .hlf-proof__big{ font-size: clamp(3.25rem, 2.2rem + 4vw, 4.75rem); line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums; }
.hlf-proof dd{ margin: .85rem 0 0; font-size: 1.0313rem; line-height: 1.6; color: var(--text-light); max-width: 30ch; }
.hlf-impact__close{
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12);
  font: italic 400 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.4 var(--display); color: var(--rose-lt);
}

/* ── 6. Why financial support matters (narrative) ───────── */
.hlf-why-money{ background: var(--stone); padding-block: var(--chapter); }
.hlf-why-money__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hlf-why-money__media{ aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--hlf-radius); }
.hlf-why-money__copy .lead{ margin-top: 1.1rem; }
.hlf-why-money__copy p:not(.lead){ margin-top: 1rem; font-size: 1.125rem; color: var(--text-mid); line-height: 1.75; max-width: 62ch; }
.hlf-why-money__copy .hlf-why-money__key{
  margin-top: 1.5rem !important; padding-left: 1.1rem; border-left: 3px solid var(--crimson);
  color: var(--navy) !important; font-weight: 500;
}
.hlf-why-money__copy .btn{ margin-top: 1.9rem; }

/* ── 7. Main donation section (dominant) ────────────────── */
.hlf-donate{
  background: var(--navy-2); color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem);
}
.hlf-donate:focus{ outline: none; }
.hlf-donate__grid{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hlf-donate__intro{ position: sticky; top: calc(var(--head-h) + 2rem); }
.hlf-donate__lead{ margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.7; color: var(--text-light); max-width: 48ch; }
.hlf-donate__assure{ list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.hlf-donate__assure li{ position: relative; padding-left: 1.75rem; font-size: 1.0313rem; color: #fff; }
.hlf-donate__assure li::before{
  content: ""; position: absolute; left: 0; top: .3em; width: 1rem; height: .55rem;
  border-left: 2px solid var(--rose); border-bottom: 2px solid var(--rose); transform: rotate(-45deg);
}

.hlf-form{
  background: var(--paper); color: var(--text); border-radius: 6px;
  padding: clamp(1.4rem, 3.5vw, 2.5rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.hlf-form :focus-visible{ outline-color: var(--crimson-lt); }
.hlf-fieldset{ border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
.hlf-legend, .hlf-label{
  display: block; padding: 0; margin-bottom: .6rem;
  font: 500 .8125rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
}
.hlf-hint{ text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 400; color: var(--silver-tx); }

/* Native radios, visually replaced — still keyboard/screen-reader native. */
.hlf-seg__opt input, .hlf-amount input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.hlf-seg{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--navy); border-radius: var(--hlf-radius); overflow: hidden; }
.hlf-seg__opt{ position: relative; }
.hlf-seg__opt + .hlf-seg__opt{ border-left: 1px solid var(--navy); }
.hlf-seg__opt span{
  display: flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .5rem;
  font-weight: 600; font-size: 1rem; color: var(--navy); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.hlf-seg__opt:hover span{ background: var(--mist); }
.hlf-seg__opt input:checked + span{ background: var(--navy); color: #fff; }
.hlf-seg__opt input:focus-visible + span{ outline: 2px solid var(--crimson-lt); outline-offset: -4px; }

.hlf-amounts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.hlf-amount{ position: relative; }
.hlf-amount--custom{ grid-column: 1 / -1; }
.hlf-amount span{
  display: flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .5rem;
  border: 1px solid var(--rule); border-radius: var(--hlf-radius); background: var(--paper);
  font: 600 1.125rem/1 var(--body); color: var(--navy); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.hlf-amount--custom span{ font-size: 1rem; }
.hlf-amount:hover span{ border-color: var(--navy); }
.hlf-amount input:checked + span{ background: var(--navy); border-color: var(--navy); color: #fff; }
.hlf-amount input:focus-visible + span{ outline: 2px solid var(--crimson-lt); outline-offset: 2px; }

.hlf-custom{ margin-top: 1rem; }
.hlf-custom__field{ display: flex; width: 100%; min-height: 3.1rem; }
.hlf-custom__field input{ flex: 1; font-size: 1.125rem; min-width: 0; }
.hlf-field-error{ margin-top: .6rem; font-size: .875rem; color: var(--crimson); font-weight: 500; }
.hlf-form input[aria-invalid="true"]{ border-color: var(--crimson); }

.hlf-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.hlf-fields .text-field{ width: 100%; min-height: 3.1rem; font-size: 1rem; }

.hlf-summary{ min-height: 1.6em; margin-bottom: 1rem; font-size: 1.0313rem; color: var(--text-mid); }
.hlf-summary strong{ color: var(--navy); }
.hlf-form__submit{ width: 100%; justify-content: center; font-size: 1rem; }
.hlf-form__micro{
  display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem;
  font-size: .9375rem; color: var(--text-mid); text-align: center;
}
.hlf-form__micro svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.hlf-form__legal{ margin-top: .6rem; font-size: .875rem; line-height: 1.55; color: var(--silver-tx); text-align: center; }
.hlf-form__error{
  margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-left: 3px solid var(--crimson);
  background: #FBEDEF; color: var(--text); font-size: .9375rem;
}
.hlf-form__error:focus{ outline: 2px solid var(--crimson-lt); outline-offset: 2px; }
.hlf-form__error ul{ margin: .4rem 0 0; padding-left: 1.1rem; list-style: disc; }

/* ── 8. Monthly giving (continuity) ─────────────────────── */
.hlf-monthly{ background: var(--paper); padding-block: var(--chapter); }
.hlf-monthly__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hlf-monthly__sub{ margin-top: .65rem; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); }
.hlf-monthly__copy .lead{ margin-top: 1.25rem; }
.hlf-monthly__copy p:not(.lead):not(.hlf-monthly__sub){ margin-top: 1rem; font-size: 1.125rem; color: var(--text-mid); line-height: 1.75; max-width: 58ch; }
.hlf-tiers{ list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; }
.hlf-tier{
  display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: center;
  padding: 1rem 1.25rem; min-height: 3.5rem;
  border: 1px solid var(--rule); border-radius: var(--hlf-radius); background: var(--paper);
  color: inherit; text-decoration: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.hlf-tier:hover{ border-color: var(--navy); background: var(--mist); }
.hlf-tier__amt{ font: 500 1.4rem/1.2 var(--display); color: var(--navy); white-space: nowrap; }
.hlf-tier__txt{ font-size: 1.0313rem; line-height: 1.55; color: var(--text-mid); }
.hlf-tier__go{ color: var(--crimson); font-weight: 600; transition: transform .18s var(--ease); }
.hlf-tier:hover .hlf-tier__go{ transform: translateX(3px); }

/* ── 9. Why support SSA (institutional) ─────────────────── */
.hlf-trustpoints{ background: var(--stone); padding-block: var(--chapter); }
.hlf-trustpoints__grid{ display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hlf-points{ list-style: none; margin: 0; padding: 0; }
.hlf-point{
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding-block: 1.4rem; border-top: 1px solid var(--stone-2);
}
.hlf-point:first-child{ padding-top: 0; border-top: 0; }
.hlf-point__icon{
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--stone-2);
}
.hlf-point__icon svg{ width: 24px; height: 24px; fill: none; stroke: var(--crimson); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hlf-point__h{ font: 600 1.1875rem/1.35 var(--body); color: var(--navy); margin-top: .3rem; }
.hlf-point p{ margin-top: .4rem; font-size: 1.0938rem; line-height: 1.7; color: var(--text-mid); max-width: 64ch; }

/* ── 11. FAQ ────────────────────────────────────────────── */
.hlf-faq{ background: var(--paper); padding-block: var(--chapter); }
.hlf-faq__grid{ display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hlf-faq__list{ border-top: 1px solid var(--rule); }
.hlf-faq__list .qa__a p{ font-size: 1.0938rem; color: var(--text-mid); line-height: 1.75; }
.hlf-faq__list .qa__a p + p{ margin-top: .75rem; }
.hlf-faq__list .qa__a a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; }

/* ── 12. Final CTA (image-led close) ────────────────────── */
.hlf-final{ background: var(--navy); color: #fff; }
.hlf-final__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(24rem, 42vw, 34rem); }
.hlf-final__media{ overflow: hidden; }
.hlf-final__media img{ object-position: 50% 78%; }
.hlf-final__copy{
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(2.5rem, 6vw, 5rem) max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))) clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
}
.hlf-final__pair{ margin-top: 1.25rem; font: italic 400 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.4 var(--display); color: var(--rose-lt); }
.hlf-final__p{ margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.7; color: var(--text-light); max-width: 48ch; }
.hlf-final__copy .btn{ margin-top: 2rem; }

/* ── Mobile sticky donate CTA ───────────────────────────── */
.hlf-sticky{ display: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px){
  .hlf-proof{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .hlf-hero__grid,
  .hlf-need__grid,
  .hlf-response__grid,
  .hlf-beyond,
  .hlf-why-money__grid,
  .hlf-donate__grid,
  .hlf-monthly__grid,
  .hlf-trustpoints__grid,
  .hlf-faq__grid,
  .hlf-final__grid{ grid-template-columns: minmax(0, 1fr); }

  /* Mobile order per brief: H1 → paragraph → CTA → microcopy → image → trust strip */
  .hlf-hero__media{ aspect-ratio: 4 / 3; }
  .hlf-need__h, .hlf-response__media, .hlf-donate__intro{ position: static; }
  .hlf-response__media{ aspect-ratio: 16 / 10; }
  .hlf-why-money__media{ aspect-ratio: 16 / 10; order: 2; }
  .hlf-final__media{ aspect-ratio: 3 / 2; }
  .hlf-final__copy{ padding: clamp(2.25rem, 7vw, 3rem) var(--gut); }
  .hlf-donate__assure{ margin-top: 1.25rem; }
}
@media (max-width: 768px){
  .hlf-sticky{
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--rule);
    box-shadow: 0 -10px 24px -18px rgba(11,23,41,.45);
    transform: translateY(110%); visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .hlf-sticky.is-visible{ transform: none; visibility: visible; transition: transform .28s var(--ease), visibility 0s; }
  .hlf-sticky .btn{ width: 100%; justify-content: center; --bh: 3.1rem; }
}
@media (max-width: 560px){
  .hlf-amounts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hlf-fields{ grid-template-columns: minmax(0, 1fr); }
  .hlf-proof{ grid-template-columns: minmax(0, 1fr); }
  .hlf-tier{ grid-template-columns: minmax(0, 1fr) auto; }
  .hlf-tier__txt{ grid-column: 1 / 2; }
  .hlf-tier__go{ grid-row: 1; grid-column: 2; }
  .hlf-trust__list{ justify-content: flex-start; flex-direction: column; gap: .7rem; }
  .hlf-btn-lg{ width: 100%; justify-content: center; }
  .hlf-areas li{ grid-template-columns: 2.25rem minmax(0, 1fr); gap: .4rem .6rem; }
}
@media (prefers-reduced-motion: reduce){
  .hlf-sticky, .hlf-sticky.is-visible, .hlf-tier__go, .hlf-seg__opt span, .hlf-amount span{ transition: none; }
}