/* Benefitra global site header - SINGLE SOURCE OF TRUTH.
   Every page links this one file. Edit here, not in a page.
   Part 1 is the harvested nav/mega-menu design; part 2 is the
   menu component that owns open/close state. */
/* ===== harvested from #inline ===== */
.nav-inner, .paths-grid, .trust-bar-inner, .why-inner, .tools-inner, .footer-inner, .footer-bottom {
        max-width: 100% !important;
        width: auto !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
@media (min-width: 1200px) {
.nav-inner, .paths-grid, .why-inner, .tools-inner, .footer-inner, .footer-bottom {
            max-width: 1200px !important;
            width: 100% !important;
            margin: 0 auto;
        }
}
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 24px}
.nav.scrolled{background:rgba(10,22,40,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.06);padding:12px 24px}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;position:relative;z-index:2}
.nav-logo-text{color:#F8F7F4;font-family:Montserrat,'DM Sans',sans-serif;font-weight:800;font-size:16px;letter-spacing:2px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,0.55);transition:color .25s}
.nav-links a:hover{color:#fff}
.nav-cta{padding:10px 24px;background:var(--ocean-600);border-radius:10px;font-weight:600;font-size:14px;color:#fff!important;transition:all .25s;position:relative;overflow:hidden}
.nav-cta:hover{background:var(--ocean-700);transform:translateY(-1px);box-shadow:0 8px 24px rgba(5,150,105,0.35)}
.nav-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity .25s}
.nav-cta:hover::after{opacity:1}
.nav-mobile{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:8px;z-index:2}
@media(max-width:768px){
.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(10,22,40,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:24px;gap:20px;border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-links.open{display:flex}
.nav-mobile{display:block}
}
@media print{
.nav{position:static;background:#fff!important}
}
a:focus-visible,.path-card:focus-visible,.nav-cta:focus-visible,.cta-btn-primary:focus-visible,.cta-btn-secondary:focus-visible{outline:2px solid var(--ocean-400);outline-offset:3px;border-radius:8px}
.nav-links{gap:24px}
.nav-link{font-size:14px;font-weight:500;color:rgba(255,255,255,0.65);transition:color .25s;cursor:pointer;padding:6px 0;position:relative;background:none;border:none;font-family:inherit}
.nav-link:hover{color:#fff}
.nav-link.has-dropdown::after{content:'';display:inline-block;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-left:6px;vertical-align:middle;transform:translateY(2px);transition:transform .2s}
.nav-link.has-dropdown:hover::after{transform:translateY(2px) rotate(180deg)}
.nav-item{position:relative}
.nav-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:1100}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel,.nav-item.open .nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-item:hover::before{content:'';position:absolute;top:100%;left:0;right:0;height:14px}
.nav-mega{width:480px;display:flex;flex-direction:column;gap:0}
.nav-mega-featured{display:block;position:relative;background:linear-gradient(135deg,rgba(5,150,105,.18) 0%,rgba(5,150,105,.06) 70%);border:1px solid rgba(52,211,153,.35);border-radius:12px;padding:18px;margin-bottom:14px;text-decoration:none;transition:all .2s;overflow:hidden}
.nav-mega-featured::after{content:'';position:absolute;top:-30%;right:-10%;width:55%;height:140%;background:radial-gradient(circle,rgba(52,211,153,.15),transparent 60%);pointer-events:none}
.nav-mega-featured:hover{border-color:rgba(52,211,153,.6);transform:translateY(-1px);box-shadow:0 8px 24px rgba(5,150,105,.18)}
.nav-mega-featured .featured-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ocean-300);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.nav-mega-featured .featured-eyebrow::before{content:'★';color:var(--ocean-300)}
.nav-mega-featured h4{font-family:'DM Sans','Inter',sans-serif;font-size:18px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.01em}
.nav-mega-featured p{font-size:12px;color:rgba(255,255,255,.7);margin-bottom:12px;line-height:1.5}
.nav-mega-featured .featured-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ocean-400)}
.nav-mega-featured .featured-cta::after{content:'→';transition:transform .2s}
.nav-mega-featured:hover .featured-cta::after{transform:translateX(3px)}
.nav-mega-secondary-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;padding-bottom:8px}
.nav-mega-col-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ocean-400);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.mega-item{display:flex;align-items:flex-start;gap:14px;padding:10px 12px;border-radius:10px;transition:background .15s;text-decoration:none}
.mega-item:hover{background:rgba(255,255,255,0.04)}
.mi-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:rgba(5,150,105,0.15);color:var(--ocean-400);display:flex;align-items:center;justify-content:center}
.mi-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mega-item h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.mega-item p{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
.nav-mega-right{display:flex;flex-direction:column;gap:10px;padding-left:22px;border-left:1px solid rgba(255,255,255,.06)}
.nav-mega-btn{display:block;padding:14px 18px;border-radius:10px;font-size:14px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.15);transition:all .2s;text-decoration:none}
.nav-mega-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.nav-mega-cta{margin-top:auto;background:rgba(5,150,105,0.10);border:1px solid rgba(5,150,105,0.3);border-radius:12px;padding:18px;text-align:left}
.nav-mega-cta h5{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:800;margin-bottom:6px;color:#fff}
.nav-mega-cta p{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:14px;line-height:1.5}
.nav-mega-cta a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ocean-400)}
.nav-dd{width:340px;display:flex;flex-direction:column;gap:4px}
.nav-dd .dd-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;transition:background .15s;text-decoration:none}
.nav-dd .dd-item:hover{background:rgba(255,255,255,0.04)}
.nav-dd h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.nav-dd p{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
@media(max-width:1279px){
.nav-mega{width:auto;grid-template-columns:1fr;max-width:90vw}
.nav-mega-right{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.06);padding-top:18px}
}
:root[data-theme="light"] .nav.scrolled{background:rgba(10,22,40,0.92)}

