.catfaq {
  font-family: UPSBerlingskeSans;
  /* color: var(--text); */
}

.catfaq .wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 48px;
}

/* ===== HERO ===== */
.catfaq .cat-hero {
  display: grid;
  gap: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin: 0 0 16px;
}

/* lock both sides to the same responsive height */
.catfaq .hero-card,
.catfaq .hero-img {
  min-height: clamp(360px, 34vw, 560px);
}

.catfaq .hero-card {
  background: var(--bas-theme-primary-color-dark-10); /* slightly darker version of #009cbc (UPS Blue) */
  color: var(--bas-tertiary-button-fg-color); /* #fff - white */ 
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  box-shadow: none;
}

.catfaq .hero-card h2 {
  font-size: 36px;
  line-height: 1.22;
  margin: 0 0 16px;
  font-weight: 700;
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff - white */ 
  letter-spacing: 0.2px;
}

.catfaq .hero-card p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  /* let the copy breathe across the full panel */
  max-width: none;
}

.catfaq .hero-img {
  border-radius: 0;
  overflow: hidden;
  background: black;
}

.catfaq .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 3 PRODUCT CARDS ===== */
.catfaq .cat-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}

.catfaq .card {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */ 
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.catfaq .card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */ 
}

@supports not (aspect-ratio: 1 / 1) {
  .catfaq .card img {
    height: clamp(196px, 18vw, 260px);
  }
}

.catfaq .card .body {
  padding: 12px 14px 16px;
}

.catfaq .card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
}

.catfaq .card p {
  font-size: 17px;
  color: var(--bas-primary-text-fg-color); /* #444 - medium dark gray */
  line-height: 1.5;
  margin: 0 0 12px;
  min-height: 36px;
}

/* Buttons */
.catfaq .btn,
.catfaq .btn:visited {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--bas-theme-primary-color); /* #009cbc  - UPS Blue */
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff - white */ 
  text-decoration: none !important;
  font-size: 13.5px;
  transition: background 0.15s ease;
}

.catfaq .btn:hover,
.catfaq .btn:focus {
  background: var(--bas-theme-primary-color-light-20); /* slightly lighter version of #009cbc (UPS Blue) */
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff - white */ 
  text-decoration: none !important;
}

/* ===== FAQ (UPS v3 look with chevron + slide animation) ===== */
.catfaq .faq {
  margin-top: 32px;
}

.catfaq .faq .top-divider {
  width: 75px;
  height: 4px;
  background: var(--bas-theme-secondary-color); /* #ffd100 - UPS Gold */
  margin: 0 auto 18px;
  border-radius: 2px;
}

.catfaq .faq h4 {
  text-align: center;
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  padding: 24px 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.catfaq .faq-group {
  border: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
  border-radius: 12px;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */ 
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* divider above EVERY question, including the first */
.catfaq .faq-group details {
  border-top: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
}

/* Question row */
.catfaq .faq-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  /* for ::after arrow */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 36px 16px 16px;
  /* extra right space for the arrow */
  font-size: 17px;
  font-weight: 600;
  color: var(--bas-theme-primary-color); /* #009cbc  - UPS Blue */
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */ 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.catfaq .faq-group summary::-webkit-details-marker {
  display: none;
}

.catfaq .faq-group summary:hover {
  color: var(--bas-theme-primary-color-dark-10); /* slightly darker version of #009cbc (UPS Blue) */
  background: var(--bas-tertiary-bg-color); /* #f7f7f7 - off-white */
}

/* Solid triangle chevron attached to the summary itself */
.catfaq .faq-group summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--bas-theme-primary-color); /* #009cbc  - UPS Blue */
  transition:
    transform 0.22s ease,
    border-top-color 0.2s ease;
}

.catfaq .faq-group summary:hover::after {
  border-top-color: var(--bas-theme-primary-color-dark-10); /* slightly darker version of #009cbc (UPS Blue) */
}

.catfaq .faq-group details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* points up */

/* Sliding panel animation (the drawer) */
.catfaq .faq-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  /* side padding only; top/btm added when open */
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
  transition:
    max-height 280ms ease,
    opacity 220ms ease,
    padding-top 220ms ease,
    padding-bottom 220ms ease;
  background: transparent;
  will-change: max-height, opacity, padding-top, padding-bottom;
}

.catfaq .faq-group details[open] .faq-panel {
  max-height: 1000px;
  /* large enough for typical answers */
  opacity: 1;
  padding-top: 12px;
  padding-bottom: 16px;
}

