/* Phone header. On narrow screens the sticky header is two rows at the top of the page
   (logo, Log in, Get started, then the nav as one scrolling line) and collapses to a slim
   60 px bar (logo, Log in, Get started) once the reader has scrolled past the hero.
   hdr.js adds .df-hdr and toggles .df-slim. explode.js pins its stage under 60 px on these
   widths (SLIM there must match --df-hdr-slim). Desktop is not touched. */
:root{--df-hdr-slim:60px}
@media (max-width:900px){
  html{scroll-padding-top:68px}
  header.df-hdr > div{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px 10px !important;padding:8px 16px !important;box-sizing:border-box}
  header.df-hdr > div > a:first-child{order:1;margin-right:auto}
  header.df-hdr img{height:36px !important;width:auto}
  header.df-hdr .dfh-login{order:2;padding:8px 12px !important;font-size:13.5px !important;white-space:nowrap}
  header.df-hdr a[href*="/signup"]{order:3;padding:9px 14px !important;font-size:13.5px !important;white-space:nowrap}
  header.df-hdr nav{order:4;flex:1 0 100% !important;margin:0 !important;display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:20px !important;
    white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;font-size:14px !important}
  header.df-hdr nav::-webkit-scrollbar{display:none}
  header.df-hdr nav a{flex:0 0 auto;padding:4px 0}
  header.df-hdr.df-slim > div{flex-wrap:nowrap !important;height:calc(var(--df-hdr-slim) - 1px);padding-top:0 !important;padding-bottom:0 !important}
  header.df-hdr.df-slim nav{display:none !important}
  header.df-hdr.df-slim img{height:32px !important}
}

/* Desktop header (Sam, 2026-10-08: "spacing is off, not symmetrical"). Labels never wrap, one
   gap value between links, the nav is centred between the logo and the buttons, and everything
   shares one vertical centre. As the window narrows, lower priority links fold into a "More"
   menu: Questions and Coverage (class p3) go first, then Sample parcel and For brokerages (p2).
   At 900 px and below the phone header above takes over and shows every link in its scroll row. */
header nav.df-nav{--df-nav-gap:22px;flex:1 1 auto !important;justify-content:center !important;gap:var(--df-nav-gap) !important;margin-left:0 !important;min-width:0;white-space:nowrap}
header nav.df-nav a,header nav.df-nav summary{white-space:nowrap;line-height:1.2}
header nav.df-nav a{padding:6px 0}
header > div{gap:24px !important}
header > div > a.dfh-login,header > div > a[href*="/signup"]{white-space:nowrap}
.df-more{display:none;position:relative}
.df-more summary{list-style:none;cursor:pointer;font-family:Montserrat,'Public Sans',Helvetica,Arial,sans-serif;font-weight:500;color:#1B2124;padding:6px 0;display:flex;align-items:center;gap:6px}
.df-more summary::-webkit-details-marker{display:none}
.df-more summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.df-more[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.df-more summary:focus-visible{outline:2px solid #46661F;outline-offset:3px}
.df-more-menu{position:absolute;top:calc(100% + 14px);right:-12px;min-width:190px;display:flex;flex-direction:column;background:#FAF9F5;border:1px solid rgba(27,33,36,.16);border-radius:4px;box-shadow:0 10px 28px rgba(27,33,36,.14);padding:6px}
.df-more-menu a{padding:10px 12px !important;border-radius:3px;display:block}
.df-more-menu a:hover{background:rgba(27,33,36,.06)}
.df-more-menu a.df-m2,.df-more-menu a.df-m3,.df-more-menu a.df-m4{display:none}
@media (min-width:901px) and (max-width:1239px){
  header nav.df-nav a.df-p3{display:none}
  .df-more-23{display:block}
  .df-more-menu a.df-m3{display:block}
}
@media (min-width:901px) and (max-width:1119px){
  header nav.df-nav a.df-p2{display:none}
  .df-more-menu a.df-m2{display:block}
}
@media (max-width:900px){
  .df-more{display:none !important}
}
/* Generated pages (tools_seo/lib.py) carry five links; Topo maps and Coverage (p4) fold into More below 1020 px. */
@media (min-width:901px) and (max-width:1019px){
  header nav.df-nav a.df-p4{display:none}
  .df-more-4{display:block}
  .df-more-menu a.df-m4{display:block}
}