/* RateArk primary nav (mega menu). Shared by every page. */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,253,248,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;height:64px;max-width:var(--w,1120px);margin:0 auto;padding:0 22px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:21.5px;letter-spacing:-.015em;text-decoration:none;color:var(--ink);flex:0 0 auto;min-height:44px}
.brand svg{width:34px;height:34px;flex:0 0 auto}
.brand b{color:var(--teal)}
.nav{margin-left:auto}
.nav-main{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.nav-item{position:relative}
.nav-link,.nav-mega-trigger{display:inline-flex;align-items:center;gap:5px;font-family:"Public Sans",sans-serif;
  font-weight:500;font-size:15px;color:var(--sub);background:none;border:0;cursor:pointer;
  padding:10px 12px;border-radius:9px;text-decoration:none;line-height:1;min-height:44px}
.nav-link:hover,.nav-mega-trigger:hover{color:var(--teal-ink);background:var(--cream)}
.nav-item.is-current>.nav-link,.nav-item.is-current>.nav-mega-trigger,
.nav-link[aria-current="page"]{color:var(--teal-ink);font-weight:700}
.chev{width:11px;height:7px;transition:transform .18s}
.nav-mega-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-mega-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;min-width:330px}
.nav-mega-grid{display:grid;gap:2px}
.nav-mega-grid a{display:block;padding:11px 13px;border-radius:11px;text-decoration:none;color:var(--ink)}
.nav-mega-grid a:hover{background:var(--cream)}
.nav-mega-grid b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px}
.nav-mega-grid span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
/* scoped to .hdr so a page's own inline .btn rules cannot win on load order */
/* scoped to .hdr so a page's own inline .btn rules cannot win on load order.
   Kept deliberately subordinate to the brand lockup: the logo leads the header. */
.hdr .btn--sm,.hdr .nav-cta{min-height:44px;padding:0 14px;font-size:13px;font-weight:700;
  border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.hdr .nav-cta{flex:0 0 auto;box-shadow:0 5px 12px -8px rgba(224,161,42,.8)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;padding:0 11px}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:1000px){
  .hdr .nav-cta{display:none}
  .nav-toggle{display:flex;margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:64px;margin:0;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100dvh - 64px);
    overflow:auto}
  .nav.is-open{display:block}
  .nav-main{flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 18px}
  .nav-link,.nav-mega-trigger{width:100%;justify-content:space-between;padding:14px 10px;font-size:16px;
    min-height:48px}
  .nav-mega-panel{position:static;border:0;box-shadow:none;padding:0 0 8px 10px;min-width:0;border-radius:0}
  .nav-mega-grid a{padding:11px 10px}
}