/* Band-level prose only: existing 730px reading measure; split/card contents untouched. */
html body main .bvg-body > .bvg-sec > :is(h2,h3,p),
html body main.bvg-body > .bvg-sec > :is(h2,h3,p),
html body main .bb-band > .bb-wrap > :is(h2,h3,p),
html body main .bvg-sec > .bvg-reviewproof-head > :is(h2,h3,p) {
  width: min(100%, var(--measure, 730px)) !important;
  max-width: var(--measure, 730px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Additional R329 correction, based on saved release25 DOM measurements.
   Direct band prose stays on the existing 730px reading measure with 16px phone gutters.
   Negative inline margins bridge wider band padding; card/split descendants are excluded.
   Existing vertical rhythm, text alignment, cards, images, forms and grids are preserved. */
html body main > .bvg-sec[class] > :is(h2,h3,p),
html body main :is(.bvg-body,.bb-body) > .bvg-sec[class] > :is(h2,h3,p),
html body main .bb-band > .bb-wrap[class] > :is(h2,h3,p),
html body main :is(.bvg-body,.bb-body)[class] > :is(h2,h3,p),
html body main > article.bvg-post.bvg-blogwrap > :is(h2,h3,p),
html body main > article.bvg-post.bvg-blogwrap > section.bvg-faq > :is(h2,h3,p),
html body main .bb-band > .bb-wrap > .bb-dir-more > :is(h2,h3,p),
html body main :is(.bvg-body,.bb-body) > .bvg-sec > .bvg-review-band > :is(h2,h3,p),
html body main :is(.bvg-body,.bb-body) > .bvg-reviewproof[class] > :is(h2,h3,p),
html body main :is(.bvg-body,.bb-body) > .bvg-reviewproof[class] > .bvg-reviewproof-head {
  width: min(var(--measure,730px),calc(100vw - 32px)) !important;
  max-width: min(var(--measure,730px),calc(100vw - 32px)) !important;
  margin-left: calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2) !important;
  margin-right: calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2) !important;
  box-sizing: border-box;
}
/* The three landing-page CTA summaries are the sole narrow band paragraphs
   among otherwise shared full-width band heading boxes. Preserve their page's own measure. */
