/* sign-up-product-guide
   Body copy colour and size, and the frame's 4px rgba(255,255,255,0.25)
   border, 40px padding and 70% title width all come from the legacy row's
   generated rules, which are byte-identical across all 7 placements. The
   heading's size comes from section-title instead; the row's own 80px
   vertical padding is not carried (a banner contributes no space around
   itself), and the frame's 80px margin replaces it as internal breathing room.

   The background is a wp:image block in the body, not a CSS background. The
   legacy value was
   url(http://warninglightsinc.com/wp-content/uploads/.../catalog-signup-lead-desktop.jpg?id=43149),
   which SafeBannerCSS refuses outright for containing "//" -- and nothing in
   the sync mirrors url() targets anyway, so a stylesheet background 404s
   unless some other body happens to reference the same file. In the body it
   goes through mirrorInlineImages like any other image. */

.sf-cta-banner--sign-up-product-guide {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  /* No vertical padding: the page owns spacing around banners. */
  padding: 0 20px;
  background-color: #14100c; /* shows through until the photo loads */
}

/* The background is an image BLOCK, not a CSS background: nothing in the sync
   mirrors url() targets, so a stylesheet background survives only by luck --
   if some other body happens to reference the same file. In the body it goes
   through mirrorInlineImages like any other image. */
.sf-cta-banner--sign-up-product-guide .sf-cta-banner__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.sf-cta-banner--sign-up-product-guide .sf-cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.sf-cta-banner--sign-up-product-guide > .wp-block-group {
  position: relative;
  z-index: 1;
}

/* The frame is restated here rather than inherited: the .prose rules that
   would otherwise center/constrain wp-block-group content do not apply on
   the home slot, and a banner must lay out the same wherever it is placed. */
/* The 80px vertical margin is the band's own internal breathing room, not
   space around the band -- the section itself still contributes none. It is
   what gives the photo room to read behind the frame. */
.sf-cta-banner--sign-up-product-guide .wp-block-group {
  max-width: 1200px;
  margin: 80px auto;
  border: 4px solid rgba(255, 255, 255, 0.25);
  padding: 40px;
  text-align: center;
}

.sf-cta-banner--sign-up-product-guide .wp-block-heading,
.sf-cta-banner--sign-up-product-guide p {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* Size, face and casing come from class="section-title" in the body. Only the
   colour is band-specific -- this band sits on a dark photo. The legacy
   decoded to 40px desktop, the top of section-title's clamp. */
.sf-cta-banner--sign-up-product-guide .wp-block-heading {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 20px;
}

.sf-cta-banner--sign-up-product-guide p {
  color: #ffffff;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 15px;
}

.sf-cta-banner--sign-up-product-guide p:last-child {
  margin-bottom: 0;
}

/* The CTA carries class="btn primary" in the body, so it is the site's own
   amber button. The legacy's #f5a020 is the same value as --amber, so nothing
   is lost. Only .prose's link underline needs undoing. */
.sf-cta-banner--sign-up-product-guide a.btn {
  text-decoration: none;
}

@media (max-width: 600px) {
  .sf-cta-banner--sign-up-product-guide .wp-block-group {
    margin: 40px auto;
    padding: 24px;
  }
  .sf-cta-banner--sign-up-product-guide .wp-block-heading,
  .sf-cta-banner--sign-up-product-guide p {
    max-width: 100%;
  }
  .sf-cta-banner--sign-up-product-guide p {
    font-size: 18px;
  }
}