.catfaq .faq-panel ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.catfaq .faq-panel li {
  margin: 6px 0;
  font-size: 16px;
}

.catfaq .faq-panel p {
  font-size: 16px;
}

@media (max-width: 800px) {
  .catfaq .faq h4 {
    font-size: 22px;
  }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .catfaq .hero-card h2 {
    font-size: 32px;
  }

  .catfaq .hero-card p {
    font-size: 17px;
  }
}

@media (max-width: 1024px) {
  .catfaq .cat-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .catfaq .cat-grid {
    grid-template-columns: 1fr;
  }

  .catfaq .hero-card {
    padding: 24px;
  }

  .catfaq .hero-card h2 {
    font-size: 28px;
  }

  .catfaq .hero-card p {
    font-size: 16px;
  }

  .catfaq .card h3 {
    font-size: 18px;
  }

  .catfaq .card p {
    font-size: 15px;
  }

  .catfaq .btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 12px 0;
  }
}
.ups-faq-v3 {
  font-family: "UPSBerlingskeSans";
  margin: 0 auto;
  max-width: 1100px;
  /* side margins */
  padding: 0 20px;
}

/* Gold divider under the page title */
.ups-faq-v3 .top-divider {
  width: 75px;
  height: 4px;
  background: var(--bas-theme-secondary-color); /* #ffd100 - gold */
  margin: 0 auto 28px;
  border-radius: 2px;
}

/* Section card */
.ups-faq-v3 .faq-card {
  background: var(--bas-primary-bg-color); /* #ffffff - white */
  border: 1px solid var(--bas-tertiary-bg-color); /* #f7f7f7 - off-white */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  margin: 28px 0;
  overflow: hidden;
  width: 100%;
}

.ups-faq-v3 .card-inner {
  padding: 0 20px 0;
}

/* Section heading */
.ups-faq-v3 .card-title {
  text-align: center;
  font-family: "UPSBerlingskeSans";
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin: 24px 0 16px;
  color: var(--bas-primary-text-fg-color); /* #444 - medium dark gray */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FAQ item (divider line above every question) */

.ups-faq-v3 .card-inner .item:first-child {
  /* styles to apply */
  border-top: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
}

.ups-faq-v3 .item {
  border-top: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
  position: relative;
}

.ups-faq-v3 .toggler {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Question row */
.ups-faq-v3 .question {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
  color: var(--bas-theme-primary-color); /* #009cbc - UPS Blue */
  font-weight: 600;
  font-size: 17px;
  /* 16 -> 17 */
  transition: color 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ups-faq-v3 .question:hover {
  color: var(--bas-theme-primary-color-dark-10); /* slightly darker than standard UPS Blue */ 
}

/* Solid triangle arrow (scriptless) */
.ups-faq-v3 .question .chev {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 8px;
  font-size: 0;
  /* hides any › character if present */
}

.ups-faq-v3 .question .chev::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--bas-theme-primary-color); /* #009cbc - UPS Blue */
  /* points down */
  transition:
    transform 0.22s ease,
    border-top-color 0.2s ease;
}

.ups-faq-v3 .question:hover .chev::after {
  border-top-color: var(--bas-theme-primary-color-dark-10); /* slightly darker than UPS Blue */
}

.ups-faq-v3 .toggler:checked + label .chev::after {
  transform: rotate(180deg);
}

/* points up */

/* Answer panel (animated, no background) */
.ups-faq-v3 .panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  color: #333;
  line-height: 1.6;
  transition:
    max-height 280ms ease,
    opacity 220ms ease,
    padding-top 220ms ease;
  background: transparent;
}

.ups-faq-v3 .toggler:checked ~ .panel {
  max-height: 1000px;
  opacity: 1;
  padding-top: 12px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .ups-faq-v3 {
    padding: 0 14px;
  }

  .ups-faq-v3 .card-title {
    font-size: 22px;
    margin: 20px 0 12px;
  }

  .ups-faq-v3 .question {
    font-size: 15.5px;
  }

  .ups-faq-v3 .panel {
    font-size: 15px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ups-faq-v3 .panel,
  .ups-faq-v3 .question .chev::after {
    transition: none !important;
  }
}
/* FOR MARKETING TEAM: Do NOT change the --bas variables below, we have the colors for UPS saved in our code base and those reference those directly! */

/*   Updates:
  1) FAQ typography now matches your "Second Drop" FAQ (ups-faq / ups-faq-group / ups-faq-panel)
  2) "Flexible Printing, Flawless Results" uses the SAME font-family as the whole module (UPSBerlingskeSans)
  3) Removed the shadow/boxes around the value props (features) */

/* Base font (same as "Built to Last" set) */
.ups-home,
.ups-faq {
  font-family: UPSBerlingskeSans;
}

.ups-home .ups-wrap,
.ups-faq .ups-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 0;
}