html:has(link[rel="canonical"][href^="https://www.4seasons-construction.com/lp/"]) body main > section.sec.final > .wrap > p {
  max-width: none;
}
/* fs-sprint-1001 — Website Checklist live-render fixes (hamza/Claude 2026-10-01). Loaded after fs-reading-edge. */
/* R382: mobile sticky call bar must never sit at opacity 0 when the entrance animation does not run */
@keyframes bvg-rise{0%{transform:translateY(12px)}to{transform:translateY(0)}}
/* R374: services hub card grid was 3 x 93px columns with clipped text on phones */
@media (max-width:860px){html body .bb-page .bb-svc-cards{grid-template-columns:minmax(0,1fr)!important}}
/* R329: page byline text sat flush to the screen edge at 375; give it the shared reading measure */
html body main > .bvg-byline{box-sizing:border-box;width:min(var(--measure,730px),calc(100vw - 32px));max-width:none;margin-left:auto;margin-right:auto}
/* R384: footer GBP card only renders the populated card at >=320px tall */
html body .bvg-footer-map iframe{height:320px}
/* R384 phones: the Google card only paints when the frame is >=~480px wide, so render the 480x320 frame scaled down inside the footer column */
@media (max-width:520px){html body .bvg-footer-map{overflow:hidden;border-radius:var(--r-sm)}html body .bvg-footer-map iframe{display:block;width:480px;max-width:none;height:320px;transform:scale(.68);transform-origin:0 0;margin-bottom:-102px}}
@media (max-width:357px){html body .bvg-footer-map iframe{transform:scale(.58);margin-bottom:-134px}}
/* R472: service-areas band left a 356-561px empty column beside the maps on desktop; stack ONLY the bands that have the 2-map pair (city, service x city) or the short home band; service/hub bands are balanced and stay 2-col */
@media (min-width:861px){html body .bb-page .bb-areas-grid:has(.fs-town-map-pair),html body .bb-page.bb-home .bb-areas-grid{grid-template-columns:minmax(0,1fr)!important}html body .bb-page .bb-areas-grid .fs-town-map-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* fs-goal-1002 - Website Checklist live-render fixes (R379 R330 R329 R472), goal run 2026-10-02. Appended after fs-sprint-1001 inside fs-reading-edge-*.css.
   Every selector is prefixed `html body` so it out-specifies the inline <style> blocks that sit AFTER the stylesheet <link> in <head> (cascade order cannot be relied on). */

/* R379: at <=520px every multi-track grid collapses to ONE track (winning computed grid-template-columns). The desktop rules use !important at higher specificity, so the collapse must too. */
@media (max-width:520px){
  html body .bb-page .bb-more-figs,
  html body .bb-page .bb-areas .bvg-chips,
  html body .bb-page .bb-towns .bb-town-cards,
  html body .bb-page .bb-towns .bvg-dir-grid,
  html body .bb-page .bb-towns .bb-loc-cards,
  html body .bvg-body .bvg-chips,
  html body .bvg-footer .bvg-footer-grid{grid-template-columns:minmax(0,1fr)!important}
  /* single-column thumbnails get the desktop 170px height instead of the 120px two-up height */
  html body .bb-page .bb-more-figs img{height:170px!important}
}

/* R330: no centered long prose. Heading, eyebrow and button rows stay centered; paragraphs that carry the reading load are left-aligned inside the same reading measure. */
/* how-it-works step cards: pill, h3 and p read as one left-aligned card */
html body .bb-page ol.bvg-steps.bb-steps.bb-steps > li,
html body .bb-page ol.bvg-steps.bb-steps.bb-steps > li p,
html body ol.bvg-steps:not(.bb-steps) > li,
html body ol.bvg-steps:not(.bb-steps) > li p{text-align:left!important}
/* closing strip band: the long paragraph (up to 800+ chars) under the centered heading; button rows (paragraphs holding a .bvg-btn) stay centered. Each :has() rule stands alone so a browser without :has() drops only that rule, not its neighbours. */
html body .bb-page section.bb-strip-band > .bb-wrap > p:not(:has(.bvg-btn)){text-align:left}
/* centered-head bands: intro and directions paragraphs, and the "more" block under the directions maps */
html body .bb-page .bb-center-head > .bb-wrap > p.bvg-intro{text-align:left}
html body .bb-page .bb-center-head > .bb-wrap > p:not(:has(.bvg-btn)){text-align:left}
html body .bb-page .bb-directions .bb-wrap > p:not(:has(.bvg-btn)){text-align:left}
html body .bb-page .bb-dir-more > p:not(:has(.bvg-btn)){text-align:left}
/* route cards under the directions maps: the roads/distance paragraph reads left with a card inset; the pill heading, the link line and the Get Driving Directions button stay centered */
html body .bb-page .bb-dir-maps .bvg-dir-card > p:not(:has(a)){text-align:left;box-sizing:border-box;padding-left:18px;padding-right:18px}

/* R329: /es/ pages (Spanish templates) put the dark mid-page call-out band inside the band column with its own padding, so its paragraphs sat on a second prose left edge (200 @1440, 34 @375). Give the band the shared reading measure and move its inset onto the paragraphs: band-level prose then starts at the one shared edge (355 @1440, 16 @375). Call-outs nested in a trust card (.bvg-trust-box) are card content and stay as they are. */
html[lang="es"] body .bvg-body :is(.bvg-sec,li.bvg-midcta-item) > .bvg-band--dark.bvg-midcta{box-sizing:border-box;width:min(var(--measure,730px),calc(100vw - 32px));max-width:none;margin-left:calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2);margin-right:calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2);padding-left:0;padding-right:0}
html[lang="es"] body .bvg-body :is(.bvg-sec,li.bvg-midcta-item) > .bvg-band--dark.bvg-midcta > p{box-sizing:border-box;padding-left:28px;padding-right:28px}
@media (max-width:520px){html[lang="es"] body .bvg-body :is(.bvg-sec,li.bvg-midcta-item) > .bvg-band--dark.bvg-midcta > p{padding-left:18px;padding-right:18px}}

/* R472: closing CTA band left a short copy block beside a form 2.5x its height (empty side column on desktop). Stack copy over form on the same reading measure; DOM order, form and copy untouched. Phones already stack (<=860px). */
@media (min-width:861px){
  html body .bvg-endcta{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;row-gap:clamp(24px,3vw,44px)}
  html body .bvg-endcta > .bvg-endcta-copy,
  html body .bvg-endcta > .bvg-lead-form{box-sizing:border-box;width:min(100%,var(--measure,730px))}
}
/* fs-goal-1002b - Website Checklist R329 residual second prose edges, goal run 2026-10-02 (round 2). Appended after fs-goal-1002 inside fs-reading-edge-*.css.
   Same convention as fs-goal-1002: every selector starts `html body` so it out-specifies the inline <style> blocks that follow the stylesheet <link>.
   Convention for boxes: the BOX takes the shared reading measure and sits on the shared left edge; its inset moves onto the text elements inside (padding), so band-level text starts on the one shared edge. */

