/* system.css — shared component layer (2026-10-12). Loaded LAST on every page (home, about, ai, role pages, casebook)
   so the header, page width, headings, eyebrows and buttons match everywhere. Values come from tokens.css. */
:root{--hdr-h:60px;--nav-fs:.72rem;--nav-ls:.08em;--h1-fs:clamp(2.2rem,3.6vw,3.2rem);--h2-fs:clamp(1.55rem,2.3vw,2rem);--eyebrow-fs:.74rem}

/* 1. Page width: one content column (1120px) on every page */
.wrap{max-width:calc(var(--page-max) + 2 * var(--gutter))!important;padding-inline:var(--gutter)!important;margin-inline:auto}

/* 2. Header: same height, logo, nav type, CTA and theme toggle */
body:has(> header.top .nm){padding-inline:0!important}
header.top{margin-inline:0!important;padding-inline:0!important}
.topbar .topnav{flex:0 1 auto!important}
.topbar .theme{margin-left:auto!important}
header.top,.topbar{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex!important;align-items:center;gap:22px!important;min-height:var(--hdr-h);height:auto!important;padding-block:0!important}
.top{padding-block:0!important}
.topbar{min-height:var(--hdr-h);padding-block:0!important;padding-inline:max(var(--gutter),calc((100vw - var(--page-max)) / 2))!important;gap:10px 22px!important}
header.top b,header.top .nm,.topbar .brand{font:600 1.15rem/1 var(--font-display)!important;color:var(--ink)!important;text-decoration:none;white-space:nowrap;margin-right:6px}
header.top nav,.topbar .topnav{display:flex;align-items:center;gap:6px 20px!important;margin:0!important}
header.top nav a,.topbar .topnav a{font:500 var(--nav-fs)/1 var(--font-data)!important;letter-spacing:var(--nav-ls)!important;text-transform:uppercase;color:var(--muted)!important;text-decoration:none;white-space:nowrap;padding-block:6px}
header.top nav a:hover,.topbar .topnav a:hover,.topbar .topnav a.on,.topbar .topnav a[aria-current]{color:var(--accent)!important}
header.top .hright,header.top .tright{display:flex;align-items:center;gap:10px;margin-left:auto}
header.top > .wrap > .pill{margin-left:auto}
.pill{font:500 var(--nav-fs)/1 var(--font-data)!important;letter-spacing:.06em!important;text-transform:uppercase;padding:10px 15px!important;border-radius:var(--r-pill)!important;background:var(--accent);color:var(--on-accent)!important;text-decoration:none;white-space:nowrap}
.pill.ghost{background:transparent!important;color:var(--accent)!important;border:1px solid var(--accent)}
.theme{width:34px!important;height:34px!important;border-radius:50%!important;border:1px solid var(--rule)!important;background:var(--surface)!important;color:var(--ink)!important;display:grid!important;place-items:center;cursor:pointer;flex:none}
@media (max-width:1180px){header.top nav,.topbar .topnav{gap:6px 14px!important}:root{--nav-fs:.68rem;--nav-ls:.06em}}

/* 3. Headings: one hero size and one section size */
.hhead h1,.hero h1,main > section:first-child h1{font-family:var(--font-display)!important;font-size:var(--h1-fs)!important;font-weight:600!important;line-height:1.05!important;letter-spacing:-.015em!important;text-wrap:balance}
.sec > h2,.shelf > h2,section.shelf h2:first-of-type,main > section > h2,.wrap > section > h2{font-family:var(--font-display);font-size:var(--h2-fs)!important;font-weight:560!important;line-height:1.15!important;letter-spacing:-.01em}

/* 4. Eyebrows (small labels above headings) */
.kicker,.kick,.lbl,.sec > .lbl,.shelf > .lbl{font:500 var(--eyebrow-fs)/1.3 var(--font-data)!important;letter-spacing:var(--nav-ls)!important;text-transform:uppercase;color:var(--accent)!important}

/* 5. Buttons: pill, Figtree, two styles */
.hcta .btn,.btns .btn,.cta .btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px!important;border-radius:var(--r-pill)!important;font:500 .95rem/1.2 var(--font-body)!important;text-decoration:none;border:1px solid var(--ink)!important;color:var(--ink)!important;background:transparent!important;box-shadow:none!important}
.hcta .btn.pri,.btn.primary,.btn.pri{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
.hcta .btn:hover,a.btn:hover{transform:translateY(-1px)}
.close .btn.ghost{border-color:#F2F3F6!important;color:#F2F3F6!important}
.close .btn.primary{background:#F2F3F6!important;color:#0B1220!important;border-color:#F2F3F6!important}

/* 6. Body copy under headlines */
.hsub,.dek,.hero .dek{font:400 var(--fs-dek)/var(--lh-dek) var(--font-body)!important;color:var(--ink-2)}

@media (max-width:720px){header.top .wrap{flex-wrap:wrap;padding-block:10px!important}header.top nav{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}header.top .hright,header.top > .wrap > .pill{margin-left:auto}.top nav{display:flex!important}}

/* 7. Hero proof rows on phones: stack the name above its line (fixes "Adaptive Audience" overlapping its text under 600px) */
@media (max-width:600px){.hproof a{display:block!important}.hproof b{min-width:0!important;white-space:normal!important;margin-bottom:4px}}