/* Ambassadors page — new components (how-it-works vertical flow + perk tiles), Inventiff brand */

/* --- How it works: vertical timeline with a scroll-driven energy spark --- */
/* amber fill that grows as the spark descends */
/* the travelling spark — a glowing dot with a trailing streak, like the hero bolts */

/* lit state — set by JS as the spark passes each node */

/* The unlit state was --card-border, a boundary token used as type: 1.35:1, which
   DS 17 fails outright and DS 04 does not sanction. --muted-text is the token for a
   supporting label, and the step still lights up to navy, so the reveal survives. */

/* the frame draws these three at the card-title size (1460:9632) */
#how .why h3 { line-height: var(--lh-h3); font-size: var(--fs-h3); font-weight: 400; }
.amb-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.amb-perk { background: var(--grad-card);
  border: 1px solid var(--card-border); border-radius: var(--r); padding: 32px 32px; }
.amb-perk .ic { width: 32px; height: 32px; color: var(--amber-text); margin-bottom: 16px; display: block; }
.amb-perk h3 { line-height: var(--lh-h3); font-size: var(--fs-h3); font-weight: 400; margin-bottom: var(--s-1); }
.amb-perk p { font-size: var(--fs-p-small); color: var(--ink); line-height: 1.6; }

@media (max-width: 940px) {
  .amb-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .amb-perks { grid-template-columns: 1fr; }
}