/* ============================================================================
   HOMEPAGE — copy-revision layer
   ============================================================================
   Promoted 2026-08-12: this began as the "index-1" review candidate and is now
   the live homepage stylesheet, loaded only by index.html. Everything here is
   additive over styles.css; no shared rule is overridden, so the other pages
   are unaffected.

   The previous homepage is archived at index-previous.html and does NOT load
   this file.
   ============================================================================ */

/* ---- "How We Help" heading block ------------------------------------------
   Reuses the slab's existing type and the .lede size already on the page, so
   this introduces no new type scale. */
.slab-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.slab-head h2 { color: var(--white); margin: 0 0 12px; }
.slab-head .lede { color: var(--light-neutral); margin: 0; }

/* ---- Cards as links --------------------------------------------------------
   .card-navy was an <article>; it is now an <a>. These rules only re-neutralise
   anchor defaults and add affordance — the card's own fill, radius, padding and
   alignment all still come from the existing .card-navy rule. */
.cards a.card-navy {
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease;
}
/* Hover must not change the fill. Darkening azure would need a new tint, and
   moving to deep blue would make the card vanish into the slab behind it — so
   the affordance is a lift plus an inset hairline in an approved colour.
   outline-offset: -1px keeps it inside the box, so nothing reflows. */
.cards a.card-navy:hover {
  transform: translateY(-2px);
  outline: 1px solid var(--light-neutral);
  outline-offset: -1px;
}
/* The focus ring must clear the azure fill, so it uses the on-dark outline
   colour the rest of the slab already uses. */
.cards a.card-navy:focus-visible {
  outline: 2px solid var(--light-neutral);
  outline-offset: 3px;
}

/* Affordance cue. aria-hidden in the markup — the card is already one link with
   an accessible name from its heading, so this must not add to that name. */
.card-cue {
  margin-top: auto; padding-top: 18px;
  font-size: 13px; font-weight: var(--w-label); letter-spacing: 0.04em;
  color: var(--light-neutral); opacity: 0.85;
}
.cards a.card-navy:hover .card-cue { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cards a.card-navy { transition: none; }
  .cards a.card-navy:hover { transform: none; }
}

@media (max-width: 860px) {
  .slab-head { margin-bottom: 32px; }
}