.example-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fafafa; color: #525252; padding: .875rem var(--av-page-gutter); font-size: .875rem; }
.example-banner a { text-underline-offset: .2em; color: var(--av-blue); }
.example-intro { padding-block: 2rem 1.5rem; }
.example-intro > .av-container > .av-header { margin-bottom: 1.5rem; }
.example-intro > .av-container > .av-header .av-header-main { background: #fafafa; }
.example-hero { min-height: 40rem; }
.example-hero .av-display { font-size: clamp(2.75rem,6vw,6rem); }
.example-approach { border-top: 1px solid var(--av-border); }
.example-note { font-size: .875rem; color: var(--av-muted); margin-top: 1.5rem; max-width: 48rem; scroll-margin-top: 2rem; }
.example-footer { margin-top: 1.5rem; }
@media (max-width: 48rem) {
  .example-banner { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .example-intro { padding-top: 1rem; }
  .example-hero { min-height: 46rem; }
}