/* July 2026 design-bug fixes — final override layer, load LAST */

/* 1. trust-strip: a later .trust-strip{grid;5 cols} rule (amazing-hero block) hijacks the
   homepage strip, squeezing .wrap into 1/5 width and overflowing the viewport. Restore. */
section.trust-strip{display:block!important;grid-template-columns:none!important;margin-top:0!important;gap:0!important;overflow:hidden}
section.trust-strip>.wrap{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px;padding:18px 22px}
@media(max-width:980px){section.trust-strip>.wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){section.trust-strip>.wrap{grid-template-columns:1fr!important}}
.trust-item{background:#fff;border:1px solid #e8dfcf;border-radius:16px;padding:14px;min-width:0}
.trust-item span,.trust-item b{background:transparent!important;border-radius:0}
.trust-item b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#0a5f59;margin-bottom:2px}

/* 2. disclosure bar: three conflicting !important themes (light gold, dark green, brown text)
   produced dark bg + brown text. Settle on one readable light theme everywhere. */
.disclosure-bar,.premium-disclosure,.disclosure-bar.premium-disclosure{background:#fff8e7!important;border-bottom:1px solid #ecd89e!important;color:#664714!important;padding:0!important}
.disclosure-bar .wrap,.premium-disclosure .wrap,.disclosure-bar p,.disclosure-bar span{color:#664714!important;background:transparent!important;font-size:.82rem!important;font-weight:700!important;line-height:1.5!important;text-align:center!important;padding:10px 22px!important;margin:0 auto!important;max-width:1180px}
@media(max-width:560px){.disclosure-bar .wrap,.disclosure-bar span{font-size:.72rem!important;padding:8px 16px!important}}

/* 3. horizontal overflow guards: any rogue grid can no longer push the page sideways */
html,body{overflow-x:hidden}
.wrap{min-width:0}
main img,main canvas{max-width:100%}

/* 4. July update banner: previous inline nowrap span clipped text off-canvas */
.july-banner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-left:3px solid #0f766e;background:#e6f1ef;border-radius:16px;padding:16px 18px;margin:18px 0}
.july-banner .jb-text{flex:1 1 420px;min-width:0;color:#3b4a63;font-size:.95rem;line-height:1.6}
.july-banner .jb-cta{flex:0 0 auto}
.july-banner .btn{width:auto;white-space:nowrap}

/* 5. sticky table headers were pinning under the sticky topbar mid-scroll on long tables;
   confine sticky to table scroll containers so headers can't overlap page chrome */
.cmp th,.comparison-table th,.tp-table th,.complete-table th{position:sticky;top:0!important}
.tbl-scroll,.table-wrap,.tp-table-wrap{max-height:none}

/* 6. consistent primary CTA (teal, not clashing gold gradient) for report/blog buttons */
a.btn.btn-primary{background:linear-gradient(135deg,#0f766e,#0a5f59)!important;color:#fff!important;box-shadow:0 10px 22px rgba(15,118,110,.18)!important}
a.btn.btn-primary:hover{background:#0a5f59!important;color:#fff!important}

/* 7. chart canvases inside .card need breathing room and no hover-lift jitter */
.card:has(canvas){transform:none!important}
.card canvas{margin:4px 0}

/* 8. byline chip wrap on narrow screens (updated pill was overflowing) */
.byline{min-width:0}.byline .updated{max-width:100%;white-space:normal;text-align:center}

/* 9. footer link columns: prevent long labels breaking the grid */
.footer-grid{grid-template-columns:1.3fr 1fr 1.1fr 1fr 1fr}
.footer li{overflow-wrap:anywhere}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr!important}}

/* 10. harmonize ultra layer with the topbar design system: ultra's global .hero padding
   stacked on hero-inner padding produced a huge empty band above the fold. */
.hero{padding:0!important}
section.hero{padding:0!important}
/* ultra's flat .section padding must not apply outside ultra-family bodies' own sections */
main>section{padding:46px 0}
/* keep the July banner tight against the hero */
main>section:first-child{padding:18px 0 0}

/* ================================================================
   11. HAMBURGER / MOBILE NAV — definitive override (loads last)
   Eliminates the 880px vs 1080px vs 860px three-system conflict.
   All states controlled at ONE breakpoint: 1080px.
   ================================================================ */

/* Button: hidden on desktop, flex on mobile */
.hamb, .premium-hamb {
  display: none !important;
}
@media (max-width: 1080px) {
  .hamb, .premium-hamb {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(207,218,214,.8) !important;
    position: relative;
    z-index: 1010 !important;
  }
}

/* Desktop nav: visible on desktop, hidden on mobile */
@media (max-width: 1080px) {
  .nav.premium-nav {
    display: none !important;
  }
}

/* Mobile nav base: always hidden */
.mobile-nav,
.premium-mobile-nav {
  display: none !important;
}

/* Mobile nav OPEN state — only on mobile */
@media (max-width: 1080px) {
  .mobile-nav.open,
  .premium-mobile-nav.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    z-index: 1005 !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100vh - 88px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(207,218,214,.9) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.20) !important;
    padding: 10px !important;
    gap: 0 !important;
  }

  .mobile-nav.open a,
  .premium-mobile-nav.open a {
    display: block !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    color: #16243b !important;
    font-size: .93rem !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
    transition: background .12s ease !important;
    margin: 0 !important;
  }

  .mobile-nav.open a:hover,
  .premium-mobile-nav.open a:hover,
  .mobile-nav.open a:active,
  .premium-mobile-nav.open a:active {
    background: #e6f1ef !important;
    color: #0a5f59 !important;
  }

  .mobile-nav.open .mobile-cta,
  .premium-mobile-nav.open .mobile-cta {
    background: linear-gradient(135deg, #0f766e, #0a5f59) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
    font-weight: 700 !important;
  }

  .mobile-nav.open .mobile-cta:hover,
  .premium-mobile-nav.open .mobile-cta:hover {
    background: #0a5f59 !important;
    color: #fff !important;
  }
}

/* Hamburger icon lines — animated X when open */
.hamb span, .premium-hamb span {
  display: block;
  width: 20px;
  height: 2px;
  background: #16243b;
  position: relative;
  transition: background .2s ease;
  border-radius: 2px;
}
.hamb span::before,
.hamb span::after,
.premium-hamb span::before,
.premium-hamb span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #16243b;
  border-radius: 2px;
  transition: top .2s ease, transform .2s ease, background .2s ease;
}
.hamb span::before,
.premium-hamb span::before { top: -6px; }
.hamb span::after,
.premium-hamb span::after  { top:  6px; }

/* X state when open (aria-expanded="true") */
.hamb[aria-expanded="true"] span,
.premium-hamb[aria-expanded="true"] span { background: transparent; }
.hamb[aria-expanded="true"] span::before,
.premium-hamb[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamb[aria-expanded="true"] span::after,
.premium-hamb[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Body lock when menu open */
body.body-menu-open { overflow: hidden !important; }