/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM HEADER REDESIGN — Task #813855 (Phase 3)
   Stripe/Linear/Notion-quality header across all pages.
   Single-row desktop (Logo | Nav | CTA+Auth). Clean mobile hamburger.
   Loaded LAST — overrides all previous header styles via specificity + !important.
   Breakpoints: 320px, 375px, 600px, 768px, 900px, 1024px, 1280px, 1920px
   v2: Green branded underlines, spring easing, mobile backdrop overlay.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── Go Pro shimmer animation ─── */
@keyframes go-pro-shimmer {
  0% { left: -100%; }
  20% { left: 100%; }
  100% { left: 100%; }
}
/* ─── Mobile menu backdrop fade ─── */
@keyframes mobileMenuBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   1. DESKTOP HEADER — Single row: Logo | Nav Links (center) | Go Pro + Sign In
   Breakpoint: >900px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* --- Root variable: new desktop header height --- */
  :root {
    --header-height: 64px;
  }
  /* --- Main nav container: single row, frosted glass on scroll --- */
  #mainNav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    transition: box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    overflow: visible !important;
  }
  /* Scroll-triggered refined shadow (Stripe pattern) */
  #mainNav.nav-scrolled {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.02) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
  }
  /* --- Brand row: Logo (left) + Auth/CTA (right) --- */
  .nav-brand-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 clamp(1.5rem, 3vw, 2.5rem) !important;
    border-bottom: none !important;
    background: transparent !important;
    gap: 1rem !important;
  }
  /* --- Logo: compact, modern --- */
  .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
    text-decoration: none !important;
    color: #0f172a !important;
    transition: color 0.2s ease !important;
  }
  .nav-logo:hover {
    color: #16a34a !important;
  }
  /* Radar icon: sized for 64px single-row */
  .radar-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.18) !important;
  }
  /* SVG inside radar icon */
  .radar-icon-svg {
    width: 100% !important;
    height: 100% !important;
    border-radius: 9px !important;
  }
  .nav-logo-text {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Hide tagline for cleaner look */
  .nav-logo-tagline {
    display: none !important;
  }
  /* --- Hide search from header (clean Stripe pattern) --- */
  .nav-search {
    display: none !important;
  }
  /* --- Auth/CTA area: right-aligned --- */
  .nav-plain-auth {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }
  /* --- Nav row 2 → Centered absolutely in single row --- */
  .nav-nav-row {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    z-index: 1 !important;
  }
  /* Hide Go Pro link from center nav (it's already in the auth area) */
  .nav-nav-row > a.btn.btn-success,
  .nav-nav-row > a[href="/pricing"].btn {
    display: none !important;
  }
  /* Hide the flat divider */
  .nav-flat-divider {
    display: none !important;
  }
  /* --- Nav link buttons: clean text, subtle hover --- */
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    font-family: inherit !important;
  }
  /* Hover: clean color shift, no background */
  .nav-nav-row button:hover,
  .nav-nav-row button:focus-visible,
  .nav-nav-row .btn.btn-secondary:hover {
    color: #0f172a !important;
    background: transparent !important;
  }
  .nav-nav-row button.open {
    color: #0f172a !important;
    background: transparent !important;
  }
  /* Branded underline animation on hover (Linear/Stripe style) */
  .nav-nav-row button::after,
  .nav-nav-row .btn.btn-secondary::after {
    content: '' !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    height: 2px !important;
    background: #16a34a !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 1px !important;
  }
  .nav-nav-row button:hover::after,
  .nav-nav-row button.open::after,
  .nav-nav-row .btn.btn-secondary:hover::after {
    transform: scaleX(1) !important;
  }
  /* Chevron: very subtle, animated */
  .nav-nav-row .mega-chevron {
    opacity: 0.35 !important;
    width: 8px !important;
    height: 5px !important;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
  }
  .nav-nav-row button:hover .mega-chevron {
    opacity: 0.5 !important;
  }
  .nav-nav-row button.open .mega-chevron {
    opacity: 0.8 !important;
    transform: rotate(180deg) !important;
  }
  /* For Business: same weight as others */
  #megaBusinessBtn {
    font-weight: 500 !important;
    color: #64748b !important;
  }
  #megaBusinessBtn:hover,
  #megaBusinessBtn.open {
    color: #0f172a !important;
    background: transparent !important;
  }
  /* All nav row buttons on hover: override Section 25 green rules */
  #megaSettlementsBtn:hover,
  #megaSettlementsBtn.open,
  #megaToolsBtn:hover,
  #megaToolsBtn.open,
  #megaGuidesBtn:hover,
  #megaGuidesBtn.open,
  #megaCompareBtn:hover,
  #megaCompareBtn.open,
  #megaMoreBtn:hover,
  #megaMoreBtn.open {
    color: #0f172a !important;
    background: transparent !important;
  }
  /* --- GO PRO BUTTON: Premium green CTA, glow on hover --- */
  .nav-upgrade-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(22,163,74,0.18), 0 0 12px rgba(22,163,74,0.08), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 0.01em !important;
  }
  .nav-upgrade-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25), 0 0 28px rgba(22,163,74,0.15), 0 0 48px rgba(34,197,94,0.08), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
  }
  .nav-upgrade-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2) !important;
  }
  /* Shimmer sweep on Go Pro (overrides underline ::after from nav-nav-row) */
  .nav-upgrade-btn::after {
    bottom: 0 !important;
    left: -100% !important;
    right: auto !important;
    height: 100% !important;
    width: 100% !important;
    transform: none !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
    animation: go-pro-shimmer 4s ease-in-out infinite !important;
    border-radius: 0 !important;
  }
  /* --- Sign In link: muted, elegant, outlined --- */
  .nav-signin-link {
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 0.45rem 0.875rem !important;
    border-radius: 6px !important;
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
  }
  .nav-signin-link:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,0.03) !important;
  }
  /* --- Account area: cleaner --- */
  .nav-score-badge,
  .nav-my-claims-link {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.55rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
  .nav-pro-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 6px !important;
  }
  .nav-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    border-radius: 50% !important;
  }
  .nav-account-btn {
    padding: 0.3rem 0.4rem !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    gap: 6px !important;
  }
  .nav-account-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  .nav-account-btn:active {
    transform: scale(0.97) !important;
  }
  /* --- Body padding for 64px header --- */
  body {
    padding-top: 64px !important;
  }
  html {
    scroll-padding-top: 64px !important;
  }
  html.has-announce-bar body {
    padding-top: 100px !important; /* 36px bar + 64px nav */
  }
  html.has-announce-bar {
    scroll-padding-top: 100px !important;
  }
  html.has-announce-bar #mainNav {
    top: 36px !important;
  }
  /* --- Mega panels: clean, modern shadows --- */
  .mega-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
  }
  .mega-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }
  .mega-inner {
    padding: 1.25rem 2rem !important;
  }
  .mega-col-header {
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.625rem !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
  }
  .mega-link {
    color: #475569 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding: 0.375rem 0.5rem !important;
    margin: 0 -0.5rem !important;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    display: block !important;
    border-radius: 6px !important;
  }
  .mega-link:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.03) !important;
  }
  .mega-link--highlight {
    font-weight: 500 !important;
  }
  .mega-link--urgent {
    color: #dc2626 !important;
    font-weight: 600 !important;
  }
  .mega-link--more {
    color: #16a34a !important;
    font-weight: 600 !important;
    margin-top: 0.5rem !important;
  }
  .mega-link--more:hover {
    color: #15803d !important;
    background: rgba(22, 163, 74, 0.04) !important;
  }
  .mega-panel-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 0.625rem 2rem !important;
    background: rgba(0,0,0,0.015) !important;
    border-radius: 0 0 16px 16px !important;
  }
  .mega-footer-link {
    color: #16a34a !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: color 0.15s ease !important;
  }
  .mega-footer-link:hover {
    color: #15803d !important;
  }
  /* --- Dropdown menus: cleaner --- */
  .nav-more-dropdown {
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }
}
/* --- Compact desktop (901px–1100px): tighter spacing --- */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  .nav-brand-row {
    padding: 0 1rem !important;
  }
  #megaCompareBtn {
    font-size: 0.78rem !important;
  }
  .nav-upgrade-btn {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8rem !important;
  }
  .nav-signin-link {
    font-size: 0.82rem !important;
    padding: 0.4rem 0.6rem !important;
  }
}
/* --- Mid desktop (1024px–1280px): balanced spacing --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-brand-row {
    padding: 0 clamp(1.5rem, 2.5vw, 2rem) !important;
  }
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    padding: 0.5rem 0.65rem !important;
    font-size: 0.85rem !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   2. MOBILE HEADER — Clean, minimal, premium feel
   Breakpoint: ≤900px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* --- Main nav --- */
  #mainNav {
    height: 56px !important;
    min-height: 56px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
    transition: box-shadow 0.3s ease, background 0.3s ease !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
  }
  #mainNav.nav-scrolled {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
  }
  /* --- Brand row --- */
  .nav-brand-row {
    height: 56px !important;
    padding: 0 1rem !important;
    gap: 0.625rem !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  /* --- Logo --- */
  .nav-logo {
    gap: 0.5rem !important;
    color: #0f172a !important;
  }
  .nav-logo:hover {
    color: #16a34a !important;
  }
  .radar-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.15) !important;
  }
  .nav-logo-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }
  .nav-logo-tagline {
    display: none !important;
  }
  /* --- Mobile Pricing: plain bold text link in header bar (matches desktop nav) --- */
  .nav-mobile-pricing.nav-mobile-go-pro {
    font-size: 0.875rem !important;
    font-weight: bold !important;
    padding: 0.4rem 0.5rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #15803d !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    letter-spacing: normal !important;
  }
  .nav-mobile-pricing.nav-mobile-go-pro:hover {
    color: #166534 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* --- Hamburger: clean, animated bars → X --- */
  .nav-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .nav-hamburger:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  .nav-hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #334155 !important;
    border-radius: 2px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease !important;
    transform-origin: center !important;
  }
  .nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .nav-hamburger.open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
  /* --- Mobile menu: smooth slide-down with backdrop --- */
  .nav-mobile-menu {
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 0 0 100vmax rgba(0,0,0,0) !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.35s !important;
  }
  .nav-mobile-menu.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 0 0 100vmax rgba(0,0,0,0.3) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s !important;
  }
  /* --- Mobile links: spacious, touch-friendly --- */
  .nav-mobile-link {
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
    border-radius: 8px !important;
  }
  .nav-mobile-link:hover {
    color: #16a34a !important;
    background: rgba(22,163,74,0.04) !important;
    padding-left: 1.5rem !important;
  }
  /* --- Mobile accordion: clean --- */
  .nav-mobile-accordion-btn {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    min-height: 48px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    border-radius: 8px !important;
  }
  .nav-mobile-accordion-btn:hover {
    background: rgba(0, 0, 0, 0.025) !important;
    color: #0f172a !important;
  }
  /* Mobile accordion body animation */
  .nav-mobile-accordion-body {
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
  }
  /* --- Mobile Go Pro CTA in menu --- */
  .nav-mobile-cta-wrap {
    padding: 1rem 1.25rem !important;
  }
  .nav-mobile-cta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-align: center !important;
    padding: 0.9rem 1.5rem !important;
    box-shadow: 0 2px 8px rgba(22,163,74,0.25), 0 0 20px rgba(22,163,74,0.1) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .nav-mobile-cta:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 4px 16px rgba(22,163,74,0.35), 0 0 32px rgba(22,163,74,0.15) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
  }
  .nav-mobile-link--cta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-align: center !important;
    padding: 0.9rem 1.25rem !important;
    box-shadow: 0 2px 8px rgba(22,163,74,0.25), 0 0 20px rgba(22,163,74,0.1) !important;
    border: none !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
    margin: 0.5rem 1rem !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .nav-mobile-cta:hover,
  .nav-mobile-link--cta:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 4px 16px rgba(22,163,74,0.35), 0 0 32px rgba(22,163,74,0.15) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
  }
  /* --- Mobile search in hamburger: cleaner --- */
  .nav-mobile-search-wrap {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  .nav-mobile-search-input {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    color: #0f172a !important;
    padding: 0.65rem 0.85rem 0.65rem 2.2rem !important;
  }
  .nav-mobile-search-input:focus {
    border-color: #16a34a !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important;
  }
  /* --- Mobile group labels --- */
  .nav-mobile-group-label {
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.75rem 1.25rem 0.35rem !important;
  }
  /* --- Mobile sublabels --- */
  .nav-mobile-sublabel {
    color: #94a3b8 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.6rem 0 0.25rem 0 !important;
  }
  /* --- Mobile dividers --- */
  .nav-mobile-divider,
  .nav-mobile-group {
    border-color: rgba(0, 0, 0, 0.05) !important;
  }
  .nav-mobile-divider {
    height: 1px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    margin: 0.35rem 1rem !important;
    display: block !important;
  }
  /* --- Body padding for 56px header --- */
  body {
    padding-top: 56px !important;
  }
  html {
    scroll-padding-top: 56px !important;
  }
  html.has-announce-bar body {
    padding-top: 92px !important; /* 36px + 56px */
  }
  html.has-announce-bar {
    scroll-padding-top: 92px !important;
  }
}
/* --- Tablet (768px–900px) --- */
@media (min-width: 768px) and (max-width: 900px) {
  .nav-brand-row {
    padding: 0 1.25rem !important;
  }
}
/* --- Small mobile (≤600px) --- */
@media (max-width: 600px) {
  #mainNav {
    height: 48px !important;
    min-height: 48px !important;
  }
  .nav-brand-row {
    height: 48px !important;
    padding: 0 0.75rem !important;
    min-height: 48px !important;
  }
  .radar-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
  }
  .nav-logo-text {
    font-size: 0.95rem !important;
  }
  .nav-mobile-pricing.nav-mobile-go-pro {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.4rem !important;
  }
  body {
    padding-top: 48px !important;
  }
  html {
    scroll-padding-top: 48px !important;
  }
  html.has-announce-bar body {
    padding-top: 80px !important; /* 32px + 48px */
  }
  html.has-announce-bar {
    scroll-padding-top: 80px !important;
  }
  html.has-announce-bar #mainNav {
    top: 32px !important;
  }
}
/* --- Tablet mobile (768px–900px): slightly larger elements --- */
@media (min-width: 768px) and (max-width: 900px) {
  .nav-brand-row {
    padding: 0 1.25rem !important;
  }
  .nav-mobile-pricing.nav-mobile-go-pro {
    font-size: 0.875rem !important;
    padding: 0.35rem 0.5rem !important;
  }
  .nav-mobile-link {
    font-size: 1rem !important;
    padding: 0.85rem 1.5rem !important;
  }
  .nav-mobile-accordion-btn {
    font-size: 1rem !important;
    padding: 0.85rem 1.5rem !important;
  }
}
/* --- Very small mobile (≤375px) --- */
@media (max-width: 375px) {
  .radar-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 6px !important;
  }
  .nav-logo-text {
    font-size: 0.88rem !important;
  }
  .nav-mobile-pricing.nav-mobile-go-pro {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.4rem !important;
  }
  html.has-announce-bar body {
    padding-top: 78px !important; /* 30px + 48px */
  }
  html.has-announce-bar #mainNav {
    top: 30px !important;
  }
}
/* --- Ultra-small mobile (≤320px, foldables) --- */
@media (max-width: 320px) {
  .radar-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 5px !important;
  }
  .nav-logo-text {
    font-size: 0.82rem !important;
  }
  .nav-logo {
    gap: 0.35rem !important;
  }
  .nav-mobile-pricing.nav-mobile-go-pro {
    font-size: 0.78rem !important;
    padding: 0.25rem 0.35rem !important;
  }
  .nav-hamburger {
    width: 36px !important;
    height: 36px !important;
    gap: 4px !important;
  }
  .nav-hamburger span {
    width: 18px !important;
  }
  .nav-brand-row {
    padding: 0 0.5rem !important;
    gap: 0.35rem !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   3. ANNOUNCE BAR — Premium dark with clear dismiss X
   ═══════════════════════════════════════════════════════════════════════════════ */
.announce-bar {
  background: linear-gradient(90deg, #0c3d2a 0%, #14532d 50%, #0c3d2a 100%) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.01em !important;
}
.announce-bar-cta {
  color: #4ade80 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
/* Visible, tap-friendly dismiss X — premium rounded button */
.announce-bar-dismiss {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  border-radius: 8px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  right: 0.5rem !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  cursor: pointer !important;
}
.announce-bar-dismiss:hover {
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: scale(1.05) !important;
}
/* Mobile dismiss — full 44px touch target */
@media (max-width: 600px) {
  .announce-bar-dismiss {
    font-size: 0.95rem !important;
    width: 32px !important;
    min-width: 44px !important;
    height: 32px !important;
    min-height: 44px !important;
    right: 0.25rem !important;
    border-radius: 6px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   4. WIDE DESKTOP — Extra breathing room
   ═══════════════════════════════════════════════════════════════════════════════ */
/* 1024px+ */
@media (min-width: 1024px) {
  .nav-brand-row {
    padding: 0 2.5rem !important;
  }
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.875rem !important;
  }
}
/* 1280px+ */
@media (min-width: 1280px) {
  .nav-brand-row {
    padding: 0 clamp(2.5rem, 3vw, 3.5rem) !important;
  }
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.9rem !important;
    gap: 5px !important;
  }
  .nav-upgrade-btn {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.88rem !important;
  }
}
/* 1920px+ */
@media (min-width: 1920px) {
  .nav-brand-row {
    padding: 0 4.5rem !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
  }
  .nav-nav-row button,
  .nav-nav-row .btn.btn-secondary {
    padding: 0.5rem 1rem !important;
    font-size: 0.925rem !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   5. MOBILE MENU BACKDROP OVERLAY
   ═══════════════════════════════════════════════════════════════════════════════ */
.nav-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 89;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: mobileMenuBackdropIn 0.25s ease;
}
.nav-mobile-backdrop.open {
  display: block;
}
/* ═══════════════════════════════════════════════════════════════════════════════
   6. PRINT — Hide nav entirely
   ═══════════════════════════════════════════════════════════════════════════════ */
@media print {
  #mainNav,
  .announce-bar,
  .nav-mobile-menu,
  .nav-mobile-backdrop {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   7. OVERRIDE INLINE STYLE CONFLICTS
   These rules override the many competing inline <style> blocks in layout-head.ejs
   that were written before this premium redesign and still set conflicting values.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Override inline mobile accordion button color overrides (dark theme colors) */
.nav-mobile-accordion-btn--products,
.nav-mobile-accordion-btn--consumers,
.nav-mobile-accordion-btn--guides,
.nav-mobile-accordion-btn--community {
  color: #1e293b !important;
}
/* Override inline mobile link color overrides (dark theme) */
.nav-mobile-link--consumer,
.nav-mobile-link--guide,
.nav-mobile-link--community,
.nav-mobile-link--paid {
  color: #374151 !important;
}
/* Keep the green highlight for key items but use proper light-theme green */
.nav-mobile-link--consumer:hover,
.nav-mobile-link--guide:hover,
.nav-mobile-link--community:hover,
.nav-mobile-link--paid:hover {
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.04) !important;
}
/* Sublabel overrides — all should be muted gray in light theme */
.nav-mobile-sublabel--consumers,
.nav-mobile-sublabel--guides,
.nav-mobile-sublabel--community {
  color: #94a3b8 !important;
}
/* Mobile price tags stay amber for emphasis */
.nav-mobile-price-tag {
  color: #92400e !important;
  background: #fffbeb !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
  margin-left: 0.35rem !important;
}
/* Go Pro in nav row 2 — compact version */
.nav-upgrade-btn--row2 {
  font-size: 0.78rem !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 7px !important;
  margin-right: 0.5rem !important;
  height: auto !important;
  min-height: auto !important;
  align-self: center !important;
}
/* Logo size overrides — keep consistent with Task #776317 for inline styles */
@media (min-width: 901px) {
  .nav-logo {
    font-size: 1.125rem !important;
    gap: 0.625rem !important;
  }
  .nav-logo-text {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
  .radar-icon {
    width: 36px !important;
    height: 36px !important;
  }
}
@media (max-width: 900px) {
  .nav-logo {
    font-size: 1.05rem !important;
  }
  .nav-logo-text {
    font-size: 1.05rem !important;
  }
  .radar-icon {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 600px) {
  .nav-logo-text {
    font-size: 0.95rem !important;
  }
}
@media (max-width: 375px) {
  .nav-logo-text {
    font-size: 0.88rem !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION — Respect user preferences
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #mainNav,
  .nav-upgrade-btn,
  .nav-mobile-menu,
  .mega-panel,
  .nav-hamburger span,
  .nav-mobile-backdrop {
    transition: none !important;
    animation: none !important;
  }
  .nav-nav-row button::after,
  .nav-nav-row .btn.btn-secondary::after {
    transition: none !important;
  }
}