.pattern-overlay-section {
  position: relative;
  overflow: hidden;
}

.pattern-overlay-section--has-pattern > *:not(.pattern-overlay-section__pattern) {
  position: relative;
  z-index: 1;
}

.pattern-overlay-section__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM0MTQ5NUIiIGZpbGwtb3BhY2l0eT0iMSIgaGVpZ2h0PSI5NnB4IiB3aWR0aD0iOTZweCIgdmlld0JveD0iMCAwIDk2IDk2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNNDgsMEE0OCw0OCwwLDAsMSw5Niw0OCw0OCw0OCwwLDAsMSw0OCwwWm0wLDBBNDgsNDgsMCwwLDAsMCw0OCw0OCw0OCwwLDAsMCw0OCwwWk05Niw0OEE0OCw0OCwwLDAsMCw0OCw5Niw0OCw0OCwwLDAsMCw5Niw0OFpNMCA0OEE0OCw0OCwwLDAsMCw0OCw5Niw0OCw0OCwwLDAsMCwwLDQ4WiIvPjwvc3ZnPg==');
  background-repeat: repeat;
  background-size: 96px 96px;
  pointer-events: none;
}

/*
All styles inherited from main page CSS:

.guide-band - Light gray background with gold top border, padding
.guide-band-inner - Centered max-width container with two-column grid layout
.guide-mockup - Fixed width image container with shadow and border
.guide-mockup img - Full width image display
.guide-content - Content wrapper for text and CTA
.s-eyebrow - Red uppercase eyebrow text
.guide-content h2 - Large navy heading with responsive sizing
.guide-content p - Body text with muted color and max-width
.btn-red - Red button with uppercase text and hover effect

Inline styles on button for flex layout with icon.
Responsive breakpoints handled in main page CSS.
*/
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .cp-guide p {
    max-width: 100%;
  }
  
  .cp-guide__btn {
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .cp-guide {
    padding: 52px 20px;
  }
  
  .cp-guide__eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }
}