/* ===== harvested from #theme-toggle-css ===== */
:root[data-theme="light"] nav#mainNav{background:var(--bg-nav)!important;border-bottom-color:var(--border-subtle)!important}
:root[data-theme="light"] nav#mainNav.scrolled{background:var(--bg-nav-scrolled)!important}
:root[data-theme="light"] nav#mainNav .nav-link{color:rgba(10,22,40,0.7)}
:root[data-theme="light"] nav#mainNav .nav-link:hover{color:#0a1628}
:root[data-theme="light"] nav#mainNav .nav-logo-text{color:#0a1628}
:root[data-theme="light"] nav#mainNav .nav-mobile{color:rgba(10,22,40,0.85)}
@media (prefers-reduced-motion: no-preference){
:root.theme-ready body,:root.theme-ready nav#mainNav,:root.theme-ready footer.footer{transition:background-color .25s ease,color .25s ease}
:root.theme-ready .nav{transition:all .4s cubic-bezier(.4,0,.2,1)}
}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:transparent;border:1px solid var(--text-faint);
  color:var(--text-primary);cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s;
  padding:0;flex-shrink:0;position:relative;
}
.theme-toggle:hover{background:rgba(16,185,129,0.12);color:#10b981;border-color:rgba(16,185,129,0.55)}
.theme-toggle:active{transform:scale(.95)}
.theme-toggle:focus-visible{outline:2px solid var(--ocean-400,#34d399);outline-offset:2px}
.theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}
.nav-inner .theme-toggle{margin-left:8px}
@media(max-width:1279px){
.nav-inner .theme-toggle{order:2;margin-left:auto;margin-right:8px}
nav#mainNav .nav-mobile{order:3}
nav#mainNav .nav-logo{order:1}
nav#mainNav .nav-links{order:4}
}
.footer-bottom .theme-toggle{margin-right:auto}
nav#mainNav .nav-inner{min-height:70px;padding-top:6px;padding-bottom:6px}
.nav-logo svg,.nav-logo .nav-logo-text,
.footer-brand a > svg,.footer-brand a > span{display:none!important}
.nav-logo .brand-logo-img{display:block;width:192px;height:48px;object-fit:contain;flex-shrink:0}
.footer-brand .brand-logo-img{display:block;width:auto;height:38px;object-fit:contain;flex-shrink:0}
:root[data-theme="dark"] .nav-logo .brand-logo-img{content:url('/assets/brand/benefitra-logo-dark-nav@2x.png')}
:root[data-theme="dark"] .footer-brand .brand-logo-img{content:url('/assets/brand/benefitra-logo-dark-footer@2x.png')}
:root[data-theme="light"] .nav-logo .brand-logo-img{content:url('/assets/brand/benefitra-logo-light-nav@2x.png')}
:root[data-theme="light"] .footer-brand .brand-logo-img{content:url('/assets/brand/benefitra-logo-light-footer@2x.png')}

/* ===== harvested from #bf-dark-theme ===== */
:root[data-theme="dark"] nav#mainNav .nav-cta,:root[data-theme="dark"] .nav-cta{color:#ffffff !important}

/* ===== harvested from #lamorak-mobile-overflow-fix-2026-07-02 ===== */
@media (max-width: 900px) {
.container, .section-inner, .hero-inner, .nav-inner, .footer-inner,
  .calc-shell, .calculator-shell, .app-shell, .tool-shell, .form-shell,
  main, section, header, footer { max-width: 100% !important; min-width: 0 !important; }
.hero-cta-row, .cta-row, .hero-meta, .nav-inner, .nav-links,
  .tabs, .step-tabs, .topic-tabs, .filter-row, .button-row, .actions {
    max-width: 100% !important; flex-wrap: wrap !important;
  }
.brand-logo-img { max-width: calc(100vw - 96px) !important; height: auto !important; }
nav#mainNav, .nav { max-width: 100vw !important; overflow: hidden; }
nav#mainNav .nav-inner, .nav-inner { padding-left: 16px !important; padding-right: 16px !important; }
nav#mainNav .nav-links.open, .nav-links.open { width: 100% !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; }
}

/* ===== harvested from #lamorak-mobile-clipping-fix-2026-07-02-b ===== */
@media (max-width: 900px) {
main, section, .hero, .section, header:not(.nav):not(#mainNav) {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
.nav-logo, .nav-logo a, nav#mainNav .nav-logo, .nav-inner .nav-logo { min-width: 0 !important; flex-shrink: 1 !important; }
.nav-logo img, .brand-logo-img { max-width: min(180px, calc(100vw - 112px)) !important; height: auto !important; object-fit: contain !important; }
.btn, .btn-primary, .btn-ghost, .nav-cta, .hero-cta-row a, .hero-cta-row button,
  .cta-row a, .cta-row button { white-space: normal !important; text-align: center !important; }
}

/* ===== harvested from #bf-light-theme-v2 ===== */
:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel.nav-mega,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel.nav-mega.nav-mega-1col,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel.nav-mega.nav-mega-2col,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel.nav-mega.nav-mega-3col{background:linear-gradient(180deg,#ffffff,#f7faf9) !important;border:1px solid rgba(10,22,40,0.10) !important;color:#0a1628 !important;box-shadow:0 24px 60px rgba(10,22,40,0.12) !important}
:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel h4,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel a,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel span,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel .nav-link,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel .mega-item h4,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel .nav-mega-featured h4{color:#0a1628 !important}
:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel p,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel .mega-item p,:root[data-theme="light"]:has(.hero-people-bg) nav#mainNav .nav-panel .nav-mega-secondary-title{color:rgba(10,22,40,0.6) !important}

/* ===== harvested from #benefitra-header-footer-chrome-fix-2026-05-26 ===== */
.nav-logo .brand-logo-img,.bft-nav-logo .brand-logo-img{content:url('/assets/brand/benefitra-logo-dark-nav@2x.png') !important;opacity:.95!important}
.footer-brand .brand-logo-img{content:url('/assets/brand/benefitra-logo-dark-footer@2x.png') !important;opacity:.95!important}
:root[data-theme="light"] .nav-logo .brand-logo-img,:root[data-theme="light"] .bft-nav-logo .brand-logo-img{content:url('/assets/brand/benefitra-logo-light-nav@2x.png') !important;opacity:.95!important}
:root[data-theme="light"] .footer-brand .brand-logo-img{content:url('/assets/brand/benefitra-logo-dark-footer@2x.png') !important;opacity:.95!important}
nav#mainNav,.site-nav,.bft-nav,.main-nav,.nav-wrap{background:var(--bf-chrome-navy)!important;color:var(--bf-chrome-text)!important;border-color:var(--bf-chrome-border)!important}
.nav-panel,.nav-dd,.nav-mega,.nav-dropdown-menu,.nav-mega-menu,.bft-nav-dropdown{background:linear-gradient(180deg,var(--bf-chrome-navy) 0%,var(--bf-chrome-navy-2) 100%)!important;color:var(--bf-chrome-text)!important;border:1px solid var(--bf-chrome-border)!important;box-shadow:0 24px 80px rgba(2,6,23,.34)!important}
nav#mainNav .nav-panel.nav-mega,nav#mainNav .nav-panel.nav-mega.nav-mega-3col,nav#mainNav .nav-panel.nav-mega.nav-mega-2col,nav#mainNav .nav-panel.nav-mega.nav-mega-1col,nav#mainNav .nav-panel.nav-dd,.nav-dropdown .nav-mega-menu{background:linear-gradient(180deg,var(--bf-chrome-navy) 0%,var(--bf-chrome-navy-2) 100%)!important;color:var(--bf-chrome-text)!important;border:1px solid var(--bf-chrome-border)!important;box-shadow:0 24px 80px rgba(2,6,23,.34)!important}
nav#mainNav .nav-panel.nav-mega h4,nav#mainNav .nav-panel.nav-mega h5,nav#mainNav .nav-panel.nav-mega .mega-item h4,nav#mainNav .nav-panel.nav-mega .nav-mega-featured h4{color:var(--bf-chrome-text)!important}
nav#mainNav .nav-panel.nav-mega p,nav#mainNav .nav-panel.nav-mega .mega-item p,nav#mainNav .nav-panel.nav-mega .nav-mega-featured p{color:var(--bf-chrome-soft)!important}
.nav-panel *,.nav-dd *,.nav-mega *,.nav-dropdown-menu *,.nav-mega-menu *,.bft-nav-dropdown *{color:inherit}
.nav-panel h1,.nav-panel h2,.nav-panel h3,.nav-panel h4,.nav-panel h5,.nav-dd h1,.nav-dd h2,.nav-dd h3,.nav-dd h4,.nav-dd h5,.nav-mega h1,.nav-mega h2,.nav-mega h3,.nav-mega h4,.nav-mega h5,.nav-dropdown-menu h1,.nav-dropdown-menu h2,.nav-dropdown-menu h3,.nav-dropdown-menu h4,.nav-dropdown-menu h5,.nav-mega-menu h1,.nav-mega-menu h2,.nav-mega-menu h3,.nav-mega-menu h4,.nav-mega-menu h5,.bft-nav-dropdown h1,.bft-nav-dropdown h2,.bft-nav-dropdown h3,.bft-nav-dropdown h4,.bft-nav-dropdown h5{color:var(--bf-chrome-text)!important}
.nav-panel p,.nav-panel span,.nav-panel small,.nav-panel li,.nav-dd p,.nav-dd span,.nav-dd small,.nav-dd li,.nav-mega p,.nav-mega span,.nav-mega small,.nav-mega li,.nav-dropdown-menu p,.nav-dropdown-menu span,.nav-dropdown-menu small,.nav-dropdown-menu li,.nav-mega-menu p,.nav-mega-menu span,.nav-mega-menu small,.nav-mega-menu li,.bft-nav-dropdown p,.bft-nav-dropdown span,.bft-nav-dropdown small,.bft-nav-dropdown li{color:var(--bf-chrome-soft)!important}
.nav-mega-secondary-title,.nav-mega-col-title,.bft-nav-mega-col-title{color:#6ee7b7!important;border-color:rgba(110,231,183,.22)!important}
.mega-item,.nav-mega-item,.nav-dropdown-item,.bft-mega-item,.nav-mega-featured,.nav-mega-btn,.nav-mega-cta{background:transparent!important;border-color:rgba(255,255,255,.12)!important;text-decoration:none!important}
.mega-item:hover,.nav-mega-item:hover,.nav-dropdown-item:hover,.bft-mega-item:hover,.nav-mega-featured:hover,.nav-mega-btn:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(110,231,183,.38)!important}
.mi-icon,.nav-dropdown-icon,.mega-icon-preview{background:rgba(16,185,129,.14)!important;color:#6ee7b7!important;border-color:rgba(110,231,183,.28)!important}
.mi-icon svg,.nav-dropdown-icon svg,.mega-item svg,.nav-mega-item svg,.bft-mega-item svg{color:#6ee7b7!important;stroke:#6ee7b7!important}
.nav-mega-featured{background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,.06))!important}
.nav-mega-featured p,.nav-mega-cta p{color:var(--bf-chrome-soft)!important}
.nav-mega-featured .featured-eyebrow,.nav-mega-featured .featured-cta,.nav-mega-cta a{color:#6ee7b7!important}
.nav-item:hover>.nav-panel,.nav-item:focus-within>.nav-panel,.nav-dropdown:hover>.nav-dropdown-menu,.nav-dropdown:focus-within>.nav-dropdown-menu,.nav-dropdown:hover>.nav-mega-menu,.nav-dropdown:focus-within>.nav-mega-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.nav-item:has(.nav-mega-3col),.nav-item:has(.nav-mega-2col){position:static!important}
.nav-mega-3col{width:min(1080px,94vw)!important}
.nav-mega-2col{width:min(740px,92vw)!important}
.nav-mega-1col{width:min(440px,92vw)!important}
.nav-panel .btn-gold,.nav-panel .btn-primary,.nav-panel .nav-cta,.nav-mega-btn.btn-gold,.nav-mega-cta-link,.nav-dropdown-menu .btn-gold,.nav-mega-menu .btn-gold,.footer .btn-gold,.foot .btn-gold{color:#fff!important;background:var(--bf-emerald-deep)!important;border-color:var(--bf-emerald)!important}
.nav-panel .btn-gold:hover,.nav-panel .btn-primary:hover,.nav-panel .nav-cta:hover,.nav-mega-btn.btn-gold:hover,.nav-mega-cta-link:hover,.nav-dropdown-menu .btn-gold:hover,.nav-mega-menu .btn-gold:hover,.footer .btn-gold:hover,.foot .btn-gold:hover{color:#fff!important;background:#047857!important}
header,.site-header,.nav,nav.nav,nav#mainNav,.site-nav,.bft-nav,.main-nav,.nav-wrap{position:relative!important;z-index:2147483000!important}
.nav-panel,.nav-dd,.nav-mega,.nav-dropdown-menu,.nav-mega-menu,.bft-nav-dropdown{z-index:2147483001!important;isolation:isolate!important}
.nav-item,.nav-dropdown{z-index:2147483002!important}
.nav-item:hover>.nav-panel,.nav-item:focus-within>.nav-panel,.nav-dropdown:hover>.nav-dropdown-menu,.nav-dropdown:focus-within>.nav-dropdown-menu,.nav-dropdown:hover>.nav-mega-menu,.nav-dropdown:focus-within>.nav-mega-menu{z-index:2147483003!important}

/* =====================================================================
   PART 2 - THE MENU COMPONENT
   ---------------------------------------------------------------------
   Everything above this line is the harvested visual design of the nav.
   Everything below is the behaviour contract, and it is the ONLY place
   that decides whether a dropdown is showing.

   The problem this replaces: a panel was opened by BOTH a CSS :hover rule
   (carrying !important) and a JS-toggled .open class. Clicking an open
   menu removed .open, but the pointer was still inside the item, so the
   :hover rule held the panel open and the click looked like it did
   nothing. Nothing closed a panel on an outside click or on Escape.

   Now: site-header.js sets data-nav-js="1" on the nav. That switch
   disables the CSS :hover / :focus-within openers on desktop and hands
   the single source of truth to the .open class, which the component
   controls for hover-intent, click, Escape, outside click and focus.
   Without JS the attribute is never set, so the original hover menus
   still work and no one loses the navigation.
   ===================================================================== */

@media(min-width:1280px){
  /* 1. Take the opener away from :hover and :focus-within. */
  nav#mainNav[data-nav-js="1"] .nav-item:hover > .nav-panel,
  nav#mainNav[data-nav-js="1"] .nav-item:focus-within > .nav-panel,
  nav#mainNav[data-nav-js="1"] .nav-item:hover .nav-panel,
  nav#mainNav[data-nav-js="1"] .nav-item:focus-within .nav-panel{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(8px) !important;
  }
  nav#mainNav[data-nav-js="1"] .nav-panel.nav-anchor-left,
  nav#mainNav[data-nav-js="1"] .nav-item:hover > .nav-panel.nav-anchor-left,
  nav#mainNav[data-nav-js="1"] .nav-item:hover > .nav-panel.nav-anchor-right{
    transform:none !important;
  }

  /* 2. Give it to .open, which the component owns. Declared after rule 1
        at equal specificity, so an item that is both hovered and open
        resolves to open. */
  nav#mainNav[data-nav-js="1"] .nav-item.open > .nav-panel,
  nav#mainNav[data-nav-js="1"] .nav-item.open .nav-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
  }
  nav#mainNav[data-nav-js="1"] .nav-item.open > .nav-panel.nav-anchor-left,
  nav#mainNav[data-nav-js="1"] .nav-item.open > .nav-panel.nav-anchor-right{
    transform:none !important;
  }

  /* 3. The caret follows the same single source of truth. Its geometry is
        defined once in 4.1; here we only say which way it points. */
  nav#mainNav[data-nav-js="1"] .nav-item.open > .nav-link.has-dropdown::after{
    transform:translateY(1px) rotate(-135deg) !important;
    opacity:1 !important;
  }

  /* 4. Six top-level items have to sit on one row without crowding the
        logo or the consultation button. Spacing is set in 4.5. */
  nav#mainNav .nav-links > .nav-cta{white-space:nowrap}
}

/* A visible keyboard ring on the triggers, in both themes. */
nav#mainNav .nav-link.has-dropdown:focus-visible,
nav#mainNav .nav-mobile:focus-visible{
  outline:2px solid #34d399;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------------------------------------------------------------------
   Case studies. Sam asked for these to stop being buried: they get their
   own top-level tab, and they also appear inside Health Insurance.
   --------------------------------------------------------------------- */

nav#mainNav .nav-cases-title{margin-top:14px !important}
nav#mainNav .nav-cases-inline{display:block}

@media(min-width:1280px){
  nav#mainNav .nav-panel.nav-mega-2col .nav-mega-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 18px !important;
    min-width:640px;
  }
  nav#mainNav .nav-cases-inline{padding-top:2px}
}

/* REMOVED 2026-08-14: the Case Studies trigger used to carry a 6px emerald
   dot via ::before. It read as a stray artifact next to the label, not as an
   accent. Reported by Abid. Do not reintroduce decorative marks in the nav
   bar; the tab earns attention through position, not ornament. */
nav#mainNav .nav-links > .nav-item > .nav-link[href="/case-studies/"]::before{
  content:none !important;
}

/* On the mobile drawer the inline case-study block must indent with the
   rest of the panel content rather than hugging the box edge. */
@media(max-width:1279px){
  nav#mainNav .nav-links .nav-cases-inline{padding-left:0 !important;margin-left:0 !important}
  nav#mainNav .nav-links .nav-cases-title{padding-left:18px !important;padding-right:18px !important}
}

/* =====================================================================
   PART 3 - THE THEME AND LAYOUT CONTRACT              (added 2026-08-14)
   ---------------------------------------------------------------------
   Everything below closes faults Abid reported. Each block says what was
   wrong and why the fix belongs here rather than on a page.

   Read this before editing anything above: the harvested design in part 1
   is machine-extracted from the homepage's inline <style> blocks, so it
   contains homepage-only assumptions and several rules duplicated two or
   three times. Part 3 is hand-authored and authoritative. When part 1 and
   part 3 disagree, part 3 is the intended behaviour.
   ===================================================================== */

/* ---------------------------------------------------------------------
   3.1  SELF-SUFFICIENT SEMANTIC TOKENS
   Fault: the shared header consumed --bg-nav, --bg-nav-scrolled,
   --border-subtle, --text-primary, --text-faint and --navh, but those were
   declared only in the homepage's inline styles, and only under
   [data-theme="dark"] / [data-theme="light"], never on bare :root. Off the
   homepage every one of them resolved to nothing, so the nav background
   computed to transparent and colours fell back to whatever was inherited.
   A shared component may not depend on a page to define its own tokens, so
   it now declares its full semantic layer here. Values are copied exactly
   from the homepage so the homepage does not shift.
   --------------------------------------------------------------------- */
:root,
:root[data-theme="dark"]{
  --bg-nav:rgba(10,22,40,0.95);
  --bg-nav-scrolled:rgba(10,22,40,0.88);
  --border-subtle:rgba(255,255,255,0.08);
  --text-primary:#F8F7F4;
  --text-faint:rgba(255,255,255,0.4);
  --navh:72px;
}
:root[data-theme="light"]{
  --bg-nav:rgba(248,247,244,0.96);
  --bg-nav-scrolled:rgba(248,247,244,0.92);
  --border-subtle:rgba(10,22,40,0.1);
  --text-primary:#0a1628;
  --text-faint:rgba(10,22,40,0.45);
  --navh:72px;
}

/* ---------------------------------------------------------------------
   3.2  LIGHT MODE NAV LEGIBILITY  (Abid, screenshot 2)
   Fault: part 1 carries this, harvested from the homepage:

     :root[data-theme="light"]:not(:has(.hero-people-bg)) nav#mainNav .nav-link
       {color:rgba(255,255,255,.82) !important}

   The :not() is inverted. It paints nav text WHITE in LIGHT mode on every
   page that is not the homepage, which is why the logo and every label
   vanished on /employee-benefits/increase-business-valuation/ and on the
   case study pages. It was a homepage-only patch that consolidation then
   spread site-wide. build-global-header.py now drops that family of rules
   at harvest time; this block is the belt-and-braces guarantee, and it is
   written without :has() so it does not depend on selector support.
   --------------------------------------------------------------------- */
/* The deeper cause, found while verifying the above. The nav chrome is
   painted by a theme-blind rule that the homepage also carries:

     nav#mainNav,.site-nav,.bft-nav,.main-nav,.nav-wrap
       {background:var(--bf-chrome-navy)!important; ...}

   and --bf-chrome-navy is declared exactly once, on bare :root, as #0a1628.
   It has no light-mode value, so the bar is hardcoded dark in BOTH themes.
   Light mode only ever looked right on the homepage because the inverted
   :not(:has(.hero-people-bg)) rule happened to repaint it there.

   Rather than fight that rule with specificity, make its token honest.
   Custom properties inherit, so declaring the chrome tokens on the nav in
   light mode re-points every var() inside the header at light values while
   leaving the rest of the page completely untouched. This is the semantic
   layer doing the theme switch, which is what it is for. */
:root[data-theme="light"] nav#mainNav{
  --bf-chrome-navy:rgba(248,247,244,0.96);
  --bf-chrome-navy-2:#ffffff;
  --bf-chrome-text:#0a1628;
  --bf-chrome-soft:rgba(10,22,40,0.72);
  --bf-chrome-border:rgba(10,22,40,0.10);
  background:var(--bg-nav) !important;
  border-bottom:1px solid var(--border-subtle) !important;
}
:root[data-theme="light"] nav#mainNav .nav-links > .nav-item > .nav-link,
:root[data-theme="light"] nav#mainNav .nav-logo,
:root[data-theme="light"] nav#mainNav > .nav-inner > .nav-links > .nav-item > .nav-link{
  color:rgba(10,22,40,0.82) !important;
}
:root[data-theme="light"] nav#mainNav .nav-links > .nav-item > .nav-link:hover,
:root[data-theme="light"] nav#mainNav .nav-links > .nav-item.open > .nav-link{
  color:#0a1628 !important;
}
:root[data-theme="dark"] nav#mainNav .brand-logo-img{
  content:url("/assets/brand/benefitra-logo-dark-nav@2x.png") !important;
}
:root[data-theme="light"] nav#mainNav .brand-logo-img{
  content:url("/assets/brand/benefitra-logo-light-nav@2x.png") !important;
  opacity:1 !important;
  filter:none !important;
}
:root[data-theme="light"] nav#mainNav .nav-mobile,
:root[data-theme="light"] nav#mainNav .theme-toggle{color:#0a1628 !important}
:root nav#mainNav .nav-inner > .theme-toggle{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
:root[data-theme="light"] nav#mainNav .nav-inner > .theme-toggle{
  color:#0a1628 !important;
  border-color:rgba(10,22,40,0.32) !important;
  background:rgba(255,255,255,0.72) !important;
}
:root[data-theme="light"] nav#mainNav .theme-toggle .icon-sun{display:none !important}
:root[data-theme="light"] nav#mainNav .theme-toggle .icon-moon{display:block !important}
:root[data-theme="dark"] nav#mainNav .theme-toggle .icon-sun{display:block !important}
:root[data-theme="dark"] nav#mainNav .theme-toggle .icon-moon{display:none !important}
/* Both glyphs are hidden by default and revealed only by the two rules above,
   so a page whose <html> carries no data-theme showed an EMPTY bordered box in
   BOTH themes. That was the state of nearly every page: the before-paint theme
   script lived on the homepage and two others, not in the shared header, so
   1492 of 1495 pages never set the attribute. The builder now injects that
   script everywhere, and these rules are the belt and braces: with no
   attribute at all, the dark default shows its sun. The toggle can no longer
   render blank even if the script is stripped or fails. */
