.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--paper { background: var(--c-paper); border-block: 1px solid var(--c-line-soft); }

.section__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }

@media (min-width: 900px) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    column-gap: var(--sp-7);
  }
}

.section__kicker {
  font-family: var(--f-label);
  font-size: var(--fs-eyebrow);
  color: var(--c-ink-muted);
}

.section__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.section__note { margin: 0; max-width: 58ch; color: var(--c-ink-soft); }

.steps { display: grid; gap: var(--sp-4); counter-reset: step; }

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

.step { padding-top: var(--sp-4); border-top: 2px solid var(--c-ink); counter-increment: step; }
.step::before {
  content: '0' counter(step);
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-label);
  font-size: var(--fs-caption);
  color: var(--c-accent);
}
.step h3 { margin: 0 0 var(--sp-2); font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
.step p { margin: 0; font-size: 0.9375rem; color: var(--c-ink-soft); }

.formats { display: grid; gap: var(--sp-4); }

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

.format {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.format:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.format__media { display: grid; place-items: center; height: 180px; border-radius: var(--r-md); background: var(--c-bone); }
.format__media img { max-height: 160px; width: auto; }
.format h3 { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
.format p { margin: 0; font-size: 0.9375rem; color: var(--c-ink-soft); }
.format dl { display: flex; gap: var(--sp-4); margin: 0; font-family: var(--f-label); font-size: var(--fs-caption); }
.format dt { color: var(--c-ink-muted); }
.format dd { margin: 0; font-weight: 700; }

.cta-band {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-brand-deep);
  color: var(--c-paper);
}

@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--sp-7); } }

.cta-band h2 { margin: 0 0 var(--sp-2); font-family: var(--f-display); font-size: var(--fs-h2); font-weight: var(--fw-heading); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.cta-band p { margin: 0; max-width: 54ch; color: color-mix(in srgb, var(--c-ink-inverse) 72%, transparent); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta-band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--c-paper); }
.cta-band .btn--ghost:hover { border-color: var(--c-paper); }

.section__more { display: flex; justify-content: center; margin-top: var(--sp-6); }

.categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

@media (min-width: 720px) { .categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }

.category {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.category:hover { border-color: var(--c-brand); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.category__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.category:hover .category__icon { background: var(--c-brand); color: var(--c-ink-inverse); }
.category__icon svg { width: 30px; height: 30px; }
.category__name { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
.category__count { font-size: var(--fs-caption); color: var(--c-ink-muted); }

@media (max-width: 719px) {
  .categories { grid-template-columns: 1fr; gap: var(--sp-2); }
  .category { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-4); row-gap: 0; align-items: center; padding: var(--sp-3) var(--sp-4); }
  .category__icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .category__icon svg { width: 26px; height: 26px; }
  .category__name { font-size: 1.0625rem; align-self: end; }
  .category__count { align-self: start; }
}