/* Force a light color-scheme on this page and the Instant Roofer iframe
   so the embed does not inherit a dark OS preference. The calculator's
   own text/background colors still come from Instant Roofer's dashboard. */
body.ir-page, body.ir-page iframe { color-scheme: light; }

/* Instant Roofer calculator page. Hide the financing plaque and leave
   room so the Ask AI launcher never covers the iframe or the NEXT button
   on mobile, including the mid-scroll view with the ballpark note still
   on screen. */
body.ir-page .fin-pill,body.ir-page .est-pill{display:none!important}

.ir-wrap{max-width:720px}
.ir-ballpark{margin:0 0 1.5rem;padding:1rem 1.15rem;background:#fff6e0;border:1px solid #e0c56c;color:#3b3418;font-size:1.05rem;line-height:1.55}
.ir-ballpark strong{color:#3b3418}
.ir-embed-wrap{margin:1.75rem auto 1.5rem;max-width:345px}
.ir-embed-wrap iframe{display:block;width:100%;max-width:345px;height:650px;min-height:650px;margin-left:auto;margin-right:auto;border:none;background:#fff;aspect-ratio:0.53;box-sizing:content-box;overflow:clip}
.ir-fallback{margin:0 0 0.5rem}

/* Consent notice sits directly under the iframe (inside .ir-embed-wrap so
   mobile padding-bottom stays below it, not as a gap above it). */
.ir-consent-notice{margin:.75rem 0 0;color:#2a2a2a;font-size:.92rem;line-height:1.45}
.ir-consent-notice a{color:#1d6ccb;text-decoration:underline}
@media (max-width:320px){
  .ir-consent-notice{margin:.55rem 0 0;font-size:.86rem;line-height:1.4}
}

/* Desktop: room for the Ask AI launcher under the iframe. */
@media (min-width:861px){
  body.ir-page{padding-bottom:120px}
  .ir-embed-wrap{padding-bottom:24px}
}

/* Small screens: compact the intro so NEXT sits above Ask AI when the
   ballpark note is still on screen, add extra bottom padding, and
   side-offset the launcher toward the left so it cannot cover the
   right edge of NEXT. */
@media (max-width:860px){
  body.ir-page{padding-bottom:calc(220px + env(safe-area-inset-bottom, 0px))}
  body.ir-page .hero-min{padding-top:1.15rem;padding-bottom:1.15rem}
  body.ir-page .hero-min .lead{margin-top:.7rem}
  body.ir-page .sec{padding-top:1.1rem;padding-bottom:1.1rem}
  .ir-ballpark{margin:0 0 .85rem;padding:.75rem .9rem;font-size:1rem;line-height:1.45}
  .ir-embed-wrap{margin:1rem auto 1.25rem;padding-bottom:calc(220px + env(safe-area-inset-bottom, 0px))}
  body.ir-page .trc-l{left:12px;right:auto}
}
@media (max-width:390px){
  body.ir-page{padding-bottom:calc(228px + env(safe-area-inset-bottom, 0px))}
  .ir-embed-wrap{padding-bottom:calc(228px + env(safe-area-inset-bottom, 0px))}
  .ir-embed-wrap iframe{max-width:100%;min-height:650px}
  body.ir-page .trc-l{left:8px;right:auto}
}

/* 320x720: compact the intro and add padding so mid-scroll NEXT sits
   above the fixed Call Now bar instead of under it. */
@media (max-width:320px){
  body.ir-page{padding-bottom:calc(240px + env(safe-area-inset-bottom, 0px))}
  body.ir-page .hero-min{padding-top:.7rem;padding-bottom:.7rem}
  body.ir-page .hero-min .lead{margin-top:.45rem;font-size:.92rem}
  body.ir-page .sec{padding-top:.5rem;padding-bottom:.5rem}
  .ir-ballpark{margin:0 0 .4rem;padding:.45rem .6rem;font-size:.86rem;line-height:1.3}
  body.ir-page .ir-wrap > p:not(.ir-ballpark){font-size:.86rem;line-height:1.35;margin:0 0 .4rem}
  .ir-embed-wrap{margin:.45rem auto .85rem;padding-bottom:calc(240px + env(safe-area-inset-bottom, 0px))}
  .ir-embed-wrap iframe{min-height:650px}
  body.ir-page .trc-l{left:8px;right:auto;bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}