/* Hero + section layouts */
.hero {
  max-width: 920px; margin: 0 auto;
  padding: 56px 24px 28px; text-align: center;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-amber);
  border-bottom: 2px solid var(--brand-amber);
  padding-bottom: 4px; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--brand-navy); margin-bottom: 14px;
  font-weight: 700;
}
.hero h1 em { font-style: italic; color: var(--brand-amber); }
.hero-sub {
  font-size: 1.05rem; color: var(--muted);
  max-width: 580px; margin: 0 auto;
}

.legend {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 14px 24px 26px; max-width: 920px; margin: 0 auto;
  font-size: .8rem; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend .dot.wrong { background: var(--wrong); }
.legend .dot.right { background: var(--right); }
.legend .dot.tongue { background: #E58B8B; border: 1.5px solid #B85C5C; }
.legend .dot.air { background: #3B82C4; }

main { max-width: 920px; margin: 0 auto; padding: 0 24px 40px; }

.section-anchor {
  display: block; position: relative; top: -70px; visibility: hidden;
}