.team-roles.surface { padding:22px; margin-bottom:18px; overflow:hidden; }
.roles-heading { margin-bottom:16px; }
.roles-heading h2 { margin:0; }
.roles-heading>p { max-width:640px; margin:5px 0 0; color:var(--muted); font-size:17px; line-height:1.5; }
.role-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.homepage .role-tab { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:48px; padding:8px 12px; white-space:nowrap; border:1px solid #edf1fa; border-radius:12px; background:#fff; color:var(--ink); font-size:15px; font-weight:700; cursor:pointer; transition:background .2s,border-color .2s; }
.role-tab-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#eaf3ff; color:var(--primary); }
.role-tab-icon svg { width:18px; height:18px; }
.role-tab:nth-child(even) .role-tab-icon { background:#f4edff; color:#823eff; }
.homepage .role-tab:hover { background:#f7faff; }
.homepage .role-tab.is-active { border-color:#cfe2ff; color:var(--primary); background:#f2f8ff; box-shadow:none; }
.role-panel { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:30px; padding:18px 20px; border:1px solid #edf1fa; border-radius:12px; background:#fff; }
.role-panel[hidden] { display:none; }
.role-pain-label, .role-solution-label { display:block; font-size:12px; font-weight:700; }
.role-pain-label { color:var(--muted); }
.role-pain { margin:4px 0 14px; color:var(--muted); font-size:15px; line-height:1.5; }
.role-solution-label { margin:0 0 4px; color:var(--primary); }
.role-copy h3 { color:var(--ink); margin:0 0 8px; font-size:24px; line-height:1.2; letter-spacing:-.5px; }
.role-result { margin:0; color:var(--muted); font-size:15px; font-weight:600; line-height:1.5; }
.role-benefits { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.role-benefits li { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:15px; line-height:1.5; }
.role-benefits li>span { display:grid; place-content:center; flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:#0c79ff; color:#fff; font-size:11px; font-weight:800; }
.roles-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:16px; }
.roles-bottom p { margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.roles-bottom strong { color:var(--ink); }
.roles-bottom .btn { min-height:43px; padding:0 20px; }
@media(max-width:1100px) { .role-tabs { display:flex; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:#b7c9f0 transparent; } .homepage .role-tab { flex:0 0 auto; min-width:150px; padding:8px; gap:7px; font-size:14px; } .team-roles.surface { padding:20px; } .role-panel { padding:18px; gap:20px; } .role-copy h3 { font-size:22px; } .role-benefits li { font-size:14px; } }
@media(max-width:800px) { .roles-heading>p { font-size:15px; } .role-tabs { gap:8px; padding:0 2px 10px; scroll-snap-type:x proximity; } .homepage .role-tab { min-width:143px; scroll-snap-align:start; } .role-panel { grid-template-columns:1fr; gap:16px; } }
@media(max-width:480px) { .team-roles.surface { padding:18px 16px; } .roles-heading>p { font-size:14px; } .role-panel { padding:16px 14px; } .role-copy h3 { font-size:21px; } .role-pain { font-size:14px; } .roles-bottom .btn { width:100%; padding:0 12px; font-size:13px; } }