:root:not([data-theme]) .theme-toggle .icon-sun{display:block !important}
:root:not([data-theme]) .theme-toggle .icon-moon{display:none !important}
/* The shared header is in normal document flow. Hundreds of older pages kept
   body padding that had only compensated for their former fixed header,
   leaving a 68-100px empty strip above the new navigation. */
body:has(nav#mainNav[data-header-version="global-2026-08-14"]){
  padding-top:0 !important;
  margin:0 !important;
}
/* The same leftover, one level deeper. The 32 case study pages carry
   <main class="benefitra-page" style="...;padding-top:80px">, an inline
   compensation for the old fixed header. The shared header is in normal flow,
   so those 80px are pure empty space: Abid's screenshots show a tall blank
   band under the navigation containing nothing but the "All case studies"
   link, in both themes. The class appears on those 32 pages and nowhere else,
   and all 32 carry the identical inline style, so zeroing it here is exact.
   !important is required to beat an inline style. */
body:has(nav#mainNav[data-header-version="global-2026-08-14"]) main.benefitra-page{
  padding-top:0 !important;
}
/* The consultation button is a solid emerald pill in both themes, so its
   label stays white and must not be caught by the rules above. */
:root[data-theme="light"] nav#mainNav .nav-links > .nav-cta,
nav#mainNav .nav-links > .nav-cta{color:#fff !important}

