/* Guards for the full-fidelity Webflow mirror pages (mirror-page.mjs).
   The mirrored DOM reuses class names that also exist in our design system
   (.section, …). Inside the mirror root, OUR globals step aside so the
   vendored Webflow CSS owns the page exactly as on live — e.g. live's dark
   sections paint via an absolutely-positioned overlay at z-index:-2, which
   only shows because live's .section background is transparent.

   ⚠ Cascade contract (LocalizedStaticPage/LandingPage pageCss order): this
   file is linked AFTER the inlined site.css but BEFORE the vendored Webflow
   CSS, and its guards stay at specificity 0,1,0 via :where(). That way a
   guard beats our globals purely by source order, while any vendor rule of
   equal specificity (e.g. the dark-hero `.section:where(.w-variant-…)
   {background-color:…}`) still beats the guard. A higher-specificity guard
   here (like the old `.p-es-mirror .section`) silently erases live's black
   section backgrounds (Martin, 2026-08-06: "black bg is not being copied"). */

/* Live's black bands are absolutely-positioned overlays at z-index:-2
   (.section__overlay--wrap, .u-dark__overlay). On live they escape to the
   ROOT stacking context and paint just above the body/canvas white. Here,
   .site-main's page-enter animation fills a transform (a stacking context
   that traps them), and the scoped body rule turns live's canvas white into
   an IN-FLOW background on .p-es-mirror — which per CSS painting order
   paints ABOVE negative-z descendants, hiding every dark band under white.
   isolation:isolate makes the mirror root its own stacking context, so its
   background paints first, then the negative-z overlays, then content —
   the exact live order (Martin, 2026-08-06: "black bg is not being copied"). */
.p-es-mirror {
  isolation: isolate;
}

:where(.p-es-mirror) .section {
  background: transparent;
  color: inherit;
}

/* our chrome's dark-band utilities share names with live classes — hand
   them back to the vendor CSS the same way (order wins, never specificity) */
:where(.p-es-mirror) .section--dark,
:where(.p-es-mirror) .section--rich {
  background: transparent;
  color: inherit;
}

/* re-mounted create-kind HubSpot form (live's inline script was stripped) */
.p-es-mirror .es-mirror__form {
  max-width: 720px;
  margin: 64px auto 96px;
  padding: 0 24px;
}