.panel-section{background:#f4f8f7}.role-tabs{display:flex;gap:8px;border-bottom:1px solid #cbdcd6;padding-bottom:14px;margin-bottom:35px}.role-tabs button{padding:12px 20px;border:1px solid transparent;border-radius:7px;color:var(--ink);font-size:15px;font-weight:700;background:transparent;cursor:pointer}.role-tabs button[aria-selected=true]{background:var(--ink);color:white}.role-tabs button:hover:not([aria-selected=true]){background:#e2eeea}.role-panel{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.role-panel[hidden]{display:none}.role-copy h3{font-size:31px;letter-spacing:-1px;margin:20px 0}.role-copy p{color:var(--muted)}.role-copy ul{padding-left:21px;font-size:15px;line-height:2}.role-copy li::marker{color:var(--green)}.role-example{background:white;border:1px solid #d5e4dd;border-radius:12px;padding:30px}.example-label{font-size:12px;color:var(--green);letter-spacing:1px;font-weight:800}.example-row{display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:17px 0;font-size:14px}.example-row span{color:var(--muted);text-align:right}.message-preview{background:#eaf5ef;border-radius:8px;padding:20px;margin-top:22px}.message-preview small{font-size:13px;font-weight:700;color:var(--green)}.message-preview p{font-size:14px;margin:10px 0 0}.employee-flow{list-style:none;counter-reset:flow;padding:0}.employee-flow li{counter-increment:flow;position:relative;padding:20px 0 20px 43px;border-bottom:1px solid var(--line)}.employee-flow li:before{content:counter(flow);position:absolute;left:0;top:23px;width:28px;height:28px;border-radius:50%;background:#eaf5ef;color:var(--green);display:grid;place-items:center;font-size:13px;font-weight:800}.employee-flow b,.employee-flow span{display:block;font-size:15px}.employee-flow span{color:var(--muted);font-size:14px}.example-note{font-size:13px;color:var(--muted);margin-bottom:0}@media(max-width:760px){.role-panel{grid-template-columns:1fr;gap:25px}.role-tabs{gap:4px}.role-tabs button{font-size:14px;padding:10px 12px;flex:1}.role-copy h3{font-size:28px}.role-example{padding:22px}.example-row{gap:12px;flex-wrap:wrap}.example-row span{text-align:left}.role-copy ul{font-size:14px}}