/* ---------------------------------------------------------------------
   3.3  COLLAPSED SUBGROUPS MUST NOT OCCUPY SPACE  (Abid, screenshot 4)
   Fault: .nav-subgroup summary is restyled to display:flex, which breaks
   the native <details> disclosure, so the collapsed funding grid was still
   laid out. Measured on desktop light: the grid overflowed the bottom of
   its own panel by 150px and overlapped the "Case studies" heading by 25px
   and the case-study rows by 43px. On mobile that is the Funding
   arrangements row sliced in half by the case studies block. Workers' Comp
   collided the same way by 49px.
   --------------------------------------------------------------------- */
nav#mainNav .nav-subgroup:not([open]) > .nav-subgroup-grid{
  display:none !important;
}
nav#mainNav .nav-subgroup > summary{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  list-style:none;
}

/* Health Insurance is the primary decision menu. On desktop its seven
   funding paths must be visible immediately, not hidden behind a second
   disclosure inside an already-open menu. Give that panel enough width to
   show the choices cleanly in four columns and keep the proof links below. */
@media(min-width:1280px){
  nav#mainNav .nav-links > .nav-item:first-child > .nav-panel{
    width:min(1040px,calc(100vw - 40px)) !important;
    box-sizing:border-box !important;
  }
  /* Three columns, not four. Abid asked for larger type with no hanging
     single-word lines; at four columns a cell is ~200px, which is what broke
     "5-30 EE", "WC bundled" and "minutes" onto lines of their own. Three
     columns give each description the width to break in two even lines. */
  nav#mainNav .nav-links > .nav-item:first-child .nav-subgroup-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
  }
  nav#mainNav .nav-links > .nav-item:first-child .nav-cases-inline{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
  }
  nav#mainNav .nav-links > .nav-item:first-child .nav-subgroup > summary{
    cursor:default !important;
    pointer-events:none !important;
    margin-bottom:6px !important;
  }
  nav#mainNav .nav-links > .nav-item:first-child .mega-item{
    min-width:0 !important;
    padding:9px 10px !important;
  }
  /* Workers' Comp has two concrete groups. Present both at once on desktop
     instead of leaving visitors with two bare disclosure labels. */
  nav#mainNav .nav-links > .nav-item:nth-child(2) > .nav-panel{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 18px !important;
    width:min(880px,calc(100vw - 32px)) !important;
    box-sizing:border-box !important;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(2) .nav-mega-featured{
    grid-column:1 / -1;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(2) .nav-subgroup-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:2px !important;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(2) .nav-subgroup > summary{
    cursor:default !important;
    pointer-events:none !important;
    margin-bottom:4px !important;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(2) .mega-item{
    min-width:0 !important;
    padding:8px 10px !important;
  }
}

/* ---------------------------------------------------------------------
   3.4  NO SCROLLBARS INSIDE THE MENU  (Abid, screenshot 1)
   Fault: .nav-panel carried max-height + overflow-y:auto on desktop, and
   .nav-subgroup-grid carried max-height:min(52vh,520px) with overflow-y:auto.
   A mega menu must never scroll inside its own box. With 3.3 collapsing the
   closed subgroups, the panels fit without a cap.
   --------------------------------------------------------------------- */
nav#mainNav .nav-panel,
nav#mainNav .nav-subgroup-grid,
nav#mainNav .nav-mega-grid,
nav#mainNav .nav-cases-inline{
  max-height:none !important;
  overflow:visible !important;
}
/* The mobile drawer is the one legitimate scroll container: it is the whole
   menu on a phone, not a panel inside it. */
@media(max-width:1279px){
  nav#mainNav .nav-links{max-height:calc(100vh - var(--navh)) !important;overflow-y:auto !important}
}

/* ---------------------------------------------------------------------
   3.5  THE FEATURED CARD MUST CONTAIN ITS OWN BUTTON  (Abid, screenshot 1)
   Fault: .nav-mega-featured had min-height:128px with overflow:hidden and a
   90px right padding reserved for a decorative preview. The "Browse every
   case study" button escaped the bottom edge and landed on the "Health plan
   wins" heading. The card is now a flow column that grows to its content,
   with a guaranteed gap to whatever follows.
   --------------------------------------------------------------------- */
