/* Compare hub (post 2902) — audit fixes vs production.
   Loads after style.css (which holds the original build's [data-id] rules),
   so these !important overrides win on cascade order. Only the deltas are
   listed here; unchanged rules stay in style.css. */

/* 1) Hero was missing production's owl-silhouette background image
   (.owl-head-bg in content-compare.php: background-image + bg-position 0 50%,
   no-repeat, layered under the navy bg-secondary color). Also add the
   min-h-[350px] floor production enforces (hero rendered ~306px vs 350px). */
[data-id="a774087"]{
  background-image:url('../images/page-banner-owl.png') !important;
  background-repeat:no-repeat !important;
  background-position:0px 50% !important;
  background-size:auto !important;
  min-height:350px !important;
}

/* 2) Hero paragraph: production's "text-white/80" Tailwind class never made
   it into the compiled stylesheet (no .text-white\/80 rule exists), so the
   real rendered color on production is solid opaque white, not 80%-alpha. */
[data-id="d7ebb40"] p{ color:#FFFFFF !important; }

/* 3) "See How WizeFulfill Compares" heading: production is responsive
   (text-3xl / lg:text-4xl = 30px mobile, 36px at the 1024px lg breakpoint),
   not a flat 34px. */
[data-id="5b04a8e"] .elementor-heading-title{ font-size:30px !important; }
@media (min-width:1024px){
  [data-id="5b04a8e"] .elementor-heading-title{ font-size:36px !important; }
}

/* 4) "Compare Extensiv" card link: production's inline style uses #E8614A
   for this specific link, not the site's usual CORAL (#E76152) — confirmed
   via getComputedStyle on production (rgb(232,97,74)). */
[data-id="65a2544"] .elementor-heading-title{ color:#E8614A !important; }

/* 5) Cards section & closing CTA band: production derives horizontal padding
   from the shared .container utility (80px default, 24px at max-width:640px),
   not a flat 40px used by the build. Hero already used 80px so only needs the
   mobile override; cards/closing band need both tiers corrected. */
[data-id="be9d446"]{ padding:80px 80px !important; }
[data-id="d255b89"]{ padding:64px 80px !important; }
@media (max-width:640px){
  [data-id="a774087"]{ padding:32px 24px !important; }
  [data-id="be9d446"]{ padding:80px 24px !important; }
  [data-id="d255b89"]{ padding:64px 24px !important; }
}

/* 6) Decorative coral blob: the build only ever shows it at >=1024px
   (display:none below that). Production's blob (a Tailwind-classed <span>)
   is visible at every breakpoint, just resized/repositioned:
   mobile: 320x208, bottom:40px, right:-40px
   >=768px (md): widens to 448px
   >=1024px (lg): grows to 256px tall and re-centers vertically (existing
   1024px rule already sets display/top/transform; add the matching
   height/bottom overrides here so it doesn't conflict with the mobile tier). */
[data-id="a774087"]::after{
  display:block !important;
  width:320px !important;
  height:208px !important;
  bottom:40px !important;
}
@media (min-width:768px){
  [data-id="a774087"]::after{ width:448px !important; }
}
@media (min-width:1024px){
  [data-id="a774087"]::after{
    height:256px !important;
    bottom:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}

/* Hero dashboard image — production's max-h-72 = 288px applies to the <img>
   itself; the build put max-height on the wrapper only, so the <img> rendered
   full-size and pushed the text column to ~40% width. */
[data-id="7b502de"] img{max-height:288px !important;width:auto !important;object-fit:contain !important;}
[data-id="7b502de"]{flex:0 1 auto !important;overflow:hidden !important;}

/* ── Visual-parity vs production (2026-07-30) — Compare hub ── */
[data-id="5b04a8e"] .elementor-heading-title{line-height:40px !important;}
[data-id="d23bb40"] .elementor-heading-title{line-height:51px !important;}
[data-id="65a2544"] .elementor-heading-title,[data-id="65a2544"] p{line-height:22.5px !important;}
[data-id="e9cbf57"] .elementor-heading-title{line-height:36px !important;margin-bottom:8px !important;}