/* RepairNowUSA V358 alignment rail.
   Desktop header content (logo through Search) is 1224px inside the 1280px frame.
   Every page column, footer column, and card uses that same edge and 20px cell padding. */

:root{
  --rn-frame-max:1280px;
  --rn-content-max:1224px;
  --rn-cell:20px;
}

/* Interior pages: any block sitting on main, including notes that were full-bleed, joins the rail. */
@media (min-width:981px){
  body.rn-interior-v280 main > :where(section,nav,div,article,aside,header,figure,p,ul,ol,h1,h2,blockquote){
    width:min(var(--rn-content-max),calc(100% - 120px))!important;
    max-width:var(--rn-content-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  body:not(.rn-interior-v280) main .wrap,
  body:not(.rn-interior-v280) main > .rn-trust-strip{
    width:min(var(--rn-content-max),calc(100% - 120px))!important;
    max-width:var(--rn-content-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .rn-v103-footer-shell .footer .wrap{
    width:min(var(--rn-frame-max),calc(100% - 64px))!important;
    max-width:var(--rn-frame-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .rn-v103-footer-shell .footer .wrap > .footer-main{
    width:calc(100% - 56px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .rn-v103-footer-shell .bridge-inner,
  .rn-v103-footer-shell footer.footer > .lower{
    width:min(var(--rn-content-max),calc(100% - 120px))!important;
    max-width:var(--rn-content-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:980px){
  body.rn-interior-v280 main > :where(section,nav,div,article,aside,header,figure,p,ul,ol,h1,h2,blockquote),
  body:not(.rn-interior-v280) main .wrap,
  body:not(.rn-interior-v280) main > .rn-trust-strip,
  .rn-v103-footer-shell .footer .wrap,
  .rn-v103-footer-shell .footer .wrap > .footer-main,
  .rn-v103-footer-shell .bridge-inner,
  .rn-v103-footer-shell footer.footer > .lower{
    width:min(var(--rn-frame-max),calc(100% - 48px))!important;
    max-width:var(--rn-frame-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .rn-v281-header-shell .nav-row{padding-left:0!important;padding-right:0!important}
}

@media (max-width:620px){
  body.rn-interior-v280 main > :where(section,nav,div,article,aside,header,figure,p,ul,ol,h1,h2,blockquote),
  body:not(.rn-interior-v280) main .wrap,
  body:not(.rn-interior-v280) main > .rn-trust-strip,
  .rn-v103-footer-shell .footer .wrap,
  .rn-v103-footer-shell .footer .wrap > .footer-main,
  .rn-v103-footer-shell .bridge-inner,
  .rn-v103-footer-shell footer.footer > .lower{
    width:min(var(--rn-frame-max),calc(100% - 32px))!important;
  }
}

/* An inner wrap must not add a second gutter once the section is already on the rail. */
body.rn-interior-v280 main .wrap{
  width:auto!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Homepage hero text stays in one left edge, inset from the photo.
   The alert mark sits above the headline instead of pushing it inward,
   and the phone number stays on that edge instead of centering. */
.hero-integrated .hero-copy{
  padding-left:32px!important;
  padding-right:32px!important;
}
.hero-integrated .hero-headline-row{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.hero-integrated .hero-alert-mark{
  margin:0!important;
  flex:0 0 auto!important;
}
.hero-integrated .hero-headline-row .hero-headline-locked,
.hero-integrated .hero-copy .hero-headline-locked{
  flex:none!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
.hero-integrated .hero-headline-locked span{
  display:block!important;
  text-align:left!important;
}
.hero-integrated .hero-copy .eyebrow,
.hero-integrated .hero-copy .hero-lead,
.hero-integrated .hero-copy .hero-action-group,
.hero-integrated .hero-copy .hero-expanded-copy,
.hero-integrated .hero-copy .hero-customer-row,
.hero-integrated .hero-copy .hero-quiet{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
.hero-integrated .hero-actions .btn{
  justify-content:flex-start!important;
  text-align:left!important;
}
.hero-integrated .hero-action-group .hero-phone,
.hero-integrated .hero-phone{
  width:max-content!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
  justify-content:flex-start!important;
}

/* Keep the residential and commercial line visible on tablet and desktop. */
@media (min-width:761px){
  .rn-v281-header-shell .utility-bar.utility-bar{
    display:block!important;
  }
}

/* Full-bleed mobile hero still keeps a gutter inside the photo. */
@media (max-width:760px){
  section.hero .hero-integrated .hero-copy{
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

/* The photo hero is still dark through tablet width. Quiet links were forced
   to dark teal there, so they vanished on the image. Keep them white. */
@media (min-width:761px){
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a:link,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a:visited,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a:hover,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a:active,
  #main-content section.hero .hero-integrated .hero-copy .hero-quiet a:focus-visible{
    color:#F7FAFA!important;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
}

/* Notes that sit between sections line up with card text, not the viewport edge. */
body.rn-interior-v280 main > p.content-review-v280{
  padding-left:var(--rn-cell)!important;
  padding-right:var(--rn-cell)!important;
  box-sizing:border-box!important;
}

/* One cell padding for every card, panel, and boxed section. */
:is(
  .service-section.rn-section-card,
  .service-section.rn-section-tint,
  .guide-section.service-section,
  .safety-band,
  .source-notes,
  .answer-card,
  .problem-grid > article,
  .decision-grid > article,
  .scope-grid > article,
  .split-feature > article,
  .rn-role-panel,
  .rn-callout-card,
  .rn-process-card,
  .rn-start-path-grid > article,
  .rn-difference-grid > article,
  .rn-trust-grid > article,
  .demand-card-body,
  .knowledge-card-body,
  .service-route,
  .signal-grid > article,
  .priority-guides > article,
  .request-list > li,
  .related-paths > a,
  .rn-contact-layout .card,
  section.card
){
  padding:var(--rn-cell)!important;
  box-sizing:border-box!important;
}

.property-grid .industry-card-link{
  padding:16px var(--rn-cell) var(--rn-cell)!important;
}
.property-grid .industry-card-options{
  padding-left:var(--rn-cell)!important;
  padding-right:var(--rn-cell)!important;
}
.article-grid article > :not(img){
  margin-left:var(--rn-cell)!important;
  margin-right:var(--rn-cell)!important;
}

/* FAQ rows align with the heading in the same card instead of adding a second inset. */
.faq-list details,
.faq-column details{
  padding-left:0!important;
  padding-right:0!important;
}
.faq-list summary,
.faq-column summary{
  padding-left:0!important;
  padding-right:0!important;
}
.faq-list details p,
.faq-column .faq-answer{
  padding-left:0!important;
  padding-right:0!important;
}

/* Header and footer shells stay the approved full-width bars; only their columns share the rail. */
.rn-v281-header-shell,
.rn-v103-footer-shell,
.rn-v103-footer-shell .footer,
.rn-v103-footer-shell .bridge{
  width:100%!important;
  max-width:none!important;
}

/* Visible publisher and provider-boundary facts. */
.rn-visible-trust{
  background:#f4fafb;
  color:#124a5f;
}
section.rn-visible-trust{
  padding:28px 0 8px;
}
.rn-visible-trust .wrap,
aside.rn-visible-trust{
  box-sizing:border-box;
}
aside.rn-visible-trust{
  margin:16px 0 20px;
  padding:14px 16px;
  border:1px solid #d5e4e7;
  border-left:4px solid #087B87;
  border-radius:10px;
  background:#f4fafb;
}
.rn-visible-trust .eyebrow{
  margin:0 0 6px;
}
.rn-visible-trust h2{
  margin:0 0 12px;
  color:#0B4F5C;
  font-size:1.35rem;
  line-height:1.25;
}
.rn-visible-trust ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
}
.rn-visible-trust li,
.rn-visible-trust p{
  margin:0;
  font-size:.98rem;
  line-height:1.45;
}
aside.rn-visible-trust p + p{
  margin-top:8px;
}
.rn-visible-trust strong{
  display:block;
  margin-bottom:2px;
  color:#0B4F5C;
}
.rn-visible-trust a{
  color:#08708c;
  font-weight:700;
}
.rn-visible-trust .rn-trust-note{
  margin-top:12px;
}
@media(max-width:700px){
  .rn-visible-trust ul{
    grid-template-columns:1fr;
  }
}