nav#mainNav .nav-panel .nav-mega-featured{
  display:block !important;
  min-height:0 !important;
  overflow:visible !important;
  padding:18px !important;
  margin:0 0 18px !important;
}
nav#mainNav .nav-panel .nav-mega-featured .featured-cta{
  position:static !important;
  margin:12px 0 0 !important;
  vertical-align:top;
}
nav#mainNav .nav-panel .nav-mega-featured > *:last-child{margin-bottom:0 !important}

/* ---------------------------------------------------------------------
   3.6  THE DECORATIVE PREVIEW MUST NOT BURST OUT  (Abid, screenshot 4)
   Fault: .mega-icon-preview is an empty decorative div sized by the panel.
   In the mobile drawer it rendered as a large ringed circle breaking out of
   the Employee Benefits Hub card. It carries no information, so it is off
   everywhere except wide desktop, where it is clipped to its own box.
   --------------------------------------------------------------------- */
nav#mainNav .mega-icon-preview{display:none !important}
@media(min-width:1280px){
  nav#mainNav .nav-panel .nav-mega-featured .mega-icon-preview{
    display:block !important;
    position:absolute !important;
    right:18px;top:18px;
    width:56px;height:56px;
    max-width:56px;max-height:56px;
    border-radius:12px;
    overflow:hidden !important;
    pointer-events:none;
  }
}

/* ---------------------------------------------------------------------
   3.8  MOBILE DRAWER IS OWNED BY THE SHARED HEADER
   Fault: several older page templates end with `.nav-links {display:none
   !important}` and `nav {overflow:hidden}` mobile guards. Because those
   inline rules load after the shared asset, the burger acquired its open
   class but the drawer still had a 0x0 box, or was painted outside the nav
   and clipped. The shared component owns drawer state, so its `.open`
   contract must outrank page-level layout leftovers too.
   --------------------------------------------------------------------- */
@media(max-width:1279px){
  nav#mainNav{overflow:visible !important}
  nav#mainNav .nav-links{
    display:none !important;
    position:absolute !important;
    top:100% !important;left:0 !important;right:0 !important;
    width:100% !important;max-width:100vw !important;
    max-height:calc(100vh - var(--navh)) !important;
    overflow-x:hidden !important;overflow-y:auto !important;
    flex-direction:column !important;align-items:stretch !important;
    flex-wrap:nowrap !important;
    padding:18px !important;gap:4px !important;
    background:var(--bf-chrome-navy) !important;
    border-bottom:1px solid rgba(255,255,255,0.10) !important;
    z-index:2147483003 !important;
  }
  nav#mainNav .nav-links.open{display:flex !important}
  nav#mainNav .nav-links > .nav-item{width:100% !important}
  nav#mainNav .nav-links > .nav-item > .nav-link{
    display:flex !important;align-items:center !important;
    justify-content:space-between !important;width:100% !important;
    padding:12px 14px !important;box-sizing:border-box !important;
  }
  /* Dropdowns are rows inside the drawer. Their old absolute desktop
     positioning made an open panel cover the remaining top-level links and
     allowed the page behind it to show through. */
  nav#mainNav .nav-links > .nav-item > .nav-panel{
    display:none !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:2px 0 10px !important;
    padding:14px !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }
  nav#mainNav .nav-links > .nav-item.open > .nav-panel{
    display:flex !important;
  }
  nav#mainNav .nav-panel .nav-mega-featured{
    padding:14px !important;
    margin-bottom:10px !important;
  }
  nav#mainNav .nav-subgroup > summary{
    min-height:42px;
    padding:10px 8px !important;
    cursor:pointer;
  }
  nav#mainNav .nav-subgroup[open] > .nav-subgroup-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  nav#mainNav .nav-cases-inline{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  nav#mainNav .nav-mega-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-width:0 !important;
  }
  :root[data-theme="light"] nav#mainNav .nav-links{
    border-bottom-color:rgba(10,22,40,0.10) !important;
  }
}

/* ---------------------------------------------------------------------
   3.7  NAV BAR SPACING  (Abid, screenshot 1)
   Fault: .nav-inner is a 170px / 1fr / 40px grid, and the links row
   overflowed its middle column, so the measured gap between the
   consultation button and the theme toggle was -0.6px: they touched. The
   toggle now owns a real column with breathing room on both sides, and the
   links row is allowed to shrink instead of overflowing.
   --------------------------------------------------------------------- */
@media(min-width:1280px){
  nav#mainNav .nav-inner{
    grid-template-columns:150px minmax(0,1fr) auto !important;
    column-gap:16px !important;
    align-items:center !important;
  }
  nav#mainNav .nav-links{min-width:0 !important;flex-wrap:nowrap !important}
  nav#mainNav .nav-links > .nav-cta{margin-right:18px !important}
  nav#mainNav .nav-inner > .theme-toggle{
    margin:0 !important;
    flex:0 0 auto;
    width:40px;height:40px;
  }
}

/* =====================================================================
   PART 4 - PREMIUM MENU PRESENTATION                  (added 2026-08-14)
   ---------------------------------------------------------------------
   Abid reviewed the repaired navigation and marked four things in red.
   Each one is answered below, at the shared level, never per page:

     4.1  the caret next to a top-level label rendered as a lopsided blob,
          and looked worse once the menu was open
     4.2  menu rows had no real hover state and read as generic text
     4.3  menu type was too small, and descriptions left single hanging
          words on a line of their own
     4.4  panels must still fit the viewport with no scrolling
     4.5  top-level labels sat too close together to hover comfortably
     4.6  the arrow in "Schedule a Consultation" escaped the button

   The reference he supplied is a light/dark pair showing a hovered cell
   lifting into a bordered card with an arrow appearing on the right. That
   is implemented in 4.2 and is theme-aware rather than a single colour.
   ===================================================================== */

/* ---------------------------------------------------------------------
   4.0  MENU SURFACE TOKENS
   Declared on the nav so both themes resolve without a page defining
   anything, and so a single value change restyles every menu at once.
   --------------------------------------------------------------------- */
:root nav#mainNav,
:root[data-theme="dark"] nav#mainNav{
  --nav-caret:rgba(255,255,255,0.55);
  --nav-divider:rgba(255,255,255,0.075);
  --nav-item-hover-bg:rgba(255,255,255,0.05);
  --nav-item-hover-border:rgba(52,211,153,0.55);
  --nav-item-hover-shadow:0 0 0 3px rgba(16,185,129,0.10),0 12px 28px rgba(0,0,0,0.40);
  --nav-arrow:#6ee7b7;
  --nav-toplink-hover-bg:rgba(255,255,255,0.07);
}
:root[data-theme="light"] nav#mainNav{
  --nav-caret:rgba(10,22,40,0.55);
  --nav-divider:rgba(10,22,40,0.085);
  --nav-item-hover-bg:#ffffff;
  --nav-item-hover-border:rgba(5,150,105,0.45);
  --nav-item-hover-shadow:0 0 0 3px rgba(5,150,105,0.07),0 10px 24px rgba(10,22,40,0.10);
  --nav-arrow:#059669;
  --nav-toplink-hover-bg:rgba(10,22,40,0.05);
}

/* ---------------------------------------------------------------------
   4.1  THE CARET                                    (Abid, red arrow #2)
   Fault: the caret was a CSS border triangle - `border:4px solid
   transparent; border-top-color:currentColor`. A filled triangle that
   small renders with visibly ragged diagonals, which is the blob his
   arrow points at. Worse, the open state rotated that triangle 225deg,
   so the shape people saw while a menu was open was a triangle standing
   on a corner, not a caret pointing up.

   It is now a real chevron: two 1.7px strokes of a rotated square. It is
   crisp at any zoom, it inherits the label colour, and open/closed is a
   45deg / -135deg rotation of the same glyph, which animates cleanly.
   --------------------------------------------------------------------- */
nav#mainNav .nav-link.has-dropdown::after{
  content:'' !important;
  display:inline-block !important;
  position:static !important;
  box-sizing:border-box !important;
  width:7px !important;
  height:7px !important;
  border:0 !important;
  border-right:1.7px solid currentColor !important;
  border-bottom:1.7px solid currentColor !important;
  border-radius:0 0 1px 0 !important;
  background:none !important;
  margin-left:7px !important;
  vertical-align:middle !important;
  transform:translateY(-2px) rotate(45deg);
  transform-origin:center !important;
  transition:transform .22s ease,opacity .22s ease !important;
  opacity:.6;
}
nav#mainNav .nav-item:hover > .nav-link.has-dropdown::after,
nav#mainNav .nav-item.open > .nav-link.has-dropdown::after,
nav#mainNav .nav-link.has-dropdown:hover::after{
  opacity:1;
}
/* Closed, however the pointer is behaving. Overrides the harvested
   `:hover::after{transform:translateY(2px) rotate(180deg)}` rule, which
   flipped the caret on hover even though nothing had opened. */
