/* One grid surface for the menu and hero, anchored at the top-left of the page. */
:root{--eec-header-height:84px;--eec-grid-size:64px}
@media(max-width:1100px){:root{--eec-header-height:76px}}
@media(max-width:960px){:root{--eec-grid-size:48px}}
@media(max-width:640px){:root{--eec-header-height:72px;--eec-grid-size:40px}}

/* Pages without a hero retain a light grid behind their navigation. */
body #site-header{background:#fff!important}
body #site-header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,#e9ebef 1px,transparent 1px),linear-gradient(to bottom,#e9ebef 1px,transparent 1px);background-size:var(--eec-grid-size) var(--eec-grid-size);background-position:0 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}

/* A transparent header reveals the same layer as the hero, never a second grid. */
body:has(.eec-unified-top,.pgr-hero,.xbr-hero,.art-head,.post-hero,.legal-content,.nf-code) #site-header{background:transparent!important}
body:has(.eec-unified-top,.pgr-hero,.xbr-hero,.art-head,.post-hero,.legal-content,.nf-code) #site-header::before{content:none}
body:has(.pgr-hero,.xbr-hero,.art-head,.post-hero){background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;background-size:100% var(--eec-header-height)}

.eec-unified-top{position:relative;background:#fff}
body:has(.legal-content,.nf-code)::before,
body .eec-unified-top::before,
body #main-content.pricing-reference .pgr-bg-grid,
body #main-content.extra-batches-reference .xbr-bg-grid,
body #main-content .art-head::before,
body #main-content .post-hero::before{
 content:'';position:absolute;inset:0;width:auto;height:auto;max-height:none;z-index:-1;pointer-events:none;
 background-image:linear-gradient(to right,#e9ebef 1px,transparent 1px),linear-gradient(to bottom,#e9ebef 1px,transparent 1px);
 background-size:var(--eec-grid-size) var(--eec-grid-size);background-position:0 0;
 -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,transparent 0%,transparent 38%,#000 72%,transparent 100%);
 mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,transparent 0%,transparent 38%,#000 72%,transparent 100%);
 -webkit-mask-composite:source-over;mask-composite:add;
}
body .eec-unified-top::before{z-index:0}
.eec-unified-top .eec-page-intro,
.eec-unified-top .eec-page-intro>section{background:transparent}
.eec-unified-top .eec-page-intro{position:relative;z-index:1}
.eec-unified-top .eec-page-intro>section::before,
.eec-unified-top .eec-page-intro>section::after{content:none}

/* Direct-main heroes extend their one background up by the exact menu height.
   Their text and cards stay in place; no duplicate surface at the seam. */
body #main-content:is(.pricing-reference,.extra-batches-reference) :is(.pgr-hero,.xbr-hero),
body #main-content :is(.art-head,.post-hero){position:relative;isolation:isolate;overflow:visible;background:#fff}
body #main-content.pricing-reference .pgr-bg-grid,
body #main-content.extra-batches-reference .xbr-bg-grid,
body #main-content .art-head::before,
body #main-content .post-hero::before{top:calc(-1 * var(--eec-header-height))}

/* Keep blog headings readable on the same light surface as the rest of the site. */
body #main-content .post-hero{color:#0b0d12}
body #main-content .post-hero h1{background:none;color:#0b0d12;-webkit-text-fill-color:currentColor}
body #main-content .post-hero-meta{color:#5b6170}
body #main-content .post-category-badge{background:#f3f4f6;color:#3f4552;border-color:#e3e5ea}

.eec-unified-top .eec-contact-intro{padding-bottom:0}
.eec-unified-top .contact-head{margin-bottom:0;padding-bottom:44px}
.eec-unified-top+main .eec-contact-body{padding-top:0;background:#fff}
.eec-unified-top+main .eec-contact-body::before{content:none}
.eec-unified-top+main.pricing-refresh{background:#fff}

/* Legal and utility pages have no separate hero. Use one full-width surface
   behind their menu and heading, fading out before the document body. */
body:has(.legal-content,.nf-code){position:relative;isolation:isolate;background:#fff}
body:has(.legal-content,.nf-code)::before{bottom:auto;height:360px}