/* Support page — port of docs/product-knowledge/brand-exploration/prototype/support.html
   (.sp-* rules in styles.css), reusing the .home-front/--hf-* scope and tokens defined in
   homepage_front.css (masthead + footer come from that stylesheet). This file only covers
   the page body between them.

   Mapping to the prototype's real selectors:
     hf-sp-hero / hf-sp-case   -> .sp-hero / .sp-case   (split hero: the case + the ask)
     hf-sp-h1                  -> .t-display-xl
     hf-sp-promise             -> .sp-promise
     hf-sp-card                -> .sp-card              (butter pastel, sticky on desktop)
     hf-sp-sec-h               -> .t-section-heading
     hf-sp-item-h              -> .t-ui-heading
     hf-sp-meta                -> .t-metadata
     hf-sp-four / hf-sp-num    -> .sp-four / .sp-num
     hf-sp-ways                -> .sp-ways
     hf-sp-thanks              -> .sp-thanks */

.home-front { --hf-pastel-butter: #fdf4cd; }

.home-front .hf-sp-meta { font-size: 13px; font-weight: 500; line-height: 1.5; font-style: normal; }
.home-front .hf-sp-item-h {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 600; font-size: clamp(18px, 1rem + 0.3vw, 20px);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--hf-ink);
}
.home-front .hf-sp-sec-h {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 700; font-size: clamp(24px, 1.2rem + 1vw, 32px);
  line-height: 1.08; letter-spacing: -0.015em; color: var(--hf-ink);
}

/* hero: the case (left) + the donation card (right) */
.home-front .hf-sp-hero {
  display: grid; gap: var(--hf-space-40);
  padding-block: var(--hf-space-48) var(--hf-space-64); border-bottom: 1px solid var(--hf-border);
}
@media (min-width: 960px) {
  .home-front .hf-sp-hero {
    grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--hf-space-64);
    align-items: start; padding-block: var(--hf-space-64);
  }
}
.home-front .hf-sp-h1 {
  margin: var(--hf-space-8) 0 0; max-width: 12ch; font-family: var(--hf-font-editorial); font-weight: 800;
  font-size: clamp(34px, 1.6rem + 2.2vw, 48px); line-height: 0.98; letter-spacing: -0.045em; color: var(--hf-ink);
}
.home-front .hf-sp-dek { margin: var(--hf-space-16) 0 0; max-width: 36ch; }
.home-front .hf-sp-body { margin: var(--hf-space-24) 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--hf-ink-a80); }

.home-front .hf-sp-promise {
  margin: var(--hf-space-32) 0 0; padding-left: var(--hf-space-20);
  border-left: 3px solid var(--hf-ink); max-width: 40ch;
}
.home-front .hf-sp-promise p {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2; color: var(--hf-ink);
}
.home-front .hf-sp-promise cite { display: block; margin-top: var(--hf-space-8); }

.home-front .hf-sp-card { padding: var(--hf-space-24); border-radius: var(--hf-radius-6); background: var(--hf-pastel-butter); }
@media (min-width: 960px) { .home-front .hf-sp-card { position: sticky; top: var(--hf-space-16); } }
.home-front .hf-sp-card-h { margin: 0; font-family: var(--hf-font-primary); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--hf-ink); }
.home-front .hf-sp-card-text { margin: var(--hf-space-12) 0 0; line-height: 1.55; color: var(--hf-ink-a80); }
.home-front .hf-sp-checks { list-style: none; margin: var(--hf-space-16) 0 0; padding: 0; border-top: 1px solid var(--hf-border); }
.home-front .hf-sp-checks li {
  display: flex; align-items: center; gap: var(--hf-space-12); padding-block: var(--hf-space-12);
  border-bottom: 1px solid var(--hf-border); font-size: 15px; font-weight: 600; color: var(--hf-ink);
}
.home-front .hf-sp-checks li::before {
  content: "\2713"; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--hf-ink); color: var(--hf-white); font-size: 12px; font-weight: 700;
}
.home-front .hf-sp-go { margin-top: var(--hf-space-20); width: 100%; min-height: 52px; font-size: 17px; }
.home-front .hf-sp-fine { margin: var(--hf-space-12) 0 0; }
.home-front .hf-sp-fine a { color: var(--hf-link); }
.home-front .hf-sp-fine a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* what your support funds */
.home-front .hf-sp-funds { padding-block: var(--hf-space-64) var(--hf-space-48); }
.home-front .hf-sp-four { list-style: none; margin: var(--hf-space-32) 0 0; padding: 0; display: grid; gap: var(--hf-space-32) var(--hf-space-24); }
@media (min-width: 640px) { .home-front .hf-sp-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-front .hf-sp-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-front .hf-sp-four li { padding-top: var(--hf-space-16); border-top: 2px solid var(--hf-ink); }
.home-front .hf-sp-num { display: block; font-family: var(--hf-font-editorial); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--hf-ink); }
.home-front .hf-sp-four h3 { margin-top: var(--hf-space-16); }
.home-front .hf-sp-four p { margin: var(--hf-space-8) 0 0; font-size: 17px; line-height: 1.55; color: var(--hf-ink-a80); }

/* other ways to help */
.home-front .hf-sp-other-ways { padding-block: var(--hf-space-32) var(--hf-space-48); }
.home-front .hf-sp-ways { list-style: none; margin: var(--hf-space-20) 0 0; padding: 0; border-top: 1px solid var(--hf-border); }
@media (min-width: 768px) { .home-front .hf-sp-ways { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--hf-space-32); } }
.home-front .hf-sp-ways li { border-bottom: 1px solid var(--hf-border); }
/* an odd count leaves one item alone in the last row: let it take the full width */
@media (min-width: 768px) { .home-front .hf-sp-ways li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.home-front .hf-sp-ways a {
  position: relative; display: flex; flex-direction: column; gap: var(--hf-space-4);
  padding: var(--hf-space-20) var(--hf-space-32) var(--hf-space-20) 0; font-size: 17px; line-height: 1.5;
}
.home-front .hf-sp-ways a::after {
  content: "\2192"; position: absolute; right: var(--hf-space-4); top: 50%; transform: translateY(-50%);
  color: var(--hf-link); font-weight: 700;
}
.home-front .hf-sp-ways a:hover .hf-sp-item-h { color: var(--hf-link); }

.home-front .hf-sp-thanks {
  max-width: 44rem; margin: 0 auto; padding-block: var(--hf-space-32) var(--hf-space-64);
  text-align: center; font-size: 17px; line-height: 1.6; color: var(--hf-ink-a70); text-wrap: balance;
}
.home-front .hf-sp-thanks b { color: var(--hf-ink); }

@media (max-width: 639px) {
  .home-front .hf-sp-hero { padding-block: var(--hf-space-32) var(--hf-space-48); }
  .home-front .hf-sp-funds { padding-block: var(--hf-space-48) var(--hf-space-32); }
}