nav#mainNav .nav-link.has-dropdown:hover::after{
  transform:translateY(-2px) rotate(45deg);
}
/* Open. Same glyph, pointing up. */
nav#mainNav .nav-item.open > .nav-link.has-dropdown::after,
nav#mainNav .nav-item.open > .nav-link.has-dropdown:hover::after{
  transform:translateY(1px) rotate(-135deg) !important;
}

/* ---------------------------------------------------------------------
   4.2  THE HOVER STATE                              (Abid, reference pair)
   Fault: `.mega-item:hover{background:rgba(255,255,255,.04)}` was the
   entire feedback for a menu row. On a light panel that is invisible, so
   the rows read as flat text with no affordance.

   The reference is a card: the row lifts onto its own surface, takes a
   green border, and an arrow appears on the right to say it navigates.
   A transparent 1px border is carried at rest so nothing shifts by a
   pixel when the border appears.
   --------------------------------------------------------------------- */
nav#mainNav .nav-panel .mega-item{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:14px !important;
  padding:12px 14px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:transparent !important;
  text-decoration:none !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
/* Literal colours, not var(), and deliberately so. On the homepage the
   custom properties resolve correctly when read back, yet the var()
   substitution inside these declarations yields nothing, so background
   and border-color fell back to their initial transparent values and the
   hover state was invisible there while working everywhere else. The
   hover state is the thing Abid asked for; it does not get to depend on
   custom-property resolution across 1,317 pages of legacy CSS. Values
   below are the same ones the tokens carry. */
:root nav#mainNav .nav-panel a.mega-item:hover,
:root nav#mainNav .nav-panel a.mega-item:focus-visible,
:root[data-theme="dark"] nav#mainNav .nav-panel a.mega-item:hover,
:root[data-theme="dark"] nav#mainNav .nav-panel a.mega-item:focus-visible{
  background:rgba(255,255,255,0.05) !important;
  background-color:rgba(255,255,255,0.05) !important;
  border-color:rgba(52,211,153,0.55) !important;
  box-shadow:0 0 0 3px rgba(16,185,129,0.10),0 12px 28px rgba(0,0,0,0.40) !important;
  z-index:2 !important;
}
:root[data-theme="light"] nav#mainNav .nav-panel a.mega-item:hover,
:root[data-theme="light"] nav#mainNav .nav-panel a.mega-item:focus-visible{
  background:#ffffff !important;
  background-color:#ffffff !important;
  border-color:rgba(5,150,105,0.45) !important;
  box-shadow:0 0 0 3px rgba(5,150,105,0.07),0 10px 24px rgba(10,22,40,0.10) !important;
  z-index:2 !important;
}
/* The arrow that appears on hover, exactly as in the reference. It is a
   pseudo element so no markup on 1,300 pages has to change. */
/* It is positioned out of flow deliberately. As a flex child it reserved
   16px of glyph plus 10px of padding in every row even at opacity 0, which
   cut each description from 229px of text width down to 203px - and that
   missing 26px is precisely what pushed "multi-state", "ERISA-protected"
   and "numbers" onto lines of their own. */
nav#mainNav .nav-panel a.mega-item::after{
  content:'\2192';
  position:absolute;
  right:12px;
  top:50%;
  font-size:16px;
  line-height:1;
  color:#6ee7b7 !important;
  opacity:0;
  transform:translateY(-50%) translateX(-6px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
:root[data-theme="light"] nav#mainNav .nav-panel a.mega-item::after{color:#047857 !important}
:root nav#mainNav .nav-panel a.mega-item:hover::after,
:root nav#mainNav .nav-panel a.mega-item:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
/* Rows whose label already ends in an arrow, and the non-clickable
   "coming soon" rows, must not gain a second one. */
nav#mainNav .nav-panel a.mega-item.compare-link::after,
nav#mainNav .nav-panel .nav-coming-soon::after{content:none !important}
nav#mainNav .nav-panel .nav-coming-soon{
  cursor:default !important;
  opacity:.72 !important;
}
/* The icon tile picks up the accent as the row lifts. */
nav#mainNav .nav-panel .mega-item .mi-icon{
  flex:0 0 auto !important;
  width:40px !important;height:40px !important;
  border-radius:11px !important;
  transition:background .18s ease,transform .18s ease !important;
}
nav#mainNav .nav-panel a.mega-item:hover .mi-icon{transform:scale(1.04) !important}

/* ---------------------------------------------------------------------
   4.3  READABLE MENU TYPE, NO ORPHAN WORDS          (Abid, red arrow #3)
   Fault: 14px titles over 12px descriptions inside a 200px column. The
   descriptions broke to three lines and left "EE", "bundled", "minutes"
   and "studies" stranded alone.

   Type goes up a step, line-height opens, and `text-wrap:pretty` tells
   the browser to rebalance the last line so a single word is not left
   by itself. Column width in 3.3 does the rest.
   --------------------------------------------------------------------- */
nav#mainNav .nav-panel .mega-item h4{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:-.005em !important;
  margin:0 0 4px !important;
  text-wrap:pretty;
}
/* `balance` rather than `pretty`: on a two-line description Chrome's
   pretty algorithm still left a single trailing word, while balance
   splits the text into two even lines, which is also what reads as
   deliberate rather than accidental. */
nav#mainNav .nav-panel .mega-item p{
  font-size:13px !important;
  line-height:1.5 !important;
  margin:0 !important;
  text-wrap:balance;
  padding-right:2px !important;
}
nav#mainNav .nav-panel .mega-item > div{min-width:0 !important}
/* Section headings were 10px uppercase with 1.5px tracking, which is the
   "generic" look he called out. Sentence case at a readable size, with a
   hairline rule, matches the reference. */
nav#mainNav .nav-panel .nav-mega-secondary-title,
nav#mainNav .nav-panel .nav-subgroup > summary{
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:0 2px 10px !important;
  margin:0 0 6px !important;
  border-bottom:1px solid var(--nav-divider) !important;
}
nav#mainNav .nav-panel .nav-subgroup > summary > span{
  font-size:12.5px !important;
  font-weight:500 !important;
  opacity:.7;
}
nav#mainNav .nav-panel .nav-cases-title{
  margin-top:16px !important;
}
nav#mainNav .nav-panel .nav-mega-featured h4{font-size:19px !important;margin-bottom:5px !important}
nav#mainNav .nav-panel .nav-mega-featured p{font-size:13.5px !important;line-height:1.5 !important;margin-bottom:10px !important;text-wrap:pretty}
nav#mainNav .nav-panel .nav-mega-featured .featured-cta{
  font-size:13.5px !important;
  background:none !important;
  padding:0 !important;
}
/* The empty decorative preview block rendered as a dark shield tile in
   light mode. It carries no information and reads as an artifact next to
   the heading, so it is gone in every theme and width. */
nav#mainNav .mega-icon-preview{display:none !important}

/* ---------------------------------------------------------------------
   4.4  COLUMN SEPARATORS AND A PANEL THAT FITS      (Abid: no scrolling)
   The reference separates cells with hairlines rather than whitespace,
   which is what lets the type grow without the panel growing. The lines
   are pseudo elements so they add no width and cannot push a row down,
   and they retract around the hovered card so its border stays clean.
   --------------------------------------------------------------------- */
@media(min-width:1280px){
  nav#mainNav .nav-links > .nav-item:first-child .nav-subgroup-grid > .mega-item::before,
  nav#mainNav .nav-links > .nav-item:first-child .nav-cases-inline > .mega-item::before{
    content:'';
    position:absolute;
    left:0;top:12px;bottom:12px;
    width:1px;
    background:var(--nav-divider);
    transition:opacity .18s ease;
    pointer-events:none;
  }
  nav#mainNav .nav-links > .nav-item:first-child .nav-subgroup-grid > .mega-item:nth-child(3n+1)::before,
  nav#mainNav .nav-links > .nav-item:first-child .nav-cases-inline > .mega-item:nth-child(4n+1)::before{
    content:none;
  }
  /* A hovered card must not have a hairline running down its own edge,
     nor down the edge of the cell to its right. */
  nav#mainNav .nav-links > .nav-item:first-child .mega-item:hover::before,
  nav#mainNav .nav-links > .nav-item:first-child .mega-item:hover + .mega-item::before{
    opacity:0;
  }
  /* The panel is a fixed-height budget: it may never scroll. Featured card
     compact, sections tight, so seven funding paths plus four case studies
     fit under a 700px-tall window with room to spare. */
  nav#mainNav .nav-panel{padding:18px !important}
  nav#mainNav .nav-panel .mega-item{padding:10px 14px !important}
  nav#mainNav .nav-panel .nav-mega-featured{
    padding:14px 16px !important;
    margin:0 0 12px !important;
  }
  nav#mainNav .nav-panel .nav-mega-featured h4{font-size:18px !important}
  nav#mainNav .nav-panel .nav-mega-featured p{margin-bottom:8px !important}
  nav#mainNav .nav-panel .nav-cases-title{margin-top:12px !important}
}