/* R329-a: the dark .bvg-midcta call-out (bvg-band--dark) on every page family, not only /es. Direct children of a band, a .bvg-body, or a related-grid item; call-outs nested in a trust card, split layout or direction card are untouched. `main` instead of `.bvg-body` because /nj/best-roofing-contractors-clifton-nj puts its bands straight under <main>. */
html body main :is(.bvg-sec,li.bvg-midcta-item,.bvg-body) > .bvg-band--dark.bvg-midcta{box-sizing:border-box;width:min(var(--measure,730px),calc(100vw - 32px));max-width:none;margin-left:calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2);margin-right:calc((100% - min(var(--measure,730px),calc(100vw - 32px))) / 2);padding-left:0;padding-right:0}
html body main :is(.bvg-sec,li.bvg-midcta-item,.bvg-body) > .bvg-band--dark.bvg-midcta > p{box-sizing:border-box;max-width:none;margin-left:0;margin-right:0;padding-left:28px;padding-right:28px}
@media (max-width:520px){html body main :is(.bvg-sec,li.bvg-midcta-item,.bvg-body) > .bvg-band--dark.bvg-midcta > p{padding-left:18px;padding-right:18px}}

/* R329-b: cost-page estimator card (.fsc-calc, dark card with a select and a button) was a 560px box with its own 24px padding, so its two paragraphs sat on a second edge (464 @1440). The card takes the shared measure; the 24px inset moves onto its contents. */
html body .bvg-body .fsc-calc{box-sizing:border-box;width:min(var(--measure,730px),calc(100vw - 32px));max-width:none;padding-left:0;padding-right:0}
html body .bvg-body .fsc-calc > .fsc-row,
html body .bvg-body .fsc-calc > button{margin-left:24px;margin-right:24px}
html body .bvg-body .fsc-calc > p.fsc-out,
html body .bvg-body .fsc-calc > p.fsc-note{box-sizing:border-box;padding-left:24px;padding-right:24px}

/* R329-c: /news-case-studies "Latest roofing guides" section. Its inline max-width:1100px;margin:auto loses to `.bvg-body .bvg-sec{margin-left:0!important}`, and the fs-band-final rule that was meant to center it targets `main>section` while the section is inside .bvg-body, so the block sat docked left (x=0, 1100px wide) with its heading and four guide cards on edges 185 / 49. Center it, and give the cards the shared measure with their inset on the text (the 1px card outline is drawn as a box-shadow so the text edge stays exactly on the measure). */
html body .bvg-body > section.bvg-sec[data-section="latest-guides"]{box-sizing:border-box;width:min(100%,1100px)!important;max-width:1100px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--gut,16px)!important;padding-right:var(--gut,16px)!important}
html body .bvg-body > section.bvg-sec[data-section="latest-guides"] > div{box-sizing:border-box;width:min(100%,var(--measure,730px));margin:18px auto!important;padding-left:0!important;padding-right:0!important;border:0!important;box-shadow:0 0 0 1px #dbe2e5}
html body .bvg-body > section.bvg-sec[data-section="latest-guides"] > div > :is(h2,p){box-sizing:border-box;max-width:none;padding-left:24px;padding-right:24px}
html body .bvg-body > section.bvg-sec[data-section="latest-guides"] > div > h2{margin-top:0}

/* R329-d: the four newest guides (/post/black-streaks-on-roof-new-jersey, can-vinyl-siding-be-painted-new-jersey, skylight-condensation-or-roof-leak-new-jersey, roof-replacement-existing-solar-panels-new-jersey) use a standalone <article class="review-article"> that is not inside .bvg-body: 780px box with 24px padding (text edge 354 @1440, 732px wide) and 19px padding on phones (19 @375), 1px and 3px off the shared edge (355 / 16). Same edge math as the .bvg-body bands: max(gutter, (width - measure) / 2). The measurement method skips this article because its class contains "review", so these four read zero edges; this keeps them on the shared edge anyway. */
html body main > article.review-article{box-sizing:border-box;max-width:none;margin-left:0;margin-right:0;padding-left:max(var(--gut,16px),calc((100% - var(--measure,730px)) / 2));padding-right:max(var(--gut,16px),calc((100% - var(--measure,730px)) / 2))}