/* ===================================================================
   base.css — Custom CSS for Check Cashing USA
   Design tokens are in tailwind.css @theme directive.
   This file contains ONLY styles that cannot be represented
   as Tailwind utility classes in HTML templates.

   NOTE: Rules are deliberately un-layered to win over Tailwind's
   layered preflight, theme, and utility rules. The cascade order
   is: @layer theme < @layer base < @layer components < @layer
   utilities < un-layered (this file).
   =================================================================== */

/* ===================================================================
   Backward-compatible aliases — Templates and inline styles use
   var(--navy), var(--red), etc. These map to the @theme tokens.
   =================================================================== */
:root {
  --navy: var(--color-navy);
  --red: var(--color-red);
  --text-dark: var(--color-text-dark);
  --text-body: var(--color-text-body);
  --card-bg: var(--color-card-bg);
}

/* ===================================================================
   GLOBAL — Element defaults
   =================================================================== */
body {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-navy);
  line-height: 32px;
  background: #fff;
  overflow-x: hidden;
}

a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-red);
}

p {
  margin-bottom: 15px;
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 2.1333;
}

p .small {
  margin-bottom: 15px;
  color: var(--color-text-body);
  font-size: 13px;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
}

h1 {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 10px;
  line-height: 1.14286;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h1 small {
  font-size: 35px;
  line-height: 35px;
  font-weight: 500;
  color: #777;
  text-transform: none;
}

h2 small,
h3 small,
h4 small,
h5 small {
  font-size: 65%;
  font-weight: 400;
  color: var(--color-navy);
  text-transform: none;
}

small,
.small {
  text-transform: none;
}

/* ===================================================================
   TEXT STYLES — Descendant/sibling selectors
   =================================================================== */
.pad1 p strong {
  margin-right: 10px;
  font-size: 1.05em;
}

.pad1 p + p {
  margin-bottom: 15px;
}

.pad1 h4 {
  margin-bottom: 0;
  color: var(--color-navy);
  font-size: 28px;
  line-height: 1.5em;
}

.pad1 h5 {
  margin-bottom: 0;
  color: var(--color-navy-dark);
  font-size: 22px;
  line-height: 2.5em;
}

.pad1 a {
  text-decoration: underline;
}

.pad1 a.btn {
  text-decoration: none;
}

.list-1 {
  padding-left: 20px;
  margin-bottom: 15px;
}

.list-1 li {
  list-style: disc inside;
  color: var(--color-text-dark);
  font-size: 16px;
}

ol.list-1 li {
  list-style: decimal inside;
}

/* ===================================================================
   HEADER WAVE SEPARATOR
   =================================================================== */
header {
  position: relative;
  z-index: 1000;
}

header::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url(/static/images/bg_head.png) repeat-x;
  z-index: 10;
}

/* ===================================================================
   CUSTOM BUTTONS
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  cursor: pointer;
  border: 1px solid #4e4e4e;
  padding: 15px 30px;
  font-size: 19px;
  line-height: 19px;
  transition: 0.3s;
  border-radius: 38px;
  color: #fff;
  background-color: transparent;
}

.btn:active,
.btn.active {
  background-image: none;
}

.btn:hover {
  color: #ddd;
  background-color: transparent;
  border-color: #ddd;
}

.btn span.fa {
  margin-left: 16px;
  top: 1px;
  position: relative;
  transition: 0.3s;
}

.btn:hover span {
  color: #ddd;
}

.btn-primary,
.btn-primary:focus {
  color: var(--color-navy);
  background-color: transparent;
  border-color: var(--color-navy);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-primary:hover span {
  color: #fff;
}

.btn-default,
.btn-default:focus {
  color: #fff;
  background-color: transparent;
  border-color: #e0e0e0;
}

.btn-default:hover {
  color: var(--color-navy);
  background-color: #e0e0e0;
  border-color: #e0e0e0;
}

.btn-default:hover span {
  color: var(--color-navy);
}

.btn .fa {
  font-size: 12px;
}

/* ===================================================================
   STICKY HEADER
   =================================================================== */
.stuck-container.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.stuck-container.is-stuck .navbar-brand-img {
  height: 45px !important;
}

.navbar-brand-img {
  height: 60px;
}

.lang_switcher {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  margin-left: 32px;
}

.lang_switcher:hover {
  color: var(--color-red) !important;
}

/* Mobile header tools: the language flags and the menu button that opens
   the slide-out drawer. Hidden on desktop; shown ≤1023px via the mobile
   media query, where .header-right (top links + desktop nav) is hidden. */
.mobile-head-tools {
  display: none;
  align-items: center;
  gap: 14px;
}

.mobile-flags {
  display: flex;
  gap: 7px;
  align-items: center;
}

.mobile-flag {
  display: block;
  line-height: 0;
  border-radius: 2px;
  opacity: 0.55;
}

.mobile-flag img {
  display: block;
  width: 22px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.mobile-flag.active {
  opacity: 1;
}

.mobile-flag.active img {
  box-shadow: 0 0 0 2px var(--color-navy);
}

.mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mobile-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #262c5d;
}

/* ===================================================================
   NAV LINKS
   =================================================================== */
.nav li a {
  color: var(--color-navy);
  font-weight: 700;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav li a:hover,
.nav li.active > a {
  color: var(--color-red);
}

.dropdown-menu li a {
  text-transform: none;
}

/* ===================================================================
   CAMERA SLIDER
   =================================================================== */
.camera-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 320px;
  background: #fff;
}

.camera-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.camera-slide.active {
  opacity: 1;
  z-index: 2;
}

/* Caption inset matches the live Camera slideshow positioning */
.camera-caption {
  position: absolute;
  left: 21.4%;
  right: 14%;
  top: 12%;
  bottom: 10%;
  z-index: 3;
}

.camera-caption .jumbotron {
  height: 100%;
}

.camera-caption .jumbotron h2 {
  font-size: 50px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

.camera-caption .jumbotron h2 small {
  display: block;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  margin-top: 5px;
  text-transform: none;
}

.camera-nav {
  position: absolute;
  top: 46%;
  margin-top: -33px;
  z-index: 10;
  color: #fff;
  font-size: 55px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.camera-nav:hover {
  color: #333;
}

.camera-prev {
  left: 6%;
}

.camera-next {
  right: 6%;
}

.camera-pagination {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 4px;
}

.camera-pagination span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
  cursor: pointer;
  transition: background 0.3s ease;
}

.camera-pagination span.active,
.camera-pagination span:hover {
  background: #333;
}

@media (max-width: 850px) {
  .camera-caption {
    left: 17%;
  }
}

/* ===================================================================
   PARALLAX
   =================================================================== */
.parallax {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  min-height: 300px;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
}

.parallax-content {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}

.parallax-content h2,
.parallax-content h2 small,
.parallax-content p {
  color: #fff;
}

/* ===================================================================
   SERVICE CARDS
   =================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.service-card {
  background: var(--color-card-bg);
  padding: 25px;
  border-radius: 10px;
  min-height: 250px;
  position: relative;
}

.service-card h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color-navy);
}

.marked-list {
  list-style: none;
  margin: 20px 0;
}

.marked-list li {
  padding-left: 40px;
  position: relative;
  color: #333;
  font-size: 16px;
  margin-bottom: 9px;
}

.marked-list li::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 19px;
  color: #333;
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: 600;
}

.bg-icon-cheque {
  background-image: url(/static/images/cheque.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

.bg-icon-transfer {
  background-image: url(/static/images/transfer.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

.bg-icon-cards {
  background-image: url(/static/images/prepaid_card.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

.bg-icon-forex {
  background-image: url(/static/images/forex.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

.bg-icon-crypto {
  background-image: url(/static/images/crypto.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* ===================================================================
   SERVICES 2.0 — Redesigned "Our Services" section (home page)
   Flag background, white cards with alternating navy/red bar + arrow
   badge, cut-out icon discs. Section-scoped color tokens match the
   provided mockup (deeper indigo/red than the global brand tokens).
   =================================================================== */
.svc2 {
  --svc-navy: #262c5d;
  --svc-red: #ec081b;
  position: relative;
  padding: 58px 0 70px;
  background: #fff url(/static/images/services/services-flag-top.png) no-repeat top center;
  background-size: 100% auto;
}

.svc2-heading {
  color: var(--svc-navy);
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 6px;
}

.svc2-lead {
  color: var(--svc-navy);
  font-size: 17px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto 42px;
}

.svc2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: 1120px;
  margin: 0 auto;
}

@media (min-width: 780px) {
  .svc2-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

.svc2-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px 26px 68px;
  min-height: 236px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(20, 28, 70, 0.12);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.svc2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20, 28, 70, 0.2);
}

/* Left colored bar (checkerboard on desktop, alternating on mobile) */
.svc2-bar {
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 30px;
  width: 42px;
  border-radius: 0 14px 14px 0;
  background: var(--svc-navy);
}

.svc2-card:nth-child(even) .svc2-bar {
  background: var(--svc-red);
}

/* White circle + red arrow badge, centered on the bar */
.svc2-arrow {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}

.svc2-arrow .fa {
  color: var(--svc-red);
  font-size: 15px;
  line-height: 1;
}

/* Cut-out icon disc */
.svc2-icon {
  display: block;
  margin: 2px auto 15px;
}

.svc2-icon img {
  display: block;
  width: 78px;
  height: 78px;
  margin: 0 auto;
}

.svc2-title {
  color: var(--svc-navy);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 9px;
}

.svc2-desc {
  color: var(--svc-red);
  font-size: 15.5px;
  line-height: 1.4;
  margin: 0 0 15px;
}

.svc2-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--svc-navy);
  font-weight: 700;
  font-size: 15px;
}

.svc2-card:hover .svc2-more {
  color: var(--svc-red);
}

.svc2-cta {
  text-align: center;
  margin-top: 42px;
}

.svc2-viewall {
  display: inline-block;
  background: var(--svc-navy);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 46px;
  border-radius: 34px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.svc2-viewall:hover {
  background: #1a1f45;
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile: provided portrait flag background */
@media (max-width: 779px) {
  .svc2 {
    background: #fff url(/static/images/services/services-bg-mobile.png) no-repeat top center;
    background-size: cover;
  }
  .svc2-card {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ===================================================================
   FORM STYLES
   =================================================================== */
.contact-form input,
.contact-form textarea,
.apply-form input,
.apply-form textarea,
.apply-form select {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  height: 44px;
  border-radius: 4px;
  font-size: 14px;
}

.contact-form textarea,
.apply-form textarea {
  height: 120px;
  resize: vertical;
}

.contact-form label,
.apply-form label {
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--color-text-dark);
}

/* ===================================================================
   LOCATIONS
   =================================================================== */
.store-item {
  background: var(--color-loc-bg);
  padding: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #929090;
}

pre.store-hours {
  padding-top: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--color-navy);
  font-family: inherit;
}

/* The old #locations .store-card / .store-logo / .store-actions block that
   lived here was dropped with the /locations/ redesign — the card markup it
   styled no longer exists. Current card styles are in the LOCATIONS PAGE
   section at the bottom of this file. */

.btn-directions {
  color: var(--color-directions);
  border: 1px solid var(--color-directions);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 16px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: 0.2s;
}

.btn-directions:hover {
  background: var(--color-directions);
  color: #fff;
}

#locations .near-location label {
  cursor: pointer;
  display: block;
  padding: 4px 0;
  color: var(--color-navy);
  font-size: 14px;
}

#locations .near-location label:hover,
#locations .near-location label.active {
  background-color: #fffeeb;
}

/* The old .location-detail-card / .location-detail-map / .btn-back /
   .location-photo block that lived here was dropped with the per-store page
   redesign — that markup no longer exists. Current store-page styles are in
   the LOCATION DETAIL PAGE section at the bottom of this file. */

/* ===================================================================
   SIDEBAR
   =================================================================== */
.sidebar_contact {
  background: var(--color-navy);
  padding: 20px;
  border-radius: 5px;
  color: #fff;
}

.sidebar_contact h2 {
  color: #fff;
  font-size: 32px;
}

.sidebar_contact h3 {
  font-size: 40px;
  color: #fff;
}

.sidebar_contact h3 a {
  color: #fff;
}

.sidebar_contact .btn_wr {
  text-align: center;
  margin: 20px 0 10px;
}

.pricing-table {
  max-width: 370px;
  min-width: 290px;
  border: none;
}

.pricing-table .price-cnt {
  text-align: center;
  padding: 25px;
  min-height: 0;
  background: none;
  border: none;
}

.box1 .price-cnt {
  padding: 29px 40px;
}

.box1 .price-cnt .btn_wr {
  text-align: center;
  margin-top: 26px;
}

.pricing-table .btn-default:hover {
  color: #fff;
  background: #7bd156;
}

/* ===================================================================
   FOOTER — white contact band over navy disclosures band
   (newfooter/ mockups: navy #393d65, icon circles #d7e4f7,
   red accents #ec081b)
   =================================================================== */
.ftr-top {
  background: #fff;
  padding: 48px 0 44px;
}

.ftr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1024px) {
  .ftr-grid {
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 48px;
  }

  .ftr-grid > div + div {
    border-left: 1px solid #b9bfd4;
    padding-left: 48px;
  }
}

.ftr-logo {
  width: 220px;
  height: auto;
  margin-bottom: 26px;
}

.ftr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #262c5d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 18px;
}

.ftr-row strong {
  color: #262c5d;
  font-weight: 700;
}

.ftr-row a {
  color: #262c5d;
  font-weight: 600;
}

.ftr-row a.ftr-phone {
  color: #ec081b;
  font-weight: 600;
}

/* Light-blue circle icons (contact rows and disclosures) */
.ftr-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #d7e4f7;
  flex-shrink: 0;
}

.ftr-ic .fa {
  color: #262c5d;
  font-size: 20px;
}

.ftr-links h3,
.ftr-social h3 {
  color: #262c5d;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 24px;
}

.ftr-links li {
  margin-bottom: 14px;
}

.ftr-links li a {
  color: #262c5d;
  font-size: 17px;
  font-weight: 600;
}

.ftr-links li a:hover {
  color: #ec081b;
}

/* Red ">" bullet before each useful link */
.ftr-links li a::before {
  content: ">";
  color: #ec081b;
  font-weight: 800;
  margin-right: 14px;
}

.ftr-social p {
  color: #262c5d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 22em;
  margin: 0 0 24px;
}

.ftr-social-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.ftr-social-row img {
  display: block;
  height: 44px;
  width: auto;
}

.ftr-social-row a:hover img {
  opacity: 0.8;
}

/* Navy disclosures band */
.ftr-disc {
  background: #393d65;
  color: #fff;
  padding: 44px 0 24px;
}

.ftr-disc-heading {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 30px;
}

.ftr-disc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 1024px) {
  .ftr-disc-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
  }
}

.ftr-disc-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.ftr-disc-list li span:last-child {
  color: #e8ebf7;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

/* Disclosure icons: red glyphs on the light-blue circles */
.ftr-disc-list .ftr-ic .fa {
  color: #ec081b;
}

/* White INFiN membership card */
.ftr-infin {
  background: #fff;
  border-radius: 26px;
  padding: 28px 30px;
  text-align: center;
}

.ftr-infin img {
  width: 280px;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.ftr-infin p {
  color: #4a4f56;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* Bottom bar: copyright + legal links */
.ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  margin-top: 26px;
  padding-top: 22px;
}

.ftr-bottom p {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  flex: 1 1 auto;
}

.ftr-bottom a {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.ftr-bottom a:last-child {
  padding-right: 0;
}

.ftr-bottom a:hover {
  color: var(--color-footer-hover);
}

@media (max-width: 1023px) {
  .ftr-disc-heading {
    font-size: 24px;
  }

  .ftr-bottom p {
    flex-basis: 100%;
  }

  /* Stacked links lose the desktop divider bars */
  .ftr-bottom a {
    border-left: 0;
    padding: 0 26px 0 0;
  }
}

/* ===================================================================
   CTA / WELL SECTIONS
   =================================================================== */
.bigTxt {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.1;
}

.txt-clr1 {
  color: #fff !important;
}

.well {
  padding-bottom: 45px;
  padding-top: 52px;
}

.well1 {
  padding-bottom: 0;
  padding-top: 77px;
}

.well3 {
  padding: 60px 0;
}

.well4 {
  background: var(--color-navy);
  color: #fff;
  padding: 88px 0 110px;
}

.well4 h2 {
  color: #fff;
}

.well7 {
  padding-bottom: 100px;
  padding-top: 49px;
}

.well_ins1 {
  padding-bottom: 89px;
}

/* ===================================================================
   UTILITY
   =================================================================== */
.btn_wr {
  text-align: center;
  margin: 20px 0 10px;
}

* + .btn {
  margin-top: 31px;
}

* + .btn-wr {
  margin-top: 33px;
}

#contact-form .btn-wr {
  text-align: left;
}

label.error {
  color: #f00;
}

.contact-form-loader {
  display: none;
}

/* ===================================================================
   MEDIA QUERIES
   =================================================================== */
@media (max-width: 1023px) {
  /* The whole nav moves into the slide-out drawer (#mobile-nav), so the
     header is just logo (left) + language flags and menu button (right).
     .header-right holds the top links and the desktop nav, both of which
     the drawer now carries. */
  .header-right {
    display: none;
  }

  .navbar-brand-img,
  .stuck-container.is-stuck .navbar-brand-img {
    height: 44px !important;
  }

  .mobile-head-tools {
    display: flex;
  }
}

@media (max-width: 479px) {
  .bg-icon-cheque,
  .bg-icon-transfer,
  .bg-icon-cards,
  .bg-icon-forex,
  .bg-icon-crypto {
    background: none !important;
  }
}

@media (min-width: 1024px) {
  .mobile-toggle,
  .mobile-nav,
  .mobile-overlay {
    display: none !important;
  }

  .desktop-nav {
    display: flex !important;
  }
}

@media (max-width: 779px) {
  h2 {
    font-size: 40px !important;
  }

  .well1 {
    padding-top: 37px;
  }

  .well3 {
    padding-bottom: 46px;
    padding-top: 45px;
  }

  .camera-caption {
    left: 7%;
    right: 7%;
    top: 9%;
    bottom: 12%;
  }

  .camera-nav {
    display: none;
  }

  .camera-caption .jumbotron h2 {
    font-size: 26px !important;
  }

  .camera-caption .jumbotron h2 small {
    font-size: 20px !important;
    margin-top: 2px;
  }

  .bigTxt {
    font-size: 60px !important;
  }

  .camera-container {
    height: 290px;
  }

  /* The slides are wide 5.33:1 banners with the artwork on the right;
     on mobile, crop to the solid-blue left side so the caption stays
     readable instead of slicing the illustration in half. */
  .camera-slide img {
    object-position: left center;
  }

  .camera-pagination span {
    background: rgba(255, 255, 255, 0.5);
  }

  .camera-pagination span.active {
    background: #fff;
  }
}

@media (max-width: 479px) {
  .bigTxt {
    font-size: 40px !important;
  }
}

/* ===================================================================
   HERO (new homepage look) — copy left over the plate's white, photo right
   =================================================================== */
.hero-new {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

/* Desktop: fill the viewport below the 80px header so the next section
   doesn't peek in on load; vertically center the text content.

   Capped at the plate's own aspect (4801/2473 = 1.94). Past that the box is
   taller than the artwork, `cover` scales by height instead of width, and
   the crop comes off the left — eating exactly the white column the copy
   needs. On a 1280x900 window the uncapped hero was 820px tall and pulled
   the customer's hair under the feature row. */
@media (min-width: 1024px) {
  .hero-new {
    display: flex;
    align-items: center;
    min-height: min(calc(100vh - 80px), calc(100vw / 1.94));
  }
}

/* The plate is a whole composition — pure white for its left ~36%, then a
   fade into the branch photo — so it spans the section and is pinned right,
   the same way .abt-hero and .fx-hero carry theirs. (Desktop only; mobile
   uses its own baked-in composite as a background on .hero-new, set in the
   media query below.) */
.hero-photo {
  position: absolute;
  inset: 0;
  background: url("/static/images/hero-home.jpg") right center / cover no-repeat;
  z-index: 0;
}

/* How much of the plate's own white survives depends on the viewport's
   aspect: the hero is `min-height: 100vh - 80px`, so on a tall window
   `cover` scales by height and crops the white column off the left. The
   wash keeps the copy zone readable in that case and fades out well before
   the customer, so the artwork stays crisp on wide/short windows where the
   plate's own white already covers the text. */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 34%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(255, 255, 255, 0.6) 53%,
    rgba(255, 255, 255, 0) 62%
  );
}

/* The three-up feature row is wider than the plate's white column, so its
   last item ("Convenient Locations") lands on the customer. A frosted band
   keeps it readable without washing the artwork — the same fix the
   /currency-exchange/ hero uses for its trust row. The negative margin
   cancels the padding so the first item still lines up with the headline. */
@media (min-width: 1024px) {
  .hero-features {
    width: fit-content;
    padding: 14px 18px;
    margin-left: -18px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
  }
}

.hero-heading {
  font-size: 56px;
  line-height: 1.04;
  font-weight: 800;
  color: #23285a;
  margin: 0 0 18px;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: #3a3f63;
  max-width: 430px;
  margin-bottom: 40px;
}

.hero-feature h4 {
  font-size: 16px;
  font-weight: 700;
  color: #23285a;
  margin: 0 0 4px;
  /* Keep "Convenient Locations" (and its translations) on a single line
     even though the pill's container is narrow. */
  white-space: nowrap;
}

.hero-feature p {
  font-size: 14px;
  line-height: 1.4;
  color: #5b6079;
  margin: 0;
}

/* Larger, roomier hero CTA buttons to match the design.
   margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule,
   which would otherwise inflate this flex row and stretch the first button. */
.hero-cta .btn {
  font-size: 20px;
  line-height: 20px;
  padding: 18px 40px;
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
  justify-content: center;
}

.hero-cta .btn span.fa {
  margin-left: 18px;
}

/* #ec081b (the ccl/svp mockup red) instead of the brand token #fe0000:
   white text on #fe0000 is 4.02:1, below the WCAG AA 4.5:1 minimum;
   #ec081b passes at 4.55:1. */
.btn-hero-red,
.btn-hero-red:focus {
  color: #fff;
  background-color: #ec081b;
  border-color: #ec081b;
}

.btn-hero-red:hover {
  color: #fff;
  background-color: #c70010;
  border-color: #c70010;
}

.btn-hero-red span,
.btn-hero-red:hover span {
  color: #fff;
}

.btn-hero-outline,
.btn-hero-outline:focus {
  color: #23285a;
  background-color: transparent;
  border-color: #9aa0c4;
}

.btn-hero-outline:hover {
  color: #fff;
  background-color: #23285a;
  border-color: #23285a;
}

.btn-hero-outline:hover span {
  color: #fff;
}

/* ===================================================================
   SERVICES BAND — navy strip under the hero
   =================================================================== */
.svc-item + .svc-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.svc-item h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
}

.svc-item p {
  color: #dfe2f0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 1023px) {
  /* Desktop right-third photo div not used on mobile */
  .hero-photo {
    display: none;
  }

  /* Mobile uses the new mockup background image (woman + Google badge +
     3 feature pills baked in) as a true CSS background behind all the
     text. background-color is white so the area BELOW the image (where
     the CTA buttons sit) shows as white, matching the mockup's distinct
     white button band between the lavender hero and the navy services.

     min-height = image height (100vw × 557/722) + 60px white band, so
     the section is always tall enough to display the full image plus
     the absolutely-positioned CTA row at the bottom, regardless of how
     much height the headline + subtitle overlay takes up. */
  .hero-new {
    background-color: #fff;
    background-image: url("/static/images/hero-home-mobile.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    min-height: calc(100vw * 557 / 722 + 60px);
    padding-bottom: 0;
  }

  /* No scrim — the new mockup artwork already has lavender baked in on
     the left where the headline overlays. */
  .hero-new::before {
    display: none;
  }

  /* The hero content wrapper carries a `pb-[28px]` utility for spacing
     below the desktop CTA row AND a `relative` utility for stacking
     above the desktop .hero-photo. Both also live on .container itself.
     On mobile they turn into bugs:
     - pb-[28px] becomes dead space below the absolutely-positioned CTA
     - `position: relative` makes the CTA's absolute positioning
       resolve against the wrapper/.container instead of .hero-new,
       dropping the buttons into the middle of the section.
     Reset position on both, and pb on the wrapper. Safe on mobile
     because .hero-photo is display:none, so no z-order concerns. */
  .hero-new > .container,
  .hero-new > .container > div {
    position: static;
  }

  .hero-new > .container > div {
    padding-bottom: 0;
  }

  /* Smaller headline so it (a) fits in the lavender top-left of the
     baked-in image without crowding the woman, and (b) matches the
     reference mockup's headline proportions. max-width keeps the
     longest line ("We Make It Easy.") inside the lavender column so
     it doesn't overlap the woman in the image. */
  .hero-heading {
    font-size: 30px;
    margin-bottom: 8px;
    max-width: 14em;
  }

  /* Subtitle returns on mobile. It sits in the lavender gap between
     the woman (above) and the Google badge (below) baked into the
     hero image — a narrow window where text can sit without
     colliding with the image's content. Smaller font keeps it inside
     that window even when the line wraps; matching max-width keeps it
     in the lavender column. */
  .hero-sub {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    max-width: 22em;
  }

  /* The hero content wrapper holds [h1, p, div.feature-row, div.cta].
     The feature-row div carries an mb-[28px] utility that eats vertical
     space even when its three .hero-feature children are display:none.
     Hide the row itself so its margin doesn't push the headline area
     down. */
  .hero-new .container > div > :nth-child(3) {
    display: none;
  }

  /* CTA row absolutely positioned at the bottom of the section. This
     way the button band stays a constant 60px regardless of how the
     headline+subtitle text wraps above, and the buttons always land on
     the solid white band beneath the baked-in image. */
  .hero-cta {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 10px;
    margin: 0;
    gap: 12px;
  }

  /* The three feature pills are baked into the hero background image
     on mobile — hide the HTML versions so they don't duplicate. */
  .hero-feature {
    display: none;
  }

  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    /* Thinner buttons to match the mockup — about 40px tall vs the
       desktop's 58px. Vertical padding shrinks; horizontal padding
       stays generous so the label still has breathing room. */
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.2;
    /* Override the default nowrap from .hero-cta .btn so longer Spanish
       labels ("Encuentre una Ubicación") can wrap to a second line
       instead of overflowing the button. */
    white-space: normal;
    text-align: center;
  }

  .hero-cta .btn span.fa {
    margin-left: 10px;
  }
}

@media (max-width: 779px) {
  /* Headline size is set by the ≤1023px block above (30px to match the
     mockup); the old 40px override has been removed. */

  .svc-item + .svc-item::before {
    display: none;
  }
}

/* ===================================================================
   PAYROLL FEE CALCULATOR (homepage, below the hero)
   =================================================================== */
.calc-band {
  --calc-navy: #2b3160;
  --calc-red: #e30613;
  position: relative;
  padding: 64px 0 56px;
  /* Same faded stars-and-stripes artwork as the services section,
     stretched over the full section height. */
  background: #fff url(/static/images/services/services-flag-top.png) no-repeat top center;
  background-size: 100% 100%;
  overflow: hidden;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* Grid items default to min-width:auto, which propagates the text
   inputs' intrinsic widths into the 1fr track and overflows narrow
   viewports. Let the items shrink to the track instead. */
.calc-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .calc-grid {
    grid-template-columns: 1fr 480px;
    gap: 72px;
  }
}

.calc-badge {
  display: inline-block;
  background: var(--calc-red);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 28px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.calc-heading {
  color: var(--calc-navy);
  font-size: 48px;
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 24px;
  max-width: 12em;
}

.calc-copy {
  color: #3a3f63;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 30em;
}

.calc-rate {
  color: var(--calc-red);
  font-weight: 800;
}

/* Branch locator: red pill with the zip input nested on the right.
   Wraps the field onto its own row when a language's label is too
   long to leave a usable input (e.g. Spanish at mobile widths). */
.calc-locator {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 6px;
  background: var(--calc-red);
  border-radius: 26px;
  padding: 7px;
  max-width: 520px;
  margin-top: 28px;
}

.calc-locator-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  padding: 0 18px 0 20px;
  white-space: nowrap;
}

/* White pill holding the zip input and the round Go button */
.calc-locator-field {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
}

.calc-locator-field:focus-within {
  outline: 3px solid rgba(43, 49, 96, 0.35);
  outline-offset: -3px;
}

.calc-locator-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 10px 10px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--calc-navy);
  background: transparent;
  text-overflow: ellipsis;
}

.calc-locator-input::placeholder {
  color: #9aa0b8;
}

.calc-locator-input:focus {
  outline: none;
}

.calc-locator-go {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--calc-red);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease;
}

.calc-locator-go:hover {
  background: #c70010;
}

/* Desktop: the zip field takes a full row of its own (label above),
   with the Go button inside it on the right. Must come after the
   .calc-locator-field base rule — its flex shorthand sets flex-basis. */
@media (min-width: 1024px) {
  .calc-locator-field {
    flex-basis: 100%;
  }

  .calc-locator-label {
    padding-top: 6px;
    padding-bottom: 2px;
  }
}

/* Calculator card */
.calc-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px 30px 26px;
  box-shadow: 0 14px 30px rgba(20, 28, 70, 0.12);
}

.calc-label {
  display: block;
  color: var(--calc-navy);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
}

.calc-amount-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #c8cbdd;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 18px;
}

.calc-amount-wrap:focus-within {
  border-color: var(--calc-navy);
  box-shadow: 0 0 0 2px rgba(43, 49, 96, 0.18);
}

.calc-amount-symbol {
  color: #222;
  font-size: 26px;
  font-weight: 700;
  margin-right: 12px;
}

.calc-amount-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  font-size: 26px;
  font-weight: 700;
  color: #222;
  text-align: center;
}

.calc-amount-input:focus {
  outline: none;
}

/* First-time customer info strip */
.calc-offer {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  background: #dbe3f5;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.calc-offer-icon {
  color: var(--calc-navy);
  font-size: 22px;
}

.calc-offer-type {
  color: var(--calc-navy);
  font-size: 16px;
  font-weight: 600;
  padding-right: 14px;
  border-right: 2px solid var(--calc-navy);
}

.calc-offer-desc {
  color: var(--calc-navy);
  font-size: 13px;
  line-height: 1.35;
}

/* Footnote marker tying the 1.5% claim in the intro copy to the
   disclaimer inside the calculator card. Navy rather than the red of
   .calc-rate: the note sits on the #dbe3f5 offer card, where red is
   only 4.02:1 and misses AA for 13px text. */
.calc-star {
  color: var(--calc-navy);
  font-weight: 800;
}

.calc-offer-desc .calc-star {
  margin-right: 3px;
}

.calc-btn {
  display: block;
  width: 100%;
  background: var(--calc-red);
  color: #fff;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.calc-btn:hover {
  background: #c70010;
}

.calc-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid #d4d6e3;
  margin-top: 20px;
  padding-top: 16px;
}

.calc-result-label {
  color: #3a3f63;
  font-size: 16px;
  margin: 0 0 6px;
}

.calc-result-pay {
  color: var(--calc-navy);
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.calc-result-amount {
  color: var(--calc-red);
  font-size: 44px;
  font-weight: 800;
  white-space: nowrap;
}

.calc-note {
  color: #3a3f63;
  font-size: 15px;
  text-align: center;
  margin: 14px 0 0;
}

@media (max-width: 1023px) {
  .calc-band {
    padding: 44px 0 40px;
  }

  .calc-heading {
    /* !important beats the global "h2 { font-size: 40px !important }"
       mobile rule at ≤779px. */
    font-size: 32px !important;
    margin-bottom: 16px;
  }

  .calc-copy {
    font-size: 16px;
  }

  .calc-locator-label {
    font-size: 16px;
    padding: 0 14px 0 16px;
  }

  .calc-locator-input {
    font-size: 16px;
    padding: 9px 10px 9px 14px;
  }

  .calc-locator-go {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .calc-card {
    padding: 22px 20px 20px;
  }

  .calc-amount-symbol,
  .calc-amount-input {
    font-size: 22px;
  }

  .calc-result-amount {
    font-size: 34px;
  }
}

/* Narrow screens: the landscape artwork gets too stretched — swap to
   the portrait rendition, like the services section does. */
@media (max-width: 779px) {
  .calc-band {
    background: #fff url(/static/images/services/services-bg-mobile.png) no-repeat top center;
    background-size: cover;
  }
}

@media (max-width: 479px) {
  /* Stack the offer strip: icon + label on the first row, description
     below, so the three-column grid doesn't squeeze the text. */
  .calc-offer {
    grid-template-columns: auto 1fr;
  }

  .calc-offer-desc {
    grid-column: 1 / -1;
  }

  .calc-offer-type {
    border-right: 0;
    padding-right: 0;
  }
}

/* ===================================================================
   WHY-CHOOSE-US BAND (homepage navy strip after Our Services)
   =================================================================== */
.why-band {
  background: #393e66;
  padding: 56px 0;
}

.why-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 6px 28px;
}

.why-item:first-child {
  padding-left: 0;
}

.why-item:last-child {
  padding-right: 0;
}

.why-item + .why-item {
  border-left: 2px solid rgba(255, 255, 255, 0.85);
}

.why-item img {
  width: auto;
  height: 56px;
  flex-shrink: 0;
  margin-top: 4px;
}

.why-item h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.why-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #e6e9f5;
}

@media (max-width: 1023px) {
  .why-band {
    padding: 40px 0;
  }

  /* 2x2 grid without dividers, per the mobile mockup. */
  .why-band-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .why-item,
  .why-item:first-child,
  .why-item:last-child {
    padding: 0 12px;
  }

  .why-item + .why-item {
    border-left: 0;
  }

  .why-item img {
    height: 44px;
    margin-top: 2px;
  }

  .why-item h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .why-item p {
    font-size: 14px;
  }
}

/* ===================================================================
   MAP BAND (homepage "Proudly Serving South Florida" section)
   =================================================================== */
.map-band {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #fff;
}

/* Full-bleed flag-and-map artwork (store pins baked in). Portrait and
   landscape renditions of the same design serve mobile and desktop. */
.map-band-art {
  position: absolute;
  inset: 0;
  background: url("/static/images/map-band-mobile.jpg") right center / cover no-repeat;
}

@media (min-width: 1024px) {
  /* 59.6vw = the landscape artwork's aspect ratio (2861/4801). Keeping
     the section at least that tall means `cover` scales by height, so
     the pin column is never cropped vertically — only the flag edge on
     the left is trimmed on smaller desktops. */
  .map-band {
    min-height: 59.6vw;
  }

  .map-band-art {
    background-image: url("/static/images/map-band-desktop.jpg");
    background-position: right center;
  }
}

/* The content column is kept compact enough that at typical desktop
   widths the section stays at its min-height (the artwork's natural
   framing) instead of forcing `cover` to zoom the map under the text. */
.map-band-content {
  position: relative;
  z-index: 2;
  max-width: 470px;
  padding: 48px 0 56px;
}

.map-band-logo {
  width: 216px;
  height: auto;
}

.map-band-tagline {
  display: inline-block;
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.map-band-since {
  display: block;
  text-align: center;
  font-size: 16px;
  color: var(--color-red);
}

.map-band-eyebrow {
  margin: 32px 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-red);
}

.map-band-heading {
  margin: 0 0 18px;
  /* Narrow enough that the English heading breaks after "Serving"
     (two balanced lines) rather than orphaning "Florida". */
  max-width: 8.5em;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 700;
  color: #23285a;
}

.map-band-text {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.5;
  color: #3a3f63;
}

.map-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px;
  border-radius: 999px;
  background-color: var(--color-red);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.map-band-btn:hover,
.map-band-btn:focus {
  background-color: #c70010;
  color: #fff;
}

@media (max-width: 1023px) {
  /* 109.2vw = the portrait artwork's aspect ratio (2955/2706); on wider
     phones/tablets it keeps `cover` scaling by height so the pins are
     never cropped vertically. On small phones the content column is
     taller than this and sets the height instead. */
  .map-band {
    min-height: 109.2vw;
  }

  /* The artwork has a thin white strip along its top edge that reads as
     a gap below the navy band above. A slight zoom (biased upward, 40%)
     crops it out while keeping the topmost pin (4.7% from the edge) and
     the bottom flag stripes in frame. */
  .map-band-art {
    background-size: auto 105%;
    background-position: right 40%;
  }

  /* On narrow screens the text column has to overlap the artwork, so a
     white gradient keeps the copy on a readable near-white background
     while the map and pins stay vivid along the right edge (mockup
     look: the state fades in from the white text side). */
  .map-band-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 42%,
      rgba(255, 255, 255, 0.55) 62%,
      rgba(255, 255, 255, 0) 80%
    );
  }

  .map-band-content {
    padding: 40px 0 52px;
  }

  .map-band-logo {
    width: 200px;
  }

  .map-band-tagline {
    font-size: 17px;
  }

  .map-band-since {
    font-size: 15px;
  }

  .map-band-eyebrow {
    margin-top: 34px;
    font-size: 15px;
  }

  .map-band-heading {
    font-size: 32px;
    max-width: 9em;
  }

  .map-band-text {
    font-size: 16px;
    max-width: 20em;
    margin-bottom: 28px;
  }

  /* Where a long line drifts over the artwork, a white glow keeps the
     navy copy legible against the pale map. */
  .map-band-heading,
  .map-band-text {
    text-shadow:
      0 0 14px rgba(255, 255, 255, 0.95),
      0 0 5px rgba(255, 255, 255, 0.85);
  }

  .map-band-btn {
    font-size: 17px;
    padding: 14px 34px;
  }
}

/* ===================================================================
   CHECK CASHING LANDING PAGE (ccl-*) — /check-cashing/
   Colors sampled from the cclanding design mockups:
   navy #262c5d, red #ec081b, section bg #f1f6fc, card bg #d7e4f7
   =================================================================== */
.ccl-red {
  color: #ec081b;
}

/* --- Hero: navy left panel, teller photo right --- */
.ccl-hero {
  position: relative;
  background-color: #262c5d;
  overflow: hidden;
}

.ccl-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: url("/static/images/ccl-hero.jpg") center right / cover no-repeat;
  z-index: 0;
}

/* Fade the photo's left edge into the navy panel */
.ccl-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #262c5d 0%, rgba(38, 44, 93, 0.55) 18%, rgba(38, 44, 93, 0) 45%);
}

.ccl-hero-content {
  position: relative;
  max-width: 100%;
  padding: 40px 0 44px;
}

@media (min-width: 1024px) {
  .ccl-hero-content {
    max-width: 46%;
    padding: 84px 0 96px;
  }
}

.ccl-hero-heading {
  font-size: 52px;
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
}

.ccl-hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: #e8ebf7;
  margin-bottom: 34px;
}

/* Two-column check-type list with red check icons */
.ccl-hero-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  max-width: 560px;
}

.ccl-hero-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.ccl-hero-list .fa {
  color: #ec081b;
  font-size: 20px;
  background: #fff;
  border-radius: 50%;
  line-height: 1;
}

/* Hero CTA row. Deliberately NOT .hero-cta — that class gets absolutely
   positioned to the hero bottom on mobile for the homepage design and
   would overlap the check-type list here. */
.ccl-hero-cta .btn {
  font-size: 20px;
  line-height: 20px;
  padding: 18px 40px;
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
  justify-content: center;
}

/* Desktop: let the button row size to its content and extend past the
   46% text column (over the photo's faded gradient) instead of wrapping.
   The longer Spanish/Creole "Find a Location" label ("Encuentre una
   Ubicación") would otherwise push "Call Now" to a second line, unlike
   the English version. */
@media (min-width: 1024px) {
  .ccl-hero-cta {
    width: max-content;
    max-width: none;
  }
}

.ccl-hero-cta .btn span.fa {
  margin-left: 18px;
}

@media (max-width: 1023px) {
  .ccl-hero-cta .btn {
    padding: 12px 22px;
    font-size: 16px;
    white-space: normal;
    text-align: center;
  }
}

/* White-outline button for dark backgrounds (hero Call Now) */
.ccl-btn-outline-white,
.ccl-btn-outline-white:focus {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

.ccl-btn-outline-white span,
.ccl-btn-outline-white:focus span {
  color: #fff;
}

.ccl-btn-outline-white:hover {
  color: #262c5d;
  background-color: #fff;
  border-color: #fff;
}

.ccl-btn-outline-white:hover span {
  color: #262c5d;
}

/* Navy-outline button on light backgrounds (thank-you band) */
.ccl-btn-outline-navy,
.ccl-btn-outline-navy:focus {
  color: #262c5d;
  background-color: transparent;
  border-color: #262c5d;
}

.ccl-btn-outline-navy span,
.ccl-btn-outline-navy:focus span {
  color: #262c5d;
}

.ccl-btn-outline-navy:hover {
  color: #fff;
  background-color: #262c5d;
  border-color: #262c5d;
}

.ccl-btn-outline-navy:hover span {
  color: #fff;
}

/* --- Red section title bars (why band / steps band) --- */
.ccl-bar-red {
  background: #ec081b;
  padding: 22px 16px;
}

.ccl-bar-red h2 {
  color: #fff;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  margin: 0;
}

/* --- Landing-page calculator variant (mock 4.0): full-width navy
   NEW CUSTOMER OFFER bar on top instead of the homepage's red pill
   badge, and the branch locator on a single row. --- */
.ccl-bar-navy {
  background: #262c5d;
  padding: 16px;
}

.ccl-bar-navy p {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

.ccl-calc {
  padding-top: 0;
}

/* Drops the stars-and-stripes artwork behind the payroll calculator.
   Two classes, so it beats both the base .calc-band background and the
   portrait swap in the <=779px block regardless of source order. The
   homepage and the store detail pages keep the flag. */
.calc-band.ccl-calc-plain {
  background: #fff;
}

.ccl-calc .ccl-bar-navy {
  margin-bottom: 56px;
}

@media (min-width: 1024px) {
  /* The homepage stacks the zip field on its own row under the label;
     the mock keeps label and field side by side. */
  .ccl-calc .calc-locator-field {
    flex-basis: 150px;
  }

  .ccl-calc .calc-locator-label {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* --- Why thousands choose us: navy band with 6 icon columns --- */
.ccl-why-band {
  background: #262c5d;
  padding: 48px 0 54px;
}

.ccl-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 20px;
}

@media (min-width: 700px) {
  .ccl-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ccl-why-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.ccl-why-item {
  text-align: center;
  padding: 0 6px;
}

@media (min-width: 1024px) {
  .ccl-why-item + .ccl-why-item {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
  }
}

.ccl-why-item .fa {
  font-size: 44px;
  color: #fff;
  margin-bottom: 18px;
}

.ccl-why-item h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.ccl-why-item p {
  color: #d6dbef;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

/* --- We cash almost every type of check: light grid of cards --- */
.ccl-types {
  background: #f1f6fc;
  padding: 56px 0 64px;
}

.ccl-types-heading {
  text-align: center;
  color: #262c5d;
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 44px;
}

.ccl-types-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 640px) {
  .ccl-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ccl-types-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ccl-type-card {
  background: #d7e4f7;
  border-radius: 26px;
  padding: 28px 24px;
}

.ccl-type-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ccl-type-head .fa {
  font-size: 26px;
  color: #262c5d;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.ccl-type-head h3 {
  color: #262c5d;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.ccl-type-card > p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* --- How it works: navy band with 4 steps and arrows --- */
.ccl-steps-band {
  background: #262c5d;
  padding: 52px 0 58px;
}

.ccl-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

@media (min-width: 1024px) {
  .ccl-steps-grid {
    grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
    gap: 0;
  }
}

.ccl-step {
  text-align: center;
  padding: 0 10px;
}

.ccl-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 20px;
}

.ccl-step-icon .fa {
  font-size: 38px;
  color: #262c5d;
}

.ccl-step-num {
  color: #ec081b;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
}

.ccl-step h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
}

.ccl-step > p:last-child {
  color: #d6dbef;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.ccl-step-arrow {
  display: none;
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .ccl-step-arrow {
    display: block;
  }
}

/* --- Why us instead of the bank: copy + store photo + checklist --- */
.ccl-bank {
  background: #fff url(/static/images/services/services-flag-top.png) no-repeat top center;
  background-size: 100% auto;
}

.ccl-bank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 0 60px;
}

@media (min-width: 1024px) {
  .ccl-bank-grid {
    grid-template-columns: 1.15fr 340px 1fr;
    gap: 48px;
  }
}

.ccl-bank-copy h2 {
  color: #262c5d;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 22px;
}

.ccl-bank-copy p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.ccl-bank-copy .btn {
  margin-top: 14px;
}

.ccl-bank-photo {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 6px;
  justify-self: center;
}

.ccl-bank-list {
  display: grid;
  gap: 24px;
}

.ccl-bank-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #262c5d;
  font-size: 17px;
  line-height: 1.4;
}

.ccl-bank-list .fa {
  color: #262c5d;
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Stats band under the bank comparison */
.ccl-stats {
  background: #262c5d;
  padding: 40px 0;
}

.ccl-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 640px) {
  .ccl-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ccl-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ccl-stat {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ccl-stat > .fa {
  font-size: 44px;
  color: #fff;
  flex-shrink: 0;
}

.ccl-stat-value {
  color: #ec081b;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  margin: 0;
}

.ccl-stat-label {
  color: #fff;
  font-size: 17px;
  margin: 4px 0 0;
}

/* --- FAQ + bank comparison + reviews --- */
.ccl-faq {
  background: #f7fafd;
  padding: 60px 0 70px;
}

.ccl-h2 {
  color: #262c5d;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 28px;
}

.ccl-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .ccl-faq-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.ccl-faq-item {
  background: #d7e4f7;
  border-radius: 18px;
  margin-bottom: 16px;
}

.ccl-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 26px;
}

.ccl-faq-item summary::-webkit-details-marker {
  display: none;
}

.ccl-faq-item summary h3 {
  color: #262c5d;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.ccl-faq-item summary .fa {
  color: #262c5d;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ccl-faq-item[open] summary .fa {
  transform: rotate(45deg);
}

.ccl-faq-item > p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  padding: 0 26px 20px;
}

/* Bank vs Check Cashing USA comparison table */
.ccl-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(38, 44, 93, 0.1);
}

.ccl-compare th {
  padding: 18px 22px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.ccl-compare-bank {
  background: #262c5d;
}

.ccl-compare-usa {
  background: #ec081b;
}

/* The icon is absolutely positioned inside the cell's left padding so
   wrapped labels ("Appointment Sometimes") stay aligned beside the
   icon instead of continuing underneath it. */
.ccl-compare td {
  position: relative;
  padding: 15px 22px 15px 70px;
  color: #262c5d;
  font-size: 16px;
  font-weight: 600;
  border-top: 1px solid #e3e9f4;
  width: 50%;
  vertical-align: middle;
}

.ccl-compare td:first-child {
  border-right: 1px solid #e3e9f4;
}

.ccl-compare td .fa {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
}

.ccl-compare td:first-child .fa {
  background: #262c5d;
}

.ccl-compare td:last-child .fa {
  background: #ec081b;
}

/* Reviews heading needs breathing room from the FAQ/comparison grid
   above it (overrides .ccl-h2's margin shorthand, which loads here too). */
.ccl-reviews-h2 {
  margin-top: 72px;
}

/* Customer review cards */
.ccl-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .ccl-reviews-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ccl-review {
  background: #e3eefa;
  border-radius: 24px;
  padding: 28px 30px;
}

.ccl-review-stars {
  margin: 0 0 14px;
}

.ccl-review-stars .fa {
  color: #f6b60d;
  font-size: 20px;
  margin-right: 4px;
}

.ccl-review > p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.ccl-review-name {
  text-align: right;
  font-weight: 600;
  color: #262c5d;
  margin-top: 12px;
}

/* --- Thank you for 10,000+ Google reviews --- */
.ccl-thanks {
  background: #fff;
  overflow: hidden;
}

.ccl-thanks-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .ccl-thanks-grid {
    grid-template-columns: 1fr 1.3fr 1fr;
  }
}

.ccl-thanks-left {
  text-align: center;
  padding: 44px 24px 10px;
}

@media (min-width: 1024px) {
  .ccl-thanks-left {
    padding: 48px 20px 48px 40px;
    border-right: 1px solid #c9cfe2;
  }
}

/* The mockup's thank-you band uses a flat neutral bold sans (Segoe-like)
   rather than Raleway, and a handwritten script for "We appreciate you!". */
.ccl-thanks-title {
  color: #262c5d;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

.ccl-thanks-count {
  color: #ec081b;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  margin: 4px 0;
}

.ccl-thanks-mid {
  text-align: center;
  padding: 24px 24px 34px;
}

@media (min-width: 1024px) {
  .ccl-thanks-mid {
    padding: 48px 30px;
  }
}

.ccl-thanks-line {
  color: #262c5d;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
}

.ccl-thanks-line .fa {
  color: #a91422;
  margin-right: 10px;
}

.ccl-thanks-script {
  font-family: "Dancing Script", cursive;
  color: #262c5d;
  font-size: 46px;
  font-weight: 700;
  margin: 0;
}

.ccl-thanks-mid .btn {
  margin-top: 0;
}

/* Navy diagonal panel with the 10K+ badge */
.ccl-thanks-badge {
  position: relative;
  background: #393d65;
  text-align: center;
  padding: 36px 24px 30px;
}

@media (min-width: 1024px) {
  .ccl-thanks-badge {
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    padding: 36px 24px 30px 60px;
  }
}

.ccl-thanks-badge img {
  width: 220px;
  height: auto;
  display: inline-block;
}

.ccl-thanks-rated {
  color: #fff;
  font-size: 14px;
  margin: 14px 0 6px;
}

.ccl-thanks-real {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 0;
}

@media (max-width: 1023px) {
  /* Photo becomes a full-width backdrop behind the text with a heavier
     navy overlay so the white copy stays readable. */
  .ccl-hero-photo {
    width: 100%;
  }

  .ccl-hero-photo::before {
    background: rgba(38, 44, 93, 0.88);
  }

  .ccl-hero-heading {
    font-size: 34px;
  }

  .ccl-hero-sub {
    font-size: 17px;
  }

  .ccl-hero-list li {
    font-size: 15px;
  }

  .ccl-bar-red h2 {
    font-size: 24px;
  }

  .ccl-types-heading {
    font-size: 30px;
  }

  .ccl-bank-copy h2 {
    font-size: 27px;
  }

  .ccl-h2 {
    font-size: 27px;
  }

  .ccl-compare th {
    font-size: 16px;
    padding: 14px 12px;
  }

  .ccl-compare td {
    font-size: 13px;
    padding: 12px 10px 12px 44px;
  }

  .ccl-compare td .fa {
    left: 10px;
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .ccl-thanks-count {
    font-size: 48px;
  }

  .ccl-thanks-title {
    font-size: 24px;
  }
}

/* ===================================================================
   SERVICES PAGE (svp-*) — /services/
   Built from the newservices/ design mockups; shares the ccl-* palette:
   navy #262c5d, red #ec081b, section bg #f1f6fc, card bg #d7e4f7.
   Reuses ccl-* components (why band, stats, FAQ items, review cards).
   =================================================================== */

/* --- Hero: the background image bakes in the navy left gradient --- */
.svp-hero {
  position: relative;
  background-color: #262c5d;
  overflow: hidden;
}

/* Fitted to the hero's height and pinned right, NOT cover: the customer's
   hairline sits 3.6% down the plate, so there is no headroom to spend.
   The panel is 78% of the section, so past a ~1435px viewport it is
   wider than the plate's 1.943 aspect and cover crops vertically - 25%
   of the height at 1920, half of it off the top, which decapitates her.
   Fitting to the height instead never crops vertically; the slack it
   leaves on the panel's left is filled by the section's own navy, which
   the plate's flat left column matches exactly. Below 1024px the panel
   goes full width under a navy wash and cover takes over again. */
.svp-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  background: url("/static/images/services/svp-hero.jpg") right center / auto 100% no-repeat;
  z-index: 0;
}

.svp-hero-content {
  position: relative;
  max-width: 100%;
  padding: 40px 0 44px;
}

@media (min-width: 1024px) {
  .svp-hero-content {
    max-width: 44%;
    padding: 84px 0 96px;
  }
}

/* The Spanish heading ("Servicios Financieros / en los que Puede
   Confiar") is too wide for the hero column at 52px and wraps to four
   lines; scale it down so it keeps the mockup's two-line shape like
   English and Creole. */
html[lang="es"] .svp-hero .ccl-hero-heading {
  font-size: 41px;
}

@media (max-width: 1023px) {
  html[lang="es"] .svp-hero .ccl-hero-heading {
    font-size: 27px;
  }
}

.svp-hero-lead {
  color: #fff;
  font-size: 21px;
  line-height: 1.5;
  margin: 40px 0 26px;
}

.svp-hero-sub {
  color: #e8ebf7;
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  max-width: 480px;
}

/* Larger map-pin / phone icons in the hero CTA buttons, per mockup */
.svp-hero .ccl-hero-cta .btn span.fa {
  font-size: 26px;
}

/* Why band icons cropped from the mockup (navy canvas matches the band) */
.svp-why .ccl-why-item img {
  display: block;
  height: 66px;
  width: auto;
  margin: 0 auto 16px;
}

/* Below the 1200px container the plate is clipped hard on its left - at
   1024 the panel is 799px wide but the height-fitted plate is 1290, so
   493px of its flat navy column is cut and the copy's right half lands
   on the photo (lead 2.98:1, sub 2.47:1 measured). This tops the navy
   back up to where the copy ends: opaque to 32% of the panel - the copy
   ends at 28.4% of it at every width in this band - then fading out.
   Painting navy over navy is invisible, so it only shows where the plate
   has run out. The 1023px block below replaces it with the flat wash. */
@media (max-width: 1199px) {
  .svp-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #262c5d 0%, #262c5d 32%, rgba(38, 44, 93, 0) 55%);
  }
}

@media (max-width: 1023px) {
  /* Full-width backdrop with a heavier navy overlay for legibility. */
  .svp-hero-photo {
    width: 100%;
    background-size: cover;
  }

  .svp-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 44, 93, 0.88);
  }

  .svp-hero-lead {
    font-size: 18px;
    margin-top: 22px;
  }

  .svp-hero-sub {
    font-size: 16px;
  }
}

/* --- Explore Our Financial Services: 4-across card grid --- */
.svp-cards {
  background: #f1f6fc;
  padding: 56px 0 64px;
}

.svp-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 640px) {
  .svp-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .svp-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.svp-card {
  background: #d7e4f7;
  border-radius: 26px;
  padding: 34px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svp-card img {
  height: 60px;
  width: auto;
  margin-bottom: 22px;
}

.svp-card h3 {
  color: #262c5d;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 12px;
}

.svp-card p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.svp-more {
  margin-top: auto;
  color: #262c5d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svp-more .fa {
  color: #262c5d;
  font-size: 19px;
  vertical-align: -2px;
  margin-left: 8px;
}

.svp-more:hover {
  color: #ec081b;
}

/* --- One Stop Financial Center: navy band, photo left. The photo
   sits flush with the band's top and bottom edges per the mockup, so
   the section itself has no vertical padding — the copy column carries
   its own. --- */
.svp-onestop {
  background: #262c5d;
  padding: 0;
}

.svp-onestop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 1024px) {
  .svp-onestop-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
  }
}

.svp-onestop-photo {
  display: block;
  width: 100%;
  height: auto;
}

.svp-onestop-copy {
  padding: 36px 0 44px;
}

@media (min-width: 1024px) {
  .svp-onestop-copy {
    padding: 44px 0;
  }
}

.svp-onestop h2 {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 20px;
}

.svp-onestop p {
  color: #e8ebf7;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

@media (max-width: 1023px) {
  .svp-onestop h2 {
    font-size: 27px;
  }

  .svp-onestop p {
    font-size: 16px;
  }
}

/* --- How it works: 5 steps with red separators, over white --- */
.svp-steps {
  background: #fff;
}

.svp-steps > .container {
  padding-top: 36px;
  padding-bottom: 40px;
}

.svp-steps .ccl-types-heading {
  margin-bottom: 34px;
}

.svp-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

@media (min-width: 700px) {
  .svp-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .svp-steps-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .svp-step + .svp-step {
    border-left: 2px solid #ec081b;
  }
}

.svp-step {
  text-align: center;
  padding: 0 14px;
}

/* Tailwind preflight makes img block-level, so center it explicitly */
.svp-step img {
  display: block;
  height: 132px;
  width: auto;
  margin: 0 auto 6px;
}

.svp-step h3 {
  color: #262c5d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.svp-step p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Stats band under the steps: tone the red values down from the
   check-cashing page's 800-weight display size. The slightly lighter
   red hits the WCAG AA 3:1 large-text contrast minimum on the navy
   band (#ec081b is only 2.88:1). */
.svp-steps .ccl-stat-value {
  font-size: 34px;
  font-weight: 700;
  color: #f5222b;
}

/* Stats icons cropped from the mockup (navy canvas matches the band) */
.svp-steps .ccl-stat img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

/* --- FAQ + find-your-location promo --- */
.svp-faq {
  background: #fff;
  padding: 60px 0 70px;
}

/* Mockup title: centered over the questions, regular bold weight */
.svp-faq .ccl-h2 {
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}

/* Mockup pills are tighter than the shared FAQ style and each question
   sits on a single line, so the list stays close to the promo block.
   The /locations/ FAQ (.loc-faq-list) uses the same mockup pill. */
.svp-faq .ccl-faq-item summary,
.loc-faq-list .ccl-faq-item summary,
.abt-faq-list .ccl-faq-item summary {
  padding: 16px 24px;
}

.svp-faq .ccl-faq-item summary h3,
.loc-faq-list .ccl-faq-item summary h3,
.abt-faq-list .ccl-faq-item summary h3 {
  font-size: 17px;
}

.svp-faq-list .ccl-faq-item:last-child,
.loc-faq-list .ccl-faq-item:last-child,
.abt-faq-list .ccl-faq-item:last-child {
  margin-bottom: 0;
}

/* Hollow-cross toggle icon cropped from the mockup (pill-blue canvas) */
.svp-faq .ccl-faq-item summary .svp-cross,
.loc-faq-list .ccl-faq-item summary .svp-cross,
.hfaq-list .ccl-faq-item summary .svp-cross,
.abt-faq-list .ccl-faq-item summary .svp-cross {
  width: 22px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.svp-faq .ccl-faq-item[open] summary .svp-cross,
.loc-faq-list .ccl-faq-item[open] summary .svp-cross,
.hfaq-list .ccl-faq-item[open] summary .svp-cross,
.abt-faq-list .ccl-faq-item[open] summary .svp-cross {
  transform: rotate(45deg);
}

.svp-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
  column-gap: 0;
  align-items: start;
}

.svp-faq-side {
  margin-top: 20px;
}

/* Title sits above the questions only; the promo block starts level with
   the first FAQ item (mockup 6.0). */
@media (min-width: 1024px) {
  .svp-faq-grid {
    grid-template-columns: 1fr 1.05fr;
    column-gap: 64px;
  }

  .svp-faq-title {
    grid-column: 1;
    grid-row: 1;
  }

  .svp-faq-list {
    grid-column: 1;
    grid-row: 2;
  }

  .svp-faq-side {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

.svp-promo-img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 2px 14px rgba(38, 44, 93, 0.12);
}

.svp-promo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ec081b;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  padding: 13px 24px;
  margin-top: 34px;
}

.svp-promo-btn:hover {
  background: #c90717;
  color: #fff;
}

.svp-promo-btn .fa {
  font-size: 20px;
}

@media (max-width: 1023px) {
  .svp-promo-btn {
    font-size: 16px;
    padding: 11px 20px;
  }
}

/* --- Reviews: navy title bar + cards with Google G --- */
.svp-bar-navy {
  background: #393d65;
  padding: 22px 16px;
}

.svp-bar-navy h2 {
  color: #fff;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  margin: 0;
}

.svp-reviews {
  background: #fff;
  padding-bottom: 64px;
}

.svp-reviews-grid {
  margin-top: 48px;
}

.svp-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.svp-review-top .ccl-review-stars {
  margin: 0;
}

.svp-google-g {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .svp-bar-navy h2 {
    font-size: 24px;
  }
}

/* --- Trusted by thousands: copy | 4.9 score | 10K badge --- */
.svp-trusted {
  background: #fff;
  border-top: 1px solid #e3e9f4;
  padding: 54px 0 60px;
}

.svp-trusted-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

@media (min-width: 1024px) {
  .svp-trusted-grid {
    grid-template-columns: 1.15fr 1.1fr 0.75fr;
    gap: 0;
  }

  /* Single divider between the copy and the score column only — the
     mockup has no break before the 10K badge. */
  .svp-trusted-score {
    border-left: 1px solid #c9cfe2;
  }

  .svp-trusted-copy {
    padding-right: 44px;
  }

  .svp-trusted-score {
    padding: 0 36px;
  }
}

.svp-eyebrow {
  display: inline-block;
  color: #ec081b;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-bottom: 3px solid #ec081b;
  padding-bottom: 6px;
  margin: 0 0 20px;
}

.svp-trusted-copy h2 {
  color: #262c5d;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 18px;
}

.svp-trusted-text {
  color: #33395f;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.svp-trusted-score {
  text-align: center;
}

/* Stars sized to span the 4.9 + "out of 5 Stars" cluster below them */
.svp-score-stars .fa {
  font-size: 42px;
  margin: 0 7px;
}

.svp-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  text-align: left;
}

.svp-score-value {
  color: #262c5d;
  font-size: 74px;
  line-height: 1;
  font-weight: 800;
  margin: 0;
}

.svp-score-outof {
  color: #262c5d;
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}

.svp-score-based {
  color: #33395f;
  font-size: 16px;
  margin: 4px 0 0;
}

/* Compact buttons so Read Reviews + Find a Location fit on one row
   inside the narrow middle column, as in the mockup. */
.svp-trusted-score .btn {
  font-size: 15px;
  line-height: 15px;
  padding: 12px 22px;
  margin-top: 0;
}

.svp-trusted-badge {
  text-align: center;
}

.svp-trusted-badge img {
  width: 250px;
  height: auto;
  display: inline-block;
}

@media (max-width: 1023px) {
  .svp-trusted-copy h2 {
    font-size: 28px;
  }

  .svp-score-value {
    font-size: 56px;
  }
}

/* ===================================================================
   LOCATIONS PAGE (loc-*) — /locations/
   Built from the new_locations_look/ design mockups; shares the palette
   used by ccl-* and svp-*: navy #262c5d, hero/tab navy #373965,
   red #ec081b, section bg #f1f6fc, card bg #d7e4f7.
   Reuses svp-* components outright for the reviews bar, review cards
   and the 4.9-score band, and ccl-faq-item for the FAQ accordion.
   =================================================================== */

.loc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Hero: search over the pinned South Florida map --- */

/* The mockup background already fades to near-white on its left third;
   the extra gradient keeps the headline legible once `cover` crops that
   fade away on narrower viewports. */
.loc-hero {
  background:
    linear-gradient(90deg, rgba(247, 250, 254, 0.94) 0%, rgba(247, 250, 254, 0.8) 34%, rgba(247, 250, 254, 0) 62%),
    url("/static/images/locations/loc-hero.jpg") center right / cover no-repeat;
  padding: 62px 0 44px;
}

/* Wide enough to keep the search field and Use My Location on one row,
   as in the mockup, without the headline running under the map pins. */
.loc-hero-copy {
  max-width: 790px;
}

.loc-hero-title,
.loc-hero-count,
.loc-hero-sub {
  max-width: 640px;
}

.loc-hero-title {
  font-size: 62px;
  line-height: 1.12;
  font-weight: 800;
  color: #373965;
  margin: 0 0 22px;
}

.loc-hero-title span {
  display: block;
}

.loc-hero-title-red {
  color: #ec081b;
}

.loc-hero-count {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 700;
  color: #373965;
  margin: 0 0 10px;
}

.loc-hero-count .fa {
  color: #ec081b;
  font-size: 26px;
}

.loc-hero-sub {
  font-size: 19px;
  color: #3a3f63;
  margin: 0 0 34px;
}

.loc-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* Two nested stadiums, as in the mockup: the white input pill sits on
   top of the red button pill, so the white right edge reads as a curve
   inside the red rather than a straight seam. The field itself is only
   the shared drop shadow. */
.loc-search-field {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 470px;
  height: 62px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(38, 44, 93, 0.12);
}

.loc-search-field .branch-locator-input {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: #fff;
  border-radius: 999px;
  padding: 0 26px 0 28px;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  color: #33395f;
}

.loc-search-field .branch-locator-input::placeholder {
  color: #7d84a5;
}

/* Chrome/Safari draw their own clear button inside type="search" */
.loc-search-field .branch-locator-input::-webkit-search-decoration,
.loc-search-field .branch-locator-input::-webkit-search-cancel-button {
  appearance: none;
}

.loc-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icon sits near the right edge, as in the mockup, rather than centred
     in the pill (which the underlap would push too far left). */
  justify-content: flex-end;
  flex-shrink: 0;
  /* Slides left under the input's rounded end; the negative margin is
     what makes the white pill look nested inside the red one. */
  width: 150px;
  margin-left: -52px;
  height: 100%;
  padding-left: 46px;
  padding-right: 20px;
  border: 0;
  border-radius: 999px;
  background: #ec081b;
  cursor: pointer;
  transition: background-color 0.3s;
}

.loc-search-btn:hover {
  background: #c70010;
}

/* Inline SVG rather than Font Awesome's fa-search: the mockup glyph is a
   double-ring lens with an outlined 45-degree handle, drawn straight on
   the red with no white disc behind it. Geometry measured off
   new_locations_look/1 - LOCATIONS- LANDING PAGE.png; it inherits the
   button's colour, so the hover state needs no extra rule. */
.loc-search-icon {
  width: 36px;
  height: 36px;
  color: #fff;
}

.loc-geo-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 30px 0 17px;
  border: 0;
  border-radius: 999px;
  background: #373965;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.loc-geo-btn:hover {
  background: #262c5d;
}

/* Inline SVG rather than fa-crosshairs: the mockup glyph is a crosshair
   ring with a person inside it. Geometry measured off the same mockup as
   .loc-search-icon; inherits the button's colour. */
.loc-geo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.loc-errors {
  margin-top: 18px;
  max-width: 620px;
}

.loc-error {
  background: #fdeaec;
  border: 1px solid #f4bcc2;
  border-radius: 12px;
  color: #b4000f;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 18px;
  margin-bottom: 10px;
}

/* --- Hero service bar: white stadium with red dividers --- */
.loc-servicebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 4px;
  list-style: none;
  margin: 56px 0 0;
  padding: 14px 18px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(38, 44, 93, 0.1);
}

/* Items size to their label rather than taking an equal share, so the
   English labels each fit on one line. The bar wraps to a second row
   rather than letting the longer Spanish and Creole names run into the
   red divider beside them. */
.loc-servicebar li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  color: #373965;
  text-align: left;
}

.loc-servicebar li + li {
  border-left: 2px solid #ec081b;
}

.loc-servicebar img {
  width: auto;
  height: 32px;
  flex-shrink: 0;
}

/* --- Directory: map panel + result cards --- */
.loc-directory {
  background: #f1f6fc;
  padding: 42px 0 58px;
}

.loc-directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

@media (min-width: 1024px) {
  .loc-directory-grid {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    gap: 36px;
    /* Map panel grows to the height of the card column beside it rather
       than keeping a fixed height of its own. */
    align-items: stretch;
  }

  .loc-map-col {
    display: flex;
    flex-direction: column;
  }

  .loc-map-panel {
    display: flex;
    flex: 1;
  }

  .loc-map {
    height: auto;
    flex: 1;
    min-height: 420px;
  }

  /* List View drops the map and gives the cards the full row */
  .loc-directory-grid.is-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.loc-directory-grid.is-list .loc-map-panel {
  display: none;
}

.loc-tabs {
  display: flex;
  gap: 6px;
}

.loc-tab {
  border: 0;
  border-radius: 16px 16px 0 0;
  background: #fff;
  color: #373965;
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 14px 32px;
  cursor: pointer;
  transition: 0.3s;
}

.loc-tab.active {
  background: #373965;
  color: #fff;
}

.loc-map-panel {
  background: #fff;
  border-radius: 0 18px 18px 18px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(38, 44, 93, 0.08);
}

.loc-map {
  height: 620px;
  border-radius: 12px;
  overflow: hidden;
  background: #dfe7f2;
}

.loc-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Google's InfoWindow inherits Raleway from body but not our colors */
.loc-map-info {
  font-size: 14px;
  line-height: 1.45;
  color: #33395f;
  max-width: 220px;
}

.loc-map-info strong {
  display: block;
  color: #262c5d;
  font-size: 15px;
  margin-bottom: 4px;
}

.loc-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-top: 14px;
}

.loc-results-count {
  font-size: 22px;
  font-weight: 800;
  color: #262c5d;
  margin: 0;
}

.loc-results-count .search-term:not(:empty)::before {
  content: " — ";
  font-weight: 500;
}

.loc-results-count .search-term {
  font-weight: 500;
  color: #5b6180;
}

.loc-sort select {
  appearance: none;
  border: 0;
  background:
    transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23373965'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E")
    right center / 15px no-repeat;
  padding-right: 26px;
  font-family: "Raleway", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #373965;
  cursor: pointer;
}

/* --- Store cards --- */
.store-items {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 14px;
  padding: 14px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.store-card.is-hidden {
  display: none;
}

.store-card.is-active {
  border-color: #ec081b;
  box-shadow: 0 6px 18px rgba(236, 8, 27, 0.14);
}

.store-photo {
  width: 156px;
  height: 116px;
  object-fit: cover;
  border-radius: 10px;
  background: #eef2f9;
}

.store-name {
  font-size: 19px;
  font-weight: 800;
  color: #262c5d;
  margin: 0 0 8px;
}

.store-name a {
  color: inherit;
}

.store-name a:hover {
  color: #ec081b;
}

.store-address,
.store-phone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #33395f;
  margin: 0 0 7px;
}

.store-address .fa,
.store-phone .fa {
  color: #262c5d;
  font-size: 17px;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  margin-top: 2px;
}

.store-phone a {
  color: inherit;
}

.store-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.store-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9aa0c4;
  flex-shrink: 0;
}

.store-card.is-open .store-status {
  color: #12a150;
}

.store-card.is-open .store-dot {
  background: #12a150;
}

.store-card.is-closed .store-status {
  color: #ec081b;
}

.store-card.is-closed .store-dot {
  background: #ec081b;
}

.store-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Populated by locations.js once the visitor's position is known (edge
   geolocation, the browser prompt, or a search). Collapses to nothing
   rather than reserving a blank row when no position is available. */
.store-distance {
  font-size: 15px;
  color: #5b6180;
  text-align: right;
  margin: 0 0 2px;
}

.store-distance:empty {
  display: none;
}

.store-view,
.store-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: 0.3s;
}

.store-view {
  background: #d7e4f7;
  color: #262c5d;
}

.store-view:hover {
  background: #c2d5f1;
  color: #262c5d;
}

.store-directions {
  background: #ec081b;
  color: #fff;
}

.store-directions:hover {
  background: #c70010;
  color: #fff;
}

.loc-more-wrap {
  text-align: center;
  margin-top: 24px;
}

.loc-more {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  padding: 16px 42px;
  font-family: "Raleway", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #262c5d;
  cursor: pointer;
  transition: 0.3s;
}

.loc-more:hover {
  background: #f7faff;
  border-color: #c9d6ea;
}

.loc-more.is-expanded .fa {
  transform: rotate(180deg);
}

/* --- Services directory strip: white heading over a navy icon band --- */
/* Spacing scaled from mockup 3.0: 26px above the heading, 34px below it,
   and a 195px-tall navy band. */
.loc-svc {
  background: #fff;
  padding: 26px 0 0;
}

.loc-svc .ccl-types-heading {
  font-size: 32px;
  margin-bottom: 34px;
}

.loc-svc-band {
  background: #262c5d;
  padding: 34px 0 38px;
}

.loc-svc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Icons top-aligned so a label that wraps to two lines (the longer
   Spanish and Creole service names all do) does not push its icon out
   of the row. */
.loc-svc-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  height: 100%;
  color: #fff;
  text-align: center;
  transition: opacity 0.3s;
}

.loc-svc-grid a:hover {
  color: #fff;
  opacity: 0.78;
}

.loc-svc-grid img {
  width: auto;
  height: 60px;
}

.loc-svc-grid span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* --- Why choose us + FAQ --- */
.loc-why {
  background: #fff;
  padding: 56px 0 60px;
}

.loc-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .loc-why-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
  }
}

.loc-why .ccl-h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 28px;
}

.loc-why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mockup 4 tiles are 664x610, i.e. very slightly wider than tall; the
   icon and type sizes below are that mockup's scaled by the tile width. */
.loc-why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #d7e4f7;
  border-radius: 18px;
  padding: 10px 8px;
  aspect-ratio: 664 / 610;
  /* Without this the tallest tile's content (a two-line label under a
     value) overrides aspect-ratio and the row goes back to portrait. */
  min-height: 0;
  text-align: center;
}

.loc-why-card img {
  width: auto;
  height: 50px;
}

.loc-why-value {
  font-size: 25px;
  line-height: 1.15;
  font-weight: 800;
  color: #262c5d;
  margin: 0;
}

.loc-why-label {
  font-size: 16px;
  line-height: 1.25;
  color: #33395f;
  margin: 0;
}

.loc-why-label-strong {
  font-size: 18px;
  font-weight: 800;
  color: #262c5d;
}

/* --- Ready to visit: light card | 4.9 score | 10K badge --- */
.loc-ready {
  border-top: 0;
}

@media (min-width: 1024px) {
  /* The score column has to stay wide enough for Find a Location and
     Read Reviews to sit on one row, as they do in mockup 5. */
  .loc-ready-grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1.18fr) minmax(0, 0.6fr);
  }

  /* The mockup has no rule between the card and the score column */
  .loc-ready .svp-trusted-score {
    border-left: 0;
    padding: 0 16px;
  }
}

/* Mockup 5 sets the 4.9 tight against "out of 5 Stars" and keeps both
   CTAs on one row. The column shrinks to its widest row so the stars can
   stretch to exactly the width of the 4.9 cluster beneath them, which is
   how the mockup lines them up (1218px vs 1222px there). */
.loc-ready .svp-trusted-score {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-self: center;
}

.loc-ready .svp-score-stars {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.loc-ready .svp-score-stars .fa {
  margin: 0;
}

.loc-ready .svp-score-row {
  gap: 12px;
  margin-top: 4px;
}

/* Mockup 5's text block is 177px wide at this scale, which is what makes
   the line break fall after "10,000+" rather than after "Google". The two
   type sizes are that mockup's measured widths scaled to match. */
.loc-ready .svp-score-row > div {
  max-width: 177px;
}

.loc-ready .svp-score-outof {
  font-size: 24px;
}

.loc-ready .svp-score-based {
  font-size: 20px;
  line-height: 1.35;
  margin-top: 4px;
}

.loc-ready .svp-score-based {
  margin-top: 2px;
}

.loc-ready-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 18px;
}

.loc-ready-cta .btn {
  padding: 12px 18px;
  white-space: nowrap;
}

.loc-ready-card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #d7e4f7;
  border-radius: 24px;
  padding: 26px;
}

/* Mockup 5 gives the illustration ~29% of the card width; any wider and
   "Ready to visit?" wraps instead of sitting on one line. */
.loc-ready-map {
  width: auto;
  height: 130px;
  flex-shrink: 0;
}

.loc-ready-copy h2 {
  font-size: 30px;
  font-weight: 800;
  color: #262c5d;
  margin: 0 0 12px;
}

.loc-ready-copy p {
  font-size: 17px;
  line-height: 1.5;
  color: #33395f;
  margin: 0;
}

/* Mockup puts the pin ahead of the label on this button only */
.loc-ready .btn-hero-red span.fa {
  margin-left: 0;
  margin-right: 10px;
}

/* --- Locations page: tablet and mobile --- */
@media (max-width: 1023px) {
  .loc-hero {
    background-image:
      linear-gradient(rgba(247, 250, 254, 0.88), rgba(247, 250, 254, 0.88)),
      url("/static/images/locations/loc-hero.jpg");
    background-position: center;
    padding: 44px 0 36px;
  }

  .loc-hero-title {
    font-size: 42px;
  }

  .loc-hero-count {
    font-size: 18px;
  }

  .loc-hero-sub {
    font-size: 17px;
    margin-bottom: 26px;
  }

  .loc-servicebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 0;
    border-radius: 28px;
    margin-top: 40px;
    padding: 18px 14px;
  }

  .loc-servicebar li {
    justify-content: flex-start;
    font-size: 14px;
    padding: 6px 12px;
  }

  .loc-servicebar li:nth-child(3n + 1) {
    border-left: 0;
  }

  .loc-map {
    height: 420px;
  }

  .loc-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .loc-ready-copy h2 {
    font-size: 28px;
  }
}

@media (max-width: 779px) {
  .loc-hero-title {
    font-size: 34px;
  }

  .loc-search-field,
  .loc-geo-btn {
    width: 100%;
    max-width: none;
  }

  .loc-geo-btn {
    justify-content: center;
  }

  .loc-servicebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-servicebar li:nth-child(3n + 1) {
    border-left: 2px solid #ec081b;
  }

  .loc-servicebar li:nth-child(odd) {
    border-left: 0;
  }

  .store-card {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 16px;
  }

  .store-photo {
    width: 132px;
    height: 104px;
  }

  .store-side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .store-distance {
    flex: 1;
    text-align: left;
    margin: 0;
  }

  .loc-why-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-ready-card {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
  }

  /* One row is a desktop-only goal: the longer Spanish labels are wider
     than a phone viewport, so let them stack again below 780px. */
  .loc-ready-cta {
    flex-wrap: wrap;
  }

  .loc-ready-cta .btn {
    white-space: normal;
  }

  .loc-ready-map {
    height: 150px;
  }
}

@media (max-width: 479px) {
  .loc-hero-title {
    font-size: 29px;
  }

  /* Stay two-up on a phone (the 779px grid carries down, and its
     odd/even divider rules already give the right column its red rule).
     The labels can no longer fit on one line in a ~150px column, so the
     nowrap from the base rule has to be lifted here or the longer names
     ("Corporate Check Cashing", and every Spanish and Creole label) push
     the bar past the viewport. */
  .loc-servicebar {
    padding: 16px 10px;
    gap: 10px 0;
  }

  .loc-servicebar li {
    gap: 8px;
    padding: 4px 8px;
    font-size: 13px;
    white-space: normal;
  }

  .loc-servicebar img {
    height: 26px;
  }

  .loc-tab {
    flex: 1;
    padding: 12px 10px;
    font-size: 16px;
  }

  .loc-map {
    height: 340px;
  }

  .store-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .store-photo {
    width: 100%;
    height: 150px;
  }

  .store-side {
    flex-direction: column;
    align-items: stretch;
  }

  .store-distance {
    text-align: center;
  }

  .loc-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-why-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .loc-why-card {
    min-height: 0;
  }
}

/* ===================================================================
   LOCATION DETAIL PAGE (locd-) — the per-store /locations/ pages
   Built from the new_location_detail mockups; same palette as the
   ccl-, svp- and loc- sections: navy #262c5d, red #ec081b,
   card bg #d7e4f7, open-now green #01a85a, star gold #f6b60d.
   Reuses whole components rather than re-styling them: the payroll
   calculator (.calc-band + .ccl-calc) with a call button in place of
   the branch locator, .svp-bar-navy + .ccl-review for the reviews
   band, and .svp-faq + .ccl-faq-item + .svp-promo-img for the FAQ row.
   =================================================================== */

/* --- Hero: navy panel left, store-associate photo right --- */
.locd-hero {
  position: relative;
  background-color: #262c5d;
  overflow: hidden;
}

.locd-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: url("/static/images/location-detail/locd-hero.jpg") center right / cover no-repeat;
  z-index: 0;
}

/* Fade the photo's left edge into the navy panel */
.locd-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #262c5d 0%, rgba(38, 44, 93, 0.55) 20%, rgba(38, 44, 93, 0) 48%);
}

.locd-hero-content {
  position: relative;
  max-width: 100%;
  padding: 40px 0 44px;
}

@media (min-width: 1024px) {
  .locd-hero-content {
    max-width: 50%;
    padding: 70px 0 78px;
  }
}

.locd-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.locd-eyebrow .fa {
  font-size: 24px;
}

.locd-hero-heading {
  font-size: 54px;
  line-height: 1.06;
  font-weight: 800;
  color: #fff;
  margin: 0 0 18px;
}

.locd-hero-dot {
  padding: 0 14px;
}

/* line-height is explicit because the translated taglines wrap to two lines
   and the inherited paragraph leading is far too loose at this size. */
.locd-hero-tag {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  margin: 0 0 22px;
}

.locd-hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: #e8ebf7;
  max-width: 480px;
  margin-bottom: 30px;
}

/* Google score block: multicolour G, five gold stars, 4.9 */
.locd-rating {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 34px;
}

.locd-google-g {
  flex-shrink: 0;
}

.locd-rating-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.locd-stars .fa {
  color: #f6b60d;
  font-size: 27px;
  margin-right: 3px;
}

.locd-rating-value {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.locd-rating-based {
  color: #fff;
  font-size: 18px;
  margin: 4px 0 0;
}

.locd-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Fully rounded pills, unlike the rectangular hero buttons elsewhere */
.locd-hero-cta .btn {
  border-radius: 999px;
}

.locd-btn-red .fa {
  margin-right: 14px;
  font-size: 17px;
}

.locd-btn-outline .fa {
  margin-left: 16px;
}

/* --- Quick-info bar + services at this location --- */
.locd-info {
  background: #fff;
  padding: 42px 0 56px;
}

.locd-info-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 46px;
  padding: 0;
}

.locd-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #d7e4f7;
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 92px;
}

/* The directions card is a link end to end */
.locd-info-card > a {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.locd-info-card img {
  width: auto;
  height: 46px;
  flex-shrink: 0;
}

.locd-info-strong {
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.locd-info-strong a {
  color: #262c5d;
  text-decoration: none;
}

.locd-info-strong a:hover {
  text-decoration: underline;
}

.locd-info-sub {
  color: #262c5d;
  font-size: 15px;
  margin: 2px 0 0;
}

/* location-detail.js swaps the static "Store Hours" label for Open Now /
   Closed Now, computed in Florida local time, and colours it here. */
.is-open .locd-status {
  color: #01a85a;
}

.is-closed .locd-status {
  color: #ec081b;
}

.locd-svc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.locd-svc-head h2 {
  color: #262c5d;
  font-size: 30px;
  font-weight: 800;
  margin: 0;
}

.locd-seeall {
  color: #ec081b;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.locd-seeall:hover {
  color: #c90717;
  text-decoration: underline;
}

.locd-svc-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.locd-svc-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  background: #d7e4f7;
  border-radius: 14px;
  padding: 22px 8px 20px;
  text-decoration: none;
  transition: 0.2s;
}

.locd-svc-grid a:hover {
  background: #c5d8f3;
}

.locd-svc-grid img {
  width: auto;
  height: 58px;
}

/* 15px keeps the single-word labels on one line in the eight-column
   desktop row, as in mockup 2. */
.locd-svc-grid span {
  color: #262c5d;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 1279px) {
  .locd-svc-grid span {
    font-size: 16px;
  }
}

/* --- Calculator variant: red call button instead of the branch locator --- */
.locd-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #ec081b;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  border-radius: 12px;
  padding: 18px 40px;
  margin-top: 34px;
  text-decoration: none;
  transition: 0.2s;
}

.locd-call-btn:hover {
  background: #c90717;
  color: #fff;
}

.locd-call-btn .fa {
  font-size: 30px;
}

/* --- Business hours + neighborhood blurb --- */
.locd-hours {
  background: #fff;
  padding: 56px 0 60px;
}

.locd-hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .locd-hours-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
  }
}

.locd-h2 {
  color: #262c5d;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 26px;
}

.locd-hours-table {
  width: 100%;
  border-collapse: collapse;
}

.locd-hours-table th {
  color: #262c5d;
  font-size: 22px;
  font-weight: 800;
  text-align: left;
  padding: 4px 24px 4px 0;
  white-space: nowrap;
}

.locd-hours-table td {
  color: #262c5d;
  font-size: 22px;
  padding: 4px 0;
}

/* Red rule between the schedule and the blurb (mockup 4). It brackets the
   copy and checklist only — the heading sits above it, outside .locd-about. */
.locd-about {
  border-left: 0;
  padding-left: 0;
}

@media (min-width: 1024px) {
  .locd-about {
    border-left: 6px solid #ec081b;
    padding-left: 34px;
  }
}

.locd-about-copy {
  color: #262c5d;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 26px;
}

.locd-about-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.locd-about-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #262c5d;
  font-size: 19px;
  font-weight: 800;
}

.locd-about-list .fa {
  color: #ec081b;
  font-size: 22px;
  background: #fff;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}

/* --- FAQ + promo: buttons under the promo art (mockup 5) --- */
.locd-promo-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}

.locd-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  padding: 12px 30px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.2s;
}

.locd-promo-btn:hover {
  color: #fff;
  opacity: 0.88;
}

.locd-promo-btn-red {
  background: #ec081b;
}

.locd-promo-btn-navy {
  background: #262c5d;
}

/* --- Responsive --- */
@media (max-width: 1279px) {
  .locd-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  /* The photo would sit behind the copy at this width, so it becomes a
     dimmed full-bleed backdrop instead of a right-hand panel. */
  .locd-hero-photo {
    width: 100%;
  }

  .locd-hero-photo::before {
    background: linear-gradient(90deg, #262c5d 0%, rgba(38, 44, 93, 0.86) 55%, rgba(38, 44, 93, 0.7) 100%);
  }

  .locd-hero-heading {
    font-size: 40px;
  }

  .locd-hero-tag {
    font-size: 22px;
  }

  .locd-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .locd-hours-table th,
  .locd-hours-table td {
    font-size: 19px;
  }

  .locd-call-btn {
    font-size: 22px;
    padding: 14px 28px;
  }

  .locd-call-btn .fa {
    font-size: 22px;
  }
}

@media (max-width: 779px) {
  .locd-hero-heading {
    font-size: 33px;
  }

  .locd-eyebrow {
    font-size: 17px;
  }

  .locd-rating {
    gap: 14px;
  }

  .locd-stars .fa {
    font-size: 21px;
  }

  .locd-rating-value {
    font-size: 27px;
  }

  .locd-svc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .locd-svc-head h2 {
    font-size: 24px;
  }

  .locd-h2 {
    font-size: 26px;
  }

  .locd-svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .locd-about-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .locd-hero-heading {
    font-size: 28px;
  }

  .locd-hero-dot {
    padding: 0 8px;
  }

  .locd-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .locd-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .locd-hours-table th,
  .locd-hours-table td {
    font-size: 17px;
  }

  .locd-call-btn {
    width: 100%;
    font-size: 19px;
    padding: 13px 18px;
  }

  .locd-promo-cta {
    align-items: stretch;
  }

  .locd-promo-btn {
    justify-content: center;
  }
}

/* ===================================================================
   MONEY TRANSFERS PAGE (mt-*) — /money-transfers/
   Built from the new_moneyorder/ mockups. Same palette as the ccl-,
   svp- and loc- pages (navy #262c5d, card bg #d7e4f7, review bg
   #e3eefa) plus the Western Union gold #fbcd0c sampled from the
   mockups.
   Reuses whole components rather than restyling them: the locations
   page's search pill (.loc-search-field / .loc-geo-btn), the landing
   page's navy title bar (.ccl-bar-navy) and FAQ accordion
   (.ccl-faq-item), and the services page's review band (.svp-bar-navy).
   =================================================================== */
.mt-gold {
  color: #fbcd0c;
}

/* Gold pill button, the page's primary CTA (mockups 1 and 7) */
.mt-btn-gold,
.mt-btn-gold:focus {
  color: #262c5d;
  background-color: #fbcd0c;
  border-color: #fbcd0c;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mt-btn-gold span,
.mt-btn-gold:focus span {
  color: #262c5d;
}

.mt-btn-gold:hover {
  color: #262c5d;
  background-color: #e5b900;
  border-color: #e5b900;
}

.mt-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.mt-cta-row .btn {
  font-size: 18px;
  line-height: 20px;
  padding: 17px 38px;
  margin-top: 0;
  border-radius: 999px;
  white-space: nowrap;
  justify-content: center;
}

.mt-cta-row .btn span.fa {
  margin-left: 14px;
  font-size: 21px;
}

/* "Powered by Western Union" lockup — white/gold art on navy */
.mt-powered {
  display: block;
  height: 26px;
  width: auto;
  margin-top: 22px;
}

/* --- Hero: navy panel left, teller photo right (mockup 1) --- */
.mt-hero {
  position: relative;
  background-color: #262c5d;
  overflow: hidden;
}

.mt-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  /* The crop starts inside the flat navy panel, so the mockup's own
     fade into the photo is baked into the image. */
  background: url("/static/images/money-transfer/mt-hero.jpg") center right / cover no-repeat;
  z-index: 0;
}

.mt-hero-content {
  position: relative;
  max-width: 100%;
  padding: 40px 0 44px;
}

@media (min-width: 1024px) {
  .mt-hero-content {
    max-width: 52%;
    padding: 74px 0 80px;
  }
}

.mt-hero-heading {
  margin-bottom: 24px;
}

.mt-hero-sub {
  color: #e8ebf7;
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  max-width: 500px;
}

/* Four white line icons over their labels. A four-column grid rather
   than a flex row: it keeps all four on one line and wraps each label
   inside its own column, so the longer Spanish and Creole strings take
   an extra line instead of pushing an item onto a second row. */
.mt-hero-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 14px;
  list-style: none;
  margin: 40px 0 38px;
  padding: 0;
  max-width: 560px;
}

.mt-hero-features li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mt-hero-features img {
  height: 46px;
  width: auto;
  margin-bottom: 16px;
}

.mt-hero-features span {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.3;
}

/* Four columns are too tight for the labels on a phone */
@media (max-width: 639px) {
  .mt-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  /* Full-width backdrop with a heavier navy wash so the copy stays legible */
  .mt-hero-photo {
    width: 100%;
  }

  .mt-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 44, 93, 0.88);
  }

  .mt-hero-sub {
    font-size: 17px;
  }

  .mt-hero-features {
    gap: 22px 12px;
    max-width: none;
  }

  .mt-hero-features img {
    height: 38px;
    margin-bottom: 12px;
  }

  .mt-hero-features span {
    font-size: 15px;
  }

  .mt-powered {
    height: 20px;
  }

  .mt-cta-row .btn {
    padding: 13px 26px;
    font-size: 16px;
  }
}

/* --- Services: five columns split by gold rules (mockup 2) --- */
.mt-services {
  background: #fff;
  padding: 56px 0 60px;
}

.mt-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .mt-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mt-services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.mt-service {
  text-align: center;
  padding: 0 22px;
}

/* Gold divider between columns, only once they sit side by side */
@media (min-width: 640px) {
  .mt-service + .mt-service {
    border-left: 3px solid #fbcd0c;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Two-up: the divider belongs between the pair, not before a new row */
  .mt-service:nth-child(odd) {
    border-left: 0;
  }
}

.mt-service img {
  width: 90px;
  height: 90px;
  margin: 0 auto 22px;
}

.mt-service h3 {
  color: #262c5d;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 14px;
}

.mt-service p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* --- Location finder: copy | map with floating store card (mockup 4) --- */
/* The map is a contained panel: it ends at the container's right edge and is
   inset from the section's top and bottom, rather than bleeding to the
   viewport edge as the first round of mockups had it. */
.mt-finder {
  background: #fff;
  padding: 32px 0 60px;
}

.mt-finder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: stretch;
}

/* Stacked below 1024px: card above map, as before the map went full-bleed */
.mt-finder-mapwrap {
  display: flex;
  flex-direction: column-reverse;
  gap: 26px;
}

@media (min-width: 1024px) {
  .mt-finder {
    padding: 44px 0 60px;
  }

  /* 1 : 1.06 puts the map's left edge just past the container's midpoint and
     its right edge on the container's right edge, matching the mockup. */
  .mt-finder-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 28px;
  }

  .mt-finder-copy {
    align-self: center;
    padding: 0;
  }

  /* The lead runs to a single line at this width, as in the mockup. */
  .mt-finder-lead {
    max-width: 540px;
  }

  .mt-finder-mapwrap {
    display: block;
    position: relative;
    min-height: 430px;
  }

  /* Three entries need more room, and a wider panel than the single card's
     252px: measured in Spanish at 1280px, the entries stop wrapping at a
     360px panel (144px each) and balloon to 218px at 280px. 320px puts the
     list at 488px, which clears the 512px the 540px wrap leaves after its
     14px insets - so the third store is visible without scrolling, which is
     the whole point of the list. */
  .mt-finder-mapwrap.is-list .mt-finder-card {
    width: clamp(320px, 46%, 360px);
  }

  .mt-finder-mapwrap.is-list {
    min-height: 540px;
  }

  .mt-finder-map {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  /* ~43% of the map is the mockup's proportion; the bounds keep the card
     readable at 1024px and stop it sprawling on very wide screens. */
  .mt-finder-card {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 14px;
    width: clamp(252px, 43%, 300px);
    min-height: 0;
    z-index: 2;
  }
}

.mt-eyebrow {
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.mt-finder-copy h2 {
  color: #262c5d;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 16px;
}

.mt-finder-lead {
  color: #33395f;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 420px;
}

/* The locations page pill, restyled gold for this page */
.mt-search-field {
  max-width: 420px;
  height: 56px;
}

.mt-search-btn {
  background: #fbcd0c;
}

.mt-search-btn:hover {
  background: #e5b900;
}

.mt-search-btn .loc-search-icon {
  color: #262c5d;
  width: 30px;
  height: 30px;
}

.mt-geo-btn {
  margin-top: 16px;
  height: 56px;
  width: 100%;
  max-width: 420px;
  justify-content: center;
  background: #262c5d;
}

.mt-errors {
  margin-top: 18px;
  max-width: 420px;
}

/* Single nearest-store card */
.mt-finder-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 22px rgba(38, 44, 93, 0.16);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

/* The card's contents now sit in an entry wrapper, so a restricted page can
   stack one per participating store. A lone entry fills the card exactly as
   the contents used to - .mt-store-view's margin-top:auto still pins the
   pill to the bottom - so /money-transfers/ and /digital-currency/ are
   unchanged. */
.mt-store-entry {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.mt-store-photo {
  width: 100%;
  height: 152px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.mt-store-name {
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
}

.mt-store-name a {
  color: inherit;
}

.mt-store-name a:hover {
  color: #ec081b;
}

.mt-store-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #33395f;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
}

.mt-store-row .fa {
  color: #262c5d;
  font-size: 15px;
  margin-top: 2px;
}

.mt-store-row a {
  color: inherit;
}

.mt-store-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  margin: 4px 0 0;
  color: #01a85a;
}

.mt-store-status.is-closed {
  color: #ec081b;
}

.mt-store-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentcolor;
  flex-shrink: 0;
}

.mt-store-view {
  margin-top: auto;
  padding-top: 16px;
  text-align: center;
}

/* A centred pill sized to its own label — ~160x40 in the mockup, not a
   full-width block. */
.mt-store-view a {
  display: inline-block;
  background: #fbcd0c;
  color: #262c5d;
  border-radius: 999px;
  padding: 10px 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  transition: background-color 0.3s;
}

.mt-store-view a:hover {
  background: #e5b900;
  color: #262c5d;
}

/* --- Participating-locations list ---
   Set by money-transfer.js when MT_LIST_ALL is on, i.e. when the page entry
   carries locationStores. Three entries share the space one card had, so the
   photo is dropped and the type steps down; the panel scrolls if a future
   page lists more. .is-compact only ever appears on such a page, so these
   rules need no page-level scoping. */
.mt-finder-mapwrap.is-list .mt-finder-card {
  padding: 8px;
  overflow-y: auto;
}

.mt-store-entry.is-compact {
  flex: 0 0 auto;
  padding: 14px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.25s;
}

.mt-store-entry.is-compact + .mt-store-entry.is-compact {
  border-top: 1px solid #e3e9f6;
}

.mt-store-entry.is-compact.is-active {
  background: #eef4fc;
}

.mt-store-entry.is-compact .mt-store-name {
  font-size: 16px;
  margin-bottom: 8px;
}

.mt-store-entry.is-compact .mt-store-row {
  font-size: 13px;
  margin-bottom: 6px;
}

.mt-store-entry.is-compact .mt-store-row .fa {
  font-size: 14px;
}

.mt-store-entry.is-compact .mt-store-status {
  font-size: 13px;
}

.mt-store-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.mt-store-entry.is-compact .mt-store-status {
  margin: 0;
}

.mt-store-entry.is-compact .mt-store-view {
  margin-top: 0;
  padding-top: 0;
  text-align: left;
}

.mt-store-entry.is-compact .mt-store-view a {
  font-size: 14px;
  padding: 7px 18px;
}

/* Map panel: Google Maps JS map, or the keyless embed iframe fallback */
.mt-finder-map {
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: #e6eef9;
}

.mt-finder-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}

.mt-map-info strong {
  display: block;
  color: #262c5d;
  margin-bottom: 4px;
}

@media (max-width: 1023px) {
  .mt-finder-copy h2 {
    font-size: 26px;
  }

  .mt-search-field,
  .mt-geo-btn,
  .mt-errors {
    max-width: none;
  }

  .mt-finder-map {
    min-height: 320px;
  }
}

/* --- 200 countries + popular destinations (mockup 5) --- */
/* A full-bleed navy band: the copy and the map art sit straight on the
   section background, with only the destinations panel drawn as a card. */
.mt-world {
  background: #373965;
  padding: 26px 0;
}

.mt-world-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .mt-world-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* The map art is anchored to this column's right edge; its own navy is the
   band's #373965, so there is no visible seam. */
.mt-world-main {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
}

.mt-world-map {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Only the map's empty Pacific edge slides under the end of the copy,
     which is how the mockup composes the two. */
  width: 46%;
  height: auto;
  max-width: none;
  z-index: 0;
}

/* Reach across the grid gap so the map's far-east edge tucks under the
   destinations panel, the way the mockup butts the two together. */
@media (min-width: 1024px) {
  .mt-world-map {
    right: -22px;
  }
}

.mt-world-copy {
  position: relative;
  z-index: 1;
  max-width: 450px;
}

.mt-world-copy h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 22px;
}

.mt-world-copy p {
  color: #e8ebf7;
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
}

.mt-world-side {
  background: #d7e4f7;
  border-radius: 30px;
  padding: 32px 30px;
}

.mt-world-side h3 {
  color: #262c5d;
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 22px;
}

.mt-dest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mt-dest-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #262c5d;
  font-size: 16px;
  font-weight: 800;
}

.mt-dest-grid img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* Between the side-by-side breakpoint and the container's full 1200px both
   columns are short of their design width: the copy has to give way to the
   map (letting the headline take a third line) and the flag rows have to
   shrink so the country names still clear their flags. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mt-world-copy {
    max-width: 54%;
  }

  .mt-world-side {
    padding: 28px 22px;
  }

  .mt-dest-grid {
    gap: 18px 10px;
  }

  .mt-dest-grid li {
    gap: 9px;
    font-size: 15px;
  }

  .mt-dest-grid img {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1023px) {
  .mt-world-main {
    min-height: 0;
    padding: 14px 0 18px;
  }

  /* Behind the copy rather than beside it once the column narrows */
  .mt-world-map {
    width: 100%;
    opacity: 0.35;
  }

  .mt-world-copy h2 {
    font-size: 26px;
  }

  .mt-world-copy p {
    font-size: 16px;
  }
}

/* --- FAQ: two columns of the landing-page accordion (mockup 6) --- */
.mt-faq {
  background: #fff;
  padding: 20px 0 56px;
}

.mt-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 30px;
  align-items: start;
}

@media (min-width: 1024px) {
  .mt-faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Ready to send or receive (mockup 7) --- */
.mt-ready {
  background: #fff;
  padding-top: 44px;
}

.mt-ready-title {
  color: #262c5d;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 18px;
  padding-left: 34%;
}

.mt-ready-band {
  position: relative;
  background: #262c5d;
  border-radius: 30px 30px 0 0;
}

.mt-ready-band > .container {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
}

/* She overhangs the band's top edge exactly as in the mockup: the crop
   is 1172px tall with the top 236px transparent, so pinning it to the
   band bottom at 125.2% height lands her navy backdrop on the band. */
.mt-ready-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 125.2%;
  width: auto;
  max-width: none;
}

.mt-ready-copy {
  margin-left: 34%;
  padding: 34px 0 40px;
}

.mt-ready-copy p {
  color: #fff;
  font-size: 21px;
  line-height: 1.45;
  margin: 0 0 28px;
  max-width: 620px;
}

@media (max-width: 1023px) {
  .mt-ready-title {
    font-size: 26px;
    padding-left: 0;
    text-align: center;
  }

  /* No room to overhang beside the copy; drop her out and let the band
     be a plain navy CTA card. */
  .mt-ready-photo {
    display: none;
  }

  .mt-ready-copy {
    margin-left: 0;
    text-align: center;
  }

  .mt-ready-copy p {
    font-size: 18px;
  }

  .mt-ready-band .mt-cta-row {
    justify-content: center;
  }

  .mt-ready-copy .mt-powered {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   20. PREPAID CARD PAGE (/cards/) — .pcd-
   Built from the new_prepaid mockups. Palette: the shared navy #262c5d and
   red #ec081b of the ccl, svp and loc pages, plus the Netspend band navy
   #012467, brand blue #2f7ce0 and the light card blue #d7e4f7.
   Reuses whole components rather than restyling them: .ccl-faq-item +
   .svp-cross for the accordion, .svp-bar-navy + .ccl-review + .svp-google-g
   for the reviews band, and .ccl-types-heading for the FAQ title.
   ========================================================================== */

.pcd-eyebrow {
  color: #262c5d;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.pcd-eyebrow-light {
  color: #cddcf5;
}

.pcd-eyebrow-blue {
  color: #1668e3;
  letter-spacing: 0.05em;
}

.pcd-h2 {
  color: #262c5d;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 20px;
}

.pcd-blue {
  color: #2f7ce0;
}

.pcd-btn-red,
.pcd-btn-red:focus {
  color: #fff;
  background-color: #ec081b;
  border-color: #ec081b;
  border-radius: 999px;
}

.pcd-btn-red:hover {
  color: #fff;
  background-color: #c70010;
  border-color: #c70010;
}

.pcd-btn-red span,
.pcd-btn-red:hover span {
  color: #fff;
}

.pcd-btn-outline,
.pcd-btn-outline:focus {
  color: #262c5d;
  background-color: transparent;
  border-color: #262c5d;
  border-radius: 999px;
}

.pcd-btn-outline:hover {
  color: #fff;
  background-color: #262c5d;
  border-color: #262c5d;
}

.pcd-btn-outline span {
  color: #262c5d;
}

.pcd-btn-outline:hover span {
  color: #fff;
}

/* --- Hero: navy copy over the card-on-podium plate (mockup 1) --- */
.pcd-hero {
  position: relative;
  background-color: #cadcf9;
  overflow: hidden;
}

/* The plate is the mockup's own hero art with the baked-in copy painted out,
   so the whole gradient — including the glow behind the card — is one image.

   `auto 100%` rather than `cover`: the hero's height is set by the copy, so a
   `cover` plate gets cropped harder top and bottom the wider the viewport gets
   and the podium walks off the bottom edge. Fitting the plate to the hero's
   height and pinning it right keeps the card and podium whole at any width;
   the gradient underneath fills whatever is left of the row and is sampled
   from the plate's own leftmost column, so the two meet without a seam. */
.pcd-hero-photo {
  position: absolute;
  inset: 0;
  background:
    url("/static/images/prepaid/pcd-hero.jpg") right center / auto 100% no-repeat,
    linear-gradient(
      to bottom,
      #bdd3f8 0%,
      #c3d7f8 5%,
      #c5d8f8 10%,
      #cbdcfa 15%,
      #ccddf9 20%,
      #cddef8 25%,
      #cedef7 30%,
      #cedef8 35%,
      #cedffb 40%,
      #cbdcfa 45%,
      #c8dbf9 50%,
      #c7dafa 55%,
      #c1d8f8 60%,
      #bfd5fa 65%,
      #bcd4fa 70%,
      #b7d0f8 75%,
      #bbd2fb 80%,
      #c2d6fb 85%,
      #fafbff 90%,
      #e5eefd 95%,
      #c0d7f9 100%
    );
  z-index: 0;
}

.pcd-hero-content {
  position: relative;
  max-width: 100%;
  padding: 36px 0 28px;
}

/* Copy beside the plate only from 1024px. The landscape plate is fitted to the
   hero's height, so its width is ~1.93x that height; below ~1024px the copy
   column is narrow enough that the hero grows taller than the viewport is
   wide, the plate outgrows the viewport, and the card slides left across the
   headline. The 768-1023px range stacks instead — see below. */
@media (min-width: 1024px) {
  .pcd-hero-content {
    max-width: 54%;
    padding: 46px 0 34px;
  }
}

.pcd-hero-heading {
  color: #262c5d;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 16px;
}

.pcd-hero-sub {
  color: #2d3560;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 540px;
}

.pcd-hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
}

.pcd-hero-cta .btn {
  font-size: 18px;
  line-height: 20px;
  padding: 15px 34px;
  margin-top: 0;
  white-space: nowrap;
  justify-content: center;
}

/* The pin and handset are cropped from mockup 1 as alpha masks rather than
   drawn with Font Awesome, whose phone glyph is a different shape. Painting
   them with `currentColor` through a mask means the outline button's icon
   inverts along with its text on hover. */
.pcd-btn-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-left: 14px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pcd-btn-icon-pin {
  -webkit-mask-image: url("/static/images/prepaid/pcd-ic-pin.png");
  mask-image: url("/static/images/prepaid/pcd-ic-pin.png");
}

.pcd-btn-icon-phone {
  -webkit-mask-image: url("/static/images/prepaid/pcd-ic-phone.png");
  mask-image: url("/static/images/prepaid/pcd-ic-phone.png");
}

/* Without mask support the span would paint as a solid currentColor block */
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .pcd-btn-icon {
    display: none;
  }
}

/* Medal + FDIC line, split by a hairline rule like the mockup */
.pcd-hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.pcd-hero-trust li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pcd-hero-trust li + li {
  border-left: 1px solid #97a4c4;
  padding-left: 26px;
}

.pcd-hero-trust img {
  height: 48px;
  width: auto;
}

.pcd-hero-trust span {
  color: #2d3560;
  font-size: 16px;
  line-height: 1.35;
}

.pcd-hero-trust strong {
  display: block;
  color: #262c5d;
  font-size: 19px;
  font-weight: 800;
}

.pcd-hero-legal {
  border-top: 1px solid #9aa5bf;
  color: #2d3560;
  font-size: 12px;
  line-height: 1.5;
  margin: 20px 0 0;
  max-width: 640px;
  padding-top: 10px;
}

/* Tablets: the landscape plate, but fitted to the WIDTH and pinned bottom so
   the copy stacks above it instead of beside it. Fitting to height (the
   desktop rule) would make the plate wider than the viewport and slide the
   card over the headline; the portrait phone plate, scaled up to this width,
   would give the card roughly half the screen. Same top-row gradient trick as
   the phone breakpoint fills the space above the plate. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pcd-hero-photo {
    background:
      url("/static/images/prepaid/pcd-hero.jpg") center bottom / 100% auto no-repeat,
      linear-gradient(
        to right,
        #bcd2f7 0%,
        #bcd2f7 10%,
        #8fb0e6 20%,
        #5b8ad2 30%,
        #3f73c6 40%,
        #437bce 50%,
        #75a4ea 60%,
        #93baf3 70%,
        #9dc2f6 80%,
        #73a3eb 90%,
        #3373cd 100%
      );
  }

  /* The plate's top row runs to a mid-blue through the middle, which drops the
     blue "Netspend" in the H1 to about 1.1:1 against it. Wash the copy zone
     only, and clear the wash before the card so the artwork stays crisp. */
  .pcd-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(233, 241, 253, 0.93) 0%,
      rgba(233, 241, 253, 0.9) 42%,
      rgba(233, 241, 253, 0.62) 55%,
      rgba(233, 241, 253, 0) 64%
    );
  }

  /* The card starts 23.2% down a plate whose height is width/1.925, so the
     bottom 39.9vw is artwork. Reserve a little over that. */
  .pcd-hero-content {
    padding-bottom: 43vw;
  }
}

@media (max-width: 767px) {
  /* Its own portrait plate (PREPAID LANDING PAGE- MOBILE.png): empty gradient
     up top for the copy, card and podium along the bottom. Sized `100% auto`
     and pinned bottom so the card spans the full width and is never cropped;
     the gradient behind it is sampled from the plate's own top row and fills
     whatever height the copy needs above it, so no wash is required. */
  .pcd-hero-photo {
    background:
      url("/static/images/prepaid/pcd-hero-mobile.jpg") center bottom / 100% auto no-repeat,
      linear-gradient(
        to right,
        #b4d0f8 0%,
        #bfd6f8 10%,
        #c8dbf9 20%,
        #cae0f8 30%,
        #d0e2fa 40%,
        #d0e2fa 50%,
        #cddef8 60%,
        #bcd4fa 70%,
        #a2c3f6 80%,
        #78a8ea 90%,
        #5289d9 100%
      );
  }

  /* The plate's top row darkens towards its right edge, so the copy needs the
     same wash the tablet breakpoint uses — clearing well before the card. */
  .pcd-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(233, 241, 253, 0.9) 0%,
      rgba(233, 241, 253, 0.86) 50%,
      rgba(233, 241, 253, 0.55) 62%,
      rgba(233, 241, 253, 0) 70%
    );
  }

  /* The card starts 61.2% down a plate whose height is 1.774x its width, so
     the bottom 68.8vw of the hero is artwork. Reserve a little more than that
     so the disclosure still clears the card in the longer translations. */
  .pcd-hero-content {
    padding-bottom: 76vw;
  }

  .pcd-hero-heading {
    font-size: 38px;
  }

  .pcd-hero-sub {
    font-size: 17px;
  }
}

@media (max-width: 479px) {
  .pcd-hero-heading {
    font-size: 30px;
  }

  .pcd-hero-cta .btn {
    font-size: 17px;
    padding: 15px 26px;
    width: 100%;
  }

  .pcd-hero-trust li + li {
    border-left: 0;
    padding-left: 0;
  }
}

/* --- Feature strip: six navy line icons split by hairline rules --- */
.pcd-features {
  background: #fff;
  padding: 44px 0 40px;
}

.pcd-features-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pcd-features-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
}

.pcd-features-grid li + li {
  border-left: 1px solid #c3cee4;
}

.pcd-features-grid img {
  height: 74px;
  width: auto;
  margin-bottom: 18px;
}

.pcd-features-grid span {
  color: #262c5d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 1023px) {
  .pcd-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 0;
  }

  /* The 4th item starts a new row, so its left rule would hang in space */
  .pcd-features-grid li:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 639px) {
  .pcd-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcd-features-grid li:nth-child(3n + 1) {
    border-left: 1px solid #c3cee4;
  }

  .pcd-features-grid li:nth-child(odd) {
    border-left: 0;
  }

  .pcd-features-grid img {
    height: 58px;
  }
}

/* --- Benefits: light-blue band, copy left, four white cards right --- */
.pcd-benefits {
  background: #d7e4f7;
  padding: 56px 0 60px;
}

.pcd-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}

@media (min-width: 1024px) {
  .pcd-benefits-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 2fr);
    gap: 46px;
  }
}

.pcd-benefits-copy p:last-child {
  color: #33395f;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.pcd-benefit-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .pcd-benefit-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .pcd-benefit-cards {
    grid-template-columns: 1fr;
  }
}

.pcd-benefit {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px 26px;
  text-align: center;
}

.pcd-benefit img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
}

.pcd-benefit h3 {
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
}

.pcd-benefit p {
  color: #33395f;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* --- How it works: three numbered steps, photo bleeding off the right --- */
.pcd-steps {
  position: relative;
  background: #fff;
  overflow: hidden;
  padding: 46px 0 52px;
}

.pcd-steps-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  z-index: 0;
}

.pcd-steps > .container {
  position: relative;
  z-index: 1;
}

.pcd-steps-heading {
  margin-bottom: 34px;
}

.pcd-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Keep the steps clear of the photo on the right */
  max-width: 78%;
}

.pcd-steps-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (min-width: 780px) {
  .pcd-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .pcd-steps-grid li {
    padding-right: 26px;
  }

  .pcd-steps-grid li + li {
    border-left: 1px solid #c3cee4;
    padding-left: 26px;
  }
}

.pcd-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #262c5d;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.pcd-steps-grid img {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.pcd-steps-grid h3 {
  color: #262c5d;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px;
}

.pcd-steps-grid p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 779px) {
  .pcd-steps-photo {
    display: none;
  }

  .pcd-steps-grid {
    max-width: 100%;
  }
}

/* --- Built for everyday life: navy band with two stats --- */
/* Mockup 4 is 783px tall on a 4801px canvas — a 209px band at a 1280px
   viewport. Keep the padding tight enough that the band stays that shallow. */
.pcd-everyday {
  background: #012467;
  padding: 26px 0 30px;
}

.pcd-everyday .pcd-eyebrow {
  margin-bottom: 8px;
}

.pcd-everyday-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

@media (min-width: 1024px) {
  .pcd-everyday-grid {
    grid-template-columns: minmax(0, 1.6fr) auto auto;
    gap: 54px;
  }
}

.pcd-everyday-heading {
  color: #fff;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 10px;
}

.pcd-everyday-copy p:last-child {
  color: #dbe4f7;
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  max-width: 560px;
}

.pcd-stats {
  display: flex;
  gap: 46px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pcd-stats li {
  text-align: center;
  color: #fff;
}

.pcd-stats img {
  height: 52px;
  width: auto;
  margin: 0 auto 10px;
}

.pcd-stats strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.pcd-stats span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 150px;
}

.pcd-netspend-mark {
  height: 76px;
  width: auto;
}

@media (max-width: 1023px) {
  .pcd-everyday-heading {
    font-size: 32px;
  }

  .pcd-everyday-copy p:last-child {
    font-size: 17px;
  }

  .pcd-stats {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px;
  }

  .pcd-netspend-mark {
    height: 56px;
  }
}

/* --- Compare features: three-column table beside the CTA card --- */
.pcd-compare-band {
  background: #fff;
  padding: 54px 0 58px;
}

/* minmax(0, …) rather than 1fr: the table below sets a min-width, and an
   auto-sized grid track would grow to fit it and push the page sideways
   instead of letting .pcd-table-scroll scroll. */
.pcd-compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  /* Stretch, not start: in mockup 5 the CTA card runs the full height of the
     heading-plus-table block beside it. */
  align-items: stretch;
}

@media (min-width: 1024px) {
  .pcd-compare-grid {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 46px;
  }
}

.pcd-compare-main {
  min-width: 0;
}

/* Six rows of three columns do not fit a phone; let the table scroll
   inside its own box instead of forcing the page to scroll sideways. */
.pcd-table-scroll {
  overflow-x: auto;
}

.pcd-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #dadce2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(38, 44, 93, 0.07);
}

.pcd-compare th,
.pcd-compare td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.pcd-compare thead th {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.pcd-compare .pcd-col-feature {
  background: #101c3d;
  width: 26%;
}

.pcd-compare .pcd-col-net {
  background: #1668e3;
  text-align: center;
  width: 39%;
}

.pcd-compare .pcd-col-bank {
  background: #101c3d;
  text-align: center;
}

.pcd-compare tbody th {
  color: #262c5d;
  font-size: 14px;
  font-weight: 700;
}

/* Grey bullet in front of each feature name — sampled #667082 from mockup 5,
   not the page's red. */
.pcd-compare tbody th::before {
  content: "\2022";
  color: #667082;
  font-weight: 700;
  margin-right: 10px;
}

.pcd-compare tbody td {
  color: #262c5d;
  font-size: 14px;
  font-weight: 600;
}

.pcd-compare tbody tr + tr th,
.pcd-compare tbody tr + tr td {
  border-top: 1px solid #dbe3f1;
}

/* The Netspend column is boxed in blue across the whole table body */
.pcd-compare tbody .pcd-yes {
  border-left: 1px solid #1668e3;
  border-right: 1px solid #1668e3;
}

.pcd-compare tbody tr:last-child .pcd-yes {
  border-bottom: 1px solid #1668e3;
}

.pcd-compare .fa-check-circle {
  color: #17a44a;
  font-size: 18px;
  margin-right: 12px;
}

.pcd-compare .fa-circle-o {
  color: #aeb9d0;
  font-size: 18px;
  margin-right: 12px;
}

/* A flex column so the CTA is pushed to the foot of the card however tall the
   table beside it ends up. */
.pcd-ready {
  display: flex;
  flex-direction: column;
  background: #d7e4f7;
  border-radius: 24px;
  padding: 34px 34px 38px;
}

.pcd-ready-heading {
  color: #262c5d;
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 18px;
}

.pcd-ready > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.pcd-ready-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0 0 0 14px;
}

.pcd-ready-list li {
  color: #262c5d;
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.pcd-ready-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 17px 20px;
  margin-top: auto;
}

/* --- FAQ: two columns of the shared accordion --- */
.pcd-faq {
  background: #fff;
  padding: 52px 0 30px;
}

.pcd-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 26px;
}

@media (min-width: 780px) {
  .pcd-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pcd-reviews {
  background: #fff;
  padding-bottom: 64px;
}

/* --- Your money matters: swoosh band with the app phone and FDIC mark --- */
.pcd-trust {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.pcd-trust-top {
  padding: 40px 0 0;
}

.pcd-trust-heading {
  color: #262c5d;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  margin: 0;
  max-width: 62%;
}

/* The margin-top is the gap the swoosh fills: the curve is pinned to this
   block's top edge, so the white/navy split follows the copy instead of
   sitting at a fixed fraction of the section height. */
.pcd-trust-bottom {
  position: relative;
  z-index: 1;
  background: #012467;
  margin-top: 92px;
  padding: 26px 0 32px;
}

.pcd-trust-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: 92px;
}

/* Sits left of the FDIC mark, as in the mockup — anything past ~20% from the
   right edge runs into the badge. */
.pcd-trust-phone {
  position: absolute;
  right: 23%;
  bottom: 8%;
  height: 84%;
  width: auto;
  z-index: 2;
}

.pcd-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.pcd-trust-row p {
  color: #fff;
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
  max-width: 56%;
}

.pcd-fdic-badge {
  height: 118px;
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  /* No room to overhang beside the copy; drop the phone and let the copy
     take the full width. */
  .pcd-trust-phone {
    display: none;
  }

  .pcd-trust-heading {
    font-size: 30px;
    max-width: 100%;
  }

  .pcd-trust-bottom {
    margin-top: 60px;
  }

  .pcd-trust-curve {
    height: 60px;
  }

  .pcd-trust-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pcd-trust-row p {
    font-size: 17px;
    max-width: 100%;
  }

  .pcd-fdic-badge {
    height: 96px;
  }
}

/* --- Footnotes --- */
.pcd-footnotes {
  background: #fff;
  padding: 30px 0 40px;
}

/* Numbered with a superscript rather than the default "1." marker, so the
   footnotes read as the counterparts of the ¹²³⁴ references in the copy
   above. Still an <ol>, so the numbering stays in the markup's semantics. */
.pcd-footnotes ol {
  color: #5a6180;
  counter-reset: pcd-footnote;
  font-size: 12px;
  line-height: 1.55;
  list-style: none;
  margin: 0 0 12px;
  padding-left: 0;
}

.pcd-footnotes li {
  counter-increment: pcd-footnote;
  margin-bottom: 5px;
  /* Hanging indent so a wrapped line lines up under the first word, not
     under the superscript. */
  padding-left: 14px;
  text-indent: -14px;
}

.pcd-footnotes li::before {
  content: counter(pcd-footnote);
  font-size: 0.8em;
  vertical-align: super;
  margin-right: 5px;
}

.pcd-footnotes > .container > p {
  color: #5a6180;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

/* ===================================================================
   21. HOME PAGE FAQ  (.hfaq-*)
   -------------------------------------------------------------------
   The home page FAQ answers one topic inline (Check Cashing) and links
   every other topic tab to that service page's own #FAQ anchor. Same
   palette as the .ccl- and .svp- sections: navy #262c5d, tab navy
   #373965, pill blue #d7e4f7, red #ec081b. The accordion reuses
   .ccl-faq-item outright.
   =================================================================== */

/* Every #FAQ landing target has to clear the sticky header, which is
   ~85px tall once .is-stuck kicks in. */
[id="FAQ"] {
  scroll-margin-top: 100px;
}

.hfaq {
  background: #fff;
  padding: 60px 0 66px;
}

.hfaq-heading {
  color: #262c5d;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 12px;
}

.hfaq-lead {
  color: #4c5378;
  font-size: 17px;
  margin: 0 0 34px;
}

/* --- Topic tabs --- */
.hfaq-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 38px;
}

.hfaq-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #d7e4f7;
  border-radius: 16px;
  color: #262c5d;
  padding: 22px 14px 20px;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* --- Icons ---
   The topic and Popular Topics icons are the line art already cropped from
   the locations / prepaid mockups. They are painted through mask-image with
   background-color: currentColor rather than dropped in as <img>, which is
   what lets the active tab's icon invert to white along with its label — a
   flat PNG could not. Only the alpha channel is read, so the white-on-navy
   variant (loc-ic-card) works as a mask exactly like the navy ones do.
   Each icon gets an explicit width = height x its source aspect ratio, so
   the row is normalised on height and no icon is squashed. */
.hfaq-ic {
  display: block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}

.hfaq-ic-check {
  mask-image: url("/static/images/locations/loc-icn-check.png");
  -webkit-mask-image: url("/static/images/locations/loc-icn-check.png");
}

.hfaq-ic-corp {
  mask-image: url("/static/images/locations/loc-icn-corp.png");
  -webkit-mask-image: url("/static/images/locations/loc-icn-corp.png");
}

.hfaq-ic-card {
  mask-image: url("/static/images/locations/loc-ic-card.png");
  -webkit-mask-image: url("/static/images/locations/loc-ic-card.png");
}

.hfaq-ic-billpay {
  mask-image: url("/static/images/locations/loc-icn-billpay.png");
  -webkit-mask-image: url("/static/images/locations/loc-icn-billpay.png");
}

.hfaq-ic-moneyorder {
  mask-image: url("/static/images/locations/loc-icn-moneyorder.png");
  -webkit-mask-image: url("/static/images/locations/loc-icn-moneyorder.png");
}

.hfaq-ic-wu {
  mask-image: url("/static/images/locations/loc-icn-wu.png");
  -webkit-mask-image: url("/static/images/locations/loc-icn-wu.png");
}

.hfaq-ic-clock {
  mask-image: url("/static/images/locations/loc-why-clock.png");
  -webkit-mask-image: url("/static/images/locations/loc-why-clock.png");
}

.hfaq-ic-lock {
  mask-image: url("/static/images/locations/loc-why-lock.png");
  -webkit-mask-image: url("/static/images/locations/loc-why-lock.png");
}

.hfaq-ic-pin {
  mask-image: url("/static/images/locations/loc-why-pin.png");
  -webkit-mask-image: url("/static/images/locations/loc-why-pin.png");
}

.hfaq-ic-phone {
  mask-image: url("/static/images/prepaid/pcd-ic-phone.png");
  -webkit-mask-image: url("/static/images/prepaid/pcd-ic-phone.png");
}

/* Three of the mockup's icons — the speech bubbles, the ID card and the bare
   dollar sign — have no cropped asset in the repo, so they are drawn inline
   in the same stroked style. They inherit currentColor for the same reason
   the masks do. */
.hfaq-ic-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hfaq-ic-svg-tall {
  stroke-width: 4;
}

/* Masks are supported everywhere the rest of this page's layout is, but if
   they are not, an unmasked span would paint as a solid navy block. */
@supports not ((mask-image: url("#x")) or (-webkit-mask-image: url("#x"))) {
  .hfaq-ic {
    display: none;
  }
}

/* Tab icons: 36px tall, width from each source's aspect ratio. */
.hfaq-tab .hfaq-ic,
.hfaq-tab .hfaq-ic-svg {
  height: 36px;
}

.hfaq-tab .hfaq-ic-check {
  width: 64px;
}

.hfaq-tab .hfaq-ic-corp {
  width: 69px;
}

.hfaq-tab .hfaq-ic-card {
  width: 38px;
}

.hfaq-tab .hfaq-ic-billpay {
  width: 35px;
}

.hfaq-tab .hfaq-ic-moneyorder {
  width: 64px;
}

.hfaq-tab .hfaq-ic-wu {
  width: 63px;
}

.hfaq-tab .hfaq-ic-svg {
  width: 45px;
}

.hfaq-tab-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.hfaq-tab:hover,
.hfaq-tab:focus {
  background: #c3d7f3;
  color: #262c5d;
}

.hfaq-tab.is-active,
.hfaq-tab.is-active:hover,
.hfaq-tab.is-active:focus {
  background: #373965;
  color: #fff;
}

/* --- Accordion + popular topics --- */
.hfaq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.hfaq-list .ccl-faq-item {
  margin-bottom: 14px;
}

.hfaq-list .ccl-faq-item:last-child {
  margin-bottom: 0;
}

.hfaq-list .ccl-faq-item summary {
  padding: 16px 24px;
}

.hfaq-list .ccl-faq-item summary h3 {
  font-size: 17px;
}

.hfaq-topics-heading {
  color: #262c5d;
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 18px;
}

.hfaq-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.hfaq-topic {
  background: #d7e4f7;
  border-radius: 16px;
  padding: 24px 16px 22px;
  text-align: center;
}

/* Topic-card icons: 44px tall, centred, width from the source aspect ratio. */
.hfaq-topic .hfaq-ic,
.hfaq-topic .hfaq-ic-svg {
  color: #262c5d;
  height: 44px;
  margin: 0 auto 16px;
}

.hfaq-topic .hfaq-ic-clock {
  width: 36px;
}

.hfaq-topic .hfaq-ic-lock {
  width: 28px;
}

.hfaq-topic .hfaq-ic-pin {
  width: 28px;
}

.hfaq-topic .hfaq-ic-svg {
  width: 60px;
}

.hfaq-topic .hfaq-ic-svg-tall {
  width: 29px;
}

.hfaq-topic .hfaq-ic-svg-limits {
  width: 52px;
}

.hfaq-topic h4 {
  color: #262c5d;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.hfaq-topic p {
  color: #33395f;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

/* --- Still have questions? bar --- */
.hfaq-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 38px;
  background: #d7e4f7;
  border-radius: 18px;
  margin-top: 36px;
  padding: 26px 32px;
}

.hfaq-help-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 300px;
}

.hfaq-help-intro .hfaq-ic-svg {
  color: #262c5d;
  height: 42px;
  width: 53px;
  flex-shrink: 0;
}

.hfaq-help-intro h3 {
  color: #262c5d;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 2px;
}

.hfaq-help-intro p {
  color: #33395f;
  font-size: 16px;
  margin: 0;
}

.hfaq-help-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #262c5d;
  text-decoration: none;
}

.hfaq-help-item .hfaq-ic {
  height: 34px;
  flex-shrink: 0;
}

.hfaq-help-item .hfaq-ic-phone {
  width: 34px;
}

.hfaq-help-item .hfaq-ic-pin {
  width: 22px;
}

.hfaq-help-item strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.hfaq-help-item em {
  color: #ec081b;
  display: block;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
}

.hfaq-help-item .hfaq-help-plain {
  color: #33395f;
  font-size: 16px;
  font-weight: 400;
}

/* The icon is painted with currentColor, so recolouring the link recolours
   the mask with it. */
.hfaq-help-item:hover {
  color: #ec081b;
}

.hfaq-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ec081b;
  border-radius: 999px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-left: auto;
  padding: 14px 34px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.hfaq-help-btn:hover,
.hfaq-help-btn:focus {
  background: #c40616;
  color: #fff;
}

@media (min-width: 1024px) {
  .hfaq-grid {
    grid-template-columns: 1fr 1.04fr;
    gap: 46px;
  }

  .hfaq-topics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 779px is the site-wide mobile breakpoint (see the global heading rules
   above), so the FAQ switches over at the same width. */
@media (max-width: 779px) {
  .hfaq {
    padding: 44px 0 48px;
  }

  .hfaq-heading {
    /* !important beats the global "h2 { font-size: 40px !important }"
       mobile rule at ≤779px. */
    font-size: 30px !important;
  }

  .hfaq-lead {
    font-size: 16px;
    margin-bottom: 26px;
  }

  .hfaq-tabs {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 28px;
  }

  .hfaq-tab {
    padding: 16px 10px 14px;
  }

  /* Same icons at 28px tall — every width is its 36px value x 0.78. */
  .hfaq-tab .hfaq-ic,
  .hfaq-tab .hfaq-ic-svg {
    height: 28px;
  }

  .hfaq-tab .hfaq-ic-check,
  .hfaq-tab .hfaq-ic-moneyorder {
    width: 50px;
  }

  .hfaq-tab .hfaq-ic-wu {
    width: 49px;
  }

  .hfaq-tab .hfaq-ic-corp {
    width: 53px;
  }

  .hfaq-tab .hfaq-ic-card {
    width: 29px;
  }

  .hfaq-tab .hfaq-ic-billpay {
    width: 27px;
  }

  .hfaq-tab .hfaq-ic-svg {
    width: 35px;
  }

  .hfaq-tab-label {
    font-size: 13px;
  }

  .hfaq-help {
    gap: 18px;
    padding: 24px 22px;
  }

  .hfaq-help-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .hfaq-topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Digital currency page (new_digitalcurrency/ mockups): dcx-* classes.
       Shared palette (navy #262c5d, red #ec081b, pill blue #d7e4f7) plus the
       CoinFlip gold #fbb820, the cream card #fcf6ec and the warm white card
       #fef7f7 sampled from the mockups. Reuses whole components: the
       money-transfers location finder (mt-finder-*, recoloured by
       .dcx-finder), pcd-faq-grid + ccl-faq-item for the FAQ, pcd-btn-red /
       pcd-btn-outline for the hero pills, and svp-bar-navy + ccl-review for
       the reviews band. --- */

/* Both in-page anchor targets land below the sticky header, like [id='FAQ'] */
#how-it-works,
#dcx-finder {
  scroll-margin-top: 100px;
}

/* Hero: copy over the plate's white left column, CoinFlip ATM on the right */
.dcx-hero {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.dcx-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/digital-currency/dcx-hero.jpg");
  background-size: cover;
  background-position: right center;
}

.dcx-hero-content {
  max-width: 46%;
  padding: 64px 0 72px;
}

.dcx-hero-heading {
  color: #262c5d;
  font-size: 50px;
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 24px;
}

.dcx-hero-heading .dcx-red {
  color: #ec081b;
}

.dcx-hero-sub {
  color: #33395f;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 36px;
  max-width: 470px;
}

.dcx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 48px;
}

/* margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule,
   which would push the second pill down and stretch the first to match. */
.dcx-hero-btn {
  font-size: 17px;
  line-height: 20px;
  padding: 16px 32px;
  margin-top: 0;
  justify-content: center;
  text-transform: uppercase;
}

.dcx-hero-btn .fa {
  margin-right: 12px;
  font-size: 18px;
}

.dcx-hero-logo {
  display: block;
  width: 250px;
  height: auto;
}

/* The portrait ATM crop only exists on the stacked mobile hero */
.dcx-hero-atm {
  display: none;
  width: 100%;
  height: auto;
}

/* --- Three highlight cards + navy notice band (mockup 2) --- */
.dcx-cards {
  background: #fff;
  padding: 48px 0 56px;
}

.dcx-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 30px;
}

@media (min-width: 780px) {
  .dcx-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dcx-card {
  background: #d7e4f7;
  border-radius: 18px;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px 18px;
  align-items: center;
}

.dcx-card img {
  width: 62px;
  height: auto;
  border-radius: 50%;
}

.dcx-card h2 {
  color: #262c5d;
  font-size: 20px !important;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 10px;
}

.dcx-card p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.dcx-notice {
  background: #262c5d;
  border-radius: 18px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.dcx-notice img {
  width: 66px;
  height: auto;
  flex-shrink: 0;
}

.dcx-notice-title {
  color: #fff;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 10px;
}

.dcx-notice p:not(.dcx-notice-title) {
  color: #d5dcf5;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* --- How It Works: navy band, five cards with overlapping number discs --- */
.dcx-steps {
  background: #262c5d;
  padding: 52px 0 60px;
}

.dcx-steps-heading {
  color: #fff;
  font-size: 34px !important;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
}

.dcx-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .dcx-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dcx-steps-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* The number disc straddles the card's top edge; the margin-top reserves
   the half that sticks out. */
.dcx-step {
  position: relative;
  margin-top: 26px;
  background: #d7e4f7;
  border-radius: 16px;
  padding: 56px 16px 24px;
  text-align: center;
}

.dcx-step-num {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #d51f24;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dcx-step img {
  height: 64px;
  width: auto;
  margin: 0 auto 22px;
}

.dcx-step h3 {
  color: #262c5d;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 14px;
}

.dcx-step p {
  color: #33395f;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* --- Location finder recolour (the component itself is mt-finder-*) --- */
.dcx-finder .mt-search-btn {
  background: #262c5d;
}

.dcx-finder .mt-search-btn:hover {
  background: #1b2045;
}

.dcx-finder .mt-search-btn .loc-search-icon {
  color: #fff;
}

.dcx-geo-btn {
  background: #ec081b;
}

.dcx-geo-btn:hover {
  background: #c70010;
}

.dcx-finder .mt-store-view a {
  background: #ec081b;
  color: #fff;
}

.dcx-finder .mt-store-view a:hover {
  background: #c70010;
  color: #fff;
}

/* --- What You Need / Review Before You Confirm / Pause Before You Pay --- */
.dcx-info {
  background: #d7e4f7;
  padding: 52px 0 56px;
}

.dcx-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 1024px) {
  .dcx-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dcx-need {
  background: #fef7f7;
  border-radius: 20px;
  padding: 34px 32px;
}

.dcx-need h2,
.dcx-review h2 {
  color: #262c5d;
  font-size: 28px !important;
  font-weight: 800;
  margin: 0 0 24px;
}

.dcx-need-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 24px;
}

@media (min-width: 640px) {
  .dcx-need-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dcx-need-grid li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dcx-need-grid img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dcx-need-grid h3 {
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  margin: 4px 0 8px;
}

.dcx-need-grid p {
  color: #33395f;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

.dcx-review {
  position: relative;
  background: #fcf6ec;
  border-radius: 20px;
  padding: 34px 32px;
}

.dcx-review-badge {
  position: absolute;
  top: 26px;
  right: 28px;
  width: 62px;
  height: auto;
}

.dcx-review > p {
  color: #33395f;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 440px;
}

.dcx-review-list {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dcx-review-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #33395f;
  font-size: 16px;
}

.dcx-check {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fbb820;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dcx-pause-heading {
  color: #262c5d;
  font-size: 32px !important;
  font-weight: 800;
  text-align: center;
  margin: 46px 0 28px;
}

.dcx-warn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 30px;
}

@media (min-width: 1024px) {
  .dcx-warn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dcx-warn-card {
  background: #fef7f7;
  border: 2px solid #ec081b;
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dcx-warn-card img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dcx-warn-card h3 {
  color: #262c5d;
  font-size: 16.5px;
  line-height: 1.35;
  font-weight: 800;
  margin: 2px 0 10px;
}

.dcx-warn-card p {
  color: #33395f;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

.dcx-learn-row {
  text-align: center;
}

.dcx-learn-btn {
  display: inline-block;
  min-width: min(560px, 100%);
  background: #fef7f7;
  border: 2px solid #ec081b;
  border-radius: 14px;
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  padding: 16px 40px;
  text-align: center;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.dcx-learn-btn:hover {
  background: #ec081b;
  color: #fff;
}

/* --- Need Help with the ATM: gold band with the CoinFlip support card --- */
.dcx-help {
  background: #fff;
  padding: 46px 0;
}

.dcx-help-band {
  background: #fbb820;
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 30px;
}

.dcx-help-badge {
  width: 92px;
  height: auto;
  border-radius: 50%;
  flex-shrink: 0;
}

.dcx-help-copy {
  flex: 1 1 300px;
}

.dcx-help-copy h2 {
  color: #262c5d;
  font-size: 27px !important;
  font-weight: 800;
  margin: 0 0 10px;
}

.dcx-help-copy p {
  color: #33395f;
  font-size: 16.5px;
  line-height: 1.45;
  margin: 0;
  max-width: 440px;
}

.dcx-help-card {
  background: #262c5d;
  border-radius: 16px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.dcx-help-card img {
  width: 54px;
  height: auto;
  flex-shrink: 0;
}

.dcx-help-label {
  color: #fbb820;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px;
}

.dcx-help-phone {
  display: block;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.dcx-help-phone:hover {
  color: #fff;
  text-decoration: underline;
}

.dcx-help-sub {
  color: #e8ebf7;
  font-size: 15px;
  margin: 4px 0 0;
}

/* --- FAQ --- */
.dcx-faq {
  background: #fff;
  padding: 52px 0 36px;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .dcx-hero-content {
    max-width: 58%;
    padding: 48px 0 56px;
  }

  .dcx-hero-heading {
    font-size: 38px;
  }

  .dcx-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 24px;
  }

  .dcx-help-band {
    justify-content: center;
    text-align: center;
  }

  .dcx-help-copy p {
    margin: 0 auto;
  }

  .dcx-help-card {
    text-align: left;
  }
}

@media (max-width: 767px) {
  /* Stacked hero: copy on white, then the portrait ATM plate */
  .dcx-hero-photo {
    display: none;
  }

  .dcx-hero-content {
    max-width: none;
    padding: 40px 0 34px;
  }

  .dcx-hero-atm {
    display: block;
  }
}

@media (max-width: 779px) {
  /* !important beats the global "h2 { font-size: 40px !important }" */
  .dcx-hero-heading {
    font-size: 34px;
  }

  .dcx-steps-heading {
    font-size: 28px !important;
  }

  .dcx-need h2,
  .dcx-review h2 {
    font-size: 24px !important;
  }

  .dcx-pause-heading {
    font-size: 26px !important;
  }

  .dcx-help-copy h2 {
    font-size: 24px !important;
  }

  .dcx-help-phone {
    font-size: 26px;
  }
}

@media (max-width: 479px) {
  .dcx-hero-heading {
    font-size: 30px;
  }

  .dcx-hero-cta {
    gap: 12px;
  }

  .dcx-hero-btn {
    font-size: 15px;
    padding: 13px 22px;
  }

  .dcx-hero-logo {
    width: 200px;
  }

  .dcx-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .dcx-card img {
    width: 52px;
  }

  .dcx-help-card {
    padding: 20px 22px;
  }
}

/* --- Foreign currency exchange page (new_currencyexchange/ mockups): fx-*
       classes. Shared palette (navy #262c5d, red #ec081b, pill blue #d7e4f7,
       rate green #00a859). Reuses whole components: the money-transfers
       location finder (mt-finder-*, recoloured by .dcx-finder exactly as the
       digital-currency page does), pcd-btn-red / pcd-btn-outline for the hero
       pills, pcd-faq-grid + ccl-faq-item + svp-cross for the FAQ, and
       svp-bar-navy + ccl-review + svp-google-g for the reviews band. --- */

/* In-page anchor targets land below the sticky header, like [id='FAQ'] */
#fx-converter,
#fx-finder {
  scroll-margin-top: 100px;
}

/* Hero: copy over the plate's white left column, teller photo on the right */
.fx-hero {
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* Fitted to the hero's height and pinned right, NOT cover. The section is
   full width, so past a ~1285px viewport cover is wider than the plate's
   1.945 aspect and crops vertically - 33% of the height at 1920, which a
   centred crop splits across the top and bottom and takes the branch sign
   and the customer's hairline with it. Fitting to the height never crops
   vertically, and the slack it leaves on the left is exactly where the
   copy sits: the section's white and the plate's flat white left column
   are the same colour, so the seam is invisible. At and below ~1285px the
   two sizings are identical - the plate is clipped on the left either
   way - so the wash below still does the work at 1280 and under. */
.fx-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/currency-exchange/fx-hero.jpg");
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

/* The right-pinned plate is clipped on its left as the viewport narrows,
   eating the white column the copy sits on, so a wash keeps the copy zone
   readable. It fades out before the customer (≈48% at 1280) and does
   nothing on wide viewports, where the plate's own white column already
   reaches past the copy. Below 1200px it is far too short - see the two
   overrides in the responsive section. */
.fx-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.75) 30%,
    rgba(255, 255, 255, 0) 47%
  );
}

.fx-hero-content {
  max-width: 44%;
  padding: 60px 0 64px;
}

.fx-hero-heading {
  color: #262c5d;
  font-size: 48px;
  line-height: 1.14;
  font-weight: 800;
  margin: 0 0 22px;
}

.fx-red {
  color: #ec081b;
}

.fx-hero-sub {
  color: #33395f;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 34px;
  max-width: 470px;
}

.fx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 44px;
}

/* The pills sit side by side even where they outgrow the copy column — in
   the mockup the white pill reaches onto the photo. */
@media (min-width: 1024px) {
  .fx-hero-cta {
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* Solid white, not outline-transparent: the pill reaches onto the photo.
   The :hover rule restores the navy fill this rule would otherwise beat
   on source order. */
.fx-hero .pcd-btn-outline {
  background: #fff;
}

.fx-hero .pcd-btn-outline:hover {
  background: #262c5d;
}

/* margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule */
.fx-hero-btn {
  font-size: 17px;
  line-height: 20px;
  padding: 14px 30px;
  margin-top: 0;
  justify-content: center;
  text-transform: uppercase;
}

.fx-hero-btn .fa {
  margin-right: 12px;
  font-size: 20px;
}

/* The white swap disc cropped from the mockup; border-radius clips its
   square corners so it reads as a coin on the red pill. */
.fx-btn-swap {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 12px;
}

/* Frosted backing keeps the labels readable where the row's right end
   crosses onto the photo; on wide viewports it sits white-on-white. */
.fx-hero-trust {
  display: flex;
  width: fit-content;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 14px;
}

.fx-hero-trust li {
  text-align: center;
  max-width: 110px;
}

.fx-hero-trust img {
  height: 54px;
  width: auto;
  margin: 0 auto 10px;
}

.fx-hero-trust p {
  color: #262c5d;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}

/* The landscape photo crop only exists on the stacked mobile hero */
.fx-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* --- Popular currencies grid + converter panel (mockup 2) --- */
.fx-popular {
  background: #fff;
  padding: 56px 0 64px;
}

.fx-popular-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

@media (min-width: 1024px) {
  .fx-popular-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  }
}

.fx-popular-heading {
  color: #262c5d;
  font-size: 34px !important;
  font-weight: 800;
  text-transform: uppercase;
  margin: 4px 0 26px;
}

.fx-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .fx-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fx-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The cards are buttons that set the converter's currency */
.fx-card {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #b9c6dd;
  border-radius: 4px;
  padding: 18px 10px 14px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.fx-card:hover,
.fx-card.is-active {
  border-color: #262c5d;
  box-shadow: 0 2px 10px rgba(38, 44, 93, 0.18);
}

.fx-card img {
  width: 74px;
  height: auto;
  margin: 0 auto 12px;
}

.fx-card-code {
  display: block;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
}

.fx-card-name {
  display: block;
  color: #33395f;
  font-size: 13.5px;
  margin-top: 2px;
}

/* Converter panel: navy card, two white columns joined by the swap disc */
.fx-converter {
  background: #262c5d;
  border-radius: 22px;
  padding: 30px 28px 28px;
}

.fx-converter-heading {
  color: #fff;
  font-size: 25px !important;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 24px;
}

.fx-converter-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
}

.fx-conv-col {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fx-conv-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
}

.fx-conv-label {
  display: block;
  color: #262c5d;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.fx-conv-est {
  font-weight: 700;
  text-transform: none;
}

/* One rule styles both the input (You Have) and the result paragraph */
.fx-conv-amount {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #262c5d;
  font-family: inherit;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.fx-conv-amount:focus {
  outline: none;
}

.fx-conv-currency {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx-conv-currency img {
  width: 48px;
  height: auto;
  flex-shrink: 0;
}

.fx-conv-select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #262c5d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fx-conv-usd {
  color: #262c5d;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

.fx-conv-usd small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #33395f;
}

/* The swap disc sits centred between the two columns */
.fx-conv-swap {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  z-index: 1;
}

.fx-conv-note {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
  margin-top: 6px;
}

.fx-conv-rate {
  color: #00a859;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.fx-conv-note p:not(.fx-conv-rate) {
  color: #33395f;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

/* --- Why exchange band: five columns with hairline separators --- */
.fx-why {
  background: #262c5d;
  padding: 48px 0 54px;
}

.fx-why-heading {
  color: #fff;
  font-size: 32px !important;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 38px;
}

.fx-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .fx-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fx-why-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .fx-why-grid li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.7);
  }
}

.fx-why-grid li {
  text-align: center;
  padding: 0 18px;
}

.fx-why-grid img {
  width: 96px;
  height: auto;
  margin: 0 auto 26px;
}

.fx-why-grid h3 {
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.fx-why-grid p {
  color: #e8ebf7;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

/* --- How it works: icons straight on the navy band --- */
.fx-steps {
  background: #262c5d;
  padding: 48px 0 56px;
}

.fx-steps-heading {
  color: #fff;
  font-size: 34px !important;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 30px;
}

.fx-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .fx-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fx-steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fx-steps-grid li {
  text-align: center;
  padding: 0 12px;
}

/* The red number badge is baked into the crop */
.fx-steps-grid img {
  width: 118px;
  height: auto;
  margin: 0 auto 20px;
}

.fx-steps-grid h3 {
  color: #fff;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.fx-steps-grid p {
  color: #e8ebf7;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 250px;
}

/* Separate the two adjacent navy bands (finder sits between them on white) */
.fx-faq {
  background: #fff;
  padding: 52px 0 36px;
}

/* --- We buy / we do not sell band --- */
.fx-buy {
  position: relative;
  background: #262c5d;
  overflow: hidden;
}

/* The money-and-passport art bleeds off the band's top, right and bottom
   edges; its flat navy backdrop matches the section exactly (PNG8, see
   CLAUDE.md). */
.fx-buy-art {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 1;
}

.fx-buy-row {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 54px 0;
  max-width: 66%;
}

.fx-buy-swap {
  width: 96px;
  height: auto;
  flex-shrink: 0;
}

.fx-buy-heading {
  color: #fff;
  font-size: 31px !important;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.fx-buy-red {
  color: #ec081b;
}

.fx-buy-sub {
  color: #e8ebf7;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}

/* --- Responsive --- */

/* Below the 1200px container the plate is clipped hard on its left and the
   white column runs out under the copy - measured 1.71:1 on the heading
   and 1.16:1 on the sub-head at 1024, and 1.06:1 at 768. The desktop wash
   fades out by 47%, which is short of the copy: it ends at 44.1% of the
   viewport from 1024 to 1199 and at 57.7% from 768 to 1023 (where the
   column widens to 58%). These two blocks carry the wash past it. Below
   768px the plate is hidden outright and the copy sits on plain white. */
@media (max-width: 1199px) {
  .fx-hero-photo::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.93) 46%,
      rgba(255, 255, 255, 0) 66%
    );
  }
}

@media (max-width: 1023px) {
  .fx-hero-photo::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.93) 60%,
      rgba(255, 255, 255, 0) 80%
    );
  }
}

@media (max-width: 1023px) {
  .fx-hero-content {
    max-width: 58%;
    padding: 46px 0 52px;
  }

  .fx-hero-heading {
    font-size: 38px;
  }

  .fx-hero-trust {
    flex-wrap: wrap;
    gap: 22px;
  }

  .fx-buy-row {
    max-width: 70%;
  }

  .fx-buy-art {
    opacity: 0.45;
  }
}

@media (max-width: 767px) {
  /* Stacked hero: copy on white, then the landscape photo crop */
  .fx-hero-photo {
    display: none;
  }

  .fx-hero-content {
    max-width: none;
    padding: 40px 0 30px;
  }

  .fx-hero-mobile {
    display: block;
  }

  .fx-buy-row {
    max-width: none;
  }

  .fx-buy-art {
    opacity: 0.3;
  }
}

@media (max-width: 779px) {
  /* !important beats the global "h2 { font-size: 40px !important }" */
  .fx-hero-heading {
    font-size: 34px;
  }

  .fx-popular-heading {
    font-size: 28px !important;
  }

  .fx-converter-heading {
    font-size: 22px !important;
  }

  .fx-why-heading,
  .fx-steps-heading {
    font-size: 27px !important;
  }

  .fx-buy-heading {
    font-size: 25px !important;
  }
}

@media (max-width: 479px) {
  .fx-hero-heading {
    font-size: 30px;
  }

  .fx-hero-cta {
    gap: 12px;
  }

  .fx-hero-btn {
    font-size: 15px;
    padding: 12px 20px;
  }

  .fx-converter {
    padding: 24px 16px 22px;
  }

  /* Two 150px columns can't hold the amount and the currency select, so the
     converter stacks and the swap disc joins the flow between the columns. */
  .fx-converter-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fx-conv-swap {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto;
    width: 38px;
    height: 38px;
  }

  .fx-conv-amount {
    font-size: 22px;
  }

  .fx-conv-currency img {
    width: 46px;
  }

  .fx-conv-usd {
    font-size: 16px;
  }
}

/* --- About page (new_about/ mockups): abt-* classes. The hero follows the
   fx-hero pattern (copy over the plate's white left column, photo right,
   stacked portrait crop below 768px); the reviews and FAQ reuse
   ccl-review / ccl-faq-item wholesale. Palette: the shared navy #262c5d /
   red #ec081b / pill blue #d7e4f7, plus the footer band navy #393d65 for
   the feature band and #f1f6fc / #f5f5f7 section backgrounds. --- */
.abt-eyebrow {
  color: #ec081b;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.abt-h2 {
  color: #262c5d;
  font-size: 36px;
  line-height: 1.22;
  font-weight: 800;
  margin: 0 0 22px;
}

.abt-center {
  text-align: center;
}

/* Hero: copy over the plate's white left column, teller photo right */
.abt-hero {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.abt-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/about/abt-hero.jpg");
  background-size: cover;
  background-position: right center;
}

/* The right-pinned cover crop eats the plate's white left column as the
   viewport narrows; the wash keeps the copy zone readable and fades out
   before the teller. */
.abt-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.75) 30%,
    rgba(255, 255, 255, 0) 47%
  );
}

.abt-hero-content {
  max-width: 44%;
  padding: 56px 0 44px;
}

.abt-hero-heading {
  color: #262c5d;
  font-size: 48px;
  line-height: 1.16;
  font-weight: 800;
  margin: 0 0 20px;
  max-width: 430px;
}

.abt-hero-sub {
  color: #33395f;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 430px;
}

.abt-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 36px;
}

/* The pills sit side by side even where they outgrow the copy column */
@media (min-width: 1024px) {
  .abt-hero-cta {
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* Solid white, not outline-transparent: the pill reaches onto the photo.
   The :hover rule restores the navy fill this rule would otherwise beat
   on source order. */
.abt-hero .pcd-btn-outline {
  background: #fff;
}

.abt-hero .pcd-btn-outline:hover {
  background: #262c5d;
}

/* Mockup puts the pin after the label on the red pill */
.abt-hero .fx-hero-btn .fa {
  margin: 0 0 0 12px;
}

.abt-hero-logo {
  width: 168px;
  height: auto;
}

/* The portrait photo crop only exists on the stacked mobile hero */
.abt-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* Feature band: four icon + label pairs over the footer navy */
.abt-band {
  background: #393d65;
  padding: 26px 0;
}

.abt-band-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.abt-band-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 10px;
}

.abt-band-list li + li {
  border-left: 2px solid rgba(255, 255, 255, 0.9);
}

.abt-band-list p {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

/* Our story: photo collage + serif anniversary years on the left */
.abt-story {
  background: #fff;
  padding: 72px 0 64px;
}

.abt-story-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 64px;
  align-items: center;
}

.abt-story-img {
  width: 100%;
  height: auto;
}

.abt-story-years {
  font-family: Georgia, "Times New Roman", serif;
  color: #d7e4f7;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin: 26px 0 0;
}

.abt-story-copy .abt-h2 {
  margin-bottom: 26px;
  max-width: 420px;
}

.abt-story-copy > p:not(.abt-eyebrow) {
  color: #33395f;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 24px;
}

.abt-story-copy > p:last-child {
  margin-bottom: 0;
}

/* Our services: twelve pill-blue cards */
.abt-services {
  background: #f1f6fc;
  padding: 60px 0 70px;
}

.abt-services .abt-h2 {
  margin-bottom: 40px;
}

.abt-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.abt-svc-card {
  display: block;
  background: #d7e4f7;
  border-radius: 16px;
  padding: 30px 18px 26px;
  text-align: center;
  text-decoration: none;
}

a.abt-svc-card {
  transition: box-shadow 0.15s ease;
}

a.abt-svc-card:hover {
  box-shadow: 0 4px 18px rgba(38, 44, 93, 0.22);
}

.abt-svc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  margin-bottom: 18px;
}

.abt-svc-card h3 {
  color: #262c5d;
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

/* Our mission: copy beside five white value cards on the pill blue */
.abt-mission {
  background: #d7e4f7;
  padding: 60px 0;
}

/* The cards take the larger share: five of them across a narrower column
   leaves the longest value name ("Convenience", and its ES/HT equivalents)
   wider than its card. */
.abt-mission-grid {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  gap: 44px;
  align-items: center;
}

.abt-mission-copy .abt-h2 {
  margin-bottom: 18px;
}

.abt-mission-copy > p:not(.abt-eyebrow) {
  color: #33395f;
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
}

.abt-mission-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.abt-mission-card {
  background: #fff;
  border-radius: 14px;
  padding: 26px 10px 24px;
  text-align: center;
}

.abt-mission-card img {
  margin: 0 auto 18px;
}

.abt-mission-card h3 {
  color: #ec081b;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
}

.abt-mission-card p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Why choose us: team photo beside the checklist. Column split and the
   photo's 20px radius are measured off the mockup (photo spans 1.9%-52.1%
   of its width, corner radius 82px on a 2408px-wide plate). The check discs
   are Font Awesome's fa-check-circle — a filled disc with the tick knocked
   out, which is exactly the mockup's mark, so no crop is needed. */
.abt-why {
  background: #f1f6fc;
  padding: 64px 0;
}

.abt-why-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.abt-why-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.abt-why-copy .abt-h2 {
  margin-bottom: 30px;
}

.abt-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abt-why-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #373965;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 22px;
}

.abt-why-list li:last-child {
  margin-bottom: 0;
}

.abt-why-list .fa {
  flex: none;
  color: #262c5d;
  font-size: 28px;
}

/* Proud to serve: the Florida map art (fade to white baked into the crop)
   fills the band's height on the left; copy sits in the right column. The
   in-flow img only exists on the stacked layout below 1200px, where the
   left-pinned art would otherwise slide under the copy. */
/* The art is the mockup's left 2680px (of 4801) with a fade to white baked
   into its last 350px. It keeps the anniversary logo: the logo sits between
   the coastline and the copy in the mockup, and the store pins run past it
   horizontally, so the logo cannot be cropped off without taking pins with
   it. Painting it out leaves a visible patch — the surrounding gradient is
   too smooth to fake. */
/* The band's height has to track the art's, or the art floats in white: the
   art's height follows the viewport width while the band's follows the copy,
   so they only agree at one width. `min-height` gives the band the art's own
   proportions (the 0.5 factor sits just under the art's 1/1.968 so the art
   always over-fills by a pixel or two rather than leaving a gap), and the
   copy centres inside it. A copy column taller than that — Spanish, at
   narrow widths — grows the band, and `cover` on the art absorbs it. */
.abt-map {
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  min-height: calc((50vw + 120px) * 0.5);
  padding: 20px 0;
}

/* The box ends exactly where the copy's text starts at every width: the
   container's left edge is `50% - 600px`, so `50% + 120px` is that plus the
   grid's first column plus the copy's own padding. A percentage width would
   outgrow the fixed 1200px container and slide under the copy past ~1400px.
   The art is sized to the box's WIDTH, never `cover`. Its baked-in
   anniversary logo ends at a fixed 84% of the art, so fitting the art to
   the box guarantees the logo clears the copy at every width. `cover` does
   not: when the copy is what sets the band's height — Spanish, at
   1200-1280px — it scales the art up until the logo runs past the box and
   is chopped off mid-word.

   Fitting to width leaves the band's spare height empty, so two gradient
   layers sampled at 5% intervals from the art's own top and bottom rows
   fill it, each anchored to its own edge and half the band tall. The seam
   therefore always meets the row it was sampled from. (The prepaid hero
   uses the same trick on its left column.) Re-sample both if the crop is
   ever regenerated, staying 2px clear of the edge so JPEG artifacts do not
   land in the stops. */
.abt-map::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(50% + 120px);
  background:
    url("/static/images/about/abt-map.jpg") center / 100% auto no-repeat,
    linear-gradient(
      90deg,
      #2852a6 0%,
      #043591 5%,
      #013299 10%,
      #0140aa 15%,
      #0748b0 20%,
      #0a4db6 25%,
      #0c4fb8 30%,
      #1958c1 35%,
      #2360ca 40%,
      #2c66ca 45%,
      #3e76d5 50%,
      #5086e0 55%,
      #6998e8 60%,
      #93b6ee 65%,
      #9cbaee 70%,
      #b0c7f0 75%,
      #b9cdee 80%,
      #d2def6 85%,
      #e2e8f8 90%,
      #f5f5fd 95%,
      #fff 100%
    )
    top / 100% 50% no-repeat,
    linear-gradient(
      90deg,
      #294083 0%,
      #031b63 5%,
      #011b66 10%,
      #021f6f 15%,
      #022275 20%,
      #022684 25%,
      #012788 30%,
      #043496 35%,
      #0437a0 40%,
      #0541b3 45%,
      #0745b4 50%,
      #1453c5 55%,
      #2d64c9 60%,
      #5789de 65%,
      #77a1e9 70%,
      #aac2ee 75%,
      #bed2f5 80%,
      #cecfee 85%,
      #dedcf2 90%,
      #f0eef9 95%,
      #fff 100%
    )
    bottom / 100% 50% no-repeat;
}

/* Sits above both pseudo-elements. `width` because the container is a flex
   item here, and needs an explicit one before its max-width and auto
   margins can centre it. */
.abt-map > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* The stacked landscape crop, 768-1199px only. Carries its image as a
   background rather than an <img> so it is not downloaded on phones, which
   show abt-map-mobile.jpg instead, nor on desktop, which paints the same
   crop through .abt-map::after. */
.abt-map-img {
  display: none;
  width: 100%;
  aspect-ratio: 1600 / 813;
  background: url("/static/images/about/abt-map.jpg") center / cover no-repeat;
}

.abt-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.abt-map-copy {
  grid-column: 2;
  padding-left: 120px;
}

.abt-map-copy .abt-h2 {
  font-size: 32px;
  margin-bottom: 18px;
}

.abt-map-copy > p {
  color: #33395f;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 540px;
}

.abt-map-btn {
  display: inline-block;
  background: #ec081b;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 8px;
  margin-top: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.abt-map-btn:hover,
.abt-map-btn:focus {
  background: #c00614;
  color: #fff;
}

/* Reviews (white, centered heading) + FAQ (single-column pill list) */
.abt-reviews {
  background: #fff;
  padding: 60px 0 70px;
}

.abt-reviews .abt-h2 {
  margin-bottom: 28px;
}

.abt-faq {
  background: #f5f5f7;
  padding: 60px 0 76px;
}

.abt-faq .abt-h2 {
  margin-bottom: 34px;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
  /* Stacked map band: the art crop flows above the copy */
  .abt-map {
    display: block;
    min-height: 0;
    background: #fff;
    padding: 48px 0 56px;
  }

  .abt-map::after {
    display: none;
  }

  .abt-map-img {
    display: block;
    margin-bottom: 34px;
  }

  .abt-map-grid {
    grid-template-columns: 1fr;
  }

  .abt-map-copy {
    grid-column: auto;
    padding-left: 0;
  }

  /* Copy beside five cards needs the full 1200px container: at 1024 the
     cards squeeze to 114px and the value headings overflow their box. */
  .abt-mission-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 1023px) {
  .abt-hero-content {
    max-width: 58%;
    padding: 46px 0 40px;
  }

  .abt-hero-heading {
    font-size: 38px;
  }

  .abt-band-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 0;
  }

  /* Only the in-row separator survives the 2x2 wrap */
  .abt-band-list li + li {
    border-left: none;
  }

  .abt-band-list li:nth-child(even) {
    border-left: 2px solid rgba(255, 255, 255, 0.9);
  }

  .abt-story-grid,
  .abt-why-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .abt-story-years {
    font-size: 72px;
  }

  .abt-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abt-mission-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .abt-mission-cards {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media (max-width: 779px) {
  /* !important beats the global "h2 { font-size: 40px !important }" */
  .abt-h2 {
    font-size: 31px !important;
  }

  .abt-hero-heading {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  /* Stacked hero: copy on white, then the portrait photo crop */
  .abt-hero-photo {
    display: none;
  }

  .abt-hero-content {
    max-width: none;
    padding: 40px 0 34px;
  }

  .abt-hero-mobile {
    display: block;
  }

  /* Proud to Serve: the phone mockup's own flag backdrop
     (about us- Proud to serve - mobile.png) sits behind the copy, replacing
     the stacked landscape map crop — the crop's 30-odd pins are illegible at
     this width, and the mockup carries no map. 768-1199px keeps the crop.
     Pinned bottom so the flag stripes, which live in the plate's lower half,
     are the part that survives the cover crop. */
  .abt-map {
    background: url("/static/images/about/abt-map-mobile.jpg") center bottom / cover no-repeat;
  }

  .abt-map-img {
    display: none;
  }
}

@media (max-width: 479px) {
  .abt-hero-heading {
    font-size: 30px;
  }

  .abt-hero-cta {
    gap: 12px;
  }

  .abt-band-list li {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .abt-band-list p {
    font-size: 16px;
  }

  .abt-story-years {
    font-size: 46px;
  }

  .abt-svc-grid {
    gap: 14px;
  }

  .abt-svc-card h3 {
    font-size: 16px;
  }

  .abt-svc-icon {
    height: 84px;
  }

  .abt-svc-icon img {
    max-height: 100%;
    width: auto;
  }

  .abt-mission-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .abt-h2 {
    font-size: 27px !important;
  }
}

/* ===================================================================
   26. CHATBOT WIDGET — .cbot-*
   Site-wide FAQ assistant. Markup lives in base.html, behaviour in
   /static/js/chatbot.js, answers come from /api/chat (Workers AI).
   Palette matches the redesigned sections: navy #262c5d, red #ec081b,
   bot bubble #d7e4f7. Sits above the sticky header (z-index 1001).
   =================================================================== */
.cbot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  font-family: var(--font-sans);
}

/* --- Launcher button ---
   chat-launcher.png is the supplied "Live Chat" artwork with its baked-in
   text painted out (the flat red below it, cloned upward over the letters),
   leaving the pill, the speech bubbles and the baked drop shadow. It is a
   380x131 export of a 1284x444 source.

   It is drawn as a 3-slice border-image rather than an <img> so the label
   can be real, translatable text: the left slice carries the bubbles and the
   left cap, the right slice the right cap, and the flat red middle stretches
   to whatever the label needs. "Chat en Vivo" and "Chat an Dirèk" are both
   wider than "Live Chat", and this is what stops them overflowing the pill.

   Slices are in SOURCE pixels, border-widths in CSS pixels; keep their ratio
   equal to height / 131 or the caps distort. At height 66: 127 -> 64 and
   74 -> 37, both ~0.504. Top/bottom slices are 0, so the middle also carries
   the shadow, squashing with everything else. */
.cbot-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 66px;
  padding: 0 10px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 37px 0 64px;
  border-image-source: url("/static/images/chat-launcher.png");
  border-image-slice: 0 74 0 127 fill;
  border-image-repeat: stretch;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.cbot-launcher:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.cbot-launcher:focus-visible {
  outline: 3px solid #262c5d;
  outline-offset: -2px;
  border-radius: 999px;
}

/* The launcher hides while the panel is open so the two never overlap. */
.cbot.is-open .cbot-launcher {
  display: none;
}

/* --- Panel --- */
.cbot-panel {
  display: none;
  flex-direction: column;
  width: 380px;
  height: 540px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.cbot.is-open .cbot-panel {
  display: flex;
}

/* --- Header --- */
.cbot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 16px;
  background: #262c5d;
  color: #fff;
}

.cbot-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 16px;
}

.cbot-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cbot-title {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.cbot-sub {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1.2;
}

.cbot-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cbot-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* --- Message log --- */
.cbot-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: #f7f9fc;
}

.cbot-msg {
  max-width: 84%;
  margin-bottom: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cbot-msg-bot {
  margin-right: auto;
  border-bottom-left-radius: 4px;
  background: #d7e4f7;
  color: #262c5d;
}

.cbot-msg-user {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: #262c5d;
  color: #fff;
}

.cbot-msg-error {
  margin-right: auto;
  border-bottom-left-radius: 4px;
  background: #fdeaec;
  color: #a00711;
}

/* --- Suggested openers --- */
.cbot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.cbot-chip {
  padding: 7px 12px;
  border: 1px solid #262c5d;
  border-radius: 999px;
  background: #fff;
  color: #262c5d;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.cbot-chip:hover {
  background: #262c5d;
  color: #fff;
}

/* --- Typing indicator --- */
.cbot-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: #d7e4f7;
}

.cbot-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #262c5d;
  opacity: 0.4;
  animation: cbot-bounce 1.2s infinite;
}

.cbot-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.cbot-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes cbot-bounce {
  0%,
  60%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* --- Composer --- */
.cbot-form {
  display: flex;
  gap: 8px;
  flex: none;
  padding: 12px;
  border-top: 1px solid #e3e8f0;
  background: #fff;
}

.cbot-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #c9d4e6;
  border-radius: 999px;
  background: #fff;
  color: #262c5d;
  font-family: inherit;
  font-size: 14px;
}

.cbot-input:focus {
  outline: none;
  border-color: #262c5d;
}

.cbot-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ec081b;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cbot-send:hover:not(:disabled) {
  background: #262c5d;
}

.cbot-send:disabled {
  opacity: 0.45;
  cursor: default;
}

/* --- Disclaimer --- */
.cbot-legal {
  flex: none;
  margin: 0;
  padding: 0 12px 10px;
  background: #fff;
  color: #7a8299;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: center;
}

/* --- Mobile: the panel becomes a full-screen sheet ---------------------
   A 380x540 card anchored to the corner spends the whole conversation
   fighting the phone's browser chrome, so below 640px — and on short
   landscape phones, which are wide but only ~400px tall — the panel pins
   itself to the viewport instead of to .cbot's corner. Height is 100dvh
   (with a 100vh fallback for older engines) so the collapsing address bar
   never crops the composer off the bottom of the sheet.
   Keep this media condition in sync with the body-lock rule below and with
   the same condition repeated for prefers-reduced-motion. ------------- */
@media (max-width: 640px), (max-width: 1023px) and (max-height: 620px) {
  .cbot {
    right: 14px;
    bottom: 14px;
  }

  .cbot-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    animation: cbot-sheet-in 0.22s ease-out;
  }

  /* Taller header, 44px close target, and room for a notch when the sheet
     is shown inside a standalone/PWA window (0 in a normal browser tab). */
  .cbot-head {
    gap: 12px;
    padding: 14px 14px 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  .cbot-head-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .cbot-title {
    font-size: 16px;
  }

  .cbot-sub {
    font-size: 12.5px;
  }

  .cbot-close {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .cbot-log {
    padding: 14px 12px;
  }

  .cbot-msg {
    max-width: 90%;
    font-size: 15px;
  }

  .cbot-chip {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .cbot-form {
    padding: 10px 12px;
  }

  /* 16px is the floor: anything smaller makes iOS Safari zoom the page in
     when the field takes focus, and it never zooms back out. */
  .cbot-input {
    height: 46px;
    font-size: 16px;
  }

  .cbot-send {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .cbot-legal {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Without this the page behind the sheet scrolls under the user's thumb
     as soon as the message log hits its end. chatbot.js adds the class. */
  body.cbot-lock {
    overflow: hidden;
  }
}

/* The pill is the one thing that should get smaller on a small phone, not
   bigger — it sits over page content until it is tapped. Every value here
   is the desktop one scaled by 56/66, so the caps keep their aspect. */
@media (max-width: 479px) {
  .cbot-launcher {
    height: 56px;
    padding: 0 9px;
    border-width: 0 31px 0 54px;
    font-size: 15px;
  }
}

@keyframes cbot-sheet-in {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbot-launcher,
  .cbot-send,
  .cbot-chip,
  .cbot-close {
    transition: none;
  }

  .cbot-panel {
    animation: none;
  }

  .cbot-typing span {
    animation: none;
  }
}

/* --- More services page (new_moreservices/ mockups): msv-* classes. Shared
       palette (navy #262c5d, red #ec081b, card blue #d7e4f7) on the about
       page's section blue #f1f6fc. Reuses whole components rather than
       restyling them: pcd-btn-red / pcd-btn-outline + fx-hero-btn for the
       hero pills, abt-eyebrow for the red section labels, the eleven service
       icons from the about page's grid (abt-ic-*, pixel-identical art in
       these mockups), and the about page's reviews and FAQ bands wholesale
       (abt-reviews / abt-faq / abt-h2 / ccl-reviews-grid / abt-faq-list) —
       the mockup's colours for those two sections are #fff and #f5f5f7,
       which is exactly what those classes already paint. --- */

/* In-page anchor targets land below the sticky header, like [id='FAQ'] */
#bill-payment,
#services {
  scroll-margin-top: 100px;
}

/* Hero: copy over the plate's pale left column, counter photo on the right */
.msv-hero {
  position: relative;
  background: #eff0f5;
  overflow: hidden;
}

.msv-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/more-services/msv-hero.jpg");
  background-size: cover;
  background-position: right center;
}

/* The right-pinned cover crop eats the plate's pale left column as the
   viewport narrows; the wash keeps the copy zone readable and fades out
   before the customer, exactly as .abt-hero and .fx-hero do.

   The copy column and the customer are a knife edge apart at every width:
   measured with the copy painted transparent, the sub-head's longest line
   ends at 42.8-46.7% of the viewport while the man's navy sweater starts
   at 43.1-45.9%, so they OVERLAP by 3-19px in Spanish, Creole and English
   alike. The wash therefore has to hold full strength past where the text
   ends (42%) rather than fading out at 47% — the old profile left the last
   glyphs of the Creole line on bare navy at 1.4:1. At 1920 cover scales
   the plate by width, so background-position has no horizontal slack to
   slide the subject out of the way instead.

   The tail is deliberately steep (0.30 by 52%, 0 by 57%). Unlike .bp-hero,
   whose wash colour matches its section navy and so paints nothing, #eff0f5
   over this sweater is clearly visible: carrying the fade out to 64% turned
   the man's whole left third a washed-out grey-blue. Dropping it by 57%
   confines the veil to the ~4% strip the text actually reaches into, which
   reads as lighting rather than as a scrim. */
.msv-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(239, 240, 245, 0.94) 0%,
    rgba(239, 240, 245, 0.94) 42%,
    rgba(239, 240, 245, 0.8) 47%,
    rgba(239, 240, 245, 0.3) 52%,
    rgba(239, 240, 245, 0) 57%
  );
}

.msv-hero-content {
  max-width: 46%;
  padding: 92px 0 110px;
}

.msv-hero-heading {
  color: #262c5d;
  font-size: 53px;
  line-height: 1.14;
  font-weight: 800;
  margin: 0 0 26px;
  max-width: 540px;
}

/* The mockup breaks after "More Services." — a block span guarantees that
   break in all three languages instead of relying on where the copy wraps. */
.msv-hero-heading .fx-red {
  display: block;
}

.msv-hero-sub {
  color: #262c5d;
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 44px;
  max-width: 540px;
}

.msv-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* The pills sit side by side even where they outgrow the copy column */
@media (min-width: 1024px) {
  .msv-hero-cta {
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* Solid, not outline-transparent: the pill reaches onto the photo. The
   :hover rule restores the navy fill this rule would otherwise beat on
   source order. */
.msv-hero .pcd-btn-outline {
  background: #fff;
}

.msv-hero .pcd-btn-outline:hover {
  background: #262c5d;
}

/* Mockup puts the pin after the label on the red pill */
.msv-hero .fx-hero-btn .fa {
  margin: 0 0 0 12px;
}

.msv-hero .fx-hero-btn {
  font-size: 18px;
  padding: 17px 34px;
  text-transform: none;
}

/* The landscape photo crop only exists on the stacked mobile hero */
.msv-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* --- Feature strip: four icon + label pairs split by navy hairlines --- */
.msv-band {
  background: #f1f6fc;
  padding: 34px 0;
}

.msv-band-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.msv-band-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 14px;
}

.msv-band-list li + li {
  border-left: 3px solid #393d65;
}

.msv-band-list img {
  flex-shrink: 0;
}

.msv-band-list p {
  color: #262c5d;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0;
}

/* --- Get more done in one place: copy beside the desk photo --- */
.msv-intro {
  background: #f1f6fc;
  padding: 42px 0 30px;
}

.msv-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

@media (min-width: 1024px) {
  .msv-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 60px;
  }
}

.msv-intro-h2 {
  color: #262c5d;
  font-size: 35px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 24px;
}

/* :not(.abt-eyebrow) — this rule is more specific than .abt-eyebrow and
   would otherwise repaint the red section label navy. */
.msv-intro-copy p:not(.abt-eyebrow) {
  color: #33395f;
  font-size: 16px;
  line-height: 1.62;
  margin: 0 0 20px;
}

.msv-intro-copy p:last-child {
  margin-bottom: 0;
}

.msv-intro-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* --- Twelve-card service grid --- */
.msv-services {
  background: #f1f6fc;
  padding: 26px 0 58px;
}

.msv-services-h2 {
  text-align: center;
  color: #262c5d;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 22px;
}

/* 10px is the mockup's gutter, measured off the card edges — the grid is
   deliberately tight so four cards fill the 1200px container. */
.msv-svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .msv-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .msv-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.msv-svc-card {
  display: flex;
  flex-direction: column;
  background: #d7e4f7;
  border-radius: 16px;
  padding: 22px 18px 26px;
  text-align: center;
}

/* Fixed box so the titles line up across the row: the icon crops run from
   54px to 79px tall and the mockup lets them sit ragged. */
.msv-svc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin-bottom: 12px;
}

.msv-svc-card h3 {
  color: #262c5d;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 16px;
}

.msv-svc-card > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 18px;
  flex: 1 1 auto;
}

.msv-svc-more {
  color: #ec081b;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.msv-svc-more:hover,
.msv-svc-more:focus {
  color: #c70010;
}

.msv-svc-more .fa {
  font-size: 18px;
}

/* --- Bill payment: photo beside the checklist and CTA --- */
.msv-billpay {
  background: #f1f6fc;
  padding: 30px 0 34px;
}

.msv-billpay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

@media (min-width: 1024px) {
  .msv-billpay-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    gap: 70px;
  }
}

.msv-billpay-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.msv-billpay-h2 {
  color: #262c5d;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 18px;
}

.msv-billpay-sub {
  color: #33395f;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 26px;
}

.msv-billpay-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.msv-billpay-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #33395f;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.msv-billpay-list li:last-child {
  margin-bottom: 0;
}

.msv-billpay-list .fa {
  color: #262c5d;
  font-size: 22px;
  flex-shrink: 0;
}

/* Square-ish, not a pill: the mockup's CTA is a rounded rectangle sized to
   its label, about three quarters of the copy column. */
.msv-billpay-btn {
  display: inline-block;
  border-radius: 8px;
  font-size: 19px;
  line-height: 1.3;
  padding: 15px 34px;
  margin-top: 0;
  text-align: center;
}

.msv-billpay-note {
  color: #33395f;
  font-size: 16px;
  line-height: 1.4;
  margin: 16px 0 0;
}

/* --- Several services, one convenient stop: four numbered discs --- */
.msv-steps {
  background: #fff;
  padding: 24px 0 44px;
}

.msv-steps-h2 {
  text-align: center;
  color: #262c5d;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 34px;
}

.msv-steps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .msv-steps-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .msv-steps-list li + li {
    border-left: 3px solid #ec081b;
  }
}

.msv-steps-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
}

/* The red number disc straddles the icon disc's bottom edge, so the label
   below it is pushed clear by the disc's own margin. */
.msv-step-disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 79px;
  border-radius: 50%;
  background: #d7e4f7;
  margin-bottom: 26px;
}

.msv-step-num {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ec081b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.msv-steps-list p {
  color: #262c5d;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
  .msv-hero-heading {
    font-size: 44px;
  }

  .msv-hero-sub {
    font-size: 19px;
  }

  .msv-svc-card {
    padding: 20px 14px 22px;
  }

  .msv-svc-card h3 {
    font-size: 18px;
  }

  .msv-svc-card > p {
    font-size: 16px;
  }

  .msv-band-list p {
    font-size: 16px;
  }

  /* Below 1200px the cover crop is scaled by the hero's height, so pinning it
     right eats enough of the plate's pale column that the customer's navy
     sweater lands under the sub-head — measured 1.93:1 at 1024. Sliding the
     crop window left keeps that column instead of washing over the photo;
     it costs the plate's far-right edge, which is empty counter. */
  .msv-hero-photo {
    background-position: 74% center;
  }
}

@media (max-width: 1023px) {
  .msv-hero-photo {
    display: none;
  }

  .msv-hero-content {
    max-width: 100%;
    padding: 40px 0 32px;
  }

  .msv-hero-heading,
  .msv-hero-sub {
    max-width: none;
  }

  .msv-hero-mobile {
    display: block;
  }

  .msv-band-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .msv-band-list li:nth-child(odd) {
    border-left: 0;
  }

  .msv-intro-photo,
  .msv-billpay-photo {
    order: -1;
  }
}

@media (max-width: 779px) {
  .msv-hero-heading {
    font-size: 36px;
  }

  .msv-hero-sub {
    font-size: 17px;
    margin-bottom: 30px;
  }

  .msv-intro-h2 {
    font-size: 30px !important;
  }

  .msv-services-h2,
  .msv-steps-h2 {
    font-size: 26px !important;
  }

  .msv-billpay-h2 {
    font-size: 23px !important;
  }

  .msv-band-list li {
    gap: 12px;
    padding: 0 8px;
  }

  .msv-band-list img {
    height: 46px;
  }

  .msv-band-list p {
    font-size: 15px;
  }
}

/* Below 600px the icon-beside-label row no longer fits a half-width column
   without the label wrapping under its own icon, so the strip becomes a 2x2
   grid of icon-above-centred-label. One column of four left-aligned rows —
   the first fallback here — read as a plain list 325px tall with the right
   half of every row empty. */
@media (max-width: 599px) {
  .msv-band-list {
    row-gap: 26px;
  }

  .msv-band-list li {
    flex-direction: column;
    gap: 10px;
    padding: 0 6px;
    text-align: center;
  }

  /* Stacked, a divider would sit between an icon and its label rather than
     between two items, so it goes; the nth-child(odd) rule above only
     clears two of the three. */
  .msv-band-list li + li {
    border-left: 0;
  }

  .msv-band-list img {
    height: 44px;
  }
}

@media (max-width: 479px) {
  .msv-hero .fx-hero-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  .msv-band-list {
    row-gap: 22px;
  }

  .msv-band-list img {
    height: 40px;
  }

  .msv-band-list p {
    font-size: 14px;
  }

  .msv-steps-list {
    grid-template-columns: 1fr;
  }
}

/* --- 28. Contact page (new_contact/ mockups): ctc-* classes. The hero
   follows the fx-hero / abt-hero / msv-hero pattern (copy over the plate's
   pale left column, associate photo right, portrait crop stacked below
   1024px). Sections 4-6 are reused wholesale rather than restyled: the
   /locations/ services strip (loc-svc and loc-svc-band), its ready-to-visit
   band (svp-trusted and loc-ready) and the about page's FAQ band (abt-faq
   and abt-faq-list) — the mockup's artwork for all three is the same as the
   pages they already live on. Palette: the shared navy #262c5d / red
   #ec081b, plus the mockups' section blue #e6f1fc and the form's field
   blue-grey #9db2c7. --- */

/* The Send a Message card in the How Can We Help row jumps here, so the
   landing has to clear the sticky header. 180px, not the 100px [id='FAQ']
   uses: .is-stuck is position:fixed, so the header leaves the flow during
   the jump and everything shifts up by its ~80px static height. Measured
   at 1366px, 100px lands the section 59px UNDER the stuck header; 180px
   puts its top at 100px. ([id='FAQ'] has the same off-by-a-header
   problem on every page that uses it — untouched here.) */
#send-message {
  scroll-margin-top: 180px;
}

/* --- Line-art icons cropped from the mockups as alpha masks, painted with
   currentColor. The handset serves both the How Can We Help card (navy on
   white) and the Prefer to Call disc, at two different sizes; a flat crop
   would need a separate copy for each backdrop. --- */
.ctc-ic {
  display: block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}

.ctc-ic-pin {
  mask-image: url("/static/images/contact/ctc-ic-pin.png");
  -webkit-mask-image: url("/static/images/contact/ctc-ic-pin.png");
}

.ctc-ic-phone {
  mask-image: url("/static/images/contact/ctc-ic-phone.png");
  -webkit-mask-image: url("/static/images/contact/ctc-ic-phone.png");
}

.ctc-ic-env {
  mask-image: url("/static/images/contact/ctc-ic-env.png");
  -webkit-mask-image: url("/static/images/contact/ctc-ic-env.png");
}

.ctc-ic-shield {
  mask-image: url("/static/images/contact/ctc-ic-shield.png");
  -webkit-mask-image: url("/static/images/contact/ctc-ic-shield.png");
}

/* Without mask support the span would paint as a solid navy block */
@supports not (
    (mask-image: url("/static/images/contact/ctc-ic-pin.png")) or
    (-webkit-mask-image: url("/static/images/contact/ctc-ic-pin.png"))
  ) {
  .ctc-ic {
    display: none;
  }
}

/* --- Hero --- */
.ctc-hero {
  position: relative;
  background: #e6f1fc;
  overflow: hidden;
}

.ctc-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/contact/ctc-hero.jpg");
  background-size: cover;
  background-position: right center;
}

/* The right-pinned cover crop eats the plate's pale left column as the
   viewport narrows; the wash keeps the copy zone readable and fades out
   before the associate. */
.ctc-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(230, 241, 252, 0.92) 0%,
    rgba(230, 241, 252, 0.72) 30%,
    rgba(230, 241, 252, 0) 48%
  );
}

.ctc-hero-content {
  max-width: 47%;
  padding: 76px 0 88px;
}

.ctc-hero-heading {
  color: #262c5d;
  font-size: 56px;
  line-height: 1.13;
  font-weight: 800;
  margin: 0 0 24px;
  max-width: 480px;
}

.ctc-hero-sub {
  color: #33395f;
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 40px;
  max-width: 480px;
}

.ctc-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* The pills sit side by side even where they outgrow the copy column */
@media (min-width: 1024px) {
  .ctc-hero-cta {
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* Solid, not outline-transparent: the pill reaches onto the photo. The
   :hover rule restores the navy fill this rule would otherwise beat on
   source order. */
.ctc-hero .pcd-btn-outline {
  background: #fff;
}

.ctc-hero .pcd-btn-outline:hover {
  background: #262c5d;
}

/* Mockup puts the pin after the label on the red pill */
.ctc-hero .fx-hero-btn .fa {
  margin: 0 0 0 12px;
}

.ctc-hero .fx-hero-btn {
  font-size: 18px;
  padding: 16px 32px;
  text-transform: none;
}

/* The portrait photo crop only exists on the stacked mobile hero */
.ctc-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* --- How can we help you today: three white cards --- */
.ctc-help {
  background: #e6f1fc;
  padding: 56px 0 60px;
}

.ctc-help-h2 {
  text-align: center;
  color: #262c5d;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 40px;
}

.ctc-help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.ctc-help-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 34px 26px 30px;
  color: #262c5d;
}

.ctc-help-card .ctc-ic-pin {
  width: 44px;
  height: 55px;
}

.ctc-help-card .ctc-ic-phone {
  width: 44px;
  height: 59px;
}

.ctc-help-card .ctc-ic-env {
  width: 61px;
  height: 46px;
}

.ctc-help-card h3 {
  color: #262c5d;
  font-size: 20px;
  font-weight: 800;
  margin: 24px 0 12px;
}

.ctc-help-card > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 22px;
}

/* margin-top:auto keeps the three links on one line when the copy above
   them wraps to a different number of lines per card (it does in ES/HT) */
.ctc-help-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: #ec081b;
  font-size: 17px;
  font-weight: 800;
}

.ctc-help-link:hover {
  color: #c70010;
}

.ctc-help-link .fa {
  font-size: 18px;
}

/* --- Send us a message + local assistance --- */
.ctc-form-band {
  background: #e6f1fc;
  padding: 12px 0 64px;
}

/* align-items: stretch (the default, spelled out because it is load-bearing
   here) ends both columns on the same line, as mockup 3 does. The side
   column's slack all goes to the Need Local Assistance card's map. */
.ctc-form-grid {
  display: grid;
  grid-template-columns: 1.554fr 1fr;
  gap: 30px;
  align-items: stretch;
}

.ctc-card {
  background: #fff;
  border-radius: 22px;
}

.ctc-card-h2 {
  color: #262c5d;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 24px;
}

.ctc-form-card {
  padding: 38px 40px 42px;
}

.ctc-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- The form itself --- */
.ctc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

.ctc-field {
  margin-bottom: 18px;
}

.ctc-field label {
  display: block;
  color: #262c5d;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
}

.ctc-form input[type="text"],
.ctc-form input[type="email"],
.ctc-form input[type="tel"],
.ctc-form select,
.ctc-form textarea {
  width: 100%;
  border: 1px solid #9db2c7;
  border-radius: 12px;
  background: #fff;
  color: #262c5d;
  font-family: inherit;
  font-size: 16px;
}

.ctc-form input[type="text"],
.ctc-form input[type="email"],
.ctc-form input[type="tel"],
.ctc-form select {
  height: 48px;
  padding: 0 18px;
}

.ctc-form textarea {
  padding: 14px 18px;
  line-height: 1.5;
  resize: vertical;
  min-height: 150px;
}

.ctc-form ::placeholder {
  color: #9db2c7;
  opacity: 1;
}

.ctc-form input:focus,
.ctc-form select:focus,
.ctc-form textarea:focus {
  outline: none;
  border-color: #262c5d;
}

/* The mockup's select has no visible affordance; a chevron is added so it
   still reads as a menu rather than a text field. */
.ctc-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23262c5d' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  color: #9db2c7;
}

/* Only the placeholder option is blue-grey; a real choice reads as navy.
   The placeholder option carries an empty value, so :invalid would need the
   select to be required — the class is set by the page script instead. */
.ctc-form select.has-value {
  color: #262c5d;
}

.ctc-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 6px 0 24px;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}

.ctc-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #262c5d;
}

.ctc-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ctc-form-note {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

.ctc-form-note .ctc-ic-shield {
  flex-shrink: 0;
  width: 36px;
  height: 40px;
}

/* The mockup's submit is a rounded rectangle, not the pcd pill */
.ctc-submit,
.ctc-local-btn {
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  text-transform: none;
  padding: 15px 28px;
  justify-content: center;
}

/* --- Need local assistance --- */
.ctc-local {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 28px;
}

.ctc-local-h2 {
  margin-bottom: 10px;
}

.ctc-local-copy {
  color: #33395f;
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 18px;
}

/* flex-basis auto means the aspect-ratio sets the height when there is no
   slack (the stacked layout), and the map absorbs the slack when there is
   (the two-column layout, where the side column is stretched to the form
   card). The ZIP field and button stay pinned under it either way. */
/* No min-height here, deliberately. aspect-ratio plus a min-height gives the
   box a TRANSFERRED minimum width (ratio x min-height), which propagates up
   through the flex item and the grid track — a 180px min-height at the
   stacked breakpoint's 2:1 ratio forced a 360px floor and pushed the whole
   grid 37px past a 375px viewport. min-width: 0 on the map does not
   suppress it. The floor is scoped to the two-column layout instead, where
   the track is wide enough to absorb it. */
.ctc-local-map {
  flex: 1 1 auto;
  aspect-ratio: 1.45;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #dce7f2;
}

/* Keeps the map from shrinking away if the side column's copy ever grows
   past the form card's height. 1.45 x 200 = 290px of implied minimum width,
   under the 321px the track gets at 1024px. */
@media (min-width: 1024px) {
  .ctc-local-map {
    min-height: 200px;
  }
}

.ctc-local-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ctc-local-input {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  margin-bottom: 12px;
  border: 1px solid #9db2c7;
  border-radius: 12px;
  background: #fff;
  color: #262c5d;
  font-family: inherit;
  font-size: 16px;
}

.ctc-local-input::placeholder {
  color: #9db2c7;
  opacity: 1;
}

.ctc-local-input:focus {
  outline: none;
  border-color: #262c5d;
}

.ctc-local-btn {
  width: 100%;
}

/* --- Prefer to call --- */
.ctc-call {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 28px;
}

.ctc-call-disc {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e6f1fc;
  color: #262c5d;
}

.ctc-call-disc .ctc-ic-phone {
  width: 39px;
  height: 52px;
}

.ctc-call-h2 {
  margin-bottom: 8px;
}

.ctc-call-copy p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 10px;
}

.ctc-call-number {
  display: inline-block;
  color: #ec081b;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.ctc-call-number:hover {
  color: #c70010;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
  .ctc-hero-heading {
    font-size: 46px;
  }

  .ctc-hero-sub {
    font-size: 18px;
  }

  /* Below 1200px the cover crop is scaled by the hero's height, so pinning
     it right eats enough of the plate's pale column that the associate's
     red polo lands under the sub-head. Sliding the crop window left keeps
     that column; it costs the plate's far-right edge, which is wall. */
  .ctc-hero-photo {
    background-position: 76% center;
  }

  .ctc-form-card {
    padding: 30px 26px 32px;
  }

  .ctc-help-grid {
    gap: 22px;
  }

  .ctc-call {
    gap: 18px;
    padding: 26px 22px;
  }

  .ctc-call-disc {
    width: 84px;
    height: 84px;
  }

  .ctc-call-disc .ctc-ic-phone {
    width: 33px;
    height: 44px;
  }

  .ctc-call-number {
    font-size: 23px;
  }
}

@media (max-width: 1023px) {
  .ctc-hero-photo {
    display: none;
  }

  .ctc-hero-content {
    max-width: 100%;
    padding: 40px 0 32px;
  }

  .ctc-hero-heading,
  .ctc-hero-sub {
    max-width: none;
  }

  .ctc-hero-mobile {
    display: block;
  }

  .ctc-form-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* One column, so the map no longer has to fill a narrow panel */
  .ctc-local-map {
    aspect-ratio: 2;
  }
}

@media (max-width: 779px) {
  .ctc-hero-heading {
    font-size: 36px;
  }

  .ctc-hero-sub {
    font-size: 17px;
    margin-bottom: 30px;
  }

  .ctc-help-h2 {
    font-size: 26px !important;
  }

  .ctc-card-h2 {
    font-size: 23px !important;
  }

  /* The 2:1 letterbox the stacked layout uses is only 154px tall once the
     card is phone-width, which is too short to read a pinned map. */
  .ctc-local-map {
    aspect-ratio: 1.5;
  }

  .ctc-help-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ctc-help-card {
    padding: 28px 22px 26px;
  }

  .ctc-form-foot {
    justify-content: flex-start;
  }

  .ctc-submit {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .ctc-hero .fx-hero-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  .ctc-form-card {
    padding: 24px 18px 26px;
  }

  /* Two 48px fields plus their labels no longer fit side by side */
  .ctc-field-row {
    grid-template-columns: 1fr;
  }

  .ctc-local,
  .ctc-call {
    padding: 22px 18px;
  }

  .ctc-call {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ctc-form-note {
    gap: 12px;
    font-size: 14px;
  }

  .ctc-form-note .ctc-ic-shield {
    width: 29px;
    height: 32px;
  }
}

/* ===================================================================
   29. CORPORATE CHECK CASHING PAGE (/corporate-check-cashing/) — .crp-
   =================================================================== */

/* --- Corporate check cashing page (new_corporatecheckcashing/ mockups):
       crp-* classes. Shared palette (navy #262c5d, red #ec081b, pill blue
       #d7e4f7) plus the section blues sampled from the mockup backgrounds:
       offer band #eef5fa, process/account band #f5f7fa, badge/callout
       #edf4fa, muted label #9fb3c4, hairline #b5c4d0 and the estimate
       green #198754. Reuses whole components rather than restyling them:
       pcd-btn-red / pcd-btn-outline for every pill, abt-eyebrow for the
       red section labels, and the about page's reviews and FAQ bands
       wholesale (abt-reviews / abt-h2 / abt-center / ccl-reviews-grid /
       ccl-review / svp-review-top / svp-google-g and abt-faq /
       abt-faq-list / ccl-faq-item / svp-cross) — the mockup's colours for
       those two sections are #fff and #f5f5f7, exactly what those classes
       already paint. --- */

/* In-page anchor targets land below the sticky header, like [id='FAQ'] */
#fee-estimator,
#how-it-works,
#what-to-bring,
#corporate-inquiry {
  scroll-margin-top: 100px;
}

.crp-h2 {
  color: #262c5d;
  font-size: 40px;
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 20px;
}

.crp-center {
  text-align: center;
}

/* Only the two hero CTAs are pills in the mockups - every other button on the
   page is a near-square rectangle. Measured off the plates, the corner radius
   is 23-27px on 193px-tall buttons at the desktop mockups' 3.806 scale and
   30px at the mobile mockup's 4.48, i.e. ~6.7px either way. The shared
   .pcd-btn-* pill radius is overridden here rather than restyled, because the
   prepaid, digital-currency, currency-exchange, more-services and contact
   pages all want it. Each selector is doubled with .btn so it ties
   ".pcd-btn-red:focus" on specificity and wins on document order - a bare
   class would lose and the button would snap back to a pill while focused. */
.btn.crp-offer-btn,
.btn.crp-form-submit,
.btn.crp-process-btn,
.btn.crp-refer-btn,
.btn.crp-years-btn {
  border-radius: 7px;
}

/* --- Section 1: hero (mockup 1) ---
   The plate is the mockup's right-hand 71%: solid navy at its left edge,
   fading into the branch photo. The section paints the same navy behind
   it, so the seam is invisible at any width and the copy always sits on
   flat navy however the cover crop lands. */
.crp-hero {
  position: relative;
  background: #262c5d;
  overflow: hidden;
}

.crp-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 29.16%;
  background-image: url("/static/images/corporate/crp-hero.jpg");
  background-size: cover;
  background-position: left center;
}

/* Keyed to the copy column, not the section: the wash starts inside the
   plate's own navy edge (where it is invisible) and clears before the
   customer, so the artwork stays crisp while the fade tail under the
   headline stays dark enough for white type at every viewport. */
.crp-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #262c5d 0%, rgba(38, 44, 93, 0.92) 14%, rgba(38, 44, 93, 0) 34%);
}

.crp-hero-content {
  max-width: 54%;
  padding: 74px 0 80px;
}

.crp-hero-eyebrow {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

/* Capped independently of the copy column: the column is sized for the
   three-item trust row, which the mockup runs wider than the headline. */
.crp-hero-heading {
  color: #fff;
  font-size: 44px;
  line-height: 1.13;
  font-weight: 800;
  margin: 0 0 26px;
  max-width: 490px;
}

.crp-hero-sub {
  color: #dfe3f2;
  font-size: 18px;
  line-height: 1.45;
  margin: 0 0 34px;
  max-width: 430px;
}

.crp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 40px;
}

/* White outline on navy, not the class default's navy-on-white */
.crp-hero .pcd-btn-outline,
.crp-hero .pcd-btn-outline:focus {
  color: #fff;
  border-color: #fff;
}

.crp-hero .pcd-btn-outline:hover {
  color: #262c5d;
  background: #fff;
  border-color: #fff;
}

.crp-hero .pcd-btn-outline span {
  color: #fff;
}

.crp-hero .pcd-btn-outline:hover span {
  color: #262c5d;
}

/* margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule */
.crp-hero-btn {
  font-size: 18px;
  line-height: 22px;
  padding: 15px 34px;
  margin-top: 0;
  justify-content: center;
}

.crp-hero-btn .fa {
  margin-right: 10px;
  font-size: 20px;
}

.crp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crp-hero-trust li {
  position: relative;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  padding-left: 22px;
}

.crp-hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ec081b;
}

/* The portrait crop only exists on the stacked mobile hero */
.crp-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* --- Section 2: feature strip (mockup 2) --- */
.crp-band {
  background: #fff;
  padding: 26px 0;
}

.crp-band-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.crp-band-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.crp-band-list li + li {
  border-left: 1px solid #d4d5df;
  padding-left: 20px;
}

.crp-band-list li:not(:last-child) {
  padding-right: 20px;
}

/* Single-colour line art painted through its own alpha, so the icons stay
   backdrop-agnostic; the @supports block hides them where masks are
   unavailable rather than letting them paint as solid navy blocks. */
.crp-band-ic,
.crp-step-ic {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

@supports not (mask-image: url("#m")) {
  .crp-band-ic,
  .crp-step-ic {
    display: none;
  }
}

.crp-band-ic {
  color: #262c5d;
  height: 42px;
}

/* Per-icon widths: the crops run from 0.70:1 to 1.13:1, so each gets an
   explicit width = height x ratio rather than a square box. Recompute
   these if an icon is ever re-cropped at a different aspect ratio. */
.crp-ic-store {
  width: 48px;
  mask-image: url("/static/images/corporate/crp-band-store.png");
  -webkit-mask-image: url("/static/images/corporate/crp-band-store.png");
}

.crp-ic-clip {
  width: 31px;
  mask-image: url("/static/images/corporate/crp-band-clip.png");
  -webkit-mask-image: url("/static/images/corporate/crp-band-clip.png");
}

.crp-ic-clock {
  width: 39px;
  mask-image: url("/static/images/corporate/crp-band-clock.png");
  -webkit-mask-image: url("/static/images/corporate/crp-band-clock.png");
}

.crp-ic-person {
  width: 29px;
  mask-image: url("/static/images/corporate/crp-band-person.png");
  -webkit-mask-image: url("/static/images/corporate/crp-band-person.png");
}

.crp-band-title {
  color: #262c5d;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 4px;
}

.crp-band-list li p:not(.crp-band-title) {
  color: #4a5170;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

/* --- Section 3: first-check fee estimator (mockup 3) --- */
.crp-offer {
  background: #eef5fa;
  padding: 54px 0 62px;
}

.crp-offer-lead {
  color: #33395f;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}

.crp-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (min-width: 1024px) {
  .crp-offer-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 38px;
  }
}

.crp-calc-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 34px 34px;
}

.crp-calc-label {
  display: block;
  color: #262c5d;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.crp-calc-input {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfdeeb;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 26px;
}

.crp-calc-currency {
  color: #262c5d;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.crp-calc-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #262c5d;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  padding: 0;
}

.crp-calc-adjust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.crp-calc-adjust span {
  color: #262c5d;
  font-size: 16px;
  font-weight: 700;
}

.crp-calc-adjust output {
  color: #ec081b;
  font-size: 16px;
  font-weight: 800;
}

/* The range input is restyled rather than replaced so it keeps native
   keyboard support; WebKit and Firefox need separate thumb rules. */
.crp-calc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #b5c4d0;
  margin: 0 0 26px;
  cursor: pointer;
}

.crp-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #ec081b;
  cursor: pointer;
}

.crp-calc-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #ec081b;
  cursor: pointer;
}

.crp-calc-range:focus-visible {
  outline: 2px solid #262c5d;
  outline-offset: 3px;
}

.crp-calc-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.crp-preset {
  display: block;
  width: 100%;
  background: #eef5fa;
  border: 1px solid #cfdeeb;
  border-radius: 12px;
  padding: 14px 4px;
  color: #ec081b;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.crp-preset:hover,
.crp-preset.is-active {
  background: #d7e4f7;
  border-color: #262c5d;
}

.crp-calc-rate {
  color: #ec081b;
  font-size: 44px;
  line-height: 1;
  font-weight: 800;
  margin: 0 0 10px;
}

.crp-calc-fine {
  color: #4a5170;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.crp-est-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.crp-est-card {
  background: #fff;
  border: 1px solid #dfeaf3;
  border-radius: 14px;
  padding: 16px 18px 18px;
}

.crp-est-label {
  color: #9fb3c4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.crp-est-value {
  color: #262c5d;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0;
}

.crp-est-red {
  color: #ec081b;
}

.crp-est-green {
  color: #198754;
}

.crp-examples-label {
  margin-bottom: 8px;
}

/* The three money columns cannot shrink below their digits, so the table
   scrolls inside its own box rather than widening the page. */
.crp-table-scroll {
  overflow-x: auto;
  margin-bottom: 26px;
}

.crp-examples {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.crp-examples th {
  color: #9fb3c4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
}

.crp-examples th:not(:first-child),
.crp-examples td:not(:first-child) {
  text-align: right;
}

.crp-examples td {
  color: #262c5d;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border-top: 2px solid #dfeaf3;
}

.crp-offer-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 700px) {
  .crp-offer-foot {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
  }
}

.crp-offer-btn {
  margin-top: 0;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 15px 26px;
  text-transform: uppercase;
}

.crp-offer-legal {
  color: #4a5170;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

/* --- Section 4: cash flow (mockup 4) --- */
.crp-flow {
  background: #fff;
  padding: 60px 0 66px;
}

.crp-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  .crp-flow-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
  }
}

.crp-flow-copy p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.62;
  margin: 0 0 16px;
}

.crp-flow-card {
  background: #262c5d;
  border-radius: 28px;
  padding: 34px 36px 32px;
}

.crp-flow-card h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 22px;
}

.crp-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 16px;
}

.crp-checklist li .fa {
  flex: none;
  color: #ec081b;
  font-size: 21px;
  line-height: 1.2;
}

/* On a light background the disc needs a white knockout behind the tick,
   which the icon font cannot supply on its own. */
.crp-checklist-navy li {
  color: #262c5d;
  font-size: 16px;
}

.crp-checklist-navy li .fa {
  background: #fff;
  border-radius: 50%;
  line-height: 1;
}

.crp-flow-note {
  color: #c9cee6;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  margin: 22px 0 0;
}

/* --- Section 5: how it works (mockup 5) --- */
.crp-process {
  background: #f5f7fa;
  padding: 54px 0 60px;
}

.crp-process-lead {
  color: #33395f;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 34px;
}

.crp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}

.crp-step {
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 28px;
  text-align: center;
}

.crp-step-num {
  color: #ec081b;
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 18px;
}

/* Fixed height so the card titles line up even though the crops run from
   0.87:1 to 1.67:1 */
.crp-step-ic {
  color: #262c5d;
  height: 56px;
  margin-bottom: 22px;
}

.crp-ic-docs {
  width: 53px;
  mask-image: url("/static/images/corporate/crp-step-docs.png");
  -webkit-mask-image: url("/static/images/corporate/crp-step-docs.png");
}

.crp-ic-visit {
  width: 59px;
  mask-image: url("/static/images/corporate/crp-step-store.png");
  -webkit-mask-image: url("/static/images/corporate/crp-step-store.png");
}

.crp-ic-verify {
  width: 54px;
  mask-image: url("/static/images/corporate/crp-step-verify.png");
  -webkit-mask-image: url("/static/images/corporate/crp-step-verify.png");
}

.crp-ic-cash {
  width: 94px;
  mask-image: url("/static/images/corporate/crp-step-cash.png");
  -webkit-mask-image: url("/static/images/corporate/crp-step-cash.png");
}

.crp-step h3 {
  color: #262c5d;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 14px;
}

.crp-step p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.crp-process-btn {
  margin-top: 0;
  font-size: 18px;
  font-weight: 800;
  padding: 16px 38px;
}

/* --- Section 6: what to bring (mockup 6) --- */
.crp-prepared {
  background: #fff;
  padding: 58px 0 62px;
}

.crp-prepared-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (min-width: 1024px) {
  .crp-prepared-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
  }
}

.crp-prepared-copy > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.62;
  margin: 0 0 30px;
}

.crp-callout {
  background: #edf4fa;
  border-left: 18px solid #ec081b;
  padding: 22px 26px 24px;
}

.crp-callout h3 {
  color: #262c5d;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 10px;
}

.crp-callout p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.crp-docs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crp-docs li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 18px 0;
}

.crp-docs li + li {
  border-top: 2px solid #b5c4d0;
}

.crp-doc-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 99px;
  height: 65px;
  background: #edf4fa;
  border-radius: 12px;
  color: #262c5d;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.crp-docs h3 {
  color: #262c5d;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 8px;
}

.crp-docs p {
  color: #33395f;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* --- Section 7: refer a business (mockup 7) --- */
.crp-refer {
  background: #fff;
  padding: 58px 0 64px;
}

.crp-refer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

@media (min-width: 1024px) {
  .crp-refer-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 60px;
  }
}

.crp-refer-copy > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 30px;
}

.crp-refer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.crp-refer-btn {
  margin-top: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  text-transform: uppercase;
}

.crp-refer-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
  padding: 15px 26px;
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  margin: 0;
}

.crp-refer-phone a {
  color: #262c5d;
}

.crp-refer-note {
  color: #9fb3c4;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.crp-refer-card {
  background: #262c5d;
  border-radius: 28px;
  padding: 32px 36px 34px;
}

.crp-refer-card h3 {
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 24px;
}

.crp-refer-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crp-refer-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 26px;
}

.crp-refer-steps li:last-child {
  padding-bottom: 0;
}

/* The connector runs from each disc to the next, so the last item has none */
.crp-refer-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 3px;
  background: #6f7498;
}

.crp-refer-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ec081b;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
}

.crp-refer-steps h4 {
  color: #fae017;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 8px 0;
}

.crp-refer-steps p {
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  margin: 0;
}

/* --- Section 8: corporate account inquiry (mockup 8) --- */
.crp-account {
  background: #f5f7fa;
  padding: 58px 0 64px;
}

.crp-account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (min-width: 1024px) {
  .crp-account-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 56px;
  }
}

.crp-account-copy > p {
  color: #33395f;
  font-size: 17px;
  line-height: 1.62;
  margin: 0 0 28px;
}

.crp-account-copy .crp-checklist li {
  margin-bottom: 20px;
}

.crp-account-call {
  color: #33395f;
  font-size: 16px;
  margin: 30px 0 0;
}

.crp-account-call a {
  color: #262c5d;
  font-weight: 800;
}

.crp-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 34px 34px;
}

.crp-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.crp-form-head h3 {
  color: #262c5d;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}

.crp-form-head p {
  color: #9fb3c4;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.crp-field {
  margin-bottom: 18px;
}

.crp-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 20px;
}

@media (min-width: 520px) {
  .crp-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.crp-field label {
  display: block;
  color: #262c5d;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.crp-field input {
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid #9db2c7;
  border-radius: 6px;
  background: #fff;
  color: #262c5d;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 0 14px;
}

.crp-field input:focus {
  outline: 2px solid #262c5d;
  outline-offset: -1px;
}

.crp-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 22px;
  color: #33395f;
  font-size: 15px;
  line-height: 1.45;
}

.crp-consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: #262c5d;
}

.crp-form-submit {
  display: flex;
  width: 100%;
  margin-top: 0;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  padding: 16px 24px;
}

.crp-form-legal {
  color: #9fb3c4;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  margin: 14px 0 0;
}

/* --- Section 9: 40 years of experience (mockup 9) ---
   The band's navy block ends in an outward bulge with a red arc riding
   just outside it. Both are elliptical caps on absolutely positioned
   blocks — the red one is the same shape, 24px wider, sitting behind. */
.crp-years {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.crp-years-red,
.crp-years-navy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-top-right-radius: 70px 50%;
  border-bottom-right-radius: 70px 50%;
}

.crp-years-red {
  width: calc(48.6% + 24px);
  background: #ec081b;
}

.crp-years-navy {
  width: 48.6%;
  background: #262c5d;
}

.crp-years-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 44px 0 46px;
}

@media (min-width: 1024px) {
  .crp-years-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: 40px;
  }
}

.crp-years-copy {
  max-width: 468px;
}

/* Scoped to .crp-years-copy so it outranks the ".crp-years-copy p" body rule
   below - as a bare class it lost, and the yellow never rendered. */
.crp-years-copy .crp-years-eyebrow {
  color: #fae017;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.crp-years-heading {
  color: #fff;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 18px;
}

.crp-years-copy p {
  color: #e0e3f0;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.crp-years-btn {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  padding: 13px 30px;
}

.crp-years-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* --- Responsive --- */

/* 1024-1199px: both hero columns are short of their design width, so the
   copy gives up a little and the headline takes an extra line rather than
   running onto the fade. */
@media (max-width: 1199px) {
  .crp-hero-content {
    max-width: 56%;
    padding: 60px 0 66px;
  }

  .crp-hero-heading {
    font-size: 38px;
    max-width: 420px;
  }

  .crp-band-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  .crp-band-list li + li {
    border-left: 0;
    padding-left: 0;
  }

  .crp-band-list li:not(:last-child) {
    padding-right: 0;
  }

  .crp-band-list li:nth-child(even) {
    border-left: 1px solid #d4d5df;
    padding-left: 24px;
  }

  .crp-band-list li:nth-child(odd) {
    padding-right: 24px;
  }

  .crp-calc-card,
  .crp-form-card {
    padding: 26px 24px 28px;
  }

  .crp-years-heading {
    font-size: 30px;
  }
}

@media (max-width: 1023px) {
  .crp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .crp-est-grid {
    gap: 12px;
  }

  .crp-est-value {
    font-size: 19px;
  }

  /* The band's curve is a decorative device that only reads at the design
     proportion, and the mobile mockup drops it: the navy stops at the end of
     the copy and the anniversary logo sits on white below it. Both absolute
     panels are section-tall, so neither can end at the copy - the navy moves
     onto .crp-years-copy itself instead. */
  .crp-years-red,
  .crp-years-navy {
    display: none;
  }

  .crp-years-grid {
    gap: 44px;
    padding: 0 0 52px;
  }

  .crp-years-copy {
    max-width: none;
    background: #262c5d;
    /* Full-bleed: below 1024px the container is always narrower than its
       1200px cap, so it spans the viewport and its only inset is the 16px
       px-4 gutter. Cancelling that with a negative margin and adding it back
       as padding lands the navy on the viewport edges exactly - no vw units,
       so a scrollbar cannot push it wide. */
    margin-inline: -16px;
    padding: 56px 16px 60px;
  }

  /* The mobile mockup sets the eyebrow white rather than the desktop
     yellow. */
  .crp-years-copy .crp-years-eyebrow {
    color: #fff;
  }

  .crp-years-logo {
    max-width: 210px;
  }
}

/* Below 768px the landscape plate is dropped for the portrait crop, which
   stacks under the copy - the same three-regime pattern .fx-hero uses. */
@media (max-width: 767px) {
  .crp-hero-photo {
    display: none;
  }

  .crp-hero-mobile {
    display: block;
  }

  .crp-hero-content {
    max-width: none;
    padding: 44px 0 40px;
  }

  .crp-hero-heading {
    font-size: 34px;
  }

  .crp-hero-sub {
    max-width: none;
  }

  .crp-offer,
  .crp-flow,
  .crp-process,
  .crp-prepared,
  .crp-refer,
  .crp-account {
    padding: 42px 0 46px;
  }

  .crp-flow-card,
  .crp-refer-card {
    padding: 26px 24px 28px;
  }

  .crp-docs li {
    gap: 16px;
  }

  .crp-doc-badge {
    width: 78px;
    height: 56px;
    font-size: 21px;
  }
}

/* base.css sets a global "h2 { font-size: 40px !important }" below 779px,
   so these class rules have to match it to win - the same trick
   .calc-heading and .hfaq-heading use. */
@media (max-width: 779px) {
  .crp-h2 {
    font-size: 30px !important;
  }

  .crp-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .crp-calc-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .crp-est-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .crp-callout {
    border-left-width: 12px;
    padding: 18px 20px 20px;
  }

  .crp-years-heading {
    font-size: 26px !important;
  }
}

@media (max-width: 599px) {
  .crp-band-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .crp-band-list li {
    padding: 14px 0;
  }

  .crp-band-list li:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .crp-band-list li:nth-child(odd) {
    padding-right: 0;
  }

  .crp-band-list li + li {
    border-top: 1px solid #d4d5df;
  }
}

@media (max-width: 479px) {
  .crp-hero-heading {
    font-size: 30px;
  }

  /* Tightened so the three money columns fit a 375px viewport outright
     rather than relying on the scroll container. */
  .crp-examples {
    min-width: 300px;
  }

  .crp-examples th {
    font-size: 11px;
    padding: 8px 6px;
  }

  .crp-examples td {
    font-size: 14px;
    padding: 10px 6px;
  }

  .crp-hero-cta .crp-hero-btn {
    width: 100%;
  }

  .crp-calc-currency,
  .crp-calc-input input {
    font-size: 24px;
  }

  .crp-calc-card,
  .crp-form-card {
    padding: 22px 18px 24px;
  }

  .crp-refer-phone {
    width: 100%;
    justify-content: center;
  }

  /* The badge column costs more than the text can spare at 375px */
  .crp-docs li {
    flex-direction: column;
    gap: 12px;
  }
}

/* --- 30. Money orders page (new_moneyorder2/ mockups): mo-* classes.
   Palette is the shared navy #262c5d / red #ec081b, plus the section blues
   sampled off the mockup backgrounds: use-card #f2f5fa, calculator band
   #f1f4f9, table rule #b5c4d0, input border #d1dae3, price-card border
   #e4eaef and the ID banner #fbe9ea. Every icon is an alpha mask painted
   with currentColor (see .mo-ic), so one crop serves navy on white, white
   on navy and red in the banner. --- */

/* Icons: alpha masks cut from the mockups, filled with the element's own
   color. Each has its own width because the crops run 0.32:1 to 3.60:1;
   recompute the width if one is ever re-cropped at a different ratio. */
.mo-ic {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .mo-ic {
    display: none;
  }
}

.mo-ic-store {
  width: 28px;
  height: 26px;
  mask-image: url("/static/images/money-orders/mo-tr-store.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-tr-store.png");
}

.mo-ic-cash {
  width: 37px;
  height: 22px;
  mask-image: url("/static/images/money-orders/mo-tr-cash.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-tr-cash.png");
}

.mo-ic-badge {
  width: 32px;
  height: 31px;
  mask-image: url("/static/images/money-orders/mo-tr-badge.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-tr-badge.png");
}

.mo-ic-wu {
  width: 72px;
  height: 40px;
  mask-image: url("/static/images/money-orders/mo-band-wu.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-band-wu.png");
}

.mo-ic-fl {
  width: 54px;
  height: 50px;
  mask-image: url("/static/images/money-orders/mo-band-fl.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-band-fl.png");
}

.mo-ic-pin {
  width: 30px;
  height: 47px;
  mask-image: url("/static/images/money-orders/mo-band-pin.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-band-pin.png");
}

.mo-ic-person {
  width: 32px;
  height: 48px;
  mask-image: url("/static/images/money-orders/mo-band-person.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-band-person.png");
}

.mo-ic-rent {
  width: 89px;
  height: 25px;
  mask-image: url("/static/images/money-orders/mo-pay-rent.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-rent.png");
}

.mo-ic-utility {
  width: 44px;
  height: 50px;
  mask-image: url("/static/images/money-orders/mo-pay-utility.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-utility.png");
}

.mo-ic-gov {
  width: 41px;
  height: 37px;
  mask-image: url("/static/images/money-orders/mo-pay-gov.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-gov.png");
}

.mo-ic-mail {
  width: 33px;
  height: 41px;
  mask-image: url("/static/images/money-orders/mo-pay-mail.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-mail.png");
}

.mo-ic-cart {
  width: 39px;
  height: 40px;
  mask-image: url("/static/images/money-orders/mo-pay-purchase.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-purchase.png");
}

.mo-ic-people {
  width: 46px;
  height: 44px;
  mask-image: url("/static/images/money-orders/mo-pay-personal.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-pay-personal.png");
}

.mo-ic-id {
  width: 32px;
  height: 23px;
  mask-image: url("/static/images/money-orders/mo-ic-id.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-ic-id.png");
}

.mo-ic-warn {
  width: 31px;
  height: 27px;
  mask-image: url("/static/images/money-orders/mo-ic-warn.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-ic-warn.png");
}

.mo-ic-mo {
  width: 60px;
  height: 34px;
  mask-image: url("/static/images/money-orders/mo-sum-check.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-sum-check.png");
}

.mo-ic-receipt {
  width: 39px;
  height: 40px;
  mask-image: url("/static/images/money-orders/mo-sum-receipt.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-sum-receipt.png");
}

.mo-ic-wallet {
  width: 38px;
  height: 39px;
  mask-image: url("/static/images/money-orders/mo-sum-wallet.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-sum-wallet.png");
}

.mo-ic-thumb {
  width: 44px;
  height: 46px;
  mask-image: url("/static/images/money-orders/mo-step-thumb.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-step-thumb.png");
}

.mo-ic-steppin {
  width: 39px;
  height: 49px;
  mask-image: url("/static/images/money-orders/mo-step-pin.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-step-pin.png");
}

.mo-ic-bills {
  width: 62px;
  height: 37px;
  mask-image: url("/static/images/money-orders/mo-step-cash.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-step-cash.png");
}

.mo-ic-pen {
  width: 17px;
  height: 55px;
  mask-image: url("/static/images/money-orders/mo-step-pen.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-step-pen.png");
}

.mo-ic-slip {
  width: 33px;
  height: 51px;
  mask-image: url("/static/images/money-orders/mo-step-receipt.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-step-receipt.png");
}

/* Shared section heading. 28px in the mockups, deliberately smaller than
   the 36px .abt-h2 the about/more-services pages use. */
.mo-h2 {
  color: #262c5d;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 30px;
}

.mo-center {
  text-align: center;
}

/* --- SECTION 1: hero --- */
.mo-hero {
  position: relative;
  background: #262c5d;
  overflow: hidden;
}

/* Sized "auto 100%", not "cover": the plate is fitted to the hero height and
   pinned right, so the artwork is never cropped at any viewport and the
   section navy fills the rest of the row. That works only because the plate
   leftmost column is the same flat #262c5d, which makes the seam invisible.
   A cover plate crops the customer head off above roughly 1500px. */
.mo-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/money-orders/mo-hero.jpg");
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

.mo-hero-content {
  max-width: 50%;
  padding: 80px 0 64px;
}

.mo-hero-eyebrow {
  color: #fff;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

/* Capped independently of the copy column, which is sized for the trust row */
.mo-hero-heading {
  color: #fff;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 24px;
  max-width: 400px;
}

.mo-hero-sub {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 22px;
  max-width: 430px;
}

.mo-hero-price {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 4px;
}

.mo-hero-legal {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 18px;
}

.mo-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 44px;
}

/* White outline on navy, not the class default navy-on-white */
.mo-hero .pcd-btn-outline,
.mo-hero .pcd-btn-outline:focus {
  color: #fff;
  border-color: #fff;
}

.mo-hero .pcd-btn-outline:hover {
  color: #262c5d;
  background: #fff;
  border-color: #fff;
}

.mo-hero .pcd-btn-outline span,
.mo-hero .pcd-btn-red span {
  color: inherit;
}

/* margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule */
.mo-hero-btn {
  font-size: 20px;
  line-height: 24px;
  padding: 18px 36px;
  margin-top: 0;
  justify-content: center;
}

/* The mockup puts the pin after the label, not before it. The selector is
   doubled up to (0,2,1) so it outranks the global ".btn span.fa" margin and
   ".btn .fa" 12px size rules. */
.mo-hero-btn span.mo-btn-pin {
  margin-left: 12px;
  font-size: 24px;
}

.mo-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mo-hero-trust li {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 170px;
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  text-wrap: balance;
}

/* White disc with the navy line art masked inside it. A flat crop would show
   navy corners: the plate behind this row is darker than the section navy
   wherever the wall gradient reaches under the copy. */
.mo-tr-disc {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #262c5d;
}

.mo-hero-mobile {
  display: none;
}

/* --- SECTION 2: feature strip --- */
.mo-band {
  background: #262c5d;
  padding: 22px 0;
}

.mo-band-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mo-band-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 76px;
  color: #fff;
}

.mo-band-list li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.85);
}

.mo-band-list p {
  margin: 0;
  max-width: 185px;
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
  text-wrap: balance;
  font-weight: 800;
  text-transform: uppercase;
}

/* --- SECTION 3: what money orders are used for --- */
.mo-uses {
  background: #fff;
  padding: 34px 0;
}

/* The mockup runs this grid narrower than the 1200px container */
.mo-uses-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 27px;
  max-width: 1050px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.mo-use {
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1;
  padding: 21px 10px 22px;
  border-radius: 12px;
  background: #f2f5fa;
  color: #262c5d;
}

/* Fixed box so the labels line up across cards whose icons differ in height */
.mo-use-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 50px;
}

/* The 100px cap is what makes the two-word labels break the way the mockup
   does. hyphens/overflow-wrap are the guard: a translated word longer than the
   card interior (Spanish "Gubernamentales" was 140px against 133px) has to
   break inside the card rather than spill across its edges. */
.mo-use p {
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 100px;
  margin: 0;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* --- SECTION 4: money order calculator --- */
.mo-calc {
  background: #f1f4f9;
  padding: 36px 0 40px;
}

.mo-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 57px;
  align-items: start;
}

.mo-calc-heading {
  color: #262c5d;
  font-size: 40px;
  line-height: 1.19;
  font-weight: 800;
  margin: 0 0 16px;
}

.mo-calc-lead {
  color: #262c5d;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 20px;
}

.mo-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 22px;
  border: 1px solid #d1dae3;
  border-radius: 11px;
  background: #fff;
}

.mo-amount-sign {
  color: #262c5d;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.mo-amount-input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #262c5d;
  font-family: inherit;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.mo-amount-input:focus {
  outline: none;
}

/* Rectangular, not the .pcd-btn-red pill the hero uses. Doubled with .btn so
   the radius still wins while the button has focus. */
.btn.mo-calc-btn {
  display: flex;
  width: 100%;
  height: 63px;
  margin: 17px 0 0;
  padding: 0;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

.mo-price-card {
  margin-top: 14px;
  padding: 26px 38px 28px 49px;
  border: 1px solid #e4eaef;
  border-radius: 25px;
  background: #fff;
}

/* The rule runs wider than the copy above it, hence the negative margin */
.mo-price-title {
  margin: 0 0 16px -17px;
  padding-bottom: 9px;
  border-bottom: 2px solid #b5c4d0;
  color: #262c5d;
  font-size: 19px;
  line-height: 1.3;
}

.mo-price-table {
  width: 100%;
  border-collapse: collapse;
}

.mo-price-table th,
.mo-price-table td {
  padding: 0 0 6px;
  color: #262c5d;
  font-size: 21px;
  line-height: 1.35;
  text-align: left;
  font-weight: 400;
}

.mo-price-table td {
  text-align: right;
  font-weight: 800;
}

.mo-price-note {
  margin: 10px 0 0;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.3;
  max-width: 250px;
}

.mo-calc-notes {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mo-calc-notes li {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 14px;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.35;
  max-width: 300px;
}

.mo-calc-notes li:last-child {
  margin-bottom: 0;
}

.mo-calc-notes .mo-ic {
  margin-top: 2px;
}

.mo-result-card {
  padding: 26px 30px 22px;
  border: 1px solid #e4eaef;
  border-radius: 36px;
  background: #fff;
}

.mo-table-scroll {
  overflow-x: auto;
}

/* The mockup keeps six ruled slots whether they are filled or not, which also
   stops the card height jumping as the amount changes. */
.mo-row-blank td {
  height: 50px;
}

.mo-result-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mo-result-table th,
.mo-result-table td {
  padding: 14px 0;
  color: #262c5d;
  font-size: 18px;
  line-height: 1.2;
  border-bottom: 2px solid #b5c4d0;
}

.mo-result-table th {
  font-weight: 800;
}

.mo-result-table th:first-child,
.mo-result-table td:first-child {
  width: 30%;
  padding-left: 18px;
  text-align: left;
}

.mo-result-table th:nth-child(2),
.mo-result-table td:nth-child(2) {
  width: 46.5%;
  text-align: center;
}

.mo-result-table th:last-child,
.mo-result-table td:last-child {
  width: 23.5%;
  text-align: center;
}

.mo-result-table td {
  font-weight: 400;
}

.mo-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.mo-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  color: #262c5d;
  text-align: center;
}

.mo-sum + .mo-sum {
  border-left: 2px solid #b5c4d0;
}

.mo-sum .mo-ic {
  margin-bottom: 10px;
}

.mo-sum-label {
  margin: 0;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.mo-sum-value {
  margin: 0;
  color: #262c5d;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
}

.mo-sum-red {
  color: #ec081b;
}

.mo-idbanner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 0;
  min-height: 48px;
  border-radius: 7px;
  background: #fbe9ea;
  color: #ec081b;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.mo-idbanner.is-hidden {
  display: none;
}

/* --- SECTION 5: how to purchase --- */
.mo-steps {
  background: #fff;
  padding: 34px 0 24px;
}

.mo-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The connector runs from the first disc centre to the last one, which is
   10% in from each end of a five-column grid. */
.mo-steps-grid::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: #ec081b;
}

.mo-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  text-align: center;
}

.mo-step-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #262c5d;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.mo-step-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 55px;
  margin-top: 10px;
  color: #262c5d;
}

.mo-step-title {
  margin: 16px 0 6px;
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.mo-step p:last-child {
  margin: 0;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.3;
}

/* --- SECTION 6: cash only / ATM --- */
.mo-cash {
  background: #fff;
  padding: 22px 0 32px;
}

.mo-cash-card {
  position: relative;
  overflow: hidden;
  min-height: 294px;
  border-radius: 40px;
  background: #f1f4f9;
}

/* The crop own left edge is flat #f1f4f9, the same colour as the card, so the
   fade into the branch photo stays seamless however the crop scales. */
.mo-cash-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 56.5%;
  background-image: url("/static/images/money-orders/mo-atm.jpg");
  background-size: cover;
  background-position: right center;
}

.mo-cash-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 34px 20px 34px 40px;
}

.mo-cash-heading {
  color: #262c5d;
  font-size: 42px;
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 26px;
}

/* The mockup breaks after "With" in every language */
.mo-cash-heading .fx-red {
  display: block;
}

.mo-cash-copy p {
  margin: 0 0 14px;
  color: #262c5d;
  font-size: 18px;
  line-height: 1.45;
}

.mo-cash-note {
  margin: 22px 0 0 !important;
  font-size: 14px !important;
  font-style: italic;
}

/* --- SECTION 7: how to fill out a money order --- */
.mo-fill {
  background: #fff;
  padding: 24px 0 36px;
}

.mo-fill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.mo-fill-art {
  width: 100%;
  height: auto;
}

