/* index: role portal. Spacing scale 8/12/16/24/32. */
.hero-lede{max-width:720px;margin:12px 0 0;}
.shell .snapshot{margin:24px 0 0;}
@media(min-width:900px){.shell .snapshot{grid-template-columns:repeat(3,minmax(0,1fr));}}
.roles-h{margin:32px 0 0;font-size:18px;}
.roles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:16px 0 0;}
/* 8 roles: 2 x 4 on tablet, 4 x 2 on desktop, so no row is left half empty. */
@media(min-width:700px){.roles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1100px){.roles{grid-template-columns:repeat(4,minmax(0,1fr));}}
.role{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:20px;}
.role:hover{text-decoration:none;}
.role .ic{font-size:24px;line-height:1;height:28px;display:flex;align-items:center;}
.role .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:bold;margin-top:12px;}
.role h3{font-size:17px;margin:8px 0;color:var(--ink);line-height:1.3;}
.role p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 12px;flex:1 0 auto;}
.role .rsteps{font-size:12px;color:var(--muted);line-height:1.5;}
.role .go{display:block;margin-top:12px;font-size:13px;color:var(--accent2);font-weight:bold;}