/* ---------------------------------------------------------------------
   4.8  CASE STUDIES MUST ALSO FIT THE SCREEN
   Found while verifying 4.4, not in his list: the Case Studies panel
   stacked twelve rows in two tall columns and measured 932px, so it ran
   off the bottom of a 900px window and far off a 696px one. Abid's rule
   is that no menu may make you scroll, and it applies to every menu, not
   only the one he happened to capture.

   Each of the two groups now lays its own rows out in two columns, so the
   panel is four columns wide and three rows deep instead of six.
   --------------------------------------------------------------------- */
@media(min-width:1280px){
  nav#mainNav .nav-links > .nav-item:nth-child(4) > .nav-panel{
    width:min(1040px,calc(100vw - 40px)) !important;
    box-sizing:border-box !important;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(4) .nav-mega-grid > div{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-content:start !important;
  }
  nav#mainNav .nav-links > .nav-item:nth-child(4) .nav-mega-grid > div > .nav-mega-secondary-title{
    grid-column:1 / -1 !important;
  }
}

/* ---------------------------------------------------------------------
   4.5  ROOM BETWEEN THE TOP-LEVEL LABELS            (Abid, red arrow #1)
   Fault: labels were 24px apart measured edge to edge, so moving the
   pointer between them opened the neighbour by accident.

   Each label now owns a padded target with a soft pill on hover, and the
   targets are separated. The extra width is paid for out of the
   consultation button and the logo column so the row still fits 1280px
   without wrapping.
   --------------------------------------------------------------------- */
@media(min-width:1280px){
  nav#mainNav .nav-links{gap:4px !important}
  nav#mainNav .nav-links > .nav-item > .nav-link{
    padding:9px 12px !important;
    font-size:14px !important;
    white-space:nowrap;
    border-radius:9px !important;
    transition:background .18s ease,color .18s ease !important;
  }
  nav#mainNav .nav-links > .nav-item:hover > .nav-link,
  nav#mainNav .nav-links > .nav-item.open > .nav-link{
    background:var(--nav-toplink-hover-bg) !important;
  }
  /* The bar was capped at `max-width:1200px`, the page's text column. A
     header is chrome, not body copy: on a 1280px screen that cap threw away
     48px and, once the labels had room to breathe, it is what pushed the
     consultation button into the theme toggle - measured as a 34px overlap.
     The bar now uses the window, with a sane ceiling on very wide screens. */
  nav#mainNav .nav-inner{
    max-width:min(1400px,calc(100vw - 32px)) !important;
    column-gap:10px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  /* Measured at 1280: the row needed 962px and had 927px. The 35px comes
     out of chrome - bar padding, the gap either side of the links, the
     logo and the button's own padding - and never out of the spacing
     between the labels, which is the thing he asked to increase. */
  nav#mainNav .nav-logo .brand-logo-img{
    height:42px !important;
    width:auto !important;
    max-width:none !important;
  }
  /* Padding lives in 4.6, which is the single source for this button. */
  nav#mainNav .nav-links > .nav-cta{
    margin-left:4px !important;
    margin-right:8px !important;
  }
}

/* ---------------------------------------------------------------------
   4.6  THE CONSULTATION ARROW STAYS IN THE BUTTON   (Abid, red arrow #4)
   Fault: `.nav-cta` is a flex child of `.nav-links` with the default
   `flex-shrink:1`. When the six menus filled the row the button was
   allowed to shrink below its content width, so the label kept its size
   and the trailing arrow was pushed through the right padding and over
   the border. `overflow:hidden` on the button then clipped it, which is
   the half-arrow sitting on the edge in his capture.

   The button is now an inline-flex row that refuses to shrink, with the
   arrow as its own element on a real gap, so the padding is guaranteed.
   --------------------------------------------------------------------- */
nav#mainNav .nav-links > .nav-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  padding:10px 16px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
nav#mainNav .nav-links > .nav-cta .cta-arrow{
  display:inline-block;
  flex:0 0 auto;
  font-size:15px;
  line-height:1;
  transition:transform .2s ease;
}
nav#mainNav .nav-links > .nav-cta:hover .cta-arrow{transform:translateX(3px)}

/* ---------------------------------------------------------------------
   4.7  THE SAME TREATMENT ON THE DRAWER
   Phones get the larger type and the card hover too, but hairline
   separators between columns make no sense in a single column, and the
   button must fill the drawer width rather than hug its text.
   --------------------------------------------------------------------- */
@media(max-width:1279px){
  nav#mainNav .nav-panel .mega-item{padding:12px !important}
  nav#mainNav .nav-panel .mega-item::before{content:none !important}
  nav#mainNav .nav-links > .nav-cta{
    display:flex !important;
    width:100% !important;
    margin:10px 0 4px !important;
    padding:14px 20px !important;
  }
  nav#mainNav .nav-panel .nav-mega-secondary-title,
  nav#mainNav .nav-panel .nav-subgroup > summary{font-size:14px !important}
}

/* ---------------------------------------------------------------------
   4.9  MENU TEXT MUST BE READABLE IN BOTH THEMES
   Found on visual inspection of this build, not reported: part 1 paints
   every section heading, eyebrow and featured link with a single hard
   value, `#6ee7b7`, chosen for a dark panel. In light mode that is mint
   green on near-white - "Case studies", "Start here" and "Explore health
   insurance" were all washed out. The accent is now theme-aware, and the
   headings are ordinary text rather than an accent colour, which is also
   what the reference shows.
   --------------------------------------------------------------------- */
:root nav#mainNav,
:root[data-theme="dark"] nav#mainNav{
  --nav-heading:rgba(255,255,255,0.74);
  --nav-accent:#6ee7b7;
}
:root[data-theme="light"] nav#mainNav{
  --nav-heading:rgba(10,22,40,0.78);
  --nav-accent:#047857;
}
nav#mainNav .nav-panel .nav-mega-secondary-title,
nav#mainNav .nav-panel .nav-subgroup > summary,
nav#mainNav .nav-panel .nav-cases-title{
  color:var(--nav-heading) !important;
  border-color:var(--nav-divider) !important;
}
nav#mainNav .nav-panel .nav-mega-featured .featured-eyebrow,
nav#mainNav .nav-panel .nav-mega-featured .featured-eyebrow::before,
nav#mainNav .nav-panel .nav-mega-featured .featured-cta,
nav#mainNav .nav-panel .nav-mega-featured .featured-cta::after{
  color:var(--nav-accent) !important;
}
nav#mainNav .nav-panel .mi-icon,
nav#mainNav .nav-panel .mi-icon svg,
nav#mainNav .nav-panel .mega-item svg{
  color:var(--nav-accent) !important;
  stroke:var(--nav-accent) !important;
}

/* The decorative preview tile. 3.6 re-enables it on wide desktop with a
   more specific selector than the one in 4.3, so it survived and still
   rendered as a dark shield over the corner of the featured card. Killed
   here at higher specificity, in every theme and at every width. */
nav#mainNav .nav-panel .nav-mega-featured .mega-icon-preview,
nav#mainNav .nav-panel .mega-icon-preview,
nav#mainNav .mega-icon-preview{
  display:none !important;
}

/* ---------------------------------------------------------------------
   4.10  THE HOVER BRIDGE MUST NOT SWALLOW CLICKS
   Found by the interaction suite after 4.4 landed. `.nav-panel::before`
   is a 28px invisible bridge sitting above the panel, from the era when
   the menus were pure CSS hover: it kept the panel open while the pointer
   crossed the gap from the label.

   It is absolutely positioned across the panel's full width, so as soon
   as a panel sits under its own trigger - which is exactly what the new
   viewport clamp does when it slides a wide panel left - the bridge
   covers the lower half of that trigger. A click on the label then lands
   on the bridge instead of the link, and the menu will not close. That is
   the same "clicking does nothing" fault this component was built to fix,
   arriving through a different door.

   The component owns hover-intent in JavaScript and holds a panel open on
   a timer while the pointer travels, so the bridge earns nothing when
   data-nav-js is set. Without JavaScript it is left alone and the CSS
   hover menus keep working.
   --------------------------------------------------------------------- */
/* REVISED after testing with a human-speed pointer. Disabling the bridge
   outright fixed the swallowed click but broke something worse: gliding
   from the label down into the panel crosses a ~10px dead gap, the item
   gets a mouseleave, the close timer fires, and the menu shuts before you
   reach it. A teleporting test pointer never noticed; a person always
   would.

   So keep the bridge live, and fix its geometry instead. It only needs to
   span the gap between the trigger and the panel. At 28px tall it reached
   up over the label itself, which is what stole the click. Clamped to the
   gap it can no longer touch the trigger, so both faults are closed. */
