/* Shared page parts: audience tones, page header band, sections, cards, numbered steps, closing band, empty state, cross-links (surfaces and tones of design system v2). */
.for-volunteers {
  --tone: var(--role-volunteer);
  --on-tone: var(--on-role-volunteer);
}

.for-nonprofits {
  --tone: var(--role-nonprofit);
  --on-tone: var(--on-role-nonprofit);
}

.for-businesses {
  --tone: var(--role-business);
  --on-tone: var(--on-role-business);
}

.page-head {
  padding: var(--s-7) var(--s-4) var(--s-6);
  background:
    radial-gradient(
      46rem 18rem at 85% -35%,
      color-mix(in oklab, var(--tone, var(--c-teal)) 45%, transparent),
      transparent 70%
    ),
    var(--c-ink);
  color-scheme: dark;
  color: var(--text);
  border-block-end: 1px solid color-mix(in oklab, var(--tone, var(--c-teal)) 45%, transparent);
}

.page-head > * {
  max-inline-size: 46rem;
  margin-inline: auto;
}

.page-head h1 {
  margin-block: 0;
  font-size: var(--fs-4);
  line-height: 1.15;
}

.eyebrow {
  margin-block: 0 var(--s-2);
  color: color-mix(in oklab, var(--tone, var(--c-teal)) 55%, var(--text));
  font-size: var(--fs-0);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  margin-block: var(--s-4) 0;
  color: var(--text-muted);
  font-size: var(--fs-2);
  line-height: 1.45;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.section {
  container: section / inline-size;
  max-inline-size: var(--max-w);
  margin-inline: auto;
  padding: var(--s-7) var(--s-4);
}

.section + .section {
  padding-block-start: 0;
}

.section > h2 {
  margin-block: 0;
  font-size: var(--fs-4);
  text-align: center;
}

.cards,
.steps {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

@container section (min-width: 52rem) {
  .cards,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .cards,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card,
.steps li {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.card {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--tone, var(--c-teal)) 11%, var(--surface)), var(--surface) 5rem),
    var(--surface);
}

a.card,
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

a.card:hover,
.card-link:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card h3,
.steps h3 {
  margin-block: 0 var(--s-2);
  font-size: var(--fs-2);
}

.card p,
.steps p {
  margin: 0;
  color: var(--text-muted);
}

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: var(--s-3);
  border-radius: 50%;
  background: var(--tone, var(--accent));
  color: var(--on-tone, var(--on-accent));
  font-weight: 800;
}

.band {
  padding: var(--s-8) var(--s-4);
  background:
    radial-gradient(40rem 16rem at 50% 120%, color-mix(in oklab, var(--c-teal) 28%, transparent), transparent 70%),
    var(--c-ink);
  color-scheme: dark;
  color: var(--text);
  text-align: center;
}

.band h2 {
  margin-block-start: 0;
  color: var(--c-teal);
  font-size: var(--fs-4);
}

.band p {
  max-inline-size: 38rem;
  margin-inline: auto;
}

.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.empty .icon {
  inline-size: 44px;
  block-size: 44px;
  color: var(--accent-text);
}

.empty h2 {
  margin: 0;
  font-size: var(--fs-2);
}

.empty p {
  max-inline-size: 34rem;
  margin: 0;
  color: var(--text-muted);
}

.empty a {
  color: var(--link);
  font-weight: 700;
}

.cross {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 900px) {
  .cross {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cross a {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.cross a:hover {
  border-color: var(--accent-text);
}