/* A V2.3: compact hero and audience transition. Shared components stay unchanged. */
.hero {
  min-height: 0;
  padding-top: 38px;
  padding-bottom: 40px;
}
.hero .hero-copy { min-width: 0; padding-top: 0; }
.hero .hero-actions {
  margin-top: 26px;
  gap: 22px;
  flex-wrap: wrap;
}
.hero .hero-actions .button {
  min-height: 56px;
  font-size: 14px;
  gap: 24px;
  white-space: normal;
  text-align: center;
}
.hero .hero-actions .button > span { flex-shrink: 0; }
.hero .hero-actions .button:hover > span,
.hero .hero-actions .button:focus-visible > span { transform: translateY(3px); }
.hero .hero-actions .text-link { font-size: 14px; }
.hero .hero-art { height: 480px; }

/* The root already provides the sticky-header offset (110px / 90px).
   Do not add a second offset at the audience destination. */
#audiences {
  scroll-margin-top: 0;
  padding-top: 32px;
  padding-bottom: 40px;
}
#audiences .audience-heading h2 {
  font-size: 44px;
  line-height: 1.12;
  margin-top: 0;
}
#audiences .audience-choices { margin-top: 20px; }
#audiences .audience-scene-frame { height: 430px; }
#audiences .audience-scene-backdrop { bottom: 20px; }
#audiences .audience-scene-foot { justify-content: flex-end; padding-top: 18px; }
#audiences .audience-all { min-height: 44px; font-size: 12px; }

@media (min-width: 1600px) {
  .hero .hero-art { height: 490px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero { padding-top: 32px; padding-bottom: 36px; }
  .hero h1 { font-size: clamp(56px, 6.9vw, 76px); margin-right: -48px; }
  .hero .hero-art { height: 420px; }
  .hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 6px; }
  .hero .hero-actions .button { min-height: 52px; padding-inline: 22px; }
  #audiences .audience-heading h2 { font-size: 40px; }
  #audiences .audience-choice-copy > span { font-size: 12px; }
}

@media (max-width: 899px) {
  #audiences .audience-heading h2 { font-size: 40px; }
  #audiences .audience-choice-copy > span { font-size: 13px; }
  #audiences .audience-all { padding-top: 18px; }
}

@media (max-width: 767px) {
  .hero { padding-top: 24px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(44px, 12.8vw, 76px); margin: 20px 0; }
  .hero .hero-intro { font-size: 14px; line-height: 1.65; max-width: 36em; }
  .hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 24px;
  }
  .hero .hero-actions .button { min-height: 52px; padding: 13px 20px; font-size: 14px; }
  .hero .hero-actions .text-link { align-self: flex-start; min-height: 44px; font-size: 14px; }
  .hero .hero-art { height: clamp(200px, 56.4vw, 300px); margin: 24px 0 0; }
  .hero .hero-mask { border-radius: 28% 6% 12% 16% / 34% 8% 17% 22%; }
  .hero .hero-mask img { object-position: 53% 43%; }
  .hero .hero-caption { bottom: 16px; left: 18px; padding: 10px 12px; font-size: 10px; }
  .hero .hero-sage { inset: 10px -3px -8px 14px; }
  .hero .hero-leaf { top: 5px; width: 56px; height: 25px; }
  #audiences { padding-top: 28px; padding-bottom: 36px; }
  #audiences .audience-heading h2 { font-size: 36px; }
  #audiences .audience-choices { margin-top: 22px; }
  #audiences .audience-choice-copy > span { font-size: 12px; }
  #audiences .audience-all { font-size: 12px; }
}

@media (max-width: 360px) {
  #audiences .audience-heading h2 { font-size: 32px; }
  #audiences .audience-choice-copy > span { font-size: 12px; }
}