/* ==========================================================================
   The Hmong Inc. — Support Us (one-time gift), v1 draft
   No payment processor is connected, so this page does the honest version of a
   donate flow: pick an amount, then send it by the two methods a non-profit
   can accept without any online checkout, check or bank transfer.

   Layout device of its own: a sticky AMOUNT LADDER in the left rail beside a
   two-method instruction column. Light register, shared type scale.
   Extends styles.css; tokens from :root.
   ========================================================================== */

.crumb {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--secondary); display: flex; gap: .55rem; align-items: center; margin: 0 0 1.6rem;
}
.crumb a { color: var(--secondary); text-decoration: none; }
.crumb a:hover { color: var(--green-ink); }
.crumb span { color: var(--hair-strong); }
.crumb b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--ink); }

.suphead { padding-block: clamp(52px, 7vw, 104px) clamp(36px, 4.5vw, 60px); }
.suphead__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
@media (max-width: 900px) { .suphead__grid { grid-template-columns: 1fr; gap: 2rem; } }
.suphead .d1 { font-size: clamp(2.75rem, 6.4vw, 5.4rem); }
.suphead__side { color: var(--secondary); max-width: 34ch; }

/* --- the give layout: amount ladder | how to send -------------------------- */
.give { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(34px, 5vw, 84px); align-items: start; }
@media (max-width: 940px) { .give { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (min-width: 941px) { .ladder__wrap { position: sticky; top: 108px; } }

.ladder { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.ladder li {
  display: grid; grid-template-columns: 104px minmax(0,1fr); gap: clamp(14px, 2vw, 26px);
  align-items: baseline; padding-block: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--hair);
}
.ladder .amt {
  font-family: var(--display); font-variation-settings: "wdth" 66, "wght" 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.02em;
  color: var(--green-ink); font-variant-numeric: lining-nums tabular-nums;
}
.ladder .buys { color: var(--secondary); font-size: 1rem; line-height: 1.5; }
.ladder .buys b { color: var(--ink); font-weight: 600; }
.ladder__note { margin-top: 1.2rem; color: var(--secondary); font-size: .95rem; line-height: 1.55; }

/* --- the two send methods -------------------------------------------------- */
.method + .method { margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--hair-strong); }
.method__step {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 .5rem;
}
.method h3 { margin: 0 0 .8rem; }                 /* .d3 governs size */
.method p { color: var(--secondary); margin: 0 0 1.2rem; }

.paydl { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: .55rem clamp(16px,2vw,28px); margin: 0; }
@media (max-width: 560px) { .paydl { grid-template-columns: 1fr; gap: .2rem 0; } }
.paydl dt { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); padding-top: .25rem; }
.paydl dd { margin: 0 0 .5rem; color: var(--ink); font-size: 1.02rem; line-height: 1.5; }
.paydl dd.mono { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }

/* --- what happens next ----------------------------------------------------- */
.after { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(26px, 3.5vw, 56px); }
@media (max-width: 820px) { .after { grid-template-columns: 1fr; gap: 1.8rem; } }
.after__col h3 { margin: 0 0 .6rem; }             /* .d4 governs size */
.after__col p { color: var(--secondary); font-size: 1rem; line-height: 1.55; margin: 0; }

/* --- other ways ------------------------------------------------------------ */
.otherways { display: flex; gap: .8rem 1.4rem; flex-wrap: wrap; align-items: center; margin-top: 1.6rem; }