/* ===== HERO (kept matching your "Built to Last" hero typography) ===== */
.ups-home .ups-hero {
  display: grid;
  gap: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin: 0 0 16px;
}

.ups-home .ups-hero .copy,
.ups-home .ups-hero .media {
  min-height: clamp(360px, 34vw, 560px);
}

.ups-home .ups-hero .copy {
  background: var(--bas-theme-primary-color-dark-10);  /* slightly darker than UPS Blue*/
  color: var(--bas-tertiary-button-fg-color); /* #fff - white */
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  box-shadow: none;
}

.ups-home .ups-hero .copy h2 {
  font-size: 36px;
  line-height: 1.22;
  margin: 0 0 16px;
  font-weight: 700;
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff - white */
  letter-spacing: 0.2px;
}

.ups-home .ups-hero .copy p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  max-width: none;
  color: var(--bas-tertiary-button-fg-color); /* #fff - white */
}

.ups-home .ups-hero .media {
  border-radius: 0;
  overflow: hidden;
  background: black;
}

.ups-home .ups-hero .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== FEATURES (remove boxes/shadows + keep same font) ===== */
.ups-home .ups-features {
  margin-top: 24px;
}

/* Font-family already inherited; this ensures same type styling intent */
.ups-home .ups-features h3 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.ups-home .ups-features .eyebrow {
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--bas-primary-text-fg-color); /* #444 - medium dark gray */
  margin: 0 0 16px;
}

.ups-home .ups-features-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 2rem 0;
  align-items: start;
}

/* REMOVE shadow + border + white card background */
.ups-home .ups-feature {
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.ups-home .ups-feature img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}

.ups-home .ups-feature h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ups-home .ups-feature p {
  font-size: 16px;
  color: var(--bas-primary-text-fg-color); /* #444 - medium dark gray */
  line-height: 1.6;
  text-align: center;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 3 PRODUCT CARDS (kept matching Built-to-Last card type) ===== */
.ups-home .ups-cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}

.ups-home .ups-card {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.ups-home .ups-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */
}

@supports not (aspect-ratio: 1 / 1) {
  .ups-home .ups-card img {
    height: clamp(196px, 18vw, 260px);
  }
}

.ups-home .ups-card .body {
  padding: 14px 16px 18px;
}

.ups-home .ups-card h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ups-home .ups-card p {
  font-size: 16px;
  color: var(--bas-primary-text-fg-color); /* #444 - medium dark gray */
  line-height: 1.6;
  margin: 0 0 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Buttons */
.ups-home .btn,
.ups-home .btn:visited {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--bas-theme-primary-color); /* #009cbc  - UPS Blue*/
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff - white*/
  text-decoration: none !important;
  font-size: 13.5px;
  transition: background 0.15s ease;
}

.ups-home .btn:hover,
.ups-home .btn:focus {
  background: var(--bas-theme-primary-color-light-20); /* slightly lighter version of #009cbc (UPS Blue) */
  color: var(--bas-tertiary-button-fg-color) !important; /* #fff  - white */
  text-decoration: none !important;
}

/* ===== FAQ (MATCH SECOND DROP) =====
     Your Second Drop FAQ uses:
     - h4 title
     - top-divider BELOW h4 (in your HTML)
     - ups-faq-group summary styling
     - ups-faq-panel typography
  */

.ups-faq {
  margin-top: 32px;
}

/* Second Drop has the H4 then divider; this styles H4 to match that block */
.ups-faq h4 {
  text-align: center;
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Divider styling as in the second drop */
.ups-faq .top-divider {
  width: 75px;
  height: 4px;
  background: var(--bas-theme-secondary-color); /* #ffd100 - UPS Gold */
  margin: 0 auto 18px;
  border-radius: 2px;
}

.ups-faq .ups-faq-group {
  border: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
  border-radius: 12px;
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ups-faq .ups-faq-group details {
  border-top: 1px solid var(--bas-search-empty-state-bg-border-color); /* #e5e7eb - light gray */
}

.ups-faq .ups-faq-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 36px 16px 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--bas-theme-primary-color); /* #009cbc - UPS Blue */
  background: var(--bas-tertiary-button-fg-color); /* #fff - white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.ups-faq .ups-faq-group summary::-webkit-details-marker {
  display: none;
}

.ups-faq .ups-faq-group summary:hover {
  color: var(--bas-theme-primary-color-dark-10); /* slightly darker version of #009cbc (UPS Blue) */
  background: var(--bas-tertiary-bg-color); /* #f7f7f7 - off-white */
}

.ups-faq .ups-faq-group summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--bas-theme-primary-color); /* #009cbc - UPS Blue */
  transition:
    transform 0.22s ease,
    border-top-color 0.2s ease;
}

.ups-faq .ups-faq-group summary:hover::after {
  border-top-color: var(--bas-theme-primary-color-dark-10); /* slightly darker version of #009cbc (UPS Blue)*/
}

.ups-faq .ups-faq-group details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.ups-faq .ups-faq-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
  transition:
    max-height 280ms ease,
    opacity 220ms ease,
    padding-top 220ms ease,
    padding-bottom 220ms ease;
  background: transparent;
  will-change: max-height, opacity, padding-top, padding-bottom;
}

.ups-faq .ups-faq-group details[open] .ups-faq-panel {
  max-height: 1000px;
  opacity: 1;
  padding-top: 12px;
  padding-bottom: 16px;
}

.ups-faq .ups-faq-panel a {
  color: var(--bas-theme-primary-color); /* #009cbc - UPS Blue */
  text-decoration: underline;
}

.ups-faq .ups-faq-panel p {
    font-size: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .ups-home .ups-hero .copy h2 {
    font-size: 32px;
  }
  .ups-home .ups-hero .copy p {
    font-size: 17px;
  }
}

@media (max-width: 1024px) {
  .ups-home .ups-hero {
    grid-template-columns: 1fr;
  }
  .ups-home .ups-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 800px) {
  .ups-home .ups-hero .copy {
    padding: 24px;
  }
  .ups-home .ups-hero .copy h2 {
    font-size: 28px;
    text-align: center;
  }
  .ups-home .ups-hero .copy p {
    font-size: 16px;
  }

  .ups-home .ups-features h3 {
    font-size: 22px;
  }
  .ups-home .ups-features .eyebrow {
    font-size: 16px;
  }

  .ups-home .ups-features p {
    justify-self: center;
  }

  .ups-home .ups-features-grid {
    grid-template-columns: 1fr;
  }

  .ups-home .ups-cards {
    grid-template-columns: 1fr;
  }

  .ups-home .ups-card h5 {
    font-size: 17px;
  }
  .ups-home .ups-card p {
    font-size: 15px;
  }

  .ups-home .btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 12px 0;
  }

  .ups-faq h4 {
    font-size: 22px;
  }
}
/* General styling for all Helix label pills */
.css-op6a8s {
  font-size: 12px !important;
  font-weight: 500 !important;

  /* True vertical centering inside the fixed 18px pill */
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Equal vertical padding; keep the 8px horizontal you had */
  padding: 2px 8px !important;
  height: 18px !important; /* keeps pill height consistent */
  box-sizing: border-box !important;
}

/* Green pill — Safe Area / Safety Zone */
.css-op6a8s[style*="background-color: rgb(176, 209, 70)"] {
  position: relative !important;
}

.css-op6a8s[style*="background-color: rgb(176, 209, 70)"]::after {
  content: "  ℹ️";
  margin-left: 4px !important;
  font-size: 1.1em !important;
  color: #000 !important;
  vertical-align: middle !important;
}

/* Gray pill — Trim Line */
.css-op6a8s[style*="background-color: rgb(196, 205, 214)"] {
  position: relative !important;
}

.css-op6a8s[style*="background-color: rgb(196, 205, 214)"]::after {
  content: "  ℹ️";
  margin-left: 4px !important;
  font-size: 1.1em !important;
  color: #000 !important;
  vertical-align: middle !important;
}
/* Clean statement descriptor notice under Braintree card area 
   This is styled in real code, but if we place in a resource string for the text, 
   it will be difficult to customize per store/per language since its plugin related. 
   We can revisit this at a later time.  */
#braintree-drop-in-ccbox::after {
    content: 'This charge will reflect on your credit card statement as "BAS upsstoreprint.com".' !important;
}