.section { padding-block: var(--space-7); }
.hero { display: grid; gap: var(--space-6); align-items: center; }
.hero h1 { max-width: var(--width-copy); }
.hero-guide { text-align: center; }
.hero-guide img { width: min(100%, 26rem); margin-inline: auto; }
.hero-guide figcaption { font-size: var(--font-small); color: var(--color-muted); }
.hero-guide strong { display: block; color: var(--color-ink); font-size: var(--font-lead); }
.method-list { display: grid; gap: var(--space-6); list-style: none; counter-reset: method; margin: 0; padding: 0; }
.method-list li { counter-increment: method; border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-5); }
.method-list li::before { content: "0" counter(method); display: block; color: var(--color-primary); font-size: var(--font-small); font-weight: 650; margin-block-end: var(--space-5); }
.method-list h3 { margin-block-end: var(--space-3); }
.method-list p { color: var(--color-muted); }
.method-note { margin-block-start: var(--space-7); max-width: var(--width-reading); color: var(--color-muted); font-size: var(--font-small); }
.invitation { max-width: var(--width-reading); margin-inline: auto; border-radius: var(--radius-medium); padding: var(--space-6); }
.faq { max-width: var(--width-reading); margin-inline: auto; }
.faq h2 { margin-block-end: var(--space-6); }
.faq details { border-block-start: 1px solid var(--color-border); padding-block: var(--space-5); }
.faq summary { font-size: var(--font-lead); font-weight: 600; }
.faq details p { margin-block-start: var(--space-4); color: var(--color-muted); }
@media (min-width: 48rem) {
  /* Keep the label separate and center title/intro within their shared row. */
  #method .section-intro { row-gap: 0; }
  #method .section-intro > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-self: stretch; align-items: center; }
  #method .section-intro > .lead { grid-column: 2; grid-row: 2; align-self: center; }
  .hero { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); }
  .method-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}