.audience-page {
  --audience-paper: var(--color-background);
  --audience-ink: var(--color-text);
  --audience-soft: var(--color-surface-soft);
  --audience-line: var(--color-border);
  --audience-muted: var(--text-secondary);
  background:var(--audience-paper);
  color:var(--audience-ink);
}
.audience-shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.audience-shell h1, .audience-shell h2, .audience-shell h3, .audience-shell p { margin: 0; }
.audience-shell h1, .audience-shell h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
.audience-shell h1 { max-width: 1030px; font-size: clamp(3.2rem, 6.7vw, 6.4rem); line-height: 1.02; }
.audience-shell h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.1; }
.audience-shell h3 { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.4; font-weight: 600; }
.audience-shell p { line-height: 1.75; }
.audience-hero { padding: 88px 0 64px; }
.audience-shell .audience-eyebrow { margin-bottom: 24px; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.audience-hero__bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; margin-top: 36px; align-items: end; }
.audience-intro { max-width: 660px; color: var(--audience-muted); font-size: 1.1rem; }
.audience-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 20px; }
.audience-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 100%; padding: 16px 22px; background: var(--button-background); border: 1px solid var(--button-background); color: var(--button-text); font-weight: 600; text-decoration: none; line-height: 1.4; border-radius: 4px; }
.audience-button:hover { background: var(--button-background-hover); color: var(--button-text); }
.audience-button span { flex: 0 0 auto; }
.audience-text-link { color: var(--audience-ink); font-size: .92rem; line-height: 1.5; text-underline-offset: 5px; }
.audience-shell a:focus-visible, .audience-shell summary:focus-visible { outline: 3px solid var(--audience-ink); outline-offset: 5px; }
.audience-map { margin: 0; padding: 40px; background: var(--audience-soft); border: 1px solid var(--audience-line); }
.audience-map figcaption { max-width: 650px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.2; }
.audience-map__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; list-style: none; padding: 0; margin: 36px 0 28px; }
.audience-map__node { display: flex; position: relative; flex-direction: column; gap: 10px; padding: 24px; background: var(--audience-paper); border: 1px solid var(--audience-line); }
.audience-map__node + .audience-map__node::before { content: '↔'; position: absolute; left: -57px; width: 56px; text-align: center; line-height: 1; top: 50%; color: var(--audience-ink); font-size: 1.8rem; transform: translateY(-50%); }
.audience-map__node--router { background: var(--assetrouter-night); color: var(--assetrouter-cloud); border-color: var(--assetrouter-night); }
.audience-map__symbol { display: grid; place-items: center; align-self: center; width: 48px; height: 48px; font-size: 2rem; line-height: 1; margin-bottom: 12px; }
.audience-map__node--router .audience-map__symbol { color: var(--assetrouter-orange); }
.audience-map__node strong { font-size: 1.02rem; }
.audience-map__node > span:last-child { font-size: .86rem; line-height: 1.5; }
.audience-map__direct { max-width: 800px; padding-top: 20px; border-top: 1px solid var(--audience-line); font-size: .9rem; }
.audience-map__direct > span { padding-right: 8px; }
.audience-steps { padding: 96px 0 64px; }
.audience-steps h2 { max-width: 650px; margin-bottom: 40px; }
.audience-steps ol { list-style: none; margin: 0; padding: 0; }
.audience-steps li { display: grid; grid-template-columns: 60px 1fr 1.3fr; gap: 30px; padding: 32px 0; border-top: 1px solid var(--audience-line); }
.audience-step-number { color: var(--audience-muted); font-size: .85rem; }
.audience-steps li p, .audience-scope p, .audience-faq p { color: var(--audience-muted); font-size: .98rem; }
.audience-note { display: grid; grid-template-columns: 1fr 1.3fr; gap: 52px; padding: 36px; border-left: 4px solid var(--accent); background: var(--audience-soft); }
.audience-note h2 { font-size: clamp(1.65rem, 2.5vw, 2.35rem); }
.audience-note p { font-size: .98rem; }
.audience-scope { padding: 88px 0; }
.audience-scope > h2 { max-width: 780px; margin-bottom: 36px; }
.audience-scope__items { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.audience-scope__items article { padding-top: 24px; border-top: 1px solid var(--audience-line); }
.audience-scope h3 { margin-bottom: 14px; }
.audience-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; padding-bottom: 88px; }
.audience-faq details { border-top: 1px solid var(--audience-line); padding: 20px 0; }
.audience-faq details:last-child { border-bottom: 1px solid var(--audience-line); }
.audience-faq summary { cursor: pointer; font-weight: 600; line-height: 1.5; padding-right: 12px; }
.audience-faq details p { margin: 16px 0 0; }
.audience-close { padding: 48px 0 88px; border-top: 1px solid var(--audience-line); display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 64px; }
.audience-close h2 { max-width: 650px; }
.audience-shell :where(section, aside, article, li, div, a, h1, h2, h3, p, strong, summary) { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .audience-shell { width: calc(100% - 40px); }
  .audience-hero { padding-top: 56px; }
  .audience-hero__bottom, .audience-note, .audience-faq, .audience-close { grid-template-columns: 1fr; gap: 28px; }
  .audience-map { padding: 28px; }
  .audience-map__nodes { gap: 32px; }
  .audience-map__node { padding: 16px; }
  .audience-map__node + .audience-map__node::before { left: -33px; width: 32px; font-size: 1.4rem; }
  .audience-steps li { grid-template-columns: 35px 1fr; gap: 16px; }
  .audience-steps li p { grid-column: 2; }
  .audience-scope__items { gap: 28px; }
}
@media (max-width: 540px) {
  .audience-shell h1 { font-size: 3rem; }
  .audience-hero { padding: 40px 0; }
  .audience-map { padding: 24px 20px; }
  .audience-map__nodes, .audience-scope__items { grid-template-columns: 1fr; }
  .audience-map__node { padding: 20px; }
  .audience-map__node + .audience-map__node::before { content: '↕'; left: 50%; top: -33px; width: 32px; height: 32px; display: grid; place-items: center; transform: translateX(-50%); }
  .audience-map__symbol { margin-bottom: 0; }
  .audience-steps, .audience-scope { padding: 56px 0; }
  .audience-note { padding: 24px; }
  .audience-faq { padding-bottom: 56px; }
  .audience-close { padding-bottom: 56px; }
}