:root { --navy:#011131; --blue:#0a63d1; --green:#86ea63; --lavender:#aac2fe; --text:#344054; --border:#dfe1e2; --light:#f3f5f6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--navy); background:#fff; line-height:1.65; }
a { color:var(--blue); text-underline-offset:4px; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:4px; }
.wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:24px; z-index:10; padding:12px; background:white; }
.skip:focus { top:12px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:104px; }
.brand { display:flex; align-items:center; gap:20px; text-decoration:none; color:var(--navy); }
.brand img { filter:brightness(0); }
.brand span { border-left:1px solid var(--border); padding-left:20px; font-size:14px; }
.languages { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; }
.languages [aria-current] { color:var(--navy); font-weight:700; }
.hero { padding:48px 0 52px; background:var(--navy); color:white; }
.hero .back { color:var(--lavender); font-size:14px; }
h1,h2,h3 { font-family:Montserrat,Inter,system-ui,sans-serif; line-height:1.25; letter-spacing:-.025em; }
h1 { max-width:800px; margin:22px 0; font-size:clamp(30px,4.5vw,54px); font-weight:600; }
.hero p { max-width:760px; color:#d7e3fc; font-size:18px; margin-bottom:28px; }
.button { display:inline-flex; padding:12px 20px; background:var(--green); color:var(--navy); border-radius:8px; font-weight:600; text-decoration:none; }
.hero a:focus-visible { outline-color:var(--lavender); }
.layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; padding-block:52px; }
.guide-sidebar { align-self:start; position:sticky; top:24px; }
.guide-nav { display:flex; flex-direction:column; gap:4px; }
.mobile-nav { display:none; }
.mobile-nav summary { padding:12px 16px; background:#e7f0fc; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; }
.mobile-nav summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.guide-nav a { padding:10px 12px; font-size:14px; border-radius:8px; text-decoration:none; }
.guide-nav [aria-current] { background:#e7f0fc; color:var(--navy); font-weight:600; }
article section { margin-bottom:36px; }
h2 { font-size:24px; margin:0 0 14px; font-weight:600; }
article p { margin:0; color:var(--text); font-size:16px; }
.sources { padding:22px; border:1px solid var(--border); border-radius:12px; background:#f7f9fb; }
.sources h2 { font-size:18px; }
.sources ul { padding-left:20px; margin:0; }
.reviewed,.role-note { font-size:14px; color:var(--text); }
.openings { padding-bottom:52px; border-top:1px solid var(--border); padding-top:32px; }
.role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; gap:16px; margin:24px 0; }
.role-grid li { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.role-grid li>a { display:block; padding:22px; color:var(--navy); text-decoration:none; height:100%; }
.role-grid li>a:hover { background:#f7f9fb; }
.role-grid li>a:focus-visible { outline-offset:-4px; }
.role-grid h3 { font-size:17px; margin:0 0 12px; }
.role-grid p { font-size:14px; color:var(--text); margin:0 0 14px; }
.mode { background:var(--light); border-radius:5px; padding:4px 8px; font-size:12px; }
.role-grid .empty { grid-column:1/-1; padding:24px; }
.empty a { display:inline; padding:0; }
footer { display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--border); padding-block:28px; font-size:13px; }
@media(max-width:800px) { .layout { grid-template-columns:1fr; gap:28px; padding-block:32px; } .guide-sidebar { position:static; } .desktop-nav { display:none; } .mobile-nav { display:block; } .mobile-nav .guide-nav { margin-top:12px; } .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .wrap { width:calc(100% - 32px); } .site-header { align-items:flex-start; flex-direction:column; gap:14px; padding-block:22px; } .brand img { width:125px; height:auto; } .brand span { font-size:12px; } .hero { padding-block:32px; } .hero p { font-size:16px; } .role-grid { grid-template-columns:1fr; } h2 { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }