/* === A-Grade utility classes (added 2026-05-17) === */
/* Sweep inline style="..." patterns into reusable classes for AI-crawler friendliness.
   IMPORTANT: this file must be loaded LAST so its rules win over /css/styles.css
   component rules at equal specificity (matches live-site inline-style behavior). */
.ssg-u-border-bottom-black { border-bottom: 2px solid #000; }
.ssg-u-border-top-black { border-top: 2px solid #000; }
.ssg-u-border-y-black { border-top: 2px solid #000; border-bottom: 2px solid #000; }
.ssg-u-border-black { border: 2px solid #000; }
.ssg-u-bg-primary-var { background-color: var(--ssg-primary); }
.ssg-u-bg-gray-7a { background-color: #7A7A7A; }
.ssg-u-bg-light-fafd { background-color: #F8FAFD; }
.ssg-u-justify-between { justify-content: space-between; }
.ssg-u-justify-end { justify-content: flex-end; }
.ssg-u-link-black-flex { color: black; display: flex; align-items: center; }
.ssg-u-text-black { color: black; }
.ssg-u-text-muted-777 { color: #777777; }
.ssg-u-mr-1 { margin-right: 0.25rem; }
.ssg-u-mr-2 { margin-right: 0.5rem; }
.ssg-u-w-28pct { width: 28%; }
.ssg-u-w-28pct-end { width: 28%; justify-content: flex-end; }
.ssg-u-radius-8 { border-radius: 8px; }
.ssg-u-radius-12 { border-radius: 12px; }
.ssg-u-radius-16 { border-radius: 16px; }
.ssg-u-card-black { border: 2px solid #000; border-radius: 16px; }
.ssg-u-card-black-hidden { border: 2px solid #000; border-radius: 16px; overflow: hidden; }
.ssg-u-flex-center { display: flex; align-items: center; }
.ssg-u-pl-6-black { padding-left: 1.5rem; color: black; }
.ssg-u-footer-cap { border-top: 2px solid #000; border-top-left-radius: 24px; border-top-right-radius: 24px; background-color: var(--ssg-primary); }
.ssg-u-fs-xl { font-size: var(--ssg-text-xl); }
.ssg-u-hero-overlay-card { border-radius: 16px; border: 2px solid #000; max-width: 220px; }
.ssg-u-card-black-r12 { border: 2px solid #000; border-radius: 12px; }
.ssg-u-card-black-r16-rev { border-radius: 16px; border: 2px solid #000; }
.ssg-u-bg-gray-777 { background-color: #777777; }
.ssg-u-bg-white-pure { background-color: #ffffff; }
.ssg-u-rounded-50pct { border-radius: 50%; }
.ssg-u-border-gray-200-r12 { border: 1px solid #e5e7eb; border-radius: 12px; }
.ssg-u-border-bottom-gray-200 { border-bottom: 1px solid #e5e7eb; }
.ssg-u-card-yellow { border: 2px solid #FFCC29; border-radius: 16px; }
.ssg-u-min-h-680-r16 { min-height: 680px; border-radius: 16px; }
.ssg-u-border-black-only { border: 2px solid #000; }
.ssg-u-iframe-no-border { border: 0; }
.ssg-u-corp-hero-bg { position: absolute; background-image: url(https://selfstoragegoldsboro.s3.us-east-1.amazonaws.com/Optimize+1280x720/business-storage.jpg); background-size: cover; background-position: center; z-index: -1; inset: 0; }

/* Pay My Bill — always black, every breakpoint, every state. !important wins regardless of
   stylesheet load order or button variant (white/primary/outline/etc.) used as the base. */
.ssg-btn--pay,
.ssg-btn--pay:link,
.ssg-btn--pay:visited,
.ssg-btn--pay:hover,
.ssg-btn--pay:focus,
.ssg-btn--pay:active { color: #000 !important; }