/* shared site chrome: top bar, My system sub-nav, footer (2026-10-20 merge) */
.topbar{position:sticky;top:0;z-index:20;background:rgba(253,252,250,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #DCD9D3}
.topbar .wrap,.subnav .wrap,.site-foot .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:64px}
.topbar .wordmark{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.3rem;font-weight:500;color:#111;text-decoration:none;white-space:nowrap}
.topbar .pills{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;font-family:"Inter",system-ui,sans-serif;font-size:.92rem;font-weight:500}
.topbar .pills::-webkit-scrollbar{display:none}
.topbar .pills a{flex:none;color:#3F3F3D;text-decoration:none;padding:.42em .9em;border-radius:999px;border:1px solid transparent}
.topbar .pills a:hover{color:#B4532F;border-color:rgba(180,83,47,.35)}
.topbar .pills a.active{background:#B4532F;color:#fff}
.subnav{border-bottom:1px solid #E6E0D2;background:rgba(253,252,250,.7)}
.subnav .wrap{display:flex;gap:4px 18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;font:500 14px/1.4 "Inter",system-ui,sans-serif}
.subnav a{color:#3F3F3D;text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:#B4532F}
.subnav a[aria-current]{color:#111;border-bottom-color:#B4532F}
.site-foot{margin-top:56px;border-top:1px solid #DCD9D3;background:#FDFCFA;padding:28px 0 40px;font:400 14px/1.5 "Inter",system-ui,sans-serif;color:#6A6965}
.site-foot a{color:#3F3F3D}
.site-foot .sf-main{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot .sf-top{margin-left:auto}
.site-foot .sf-ci{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:14px;padding-top:12px;border-top:1px dashed #E6E0D2;font-size:13px}
.site-foot .sf-ci-l{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6A6965;margin-right:4px}
.site-foot .sf-note{margin:16px 0 0;font-size:12.5px}
@media (max-width:860px){.topbar-in{flex-direction:column;align-items:stretch;height:auto;gap:.2rem;padding-top:10px;padding-bottom:8px}.topbar .pills a{border-color:#DCD9D3;background:#fff}.site-foot .sf-top{margin-left:0}}
/* My system pages: no eyebrow labels */
.my-sys .kicker{display:none}
.my-sys .page-head .crumbs{display:none}
/* polish pass: align My system rows with page content, calm hovers, steady motion */
.my-sys .subnav .wrap,.my-sys .site-foot .wrap{max-width:var(--wrap,1080px);padding-left:20px;padding-right:20px}
.my-sys .page-head{padding:clamp(28px,4vw,48px) 0 20px;overflow:visible}
.my-sys .page-head .wrap{max-width:var(--wrap,1080px);margin:0 auto;padding-left:20px;padding-right:20px;box-sizing:border-box;overflow:visible}
.my-sys .page-head .lede{margin:0;overflow:visible}
.my-sys .glass,.my-sys .bot,.my-sys .linkcard{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.my-sys a.linkcard:hover,.my-sys .bot:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(60,30,10,.45);border-color:#DCD9D3}
.site-foot a,.subnav a,.topbar .pills a{transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.site-foot a:hover{color:#B4532F}
a:focus-visible,button:focus-visible{outline:2px solid #B4532F;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.my-sys a.linkcard:hover,.my-sys .bot:hover{transform:none}*{scroll-behavior:auto!important}}
/* mobile: keep every top-nav button on screen (wrap instead of side-scroll) */
@media (max-width:860px){
  .topbar .pills{flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;margin:0!important;padding:0 0 2px!important;gap:6px!important}
  .topbar .pills a{padding:.38em .8em!important;font-size:14px!important}
  .subnav .wrap{gap:4px 14px;font-size:13.5px}
}
/* My system sub-nav: Reinventing work group (Blueprint, Step by Step, Compass) sits apart from the personal-system links, with a draft tag */
.subnav-sep{margin-left:auto;align-self:stretch;width:1px;background:#DCD9D3;margin-right:6px}
.subnav-bp{display:inline-flex;align-items:center;gap:4px 18px;flex-wrap:wrap}
.subnav-bp .subnav-tag{margin-right:-6px}
.subnav-tag{font:500 11.5px/1 "Inter",system-ui,sans-serif;color:#8F5418;background:#FBF0C9;border:1px solid #F2D16B;border-radius:999px;padding:4px 9px;white-space:nowrap}
@media (max-width:640px){
  .subnav-sep{flex-basis:100%;width:auto;height:1px;margin:4px 0 2px;align-self:auto}
}
/* My system sub-nav stays anchored under the sticky top bar (solid background, thin bottom border) */
.my-sys .subnav{position:sticky;top:var(--tbh,65px);z-index:19;background:#FDFCFA;border-bottom:1px solid #E6E0D2}
html:has(body.my-sys){scroll-padding-top:calc(var(--tbh,65px) + var(--subh,44px) + var(--snh,0px) + 12px)}
@media (max-width:640px){
  .my-sys .subnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-top:8px;padding-bottom:8px;gap:14px}
  .my-sys .subnav .wrap::-webkit-scrollbar{display:none}
  .my-sys .subnav a,.my-sys .subnav-tag{flex:none}
  .my-sys .subnav-sep{flex:none;flex-basis:auto;width:1px;height:auto;align-self:stretch;margin:0 2px}
  .my-sys .subnav-bp{flex:none;flex-wrap:nowrap;gap:14px}
}
/* Mobile menu (<=720px, needs assets/menu.js): one slim row with the site name and a menu button; the pill row and My system sub-nav move into the panel */
.mm-btn,.mm-panel{display:none}
@media (max-width:720px){
  .has-mmenu .topbar{background:#FDFCFA;-webkit-backdrop-filter:none;backdrop-filter:none}
  .has-mmenu .topbar-in{flex-direction:row!important;align-items:center!important;justify-content:space-between;height:52px!important;padding-top:0!important;padding-bottom:0!important;gap:12px!important}
  .has-mmenu .topbar .pills,.has-mmenu .my-sys .subnav,.has-mmenu body.my-sys .subnav{display:none!important}
  .has-mmenu .mm-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 "Inter",system-ui,sans-serif;color:#1F1A17;background:#FFFFFF;border:1px solid #DCD9D3;border-radius:999px;padding:8px 14px 8px 12px;cursor:pointer}
  .has-mmenu .mm-btn[aria-expanded="true"]{background:#B4532F;border-color:#B4532F;color:#FFFFFF}
  .mm-bars{display:inline-grid;gap:3px;width:16px}.mm-bars i{display:block;height:2px;border-radius:2px;background:currentColor}
  .has-mmenu .mm-panel:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;background:#FDFCFA;border-bottom:1px solid #DCD9D3;box-shadow:0 18px 30px -24px rgba(40,25,10,.5);max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px);overflow-y:auto;padding:8px 20px 18px;font:500 16px/1.3 "Inter",system-ui,sans-serif}
  .mm-panel ul{list-style:none;margin:0;padding:0}
  .mm-panel li a{display:block;padding:11px 12px;margin:2px 0;border-radius:10px;color:#1F1A17;text-decoration:none}
  .mm-panel li a:hover{background:#F4ECDB}
  .mm-panel li a[aria-current]{background:#FBF0C9;color:#111;font-weight:600;box-shadow:inset 3px 0 0 #B4532F}
  .mm-sub{margin-top:10px;border-top:1px solid #E6E0D2;padding-top:10px}
  .mm-h{margin:4px 12px 4px;font:600 13px/1.2 "Inter",system-ui,sans-serif;color:#6A6965}
  .mm-sep{height:1px;background:#E6E0D2;margin:10px 0 12px}
  .mm-panel .subnav-tag{display:inline-block;margin:0 0 4px 12px}
}
/* My System sub-nav item: plain text like Team / Dashboard (no pill) */
.subnav-my{color:inherit;background:transparent;border:0;border-radius:0;padding:0;margin:0;align-self:auto}

/* login-link */
.topbar .pills a.login-link{background:transparent;color:#2A1D1B;border:0;padding:.42em .2em;border-radius:0;font-weight:500}
.topbar .pills a.login-link:hover{color:#B4532F;border-color:transparent;background:transparent}
.topbar .pills a.login-link.active{background:transparent;color:#2A1D1B}


/* My System nav item: plain link — beat .subnav-tag pill styles */
.subnav a.subnav-tag.subnav-my,
.subnav a.subnav-my{
  font:500 14px/1.4 "Inter",system-ui,sans-serif;
  color:#3F3F3D;
  background:transparent!important;
  border:0!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important;
  padding:2px 0!important;
  margin:0!important;
  letter-spacing:normal;
  text-decoration:none;
  white-space:nowrap;
  align-self:auto;
  box-shadow:none!important;
}
.subnav a.subnav-tag.subnav-my:hover,
.subnav a.subnav-my:hover{color:#B4532F;background:transparent!important}
.subnav a.subnav-tag.subnav-my[aria-current],
.subnav a.subnav-my[aria-current]{
  color:#111;
  border-bottom-color:#B4532F!important;
  background:transparent!important;
  font-weight:500;
}