nav#mainNav .nav-panel::before{
  top:-14px !important;
  height:14px !important;
  pointer-events:auto !important;
}
/* The item's own bridge sits inside the item and never covers the label,
   but it must not intercept the click either. */
nav#mainNav[data-nav-js="1"] .nav-links > .nav-item::before{
  pointer-events:none !important;
}

/* ---------------------------------------------------------------------
   4.11  THE DRAWER MUST START AT ITS TOP, NOT ITS MIDDLE
   Found by the interaction suite on /tools/ at 390px.

   The mobile drawer is a flex column carrying `justify-content:center`.
   While the menu is short that is invisible. The moment its content is
   taller than the drawer - measured here at 845px of content in a 741px
   box once Health Insurance is expanded - centring pushes the overflow
   out of BOTH ends. The first menu ends up 86px above the top of its own
   scroll container, which is unreachable: overflow above the start edge
   cannot be scrolled to, so scrollTop stays 0 and "Health Insurance"
   simply sits behind the header where it cannot be tapped.

   This is latent on the published site and the larger type merely crossed
   the threshold that exposes it. Starting the column at the top sends all
   overflow downward, where the existing scroll can reach it.
   --------------------------------------------------------------------- */
@media(max-width:1279px){
  nav#mainNav .nav-links{
    justify-content:flex-start !important;
    align-content:flex-start !important;
  }
}

/* ---------------------------------------------------------------------
   4.12  AN OPEN MENU MUST PAINT ABOVE THE PAGE
   Found while checking the hover state on the homepage: hovering a menu
   row did nothing there, because the row was not the top element at its
   own coordinates. The hero headline was. Sampling the middle of the open
   Health Insurance panel returned SPAN.grad / H1 / DIV.hero-content.

   The panels already carry `z-index:2147483001` and `isolation:isolate`,
   but a z-index only ranks siblings inside the nearest stacking context.
   The nav had not established one above the page, so the whole menu was
   ranked as part of the header's own context and the hero, which does
   create a context, sat on top of it. The effect is visible in Abid's
   first capture: page text bleeds across the bottom of the open panel.

   Raising the nav itself is the fix - one stacking context for the whole
   header, so everything it contains outranks page content.
   --------------------------------------------------------------------- */
nav#mainNav{
  position:relative;
  z-index:2147483000 !important;
  isolation:isolate !important;
}

/* ---------------------------------------------------------------------
   Mega panels appearing UNDERNEATH the page content.

   Reported by Abid 2026-08-15 on /benefits-savings-strategy-builder/: every
   menu opened with the page's h1 and intro printed straight through it. The
   panel was never transparent. Measured on live, the open panel has
   opacity 1 and a solid gradient; elementsFromPoint inside the panel returned
   the page H1 first, so the hero was painting OVER the menu.

   Cause is one over-broad rule in the harvested block (line ~196):

     header,.site-header,.nav,nav.nav,nav#mainNav,.site-nav,.bft-nav,
     .main-nav,.nav-wrap{position:relative!important;z-index:2147483000!important}

   A bare `header` matches the PAGE HERO on these templates, so the hero got
   the navigation's exact stacking level. Equal z-index is broken by document
   order, the hero comes after the nav, so the hero wins. The panel's own
   z-index of 2147483003 cannot help: nav#mainNav has isolation:isolate, so
   that value only orders panels WITHIN the nav's stacking context.

   The fix is not to escalate. It is to stop handing the nav's stacking level
   to elements that are not the nav. Anything matching those legacy selectors
   that neither is nor contains nav#mainNav goes back to auto, which puts it
   far below the nav's positioned 2147483000 whatever the document order.
   Elements that CONTAIN the nav keep the level, because those are genuine
   header wrappers.

   Deliberately untouched: .tip-box-fixed on 232 tool pages at 2147483647.
   Those are pointer-events:none hover tooltips that are meant to sit on top.
   --------------------------------------------------------------------- */
body:has(nav#mainNav[data-header-version="global-2026-08-14"])
  :is(header,.site-header,.nav,nav.nav,.site-nav,.bft-nav,.main-nav,.nav-wrap):not(:has(nav#mainNav)):not(#mainNav){
  z-index:auto !important;
}

/* ---------------------------------------------------------------------
   Underlines appearing under the nav labels.

   Reported by Abid 2026-08-15 on /workers-comp-california-no-options/: every
   top-level label and the consultation button were underlined. Article and
   landing templates style their body links generically, e.g.
   `a{text-decoration:underline}`, and the shared header sits inside that same
   document, so the rule reaches the navigation.

   The header must not depend on a page choosing not to style links. It now
   states its own contract for every anchor it owns, in all states, with
   enough weight that a page-level rule cannot win. Underlines inside a mega
   panel are covered too, since the same page CSS reaches those.
   --------------------------------------------------------------------- */
nav#mainNav a,
nav#mainNav a:link,
nav#mainNav a:visited,
nav#mainNav a:hover,
nav#mainNav a:focus,
nav#mainNav a:active{
  text-decoration:none !important;
  text-underline-offset:auto !important;
  text-decoration-line:none !important;
}

/* ---------------------------------------------------------------------
   Mega panels must be fully opaque.

   Measured 2026-08-15 on /tools/ in light mode: the panel's own gradient was
   linear-gradient(rgba(248,247,244,0.96) 0%, #fff 100%). That 0.96 lets the
   page hero print faintly through the top of every open menu, which reads as
   the panel being see-through. Dark mode was already opaque.

   A dropdown is a surface, not a scrim. Both themes now state a fully opaque
   gradient using the same colours, so nothing behind a panel is ever visible.
   --------------------------------------------------------------------- */
:root[data-theme="light"] nav#mainNav .nav-panel{
  background-image:linear-gradient(rgb(248,247,244) 0%, rgb(255,255,255) 100%) !important;
}
:root[data-theme="dark"] nav#mainNav .nav-panel,
:root:not([data-theme]) nav#mainNav .nav-panel{
  background-image:linear-gradient(rgb(10,22,40) 0%, rgb(15,31,56) 100%) !important;
}

/* The panel gradient is built from var(--bf-chrome-navy), whose LIGHT value is
   rgba(248,247,244,0.96). Overriding background-image loses to the shorthand
   that declares it, so set the TOKEN on the panel element itself: var() then
   resolves against the panel's own value. Scoped to the panel, so the nav
   bar's own translucency is deliberately left as designed. */
:root[data-theme="light"] nav#mainNav .nav-panel{
  --bf-chrome-navy:rgb(248,247,244);
  --bf-chrome-navy-2:rgb(255,255,255);
}

/* ---------------------------------------------------------------------
   Theme toggle glyph legibility.

   Abid reported the button reading as empty twice. The second time the icon
   was in fact rendering correctly on live, at the right colour and contrast,
   and he was looking at a page cached before the deploy. But the underlying
   complaint is fair: a 16px glyph at stroke-width 2 inside a 40px button is
   small enough that at 100% zoom it reads as an empty outline at a glance,
   especially the moon, whose crescent has less ink than the sun.

   Larger and slightly heavier, in both themes. Geometry only; the colour
   contract above is unchanged.
   --------------------------------------------------------------------- */
nav#mainNav .theme-toggle svg{
  width:19px !important;
  height:19px !important;
  stroke-width:2.2 !important;
}

/* ---------------------------------------------------------------------
   Mega panel: light-mode legibility of the featured card and the
   subgroup counters.

   Abid pointed at "Explore health insurance" reading as invisible. Measured
   leaf-only on live: colour rgba(255,255,255,0.82) on a rgba(248,247,244,0.96)
   panel, a contrast ratio of 1.07:1. The same applies to every panel's
   featured call to action and eyebrow, and to the small counter spans in the
   subgroup summaries ("7 paths", "5 states"). Dark mode measures clean, so
   this is a light-mode-only override and the dark contract is untouched.
   --------------------------------------------------------------------- */
:root[data-theme="light"] nav#mainNav .nav-panel .nav-mega-featured .featured-cta,
:root[data-theme="light"] nav#mainNav .nav-panel .nav-mega-featured .featured-cta::after,
:root[data-theme="light"] nav#mainNav .nav-panel .nav-mega-featured .featured-eyebrow,
:root[data-theme="light"] nav#mainNav .nav-panel .nav-mega-featured .featured-eyebrow::before{
  color:#047857 !important;
}
:root[data-theme="light"] nav#mainNav .nav-panel .nav-subgroup > summary,
:root[data-theme="light"] nav#mainNav .nav-panel .nav-subgroup > summary span{
  color:#475569 !important;
}