.fph-slider {
  margin-top: 30px;
}

.fph-slider .hero {
  margin-top: 0;
}

.fph-slider [hidden] {
  display: none !important;
}

.fph-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  margin-bottom: .65rem;
}

.fph-tabs button {
  min-height: 44px;
  padding: .45rem .85rem;
  border: 1px solid #cddcce;
  border-radius: .55rem;
  background: #f0f5ec;
  color: #213a3c;
  font-size: clamp(.85rem, 2.9vw, .95rem);
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.fph-tabs button[aria-selected="true"] {
  border-color: #006f74;
  background: #006f74;
  color: #fff;
}

.fph-tabs #fph-promo-tab[aria-selected="false"] {
  border-color: #c1d56f;
  background: #e7f2bd;
}

.fph-tab-number {
  margin-right: .28em;
  font-size: .72em;
  opacity: .85;
}

.fph-panel {
  touch-action: pan-y pinch-zoom;
}

.fph-panel[data-fph-direction="previous"] {
  --fph-slide-offset: -.8rem;
}

.fph-panel[data-fph-direction="next"] {
  --fph-slide-offset: .8rem;
}

@media (prefers-reduced-motion: no-preference) {
  .fph-panel[data-fph-direction]:not([hidden]) {
    animation: fph-enter .18s ease-out both;
  }
}

@keyframes fph-enter {
  from { opacity: .6; transform: translateX(var(--fph-slide-offset)); }
  to { opacity: 1; transform: translateX(0); }
}

.fph-promo-hero {
  background: #edf3e8;
}

.fph-promo-copy h2 {
  margin: .25rem 0 .7rem;
  font: 750 clamp(2.15rem, 5vw, 4.1rem)/1.02 Manrope, sans-serif;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.fph-promo-copy .fph-promo-offer {
  margin: .4rem 0 .8rem;
}

.fph-promo-offer strong {
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: .3rem;
  background: #d7ee70;
  color: #172d31;
  font-size: clamp(.95rem, 2.4vw, 1.18rem);
}

.fph-promo-note {
  margin: .8rem 0 0;
  font-size: .86rem;
}

.fph-promo-art {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #dfece6;
}

.fph-promo-art img {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
}

@media (max-width: 600px) {
  .fph-promo-art {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .fph-tabs button {
    padding-inline: .55rem;
  }

  .fph-tab-number {
    display: none;
  }
}
