/* Example page shell; report cards retain their shared .pr-* styles. */
.example-page { padding-top: 64px; padding-bottom: 64px; }
.example-intro { max-width: 760px; padding-bottom: 40px; }
.example-intro h1 { font-size: clamp(44px, 6vw, 76px); margin: 22px 0; text-wrap: balance; }
.example-intro .em { font-style: italic; color: var(--accent-ink); }
.example-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.example-jumps a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.example-section { border-top: 1px solid var(--rule); padding: 40px 0; scroll-margin-top: 24px; }
.example-section > h2 { font-family: var(--display-font); font-size: clamp(30px, 4vw, 42px); line-height: 1.15; margin-bottom: 20px; text-wrap: balance; }
.example-prose > p, .example-description { max-width: 76ch; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.example-prose > p + p { margin-top: 16px; }
.example-prose > blockquote { max-width: 76ch; margin: 20px 0; padding: 24px; background: var(--accent-wash); border: 1px solid var(--rule); border-radius: 14px; line-height: 1.7; }
.example-prose > ol { max-width: 76ch; margin: 24px 0; padding-left: 24px; }
.example-prose > ol > li { padding-left: 4px; margin: 12px 0; line-height: 1.7; }
.example-next { padding-bottom: 0; }
.example-actions { margin-top: 28px; }
.example-page :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
@media (max-width: 720px) {
  .example-page { padding-top: 40px; padding-bottom: 48px; }
  .example-section { padding-top: 32px; padding-bottom: 32px; }
  .example-next { padding-bottom: 0; }
  .example-prose > blockquote { padding: 20px; }
  .example-page .pr-section { padding: 20px; }
}