.mo-fill-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-fill-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
  color: #262c5d;
  font-size: 18px;
  line-height: 1.35;
}

.mo-fill-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #ec081b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.mo-fill-note {
  margin: 42px 0 0 40px;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

/* --- SECTION 8: protect yourself + we also cash money orders --- */
.mo-protect {
  background: #fff;
  padding: 20px 0 30px;
}

.mo-protect-grid {
  display: grid;
  grid-template-columns: 48.5% minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.mo-protect-card {
  padding: 30px 45px 43px;
  border-radius: 20px;
  background: #262c5d;
}

.mo-protect-heading {
  color: #fff;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 28px;
}

.mo-protect-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mo-protect-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.9;
}

/* The mockup mark is a filled white disc with the tick knocked out, which is
   exactly fa-check-circle painted white. Nudged down to sit on the cap line
   of a 1.9 line-height row rather than its box top. */
.mo-protect-list .fa {
  flex: none;
  margin-top: 4px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.mo-protect-right {
  position: relative;
  min-height: 299px;
}

/* The crop carries its own rounded corners and its own fade to white on the
   right, so it is pinned to the left of this column and the copy simply
   starts past the photo's solid edge. */
.mo-protect-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 76.5%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.mo-protect-copy {
  position: relative;
  margin-left: 64.6%;
  padding-top: 16px;
}

.mo-protect-h2 {
  color: #262c5d;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 26px;
}

.mo-protect-copy p {
  margin: 0;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.9;
}

.mo-protect-note {
  margin-top: 28px !important;
  font-size: 14px !important;
  font-style: italic;
}

/* --- SECTION 9: serving Florida communities --- */
.mo-comm {
  background: #fff;
  padding: 39px 0 45px;
}

.mo-comm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31.1%;
  gap: 67px;
  align-items: stretch;
}

.mo-comm .mo-h2 {
  margin-bottom: 24px;
}

.mo-comm-copy {
  margin: 0 0 31px;
  max-width: 580px;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.9;
}

.mo-comm-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Square corners, deliberately: the mockup butts the navy caption bar flush
   against the bottom of each storefront photo. */
.mo-comm-photo {
  margin: 0;
}

.mo-comm-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1351 / 655;
  object-fit: cover;
}

.mo-comm-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 14px;
  background: #262c5d;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.mo-comm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 44px 30px 41px;
  border-radius: 78px;
  background: #e3eefa;
  text-align: center;
}

.mo-comm-logo {
  width: 173px;
  height: auto;
}

.mo-comm-rule {
  width: min(192px, 100%);
  height: 3px;
  margin: 36px 0 21px;
  border: 0;
  background: #ec081b;
}

.mo-comm-card p {
  margin: 0;
  max-width: 155px;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

/* --- SECTION 10: reviews + FAQ. Both bands are the about page's, reused
   whole; only the vertical rhythm is tightened to match this page. --- */
.mo-reviews {
  padding: 30px 0 24px;
}

.mo-faq {
  padding: 16px 0 26px;
}

/* --- Money orders page: 1024-1199px. The hero plate is fitted to the hero
   height, so its width is 1.377x that height; below 1200px the copy column
   would run past the plate leftmost flat-navy strip and land on the door.
   This regime swaps the plate to a right-anchored cover crop that starts at
   38% and washes its own left edge back to the section navy, which both
   hides the seam and keeps white type readable over the photo. --- */
@media (max-width: 1199px) {
  .mo-hero-photo {
    left: 38%;
    background-size: cover;
    background-position: right center;
  }

  .mo-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #262c5d 0%, rgba(38, 44, 93, 0.94) 25%, rgba(38, 44, 93, 0) 58%);
  }

  .mo-hero-content {
    max-width: 56%;
    padding: 64px 0 56px;
  }

  .mo-hero-heading {
    font-size: 38px;
  }

  .mo-hero-trust {
    gap: 18px 30px;
  }

  .mo-band-list li {
    gap: 18px;
  }

  .mo-band-list p {
    font-size: 16px;
  }

  .mo-calc-grid {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 36px;
  }

  .mo-calc-heading {
    font-size: 34px;
  }

  .mo-cash-heading {
    font-size: 36px;
  }

  .mo-cash-copy {
    padding: 30px 20px 30px 34px;
  }

  .mo-fill-grid {
    gap: 44px;
  }
}

/* --- Money orders page: below 1024px the hero stacks. The plate is fitted to
   the hero height, so at this width the door reaches under the copy however
   the crop is anchored; the portrait crop below the copy is the only layout
   that keeps both readable. --- */
@media (max-width: 1023px) {
  .mo-hero-photo {
    display: none;
  }

  .mo-hero-content {
    max-width: none;
    padding: 48px 0 40px;
  }

  .mo-hero-heading {
    font-size: 36px;
    max-width: none;
  }

  .mo-hero-sub {
    max-width: 560px;
  }

  .mo-hero-mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .mo-band {
    padding: 26px 0;
  }

  .mo-band-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }

  .mo-band-list li:nth-child(odd) {
    border-left: 0;
  }

  .mo-uses {
    padding: 40px 0;
  }

  .mo-uses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 620px;
  }

  .mo-calc {
    padding: 40px 0 44px;
  }

  .mo-calc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mo-calc-copy {
    max-width: 560px;
  }

  .mo-steps {
    padding: 40px 0;
  }

  /* The connector only reads as a timeline while the steps are one row */
  .mo-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 16px;
  }

  .mo-steps-grid::before {
    display: none;
  }

  .mo-cash {
    padding: 30px 0 40px;
  }

  .mo-cash-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 26px;
  }

  .mo-cash-photo {
    order: 2;
    position: static;
    width: 100%;
    aspect-ratio: 1950 / 1096;
  }

  .mo-cash-copy {
    order: 1;
    max-width: none;
    padding: 30px 24px;
  }

  .mo-cash-heading {
    font-size: 34px;
  }

  .mo-fill {
    padding: 36px 0 44px;
  }

  .mo-fill-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mo-fill-art {
    max-width: 620px;
    margin: 0 auto;
  }

  .mo-fill-note {
    margin-left: 0;
  }
}

/* base.css sets "h2 { font-size: 40px !important }" below 779px, so every
   heading in this section has to shout back at it. */
@media (max-width: 779px) {
  .mo-h2 {
    font-size: 26px !important;
  }

  .mo-calc-heading {
    font-size: 32px !important;
  }

  .mo-cash-heading {
    font-size: 30px !important;
  }
}

@media (max-width: 599px) {
  .mo-hero-heading {
    font-size: 32px;
  }

  .mo-hero-btn {
    width: 100%;
  }

  /* Icon over label: two across with the icon beside it leaves the right
     half of every cell empty at this width. */
  .mo-band-list li {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .mo-band-list li + li,
  .mo-band-list li:nth-child(odd) {
    border-left: 0;
  }

  .mo-uses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 400px;
  }

  .mo-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mo-price-card {
    padding: 22px 22px 24px 26px;
  }

  .mo-price-title {
    margin-left: -8px;
  }

  .mo-price-table th,
  .mo-price-table td {
    font-size: 18px;
  }

  .mo-result-card {
    padding: 20px 16px 18px;
    border-radius: 26px;
  }

  .mo-result-table {
    min-width: 320px;
  }

  .mo-result-table th,
  .mo-result-table td {
    font-size: 15px;
  }

  .mo-result-table th:first-child,
  .mo-result-table td:first-child {
    padding-left: 4px;
  }

  .mo-sum {
    padding: 0 4px;
  }

  .mo-sum-label {
    font-size: 15px;
  }

  .mo-sum-value {
    font-size: 22px;
  }

  .mo-idbanner {
    font-size: 15px;
    gap: 10px;
  }

  .mo-calc-notes li {
    gap: 18px;
  }
}

@media (max-width: 479px) {
  .mo-hero-heading {
    font-size: 30px;
  }

  .mo-calc-heading {
    font-size: 28px !important;
  }

  .mo-cash-heading {
    font-size: 26px !important;
  }

  .mo-amount-sign,
  .mo-amount-input {
    font-size: 26px;
  }

  .btn.mo-calc-btn {
    font-size: 20px;
  }

  .mo-steps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    max-width: 300px;
    margin: 0 auto;
  }

  /* "$2,504.00" outgrows a third of the card at this width */
  .mo-sum-value {
    font-size: 18px;
  }

  .mo-sum-label {
    font-size: 14px;
  }
}

/* --- Money orders, sections 8-11: below 1200px the protect row drops to one
   column. The copy beside the teller photo is only ~200px wide at the design
   width, and it is a percentage of a container that keeps shrinking, so the
   two-up shape has to go before the heading starts breaking into three lines. --- */
@media (max-width: 1199px) {
  .mo-protect {
    padding: 30px 0 36px;
  }

  .mo-protect-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .mo-protect-right {
    display: grid;
    grid-template-columns: 58% minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    min-height: 0;
  }

  .mo-protect-photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1675 / 1123;
  }

  .mo-protect-copy {
    margin-left: 0;
    padding-top: 0;
  }

  .mo-comm-grid {
    gap: 40px;
  }

  .mo-comm-card {
    padding: 34px 22px 32px;
    border-radius: 56px;
  }
}

@media (max-width: 1023px) {
  .mo-comm {
    padding: 40px 0 44px;
  }

  .mo-comm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mo-comm-copy {
    max-width: none;
  }

  /* width:100% is load-bearing: "margin: 0 auto" on a stretched grid item
     cancels the stretch and shrink-to-fits it to the logo instead. */
  .mo-comm-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .mo-reviews {
    padding: 36px 0 30px;
  }

  .mo-faq {
    padding: 24px 0 36px;
  }
}

/* base.css sets "h2 { font-size: 40px !important }" below 779px */
@media (max-width: 779px) {
  .mo-protect-heading {
    font-size: 20px !important;
  }

  .mo-protect-h2 {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  .mo-protect-right {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .mo-protect-card {
    padding: 26px 24px 30px;
  }

  .mo-comm-card {
    border-radius: 40px;
  }
}

@media (max-width: 599px) {
  .mo-comm-photos {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .mo-comm-cap {
    font-size: 17px;
  }
}

@media (max-width: 479px) {
  .mo-protect-list li,
  .mo-protect-copy p,
  .mo-comm-copy {
    font-size: 15px;
    line-height: 1.75;
  }

  .mo-comm-card {
    border-radius: 32px;
  }
}

/* ===================================================================
   31. BILL PAYMENT PAGE (/bill-payment/)

   Built from the new_billpayment/ mockups, which are drawn at a 1280px
   viewport (scale 4801 / 1280 = 3.7508). Palette is the shared navy
   #262c5d and red #ec081b, plus the card blue #eef4fa sampled off the
   posting and how-it-works cards, the section blue #f5f7fa behind the
   biller table and the cream #fff8e8 of its warning note. The reviews
   and FAQ bands are the about page's, reused whole.
   =================================================================== */

/* One mask class for every line icon on the page, painted with
   currentColor so a single crop serves navy-on-white and white-on-navy.
   Each icon carries its own width because the crops run 0.65:1 to
   1.67:1; recompute if one is re-cropped at a different ratio. */
.bp-ic {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .bp-ic {
    display: none;
  }
}

.bp-ic-store {
  width: 45px;
  height: 40px;
  mask-image: url("/static/images/bill-payment/bp-ic-store.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-ic-store.png");
}

.bp-ic-fee {
  width: 40px;
  height: 40px;
  mask-image: url("/static/images/bill-payment/bp-ic-fee.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-ic-fee.png");
}

.bp-ic-calendar {
  width: 39px;
  height: 40px;
  mask-image: url("/static/images/bill-payment/bp-ic-calendar.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-ic-calendar.png");
}

.bp-ic-receipt {
  width: 26px;
  height: 40px;
  mask-image: url("/static/images/bill-payment/bp-ic-receipt.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-ic-receipt.png");
}

.bp-ic-instant {
  width: 29px;
  height: 34px;
  mask-image: url("/static/images/bill-payment/bp-post-instant.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-post-instant.png");
}

.bp-ic-next {
  width: 33px;
  height: 34px;
  mask-image: url("/static/images/bill-payment/bp-post-next.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-post-next.png");
}

.bp-ic-standard {
  width: 31px;
  height: 34px;
  mask-image: url("/static/images/bill-payment/bp-post-std.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-post-std.png");
}

.bp-ic-bill {
  width: 57px;
  height: 60px;
  mask-image: url("/static/images/bill-payment/bp-step-bill.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-step-bill.png");
}

.bp-ic-review {
  width: 44px;
  height: 60px;
  mask-image: url("/static/images/bill-payment/bp-step-review.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-step-review.png");
}

.bp-ic-pay {
  width: 100px;
  height: 60px;
  mask-image: url("/static/images/bill-payment/bp-step-pay.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-step-pay.png");
}

.bp-ic-slip {
  width: 39px;
  height: 60px;
  mask-image: url("/static/images/bill-payment/bp-step-receipt.png");
  -webkit-mask-image: url("/static/images/bill-payment/bp-step-receipt.png");
}

/* Shared section heading. 40px in the mockups, larger than the 36px
   .abt-h2 that the about, more-services and contact pages use. */
.bp-h2 {
  color: #262c5d;
  font-size: 40px;
  line-height: 1.22;
  font-weight: 800;
  margin: 0 0 20px;
}

.bp-center {
  text-align: center;
}

/* In-page anchor target for the hero "Find your biller" CTA — lands below
   the sticky header, like [id='FAQ'] */
#find-a-biller {
  scroll-margin-top: 100px;
}

/* Font Awesome fa-check-circle knocks the tick out of the disc, so the tick
   is transparent and the navy behind it shows through — on the hero that is
   the plate, on the why card the card itself. A CSS disc with a white
   fa-check inside would paint the tick solid white instead. */
.bp-check {
  flex: none;
  color: #ec081b;
  font-size: 24px;
  line-height: 1;
}

/* --- SECTION 1: hero --- */
.bp-hero {
  position: relative;
  background: #262c5d;
  overflow: hidden;
}

/* Sized "auto 100%", not "cover": the plate is fitted to the hero height
   and pinned right, so the artwork is never cropped vertically at any
   viewport and the section navy fills the rest of the row. That works
   because the plate leftmost column is the same flat #262c5d, which makes
   the seam invisible. A cover plate crops the customer head off above
   roughly 1500px, where the panel outgrows the plate 1.94 aspect. */
.bp-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/bill-payment/bp-hero.jpg");
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Navy over navy is invisible, so this only shows where the plate's own flat
   column has run out from under the copy. At 1920 the whole gradient lands on
   section navy and paints nothing at all. */
.bp-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #262c5d 0%, #262c5d 44%, rgba(38, 44, 93, 0.78) 53%, rgba(38, 44, 93, 0) 64%);
}

.bp-hero-content {
  max-width: 50%;
  padding: 100px 0 84px;
}

.bp-hero-eyebrow {
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 26px;
}

.bp-hero-heading {
  color: #fff;
  font-size: 42px;
  line-height: 1.22;
  font-weight: 800;
  margin: 0 0 26px;
  max-width: 480px;
}

.bp-hero-sub {
  color: #fff;
  font-size: 19px;
  line-height: 1.62;
  margin: 0 0 40px;
  max-width: 560px;
}

.bp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 44px;
}

/* White outline on navy, not the class default navy-on-white */
.bp-hero .pcd-btn-outline,
.bp-hero .pcd-btn-outline:focus {
  color: #fff;
  border-color: #fff;
}

.bp-hero .pcd-btn-outline:hover {
  color: #262c5d;
  background: #fff;
  border-color: #fff;
}

.bp-hero .pcd-btn-outline span,
.bp-hero .pcd-btn-red span {
  color: inherit;
}

/* margin-top:0 overrides the global "* + .btn { margin-top:31px }" rule */
.bp-hero-btn {
  font-size: 20px;
  line-height: 24px;
  padding: 18px 30px;
  margin-top: 0;
  justify-content: center;
}

/* The mockup puts the pin after the label. The selector is doubled up to
   (0,2,1) so it outranks the global ".btn span.fa" margin and the
   ".btn .fa" 12px size rules. */
.bp-hero-btn span.bp-btn-pin,
.bp-fpl-btn span.bp-btn-pin {
  margin-left: 12px;
  font-size: 22px;
}

.bp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-hero-trust li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
}

.bp-hero-mobile {
  display: none;
}

/* --- SECTION 2: feature strip --- */
.bp-band {
  background: #fff;
  padding: 26px 0;
}

.bp-band-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-band-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 0 10px;
  color: #262c5d;
}

.bp-band-list li + li {
  border-left: 1px solid #b5c4d0;
}

.bp-band-title {
  margin: 0 0 4px;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

.bp-band-sub {
  margin: 0;
  color: #262c5d;
  font-size: 14px;
  line-height: 1.35;
  text-wrap: balance;
}

/* --- SECTION 3: simple, personal and close to home --- */
.bp-simple {
  background: #fff;
  padding: 46px 0 54px;
}

/* Measured off the mockup: the navy card starts at 58.4% of the container
   and runs to its right edge. */
.bp-simple-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 44px;
  align-items: start;
}

/* :not(.abt-eyebrow) is load-bearing — a bare `.bp-simple-copy p` is (0,1,1)
   and outranks `.abt-eyebrow` at (0,1,0), which repainted the red section
   label navy. Same trap `.msv-intro-copy p` hit on the more-services page. */
.bp-simple-copy p:not(.abt-eyebrow) {
  color: #262c5d;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 22px;
}

.bp-simple-copy p.abt-eyebrow {
  font-size: 17px;
  line-height: 1.3;
}

.bp-reviewed {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.bp-reviewed img {
  flex: none;
  width: 70px;
  height: 70px;
}

.bp-simple-copy .bp-reviewed-title {
  margin: 0 0 4px;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.bp-simple-copy .bp-reviewed-note {
  margin: 0;
  color: #5b6479;
  font-size: 15px;
  line-height: 1.4;
}

.bp-why {
  background: #262c5d;
  border-radius: 34px;
  padding: 40px 42px 44px;
}

.bp-why h3 {
  margin: 0 0 30px;
  color: #fff;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
}

.bp-why-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.bp-why-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

.bp-why-list li:last-child {
  margin-bottom: 0;
}

.bp-why-note {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
}

/* --- SECTION 4: find a biller --- */
.bp-billers {
  background: #f5f7fa;
  padding: 48px 0 56px;
}

.bp-billers-lead {
  margin: 0 auto 34px;
  max-width: 820px;
  color: #262c5d;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.bp-search-card {
  background: #fff;
  border-radius: 18px;
  padding: 26px 30px 30px;
  box-shadow: 0 2px 10px rgba(38, 44, 93, 0.06);
}

.bp-search-label {
  display: block;
  margin-bottom: 12px;
  color: #262c5d;
  font-size: 18px;
  font-weight: 800;
}

.bp-search-input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border: 1px solid #d1dae3;
  border-radius: 10px;
  background: #fff;
  color: #262c5d;
  font-family: inherit;
  font-size: 18px;
}

.bp-search-input::placeholder {
  color: #9fb3c4;
}

.bp-search-input:focus {
  outline: 2px solid #262c5d;
  outline-offset: -2px;
}

.bp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.bp-chip {
  padding: 11px 22px;
  border: 1px solid #c9d8e8;
  border-radius: 8px;
  background: #eef4fa;
  color: #ec081b;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.bp-chip:hover {
  border-color: #262c5d;
}

.bp-chip.is-active {
  background: #262c5d;
  border-color: #262c5d;
  color: #fff;
  text-transform: uppercase;
}

/* The table keeps its four columns down to 480px, below which the
   wrapper scrolls it rather than letting it push the page wide. */
.bp-table-scroll {
  margin-top: 30px;
  overflow-x: auto;
}

.bp-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  table-layout: fixed;
}

.bp-table th,
.bp-table td {
  text-align: left;
  vertical-align: middle;
}

.bp-table thead th {
  padding: 0 0 18px;
  color: #262c5d;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-table thead th:nth-child(1) {
  width: 36%;
  padding-left: 30px;
}

.bp-table thead th:nth-child(2) {
  width: 19%;
}

.bp-table thead th:nth-child(3) {
  width: 20%;
}

.bp-table thead th:nth-child(4) {
  width: 25%;
}

.bp-table tbody {
  background: #fff;
}

.bp-table tbody tr {
  border-bottom: 1px solid #b5c4d0;
}

.bp-table tbody tr:last-child {
  border-bottom: 0;
}

.bp-table tbody th,
.bp-table tbody td {
  padding: 22px 10px;
  color: #262c5d;
  font-size: 17px;
  line-height: 1.35;
}

.bp-table tbody th {
  padding-left: 30px;
  font-weight: 800;
}

.bp-tag {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: #eef4fa;
  color: #262c5d;
  font-size: 15px;
  line-height: 1.2;
}

.bp-table .bp-fee {
  font-weight: 800;
  font-size: 18px;
}

.bp-post {
  font-weight: 700;
}

.bp-post.is-instant {
  color: #198754;
}

.bp-noresults {
  margin: 0;
  padding: 26px 30px;
  background: #fff;
  color: #262c5d;
  font-size: 17px;
  line-height: 1.5;
}

.bp-billers-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 22px 30px;
  background: #fff8e8;
  color: #6b5a2e;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.bp-ic-warn {
  width: 26px;
  height: 23px;
  margin-top: 2px;
  mask-image: url("/static/images/money-orders/mo-ic-warn.png");
  -webkit-mask-image: url("/static/images/money-orders/mo-ic-warn.png");
}

/* --- SECTION 5: posting time --- */
.bp-posting {
  background: #fff;
  padding: 50px 0 54px;
}

.bp-posting-lead {
  margin: 0 auto 34px;
  max-width: 900px;
  color: #262c5d;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.bp-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.bp-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.bp-post-bar {
  height: 36px;
  background: #ec081b;
}

.bp-post-body {
  padding: 26px 30px 0;
}

.bp-post-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.bp-post-disc {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #eef4fa;
  color: #262c5d;
}

.bp-post-tag {
  margin: 0 0 2px;
  color: #ec081b;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-post-card h3 {
  margin: 0;
  color: #262c5d;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
}

.bp-post-body > p {
  margin: 0;
  padding-bottom: 30px;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.55;
}

/* The mockup rules the left edge of this bar in red rather than boxing it */
.bp-duedate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 34px;
  padding: 22px 34px;
  border-left: 14px solid #ec081b;
  border-radius: 10px;
  background: #eef4fa;
}

.bp-duedate-title {
  margin: 0;
  color: #262c5d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.bp-duedate-copy {
  flex: 1 1 320px;
  margin: 0;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.4;
}

.bp-duedate-call {
  color: #262c5d;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- SECTION 6: how it works --- */
.bp-steps {
  background: #fff;
  padding: 20px 0 56px;
}

.bp-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.bp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 26px 32px;
  border-radius: 18px;
  background: #eef4fa;
  text-align: center;
}

.bp-step-num {
  margin: 0 0 18px;
  color: #ec081b;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.bp-step-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 60px;
  margin-bottom: 22px;
  color: #262c5d;
}

.bp-step h3 {
  margin: 0 0 16px;
  color: #ec081b;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
}

.bp-step p {
  margin: 0;
  color: #262c5d;
  font-size: 16px;
  line-height: 1.5;
}

/* --- SECTION 7: FPL band --- */
.bp-fpl {
  background: #262c5d;
  padding: 44px 0 48px;
}

.bp-fpl-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: center;
}

.bp-fpl-logo {
  display: flex;
  justify-content: center;
}

.bp-fpl-logo img {
  width: 250px;
  height: auto;
}

.bp-fpl-eyebrow {
  margin: 0 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-fpl-heading {
  margin: 0 0 20px;
  color: #fff;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
}

.bp-fpl-lead {
  margin: 0 0 24px;
  max-width: 620px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
}

.bp-fpl-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0 0 0 34px;
}

.bp-fpl-list li {
  margin-bottom: 10px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
}

.bp-fpl-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.bp-fpl .pcd-btn-outline,
.bp-fpl .pcd-btn-outline:focus {
  color: #fff;
  border-color: #fff;
}

.bp-fpl .pcd-btn-outline:hover {
  color: #262c5d;
  background: #fff;
  border-color: #fff;
}

.bp-fpl .pcd-btn-outline span,
.bp-fpl .pcd-btn-red span {
  color: inherit;
}

.bp-fpl-btn {
  font-size: 19px;
  line-height: 24px;
  padding: 16px 34px;
  margin-top: 0;
  justify-content: center;
}

/* --- SECTIONS 8-9: reviews and FAQ, the about page bands --- */
.bp-reviews {
  padding: 46px 0 40px;
}

.bp-faq {
  padding: 20px 0 34px;
}

/* --- Bill payment page: 1024-1199px. The hero plate is fitted to the hero
   height, so its width is 1.94x that height; below 1200px the copy column
   would run past the plate leftmost flat-navy strip and land on the open
   door. This regime swaps the plate to a right-anchored cover crop and
   washes its own left edge back to the section navy. --- */
@media (max-width: 1199px) {
  .bp-hero-photo {
    left: 34%;
    background-size: cover;
    background-position: right center;
  }

  .bp-hero-photo::before {
    background: linear-gradient(90deg, #262c5d 0%, #262c5d 30%, rgba(38, 44, 93, 0.94) 46%, rgba(38, 44, 93, 0) 70%);
  }

  .bp-hero-content {
    max-width: 58%;
    padding: 72px 0 64px;
  }

  .bp-hero-heading {
    font-size: 38px;
  }

  .bp-hero-sub {
    font-size: 18px;
  }

  .bp-hero-trust {
    gap: 14px 26px;
  }

  .bp-band-list li {
    gap: 14px;
    padding: 0 16px;
  }

  .bp-band-title {
    font-size: 15px;
  }

  .bp-band-sub {
    font-size: 14px;
  }

  .bp-simple-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
  }

  .bp-why {
    padding: 32px 30px 36px;
  }

  .bp-post-grid,
  .bp-step-grid {
    gap: 22px;
  }

  .bp-post-body {
    padding: 22px 22px 0;
  }

  .bp-post-card h3 {
    font-size: 23px;
  }

  .bp-fpl-grid {
    grid-template-columns: 1fr 1.7fr;
    gap: 28px;
  }

  .bp-fpl-logo img {
    width: 200px;
  }

  .bp-fpl-heading {
    font-size: 30px;
  }
}

/* --- Bill payment page: below 1024px the hero stacks. The plate is fitted
   to the hero height, so at this width the doorway reaches under the copy
   however the crop is anchored; the portrait crop below the copy is the
   only layout that keeps both readable. --- */
@media (max-width: 1023px) {
  .bp-hero-photo {
    display: none;
  }

  .bp-hero-content {
    max-width: none;
    padding: 48px 0 42px;
  }

  .bp-hero-heading {
    font-size: 36px;
    max-width: none;
  }

  .bp-hero-sub {
    max-width: 620px;
    margin-bottom: 32px;
  }

  .bp-hero-mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .bp-band {
    padding: 28px 0;
  }

  .bp-band-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
  }

  .bp-band-list li:nth-child(odd) {
    border-left: 0;
  }

  .bp-simple {
    padding: 40px 0 44px;
  }

  .bp-simple-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .bp-post-grid,
  .bp-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .bp-duedate {
    gap: 12px 20px;
    padding: 20px 24px;
  }

  .bp-fpl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    text-align: center;
  }

  .bp-fpl-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .bp-fpl-list {
    display: inline-block;
    padding-left: 0;
    text-align: left;
  }

  .bp-fpl-cta {
    justify-content: center;
  }
}

/* base.css sets "h2 { font-size: 40px !important }" below 779px, so every
   heading in this section has to shout back at it. */
@media (max-width: 779px) {
  .bp-h2 {
    font-size: 28px !important;
  }

  .bp-fpl-heading {
    font-size: 27px !important;
  }

  /* Phones drop the Category column: the chip row above the table already
     filters by category, so the tag repeats information the visitor just
     used, and the four columns do not fit without horizontal scrolling.
     Row headers are <th scope="row">, so the category cell is the second
     child in both the head and the body. The remaining widths are the
     desktop ones re-normalised over the 81% they used to share, and
     min-width drops by the 19% the column took. Filtering is unaffected —
     bill-payment-billers.js reads data-cat on the row. */
  .bp-table thead th:nth-child(2),
  .bp-table tbody td:nth-child(2) {
    display: none;
  }

  .bp-table {
    min-width: 528px;
  }

  .bp-table thead th:nth-child(1) {
    width: 44%;
  }

  .bp-table thead th:nth-child(3) {
    width: 25%;
  }

  .bp-table thead th:nth-child(4) {
    width: 31%;
  }
}

@media (max-width: 599px) {
  .bp-table {
    min-width: 340px;
  }

  /* At this width the columns are narrow enough that a single long word
     can outrun its cell - Spanish "Acreditacion" needed 133px of a 106px
     column and pushed the wrapper into a scroll. The table is
     table-layout: fixed, so the box does not grow; break-word is what
     keeps the text inside it, and the smaller uppercase heading buys
     back the room so it rarely has to. */
  .bp-table thead th {
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .bp-table th,
  .bp-table td {
    overflow-wrap: break-word;
  }

  .bp-hero-heading {
    font-size: 32px;
  }

  .bp-hero-sub {
    font-size: 17px;
  }

  .bp-hero-btn,
  .bp-fpl-btn {
    width: 100%;
  }

  /* Icon over label: two across with the icon beside it leaves the right
     half of every cell empty at this width. */
  .bp-band-list li {
    flex-direction: column;
    gap: 12px;
    padding: 0 10px;
    text-align: center;
  }

  .bp-band-list li + li,
  .bp-band-list li:nth-child(odd) {
    border-left: 0;
  }

  .bp-post-grid,
  .bp-step-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-why {
    padding: 28px 22px 32px;
    border-radius: 26px;
  }

  .bp-search-card {
    padding: 22px 20px 24px;
  }

  .bp-billers-note,
  .bp-noresults {
    padding: 20px;
  }
}

@media (max-width: 479px) {
  .bp-table tbody th,
  .bp-table thead th:nth-child(1) {
    padding-left: 16px;
  }

  .bp-duedate {
    padding: 18px;
    border-left-width: 10px;
  }

  .bp-duedate-call {
    font-size: 20px;
  }
}

/* ===================================================================
   32. MOBILE NAV DRAWER  (.mnav-*)
   Slide-out menu behind the header's menu button at ≤1023px. Built
   from the mobile-menu mockup: white logo + close on a navy panel,
   dividered nav rows with expandable Check Cashing / Services groups,
   then the red Find a Location CTA, the phone number and the three
   social icons. Toggled by display in base.html's IIFE; the
   min-width:1024px block above hides it outright on desktop.
   =================================================================== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: min(100%, 400px);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #262c5d;
  z-index: 2000;
  -webkit-overflow-scrolling: touch;
}

.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mnav-logo img {
  display: block;
  height: 44px;
  width: auto;
  /* The brand logo is navy + red on transparent, so knocking it out to
     white leaves the flag's stripes as gaps and the drawer's navy shows
     through them — which is how the mockup draws it. */
  filter: brightness(0) invert(1);
}

.mnav-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.mnav-close svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

.mnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mnav-list > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mnav-row {
  display: flex;
  align-items: stretch;
}

.mnav-link {
  display: block;
  flex: 1 1 auto;
  padding: 11px 20px;
  color: #fff !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.mnav-link:hover,
.mnav-sub a:hover {
  /* Same hover the footer's navy band uses for links on navy. */
  color: var(--color-footer-hover) !important;
}

/* Only the chevron toggles the group, so the label beside it stays a
   real link to /check-cashing/ and /services/. */
.mnav-toggle {
  flex: 0 0 auto;
  width: 56px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.mnav-toggle .fa {
  display: inline-block;
  transition: transform 0.2s;
}

.mnav-has-sub.is-open .mnav-toggle .fa {
  transform: rotate(90deg);
}

.mnav-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.mnav-has-sub.is-open .mnav-sub {
  display: block;
}

.mnav-sub a {
  display: block;
  padding: 6px 20px 6px 44px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.mnav-foot {
  padding: 20px 20px 26px;
}

.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #ec081b;
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.mnav-cta:hover {
  background: #c70010;
}

.mnav-cta .fa {
  font-size: 19px;
}

.mnav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  color: #fff !important;
  font-size: 19px;
  font-weight: 700;
}

.mnav-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 18px;
}

.mnav-social a {
  display: block;
  color: #fff;
}

.mnav-social a:hover {
  color: var(--color-footer-hover);
}

.mnav-social svg {
  display: block;
  width: 27px;
  height: 27px;
}

@media (max-width: 359px) {
  .mnav-link {
    font-size: 17px;
  }

  .mnav-sub a {
    font-size: 15px;
  }
}