/* scoped reset replicating Tailwind preflight — printed BEFORE the captured page CSS
   (real Tailwind preflight sits at the START of the cascade; printing it after the
   page css would zero every `border:1px solid …` the capture declares — home2 borders bug). */
.cgi-iap *,.cgi-iap *::before,.cgi-iap *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
/* the rest of the framework overrides stay AFTER the page css (they must win over it). */
/* beat Kadence's .entry-content typography margins (0,1,1) for non-utility elements;
   the Tailwind utilities are generated with important:true so they still win over this. */
body.cgi-iap-page :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol){margin:0}
/* Tailwind-preflight heading neutralization (same trick as home2.css): zero specificity so ANY classed rule wins, but beats Kadence's h1-h6 sizes by order */
:where(body.cgi-iap-page) :is(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}
/* WP/Kadence core styles `.gallery` as a grid — the captured prod pages use a plain block .gallery component */
.cgi-iap .gallery{display:block;grid-template-columns:none}
/* healthcare/toys captures: prod's base line-height is 1.5 (Kadence body is 1.6) */
:is(body.page-id-12096,body.page-id-12097) .cgi-iap{line-height:1.5}
/* pricelist pages: prod's mobile trust strip is an inset card -> the 21-logo wall wraps 2-up */
@media(max-width:639px){:is(.page-id-10924,.page-id-10925,.page-id-10926) .cgi-iap div.max-w-6xl{max-width:280px!important}}
/* Tailwind typography plugin (.prose / 2xl:prose-lg) — the tw-CLI capture never generated it */
.cgi-iap .prose{max-width:65ch}
.cgi-iap .prose :is(p,ul,ol){margin-top:1.25em;margin-bottom:1.25em;font-size:1rem;line-height:1.75}
.cgi-iap .prose ul{list-style:disc;padding-left:1.625em}
.cgi-iap .prose ol{list-style:decimal;padding-left:1.625em}
.cgi-iap .prose li{margin-top:.5em;margin-bottom:.5em;display:list-item}
.cgi-iap .prose :is(b,strong){font-weight:700}
.cgi-iap .prose :is(h2,h3,h4){font-weight:700;margin-top:1.6em;margin-bottom:.6em}
@media(min-width:1536px){.cgi-iap .prose :is(p,ul,ol){font-size:1.125rem;margin-top:1.333em;margin-bottom:1.333em}.cgi-iap .prose li{font-size:1.125rem;margin-top:.667em;margin-bottom:.667em}}
body.cgi-iap-page{font-size:1rem}
body.cgi-iap-page :is(ul,ol){list-style:none;padding:0}
:where(.cgi-iap) img,:where(.cgi-iap) svg,:where(.cgi-iap) video{display:block;max-width:100%}
:where(body .cgi-iap a){color:inherit!important;text-decoration:none}
body.cgi-iap-page .cgi-iap :is(h1,h2,h3,h4,h5,h6){color:inherit}
:where(.cgi-iap) button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
:where(.cgi-iap) table{border-collapse:collapse}
.cgi-iap .pt-header{padding-top:5rem}
/* match prod: last section (FAQ) ends 96px above the footer, not 128px
   (healthcare/toys pages carry their own captured padding overrides — leave them alone) */
body.cgi-iap-page:not(.page-id-12096):not(.page-id-12097) #faq{padding-bottom:6rem!important}
/* full-width content (Kadence otherwise constrains .entry-content) */
body.cgi-iap-page .entry-content,body.cgi-iap-page .entry-content-wrap,body.cgi-iap-page .content-container,body.cgi-iap-page .site-main,body.cgi-iap-page #primary,body.cgi-iap-page .content-area,body.cgi-iap-page article.entry{max-width:none!important;width:auto!important;padding:0!important;margin:0!important}
body.cgi-iap-page .entry-content > p:empty{display:none}
/* scheduler calendar: prod keeps disabled days at full opacity (gray color does the muting) */
body.cgi-iap-page button.cal-day:disabled,body.cgi-iap-page .cal-day[disabled]{opacity:1!important}
/* dark-hero captures: transparent header at top uses white nav text + white logo (prod parity) */
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-navigation a,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-menu-container a,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) nav a,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) button:not(.cgi-theme-toggle){color:rgba(255,255,255,.9)!important}
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .cgi-theme-toggle{color:rgba(255,255,255,.9)!important}
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .site-branding img{filter:brightness(0) invert(1)}
/* the dropdown/mega-menu panel is WHITE — its links must stay dark even when the top nav is white */
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-navigation .cgi-mega-panel a,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-menu-container .cgi-mega-panel a,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) nav .cgi-mega-panel a,
body.cgi-hero-dark-iap #masthead .cgi-mega-panel a,body.cgi-hero-dark-iap #masthead .cgi-mega-panel .cgi-mega-title,
body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-navigation .sub-menu a,
body.cgi-hero-dark-iap #masthead .sub-menu a{color:#171717!important}
/* ...but in dark mode that panel is dark too. Mirror every selector above with a
   html.cgi-dark prefix — a shorter selector loses to the :not()/.header-navigation ones. */
html.cgi-dark body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-navigation .cgi-mega-panel a,
html.cgi-dark body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-menu-container .cgi-mega-panel a,
html.cgi-dark body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) nav .cgi-mega-panel a,
html.cgi-dark body.cgi-hero-dark-iap #masthead .cgi-mega-panel a,
html.cgi-dark body.cgi-hero-dark-iap #masthead .cgi-mega-panel .cgi-mega-title,
html.cgi-dark body.cgi-hero-dark-iap #masthead:not(.cgi-hdr-fixed) .header-navigation .sub-menu a,
html.cgi-dark body.cgi-hero-dark-iap #masthead.cgi-hdr-overhero .sub-menu a,
html.cgi-dark body.cgi-hero-dark-iap #masthead .sub-menu a{color:#f5f5f5!important}