.hero-explanation { max-width: 760px; margin: 28px 0 0; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; }
.hero-lead { margin-top: 16px; font-size: 16px; line-height: 1.5; }
.role-selector { padding: 34px clamp(18px, 6vw, 90px); background: var(--paper); color: var(--ink); }
.role-selector h2 { margin: 0 0 20px; font: 28px Georgia, serif; }
.role-selector-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.role-selector-grid a { display: flex; align-items: center; gap: 10px; padding: 16px 12px; border: 1px solid var(--line); background: var(--white); }
.role-selector-grid a > span:first-child { color: var(--gold); font-size: 20px; }
.role-selector-grid a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.role-detail { scroll-margin-top: 28px; }
.role-detail.role-selected { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width:580px) { .role-selector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.credential-example { padding: 48px clamp(18px,6vw,90px); background: var(--paper); color: var(--ink); }
.credential-example h2 { font: clamp(28px,3vw,42px) Georgia,serif; margin: 12px 0 24px; }
.example-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.example-steps li { border-top: 1px solid var(--gold); padding-top: 16px; }
.example-steps li > span { color: var(--gold); font-size: 24px; }
.example-steps p { line-height: 1.6; }
@media(max-width:900px) { .example-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .example-steps { grid-template-columns: minmax(0,1fr); } }

.purpose-section { display: block; }
.comparison-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 32px; }
.comparison-grid ul { padding-inline-start: 22px; line-height: 1.8; }
@media(max-width:580px) { .comparison-grid { grid-template-columns: minmax(0,1fr); } }

.terms-box { margin: 0; padding: 26px clamp(18px,6vw,90px); color: var(--ink); background: var(--paper); border-block: 1px solid var(--line); }
summary { cursor: pointer; }
.terms-box summary { font: 22px Georgia,serif; }
.terms-box dl > div { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; margin-top: 16px; }
.terms-box dt { font-weight: bold; }
.terms-box dd { margin: 0; line-height: 1.6; }
@media(max-width:580px) { .terms-box dl > div { grid-template-columns: minmax(0,1fr); gap: 6px; } }

.role-intro { min-height: 0; }
.role-expanded { margin-top: 20px; }
.role-expanded summary { color: var(--gold-light); line-height: 1.5; }
.role-expanded .role-intro { margin-top: 20px; }
.more-context { margin-top: 28px; }
.more-context > summary { font: 22px Georgia,serif; }

main, section, article, nav, dl, .role-orbit, .role-detail-grid, .resource-grid { min-width: 0; }
.role-selector-grid a, .role-detail, .role-detail dd, .orbit-card > div, .resource-grid strong { min-width: 0; overflow-wrap: anywhere; }
.role-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:900px) { .role-detail-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:580px) {
 .hero h1 { overflow-wrap: anywhere; }
 .hero h1 .trust-highlight { white-space: normal; }
 .hero-copy, .hero-statement { min-width: 0; max-width: 100%; }
 .role-orbit { grid-template-columns: minmax(0,1fr); padding-inline: 0; }
 .resource-grid { grid-template-columns: minmax(0,1fr); }
 .resource-grid a { grid-template-columns: 64px minmax(0,1fr); padding: 18px 14px; gap: 12px; }
 .role-detail dl > div { grid-template-columns: minmax(0,1fr); }
 .language-menu > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .language-menu > div a { min-width: 0; }
 .language-menu > div a span { min-width: 0; }
 .hero-actions { flex-wrap: wrap; }
 .button { max-width: 100%; white-space: normal; text-align: center; }
 .closing-section { padding-inline: 18px; }
 .closing-section h2 { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }


@media(max-width:580px) { .section-heading h2, .section-heading h2 em { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } }