/* =====================================================================
   LOFT HOMEPAGE COMPONENTS  v1          (class prefix: hp-)
   Replaces: updated-HP-v8.css + cbTemplateUpdates.css + the inline
   <style> block that used to live in every changeout asset.

   RULES OF THE SYSTEM
   - Campaign values (positions, colors) are set as CSS variables on the
     section's style="" attribute. No campaign <style> block, no !important.
   - Breakpoint: phones < 1024px, desktop >= 1024px.
   - Everything lives under .hp-root, so nothing leaks into the site.
   - Spacing utilities (hp-mt-*, hp-mb-*, hp-pt-*, hp-pb-*) are the only
     rules that use !important.

   CONTENTS
    0  Site wrapper reset (.homepage)
    1  Root + base
    2  Utilities (show/hide, spacing)
    3  Buttons  (hp-cta, hp-cta--outline, hp-cta--link, hp-cta--ul)
    4  Promo bar                (hp-bar)
   4b  Promo nav                (hp-promo)
    5  Quick links, mobile      (hp-quicklinks)
    6  Hero / banner            (hp-hero)   <- image, video, text, CTAs
    7  Category row             (hp-cats)
    8  Editorial tiles          (hp-tiles)
    9  Featured shops           (hp-featured)
   10  Recommended for you      (hp-rfk)
   11  Social / Curalate        (hp-social)
   12  Charity bar              (hp-charity)
   13  Video                    (hp-video)
   14  Offer heroes             (hp-ko-*)    templates 2-25: live text on art
   15  Top banners              (hp-banner)  "tonight only" strip
   16  Cardholder campaign     (hp-cam)     template 21
   ===================================================================== */


/* ---------------------------------------------------------------- 0. SITE WRAPPER */
/* The site's .homepage wrapper adds a 20px top margin on desktop and caps its width.
   The HP is full bleed, so reset both (same as the old updated-HP-v8.css). */
.homepage { margin-top: 0 !important; max-width: none; }
.homepage a { text-decoration: none; }


/* ---------------------------------------------------------------- 1. ROOT + BASE */

.hp-root {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif);
  font-weight: 600;
  font-style: normal;
  font-size: 1.56vw;               /* phones: 1em = 1.56vw */
  text-decoration-skip-ink: none;
}
@media (min-width: 1024px) and (max-width: 1679.98px) {
  .hp-root { font-size: 0.95vw; }  /* desktop: 1em = 0.95vw */
}
@media (min-width: 1680px) {
  .hp-root { font-size: 1em; }
}

.hp-root *, .hp-root ::before, .hp-root ::after { box-sizing: border-box; }
.hp-root a { text-decoration: none; }

/* :where() keeps this at zero specificity so component classes (hp-tiles padding, etc.) can override it */
:where(.hp-root) section {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.hp-root picture { position: relative; width: 100%; display: block; }
.hp-root picture img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}
/* Display font switch. The condensed headline font is acumin-pro-extra-condensed. Add  a-font  (or hp-a-font)
   to a section (or the .hp-root wrapper) and every headline inside it uses Analogue instead.
   Same variable can be set inline:  style="--hp-font-display: Analogue, serif". */
.hp-root .a-font, .hp-root .hp-a-font, .hp-root.a-font, .hp-root.hp-a-font { --hp-font-display: Analogue, serif; }
.hp-root img { max-width: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.hp-root sup { font-size: 0.5em; top: 0; vertical-align: super; }

.hp-root h1, .hp-root h2, .hp-root h4, .hp-root h5, .hp-root h6, .hp-root p {
  font-family: poppins, sans-serif;
  position: relative;
  display: block;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* Section title (h3). --display = the serif used for "Featured Shops" */
.hp-root .hp-title {
  position: relative;
  display: block;
  margin: 0 0 0.5em;
  padding: 0.7em 0.1em;
  color: #000;
  font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif);
  font-size: 6.75em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.hp-root .hp-title--display {
  font-family: Analogue, serif;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .hp-root .hp-title { font-size: 3em; }
}

.hp-rel { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }

/* Small print */
.hp-disclaimer {
  display: block;
  position: relative;
  width: 100%;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 1.518em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: normal;
  z-index: 100;
}
.hp-disclaimer > a, .hp-disclaimer > span {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .hp-disclaimer { font-size: 0.8em; }
}


/* ---------------------------------------------------------------- 2. UTILITIES */

/* Show / hide by breakpoint */
.hp-desktop-only { display: none !important; }
.hp-mobile-only { display: revert !important; }
@media (min-width: 1024px) {
  .hp-desktop-only { display: revert !important; }
  .hp-mobile-only { display: none !important; }
}

/* Spacing: hp-mt / hp-mb / hp-pt / hp-pb  -N--m (phones) and -N--dt (desktop), N = 0..10.
   Margins: N=1 is 5px on phones, 0.5rem on desktop. Padding: N=1 is 0.5rem. N>=2 is N x 0.5rem. */
@media (max-width: 1023.98px) {
  .hp-mt-0--m { margin-top: 0 !important; }
  .hp-mt-1--m { margin-top: 5px !important; }
  .hp-mt-2--m { margin-top: 1rem !important; }
  .hp-mt-3--m { margin-top: 1.5rem !important; }
  .hp-mt-4--m { margin-top: 2rem !important; }
  .hp-mt-5--m { margin-top: 2.5rem !important; }
  .hp-mt-6--m { margin-top: 3rem !important; }
  .hp-mt-7--m { margin-top: 3.5rem !important; }
  .hp-mt-8--m { margin-top: 4rem !important; }
  .hp-mt-9--m { margin-top: 4.5rem !important; }
  .hp-mt-10--m { margin-top: 5rem !important; }
  .hp-mb-0--m { margin-bottom: 0 !important; }
  .hp-mb-1--m { margin-bottom: 5px !important; }
  .hp-mb-2--m { margin-bottom: 1rem !important; }
  .hp-mb-3--m { margin-bottom: 1.5rem !important; }
  .hp-mb-4--m { margin-bottom: 2rem !important; }
  .hp-mb-5--m { margin-bottom: 2.5rem !important; }
  .hp-mb-6--m { margin-bottom: 3rem !important; }
  .hp-mb-7--m { margin-bottom: 3.5rem !important; }
  .hp-mb-8--m { margin-bottom: 4rem !important; }
  .hp-mb-9--m { margin-bottom: 4.5rem !important; }
  .hp-mb-10--m { margin-bottom: 5rem !important; }
  .hp-pt-0--m { padding-top: 0 !important; }
  .hp-pt-1--m { padding-top: 0.5rem !important; }
  .hp-pt-2--m { padding-top: 1rem !important; }
  .hp-pt-3--m { padding-top: 1.5rem !important; }
  .hp-pt-4--m { padding-top: 2rem !important; }
  .hp-pt-5--m { padding-top: 2.5rem !important; }
  .hp-pt-6--m { padding-top: 3rem !important; }
  .hp-pt-7--m { padding-top: 3.5rem !important; }
  .hp-pt-8--m { padding-top: 4rem !important; }
  .hp-pt-9--m { padding-top: 4.5rem !important; }
  .hp-pt-10--m { padding-top: 5rem !important; }
  .hp-pb-0--m { padding-bottom: 0 !important; }
  .hp-pb-1--m { padding-bottom: 0.5rem !important; }
  .hp-pb-2--m { padding-bottom: 1rem !important; }
  .hp-pb-3--m { padding-bottom: 1.5rem !important; }
  .hp-pb-4--m { padding-bottom: 2rem !important; }
  .hp-pb-5--m { padding-bottom: 2.5rem !important; }
  .hp-pb-6--m { padding-bottom: 3rem !important; }
  .hp-pb-7--m { padding-bottom: 3.5rem !important; }
  .hp-pb-8--m { padding-bottom: 4rem !important; }
  .hp-pb-9--m { padding-bottom: 4.5rem !important; }
  .hp-pb-10--m { padding-bottom: 5rem !important; }
}
@media (min-width: 1024px) {
  .hp-mt-0--dt { margin-top: 0 !important; }
  .hp-mt-1--dt { margin-top: 0.5rem !important; }
  .hp-mt-2--dt { margin-top: 1rem !important; }
  .hp-mt-3--dt { margin-top: 1.5rem !important; }
  .hp-mt-4--dt { margin-top: 2rem !important; }
  .hp-mt-5--dt { margin-top: 2.5rem !important; }
  .hp-mt-6--dt { margin-top: 3rem !important; }
  .hp-mt-7--dt { margin-top: 3.5rem !important; }
  .hp-mt-8--dt { margin-top: 4rem !important; }
  .hp-mt-9--dt { margin-top: 4.5rem !important; }
  .hp-mt-10--dt { margin-top: 5rem !important; }
  .hp-mb-0--dt { margin-bottom: 0 !important; }
  .hp-mb-1--dt { margin-bottom: 0.5rem !important; }
  .hp-mb-2--dt { margin-bottom: 1rem !important; }
  .hp-mb-3--dt { margin-bottom: 1.5rem !important; }
  .hp-mb-4--dt { margin-bottom: 2rem !important; }
  .hp-mb-5--dt { margin-bottom: 2.5rem !important; }
  .hp-mb-6--dt { margin-bottom: 3rem !important; }
  .hp-mb-7--dt { margin-bottom: 3.5rem !important; }
  .hp-mb-8--dt { margin-bottom: 4rem !important; }
  .hp-mb-9--dt { margin-bottom: 4.5rem !important; }
  .hp-mb-10--dt { margin-bottom: 5rem !important; }
  .hp-pt-0--dt { padding-top: 0 !important; }
  .hp-pt-1--dt { padding-top: 0.5rem !important; }
  .hp-pt-2--dt { padding-top: 1rem !important; }
  .hp-pt-3--dt { padding-top: 1.5rem !important; }
  .hp-pt-4--dt { padding-top: 2rem !important; }
  .hp-pt-5--dt { padding-top: 2.5rem !important; }
  .hp-pt-6--dt { padding-top: 3rem !important; }
  .hp-pt-7--dt { padding-top: 3.5rem !important; }
  .hp-pt-8--dt { padding-top: 4rem !important; }
  .hp-pt-9--dt { padding-top: 4.5rem !important; }
  .hp-pt-10--dt { padding-top: 5rem !important; }
  .hp-pb-0--dt { padding-bottom: 0 !important; }
  .hp-pb-1--dt { padding-bottom: 0.5rem !important; }
  .hp-pb-2--dt { padding-bottom: 1rem !important; }
  .hp-pb-3--dt { padding-bottom: 1.5rem !important; }
  .hp-pb-4--dt { padding-bottom: 2rem !important; }
  .hp-pb-5--dt { padding-bottom: 2.5rem !important; }
  .hp-pb-6--dt { padding-bottom: 3rem !important; }
  .hp-pb-7--dt { padding-bottom: 3.5rem !important; }
  .hp-pb-8--dt { padding-bottom: 4rem !important; }
  .hp-pb-9--dt { padding-bottom: 4.5rem !important; }
  .hp-pb-10--dt { padding-bottom: 5rem !important; }
}


/* ---------------------------------------------------------------- 3. BUTTONS */
/* White block button (default), outline, text link, underlined link.
   Two or more .hp-cta inside one .hp-ctas are sized equal by the JS
   (opt out with hp-ctas--no-match). */

.hp-ctas {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}

.hp-root a.hp-cta, .hp-root span.hp-cta {
  display: inline-block;
  position: relative;
  height: auto;
  margin: 0 0.4em;
  padding: 0 2.5em;
  overflow: hidden;
  font-family: poppins, sans-serif;
  font-size: 2.3625em;
  font-weight: 600;
  line-height: 2.6;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  background-color: #fff;
  border: 0.08em solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
/* set by the JS once the group has been size-matched */
.hp-root a.hp-cta.hp-cta--fit, .hp-root span.hp-cta.hp-cta--fit { padding-left: 0; padding-right: 0; }

.hp-root a.hp-cta--outline, .hp-root span.hp-cta--outline {
  padding: 0 2.2em;
  line-height: 2.5;
  background-color: transparent;
  border: 1px solid;
}

/* Plain underlined text link used on banners ("Learn More", "See What's New").
   Size comes from --hp-link-size (default .95rem). */
.hp-root a.hp-cta--link, .hp-root span.hp-cta--link {
  padding: 0 2.2em;
  font-size: var(--hp-link-size, 0.95rem);
  line-height: 2.5;
  color: inherit;
  background-color: transparent;
  border: 0;
  text-decoration: underline;
}

/* Underlined inline link ("Donate Now") */
.hp-root a.hp-cta--ul, .hp-root span.hp-cta--ul {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 1024px) {
  .hp-root a.hp-cta, .hp-root span.hp-cta { padding: 0 4.1em; font-size: 0.875em; line-height: 3.4; }
  .hp-root a.hp-cta--outline, .hp-root span.hp-cta--outline { padding: 0 5.3em; line-height: 3.5; }
  .hp-root a.hp-cta--link, .hp-root span.hp-cta--link { padding: 0 5.3em; font-size: var(--hp-link-size, 0.95rem); line-height: 3.5; }
  .hp-root a.hp-cta--ul, .hp-root span.hp-cta--ul { padding: 0; font-size: 1em; line-height: normal; }
}


/* ---------------------------------------------------------------- 4. PROMO BAR */
/* One section for phone + desktop. Use <br class="hp-mobile-only"> for the
   phone line breaks. Colors: style="--hp-bar-bg:#afbed1; --hp-bar-color:#5e0e33" */

.hp-bar {
  text-align: center;
  background-color: var(--hp-bar-bg, #afbed1);
  color: var(--hp-bar-color, #5e0e33);
}
.hp-bar__inner {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1.8em 0 0.3em;
  overflow: hidden;
}
.hp-root a.hp-bar__link {
  font-family: poppins, sans-serif;
  color: inherit;
  text-decoration: none;
  font-size: 2.98625em;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: normal;
}
.hp-bar .hp-disclaimer { padding-bottom: 0.5rem; }
@media (min-width: 1024px) {
  .hp-bar__inner { padding: 2.1em 0 2em; }
  .hp-root a.hp-bar__link { font-size: 1.5em; line-height: 1.4em; }
  .hp-bar .hp-disclaimer { font-size: 0.7125em; margin-top: 0.7em; padding-bottom: 0; }
}


/* ---------------------------------------------------------------- 4b. PROMO NAV */
/* Two or three offers side by side on desktop; a swipeable carousel on phones
   (arrows + auto-advance every 4s, added by the JS). Use instead of hp-bar.
   Colors: style="--hp-promo-bg:#afbed1; --hp-promo-color:#5e0e33"
   hp-promo--2 = two offers (default is three, middle one with dividers). */

.hp-promo {
  position: relative;
  margin: 0;
  background-color: var(--hp-promo-bg, #afbed1);
  color: var(--hp-promo-color, #5e0e33);
}
.hp-promo__wrap { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-promo__track {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 3.5em 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  font-family: poppins, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.02em;
}
.hp-promo__track::-webkit-scrollbar { display: none; }
.hp-root a.hp-promo__item {
  position: relative;
  display: block;
  flex: 0 0 100%;
  font-size: 1em;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}
.hp-promo__item > div { position: relative; margin: 0; padding: 0; overflow: hidden; }
.hp-root .hp-promo h6 {
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 3em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.hp-root .hp-promo p {
  margin: 0.8em 0 0;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 2.0475em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.hp-promo .js-promo-details-trigger { text-decoration: underline; cursor: pointer; line-height: 1.35; }

/* phone carousel arrows (created by the JS) */
.hp-promo__arrow {
  position: absolute;
  top: 50%;
  width: 8%;
  height: auto;
  margin: 0 0.8em;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  z-index: 5;
}
.hp-promo__arrow svg { display: block; width: 100%; height: auto; }
.hp-promo__arrow path { fill: currentColor; }
.hp-promo__arrow--l { left: 0; }
.hp-promo__arrow--r { right: 0; }

@media (min-width: 1024px) {
  .hp-promo { margin: 1em 0 1.4em; }
  .hp-promo__track {
    justify-content: space-between;
    align-items: stretch;
    padding: 0.8em 0;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .hp-root a.hp-promo__item { display: flex; align-items: center; justify-content: center; flex: 1 1 0; padding: 0.4em; }
  .hp-root a.hp-promo__item:nth-child(2) { flex: 0 0 auto; min-width: 33.3333%; white-space: nowrap; border-left: solid 1px; border-right: solid 1px; }
  .hp-promo--2 a.hp-promo__item:nth-child(2) { min-width: 50%; border-right: none; }
  .hp-root .hp-promo h6 { font-size: 1.25em; }
  .hp-root .hp-promo p { font-size: 0.75em; }
  .hp-promo__arrow { display: none; }
}


/* ---------------------------------------------------------------- 5. QUICK LINKS (phones only) */

.hp-quicklinks { display: block; }
.hp-quicklinks__track {
  display: flex;
  align-items: center;
  width: 100%;
  height: 9em;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-quicklinks__track::-webkit-scrollbar { display: none; }
.hp-root .hp-quicklinks__track a {
  flex: 0 0 auto;
  display: inline-block;
  margin: 0 0 0 1em;
  padding: 0 1.2em;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.3875em;
  font-style: normal;
  font-weight: 600;
  line-height: 2.2;
  letter-spacing: 0.02em;
  border-radius: 1em;
  background-color: #eee;
}
.hp-root .hp-quicklinks__track a:last-child { margin-right: 1em; }
@media (min-width: 1024px) {
  .hp-quicklinks { display: none; }
}


/* ---------------------------------------------------------------- 6. HERO / BANNER */
/* One component for the top hero and every banner.

   <section class="hp-hero hp-hero--... " style="--hp-hero-...">
     <div class="hp-hero__media"> picture / still + video </div>
     <div class="hp-hero__txt">
       <div class="hp-hero__block">  eyebrow, h1, sub, .hp-ctas  </div>
       <div class="hp-hero__disc">  small print  </div>
     </div>
   </section>

   The block (text + buttons) is placed on the art by its CENTER point:
     --hp-hero-x-m / --hp-hero-y-m      phone   (% of the hero)
     --hp-hero-x-dt / --hp-hero-y-dt    desktop
   Other variables (all optional):
     --hp-hero-color            text color                      (#fff)
     --hp-hero-align-m / -dt    text-align                      (center)
     --hp-hero-w-m / -dt        block width                     (max-content)
     --hp-hero-h1-m / -dt       h1 size                         (8.53125em / 6.5625em)
     --hp-hero-sub-m / -dt      subhead size                    (2.7em / 1.6em)
     --hp-hero-sub-mr-m / -dt   subhead right inset, in em of the subhead (0)
     --hp-hero-gap-m / -dt      extra space between a plain subhead and the buttons (0)
     --hp-hero-disc-bottom-m/-dt  small print distance from bottom
     --hp-hero-disc-color       small print color               (the text color)
     --hp-link-size             size of an hp-cta--link         (.95rem)
*/

.hp-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}
.hp-hero__media img, .hp-hero__media video {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}

.hp-hero__txt {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: 1;
  color: var(--hp-hero-color, #fff);
  pointer-events: none;           /* only the text and buttons take clicks */
}
.hp-hero__block {
  position: absolute;
  left: var(--hp-hero-x-m, 50%);
  top: var(--hp-hero-y-m, 80%);
  transform: translate(-50%, -50%);
  width: var(--hp-hero-w-m, max-content);
  text-align: var(--hp-hero-align-m, center);
  pointer-events: auto;
}
.hp-hero__block .hp-ctas { width: 100%; }

.hp-hero__eyebrow {
  display: block;
  width: 100%;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 2.025em;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: normal;
}
.hp-hero__h1 {
  display: block;
  padding: 0;
  color: inherit;
  font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif);
  font-size: var(--hp-hero-h1-m, 8.53125em);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 0.88;
}
.hp-hero__sub {
  display: block;
  margin-right: var(--hp-hero-sub-mr-m, 0);
  padding: 0.5em 1em 0.6em;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: var(--hp-hero-sub-m, 2.7em);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
/* --plain: banner subhead (no padding, lighter) */
.hp-hero__sub--plain { padding: 0; font-weight: 500; letter-spacing: normal; line-height: 1.2; }
.hp-hero__h1 + .hp-ctas,
.hp-hero__sub + .hp-ctas { margin-top: 1em; }
.hp-hero__sub--plain + .hp-ctas { margin-top: var(--hp-hero-gap-m, 0); }

.hp-hero__disc {
  position: absolute;
  left: 0;
  bottom: var(--hp-hero-disc-bottom-m, 0);
  width: 100%;
  padding: 1em;
  color: var(--hp-hero-disc-color, inherit);
  font-family: poppins, sans-serif;
  font-size: 1.518em;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  z-index: 100;
  pointer-events: auto;
}
.hp-root .hp-hero__disc > a, .hp-root .hp-hero__disc > span {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .hp-hero__block {
    left: var(--hp-hero-x-dt, 50%);
    top: var(--hp-hero-y-dt, 70%);
    width: var(--hp-hero-w-dt, max-content);
    text-align: var(--hp-hero-align-dt, center);
  }
  .hp-hero__h1 { font-size: var(--hp-hero-h1-dt, 6.5625em); }
  .hp-hero__sub {
    margin-right: var(--hp-hero-sub-mr-dt, 0);
    padding: 1em 0 1.1em;
    font-size: var(--hp-hero-sub-dt, 1.6em);
    font-weight: 600;
    line-height: 1.2;
  }
  .hp-hero__sub--plain { padding: 0; font-weight: 500; line-height: 1.1; }
  .hp-hero__sub--plain + .hp-ctas { margin-top: var(--hp-hero-gap-dt, 0); }
  .hp-hero__disc { bottom: var(--hp-hero-disc-bottom-dt, 0); font-size: 0.8em; }
}


/* ---------------------------------------------------------------- 7. CATEGORY ROW */
/* Six tiles. Images 200px wide x any height (2x).  Scrolls sideways on phones. */

.hp-cats { margin: 0 0 4%; text-align: left; }
.hp-cats__inner { position: relative; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; text-align: center; }
.hp-cats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 3em 2.2em;
  width: 100%;
  height: auto;
  margin: 1.8em 0;
  padding: 0 0 0 2em;
  overflow-x: scroll;
  scrollbar-width: none;
}
.hp-cats__grid::-webkit-scrollbar { display: none; }
.hp-root a.hp-cat { display: block; position: relative; padding: 0 0 0.2em; font-size: 1.35em; text-decoration: none; }
.hp-root a.hp-cat > img { display: block; position: relative; width: auto; height: 330px; margin: 0; }
.hp-root .hp-cat__title {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.5em 0 0;
  overflow: hidden;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
@media (min-width: 1024px) {
  .hp-cats__inner { width: 90.2778%; }
  .hp-cats__grid { column-gap: 2em; margin: 0; padding: 0; overflow: hidden; }
  .hp-root a.hp-cat > img { width: 100%; height: auto; }
  .hp-root .hp-cat__title { padding: 0.9em 0 0; font-size: 1em; }
}


/* ---------------------------------------------------------------- 8. EDITORIAL TILES */
/* Two across on desktop, stacked on phones. Images 807px wide (2x).
   Each tile: still image, optional video over it, button below.            */

.hp-tiles { width: 100%; margin: 0 auto; padding-bottom: 5px; text-align: left; }
.hp-tiles__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: start;
  align-content: start;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  font-family: poppins, sans-serif;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  text-align: center;
}
.hp-root a.hp-tile { display: block; position: relative; height: auto; margin: 0; padding: 0; overflow: hidden; color: inherit; font-size: 1em; text-decoration: none; }
.hp-root .hp-tile__body { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-root .hp-tile__media { position: relative; width: 100%; margin: 0; padding: 0; }
.hp-root .hp-tile__media img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}
.hp-root .hp-tile__cta {
  display: inline-block;
  position: relative;
  top: calc(var(--hp-tile-lift, 60px) * -1);   /* lifts the button onto the image */
  z-index: 2;                                  /* stays above a video laid over the image */
  height: auto;
  margin: 0 0.4em;
  padding: 0 2.5em;
  overflow: hidden;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.3625em;
  font-weight: 600;
  line-height: 2.6;
  letter-spacing: normal;
  text-align: center;
  background-color: #fff;
  border: 0.08em solid transparent;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .hp-tiles { width: 97.4%; }
  .hp-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 2.8em 1.4em; }
  .hp-root .hp-tile__cta { --hp-tile-lift: 82px; font-size: 1em; }
}


/* ---------------------------------------------------------------- 9. FEATURED SHOPS */
/* Four tiles. Scrolls sideways on phones. */

.hp-featured { background: #fff; }
.hp-featured__inner {
  position: relative;
  width: 97.381%;
  height: auto;
  margin: 0 0 0 2.5em;
  padding: 0 0 1.9em;
  overflow: hidden;
}
.hp-featured__head { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; text-align: center; }
.hp-root .hp-featured__head .hp-title { padding: 0.7em 0.1em; }
.hp-featured__scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-featured__scroll::-webkit-scrollbar { display: none; }
.hp-featured__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  align-content: start;
  width: 260%;
  height: auto;
  margin: 0;
  padding: 0 3em 0 0;
}
.hp-root a.hp-featured__item { display: block; position: relative; margin: 0; padding: 0 0 0.2em; overflow: hidden; font-size: 1em; text-align: center; text-decoration: none; }
.hp-root .hp-featured__item > img { display: block; position: relative; width: 100%; height: auto; margin: 0; }
.hp-root .hp-featured__item > span {
  display: inline-block;
  padding: 1.4em 0;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 1024px) {
  .hp-featured__inner { width: 97.4%; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; margin: 0 auto; padding: 0 0 1.2em; }
  .hp-featured__head { width: 100%; padding: 0 0 1.3em; }
  .hp-root .hp-featured__head .hp-title { padding: 0.7em 0.1em 0.1em; }
  .hp-featured__scroll { width: 79.5%; overflow: hidden; }
  .hp-featured__grid { width: 100%; gap: 1.3em; padding: 0; }
  .hp-root .hp-featured__item > span { font-size: 1em; }
}


/* ---------------------------------------------------------------- 10. RECOMMENDED FOR YOU */

.hp-rfk__content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: visible; text-align: center; }
.hp-rfk__embed { position: relative; width: 100%; height: auto; min-height: 300px; margin: 6em 0 0; padding: 0; overflow: visible; }
@media (min-width: 1024px) {
  .hp-rfk__content { width: 91.4%; }
  .hp-rfk__embed { margin: 2em 0 0; }
}
/* Reflektion widget: keep its tiles laid out as a row */
.homepage .reflektion-tiles .reflektion-recommendations .reflection-rkid { display: -webkit-box; display: -ms-flexbox; display: flex; }


/* ---------------------------------------------------------------- 11. SOCIAL / CURALATE */

.hp-social { padding: 10em 0 4em; }
.hp-social__content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: visible; text-align: center; }
.hp-social__embed { position: relative; width: 100%; height: auto; min-height: 300px; margin: 5em 0 0; padding: 0; overflow: visible; }
.hp-social .hp-ctas { margin-top: 4.5em; padding: 2em; }
.hp-root .hp-social a.hp-cta--outline { margin-bottom: 1em; }
@media (min-width: 1024px) {
  .hp-social { padding: 4em 0; }
  .hp-root .hp-social__content > .hp-title { padding: 0; }
  .hp-social__embed { margin: 2em 0 0; }
  .hp-social .hp-ctas { margin-top: 2.8em; padding: 0; }
  .hp-root .hp-social a.hp-cta--outline { margin: 0 1.4em; }
}


/* ---------------------------------------------------------------- 12. CHARITY BAR */
/* Default 3 items. Add hp-charity--2 or hp-charity--4 for 2 or 4.
   Logos 2x, cropped 550px x 130px. */

.hp-charity { background-color: #fff4f4; }
.hp-charity__content { position: relative; width: 92.8%; height: auto; margin: 0 auto; padding: 2.7em 0 3.5em; overflow: hidden; }
.hp-charity__item { position: relative; width: 100%; height: auto; margin: 0; padding: 5.2em 0 4.2em; overflow: hidden; text-align: center; }
.hp-charity__item:not(:last-of-type) { border-bottom: 1px solid #bfbfbf; }
.hp-charity__item:first-of-type { padding-top: 2em; }
.hp-charity__item > img { display: block; position: relative; width: 80%; height: auto; margin: 0 auto 0.4em; }
.hp-charity__item > p {
  padding-bottom: 0.8em;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .hp-charity__content { width: 100%; display: flex; flex-flow: row; justify-content: center; align-items: center; padding: 2.8em 0; }
  .hp-charity__item { width: 33.33%; padding: 0; }
  .hp-charity--2 .hp-charity__item { width: 50%; }
  .hp-charity--4 .hp-charity__item { width: 25%; }
  .hp-charity__item:not(:last-of-type) { border-right: 1px solid #bfbfbf; border-bottom: 0 none; }
  .hp-charity__item:first-of-type { padding-top: 0; }
  .hp-charity__item > img { width: 17.2em; }
  .hp-charity__item > p { font-size: 1em; }
}


/* ---------------------------------------------------------------- 13. VIDEO */
/* Videos replace GIFs. A still image always sits under the video, so the page
   paints at once and the video plays over it once it has loaded.

   Put the file in  <source data-src="...mp4">  (NOT src). The JS loads it
   when the video is near the screen, and only on the breakpoint that shows it.

   hp-video              wrapper for a video that stands alone
   hp-video--overlay     wrapper laid over a still image
   hp-video__m           video shown on phones only
   hp-video__dt          video shown on desktop only
   (no __m / __dt        one video for both)                                   */

.hp-video { position: relative; width: 100%; margin: 0; padding: 0; }
.hp-video--overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.hp-video video { display: block; width: 100%; height: auto; margin: 0; }
.hp-video--overlay video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.hp-video video.hp-video__dt { display: none; }
@media (min-width: 1024px) {
  .hp-video video.hp-video__m { display: none; }
  .hp-video video.hp-video__dt { display: block; }
}
.hp-hero__media .hp-video--overlay { z-index: 1; }


/* ---------------------------------------------------------------- 14. OFFER HEROES (hp-ko-*) */
/* Live text on art: the promo templates 2-25 of the LOFT templates page.
   One section per template, named by family:  hp-ko-bmsm, hp-ko-1 ... hp-ko-12,
   hp-ko-16/17/18, hp-ko-toggle5, hp-ko-split, hp-ko-split2.  (Old names: g3-hero--ko-1 etc.)

   <section class="hp-ko-3 hp-ko--right hp-ko--m-center" style="background-color:#..; color:#fff">
     <div class="hp-abs"><div class="hp-content">
       <div class="hp-ko-3__txt"><div class="hp-vcenter"><div> brow, eyebrow, .hp-offer, coupon, .hp-ctas </div></div>
         <div class="hp-disclaimer--fixed">...</div></div>
       <div class="hp-ko__media"> picture / video </div>
     </div></div>
   </section>

   Text block position:   hp-ko--left | --right | --center          (desktop)
   Phone text alignment:  hp-ko--m-left | --m-right | --m-center
   Height:  the art sets the ratio. Override with --hp-ko-h-m / --hp-ko-h-dt (padding-top %) on the section.
   Text and background colors go on the section's style="". */

/* shared structure */
.hp-content { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko__media { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; z-index: -1; }
.hp-ko__media img, .hp-ko__media video { display: block; position: relative; width: 100%; height: auto; margin: 0; }
.hp-ko-16 .hp-ko__media, .hp-ko-17 .hp-ko__media, .hp-ko-18 .hp-ko__media { height: auto; }
.hp-vcenter { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-vcenter > div { text-align: center; }
.hp-offer { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: visible; text-align: center; }
.hp-root sub { bottom: 0; }
.hp-abs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; overflow: hidden; }

/* type helpers */
.hp-knockout { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); }
.hp-stroke--black-white { -webkit-text-stroke: 0.01em #000; color: #fff; }
.hp-stroke--black-transparent { -webkit-text-stroke: 0.01em #000; color: transparent; }
.hp-stroke--white-black { -webkit-text-stroke: 0.01em #fff; color: #000; }
.hp-stroke--white-transparent { -webkit-text-stroke: 0.01em #fff; color: transparent; }
.hp-stroke--dk-grey-lt-grey { -webkit-text-stroke: 0.01em #1f1b08; color: #acc0f4; }
.hp-stroke--dk-grey-transparent { -webkit-text-stroke: 0.01em #1f1b08; color: transparent; }
.hp-plus { display: inline-block; margin: 0; padding: 0; }
.hp-plus::before { content: "+"; display: inline; }
.hp-eyebrow--knockout { display: block; color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 4.05em; font-weight: 700; line-height: normal; letter-spacing: 0.02em; width: 100%; }
.hp-eyebrow--poppins { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.025em; font-weight: 500; line-height: 1.6; letter-spacing: normal; width: 100%; }
.hp-brow-2 { font-size: 2em; font-weight: 300; display: block; margin-top: -5px; }
.hp-brow-3 { font-size: 2em; font-weight: 300; display: block; }
.hp-coupon { display: inline-block; position: relative; width: 100%; font-family: poppins, sans-serif; font-size: 2.025em; font-weight: 500; line-height: 1.7; letter-spacing: 0.02em; }
.hp-coupon a { color: inherit; text-decoration: underline; }
.hp-disclaimer--fixed { display: block; position: absolute; width: 100%; bottom: 0; left: 0; padding: 1em; color: inherit; font-family: poppins, sans-serif; font-size: 1.518em; font-weight: 500; letter-spacing: normal; line-height: normal; z-index: 100; text-align: center; }
.hp-disclaimer--fixed > a, .hp-disclaimer--fixed > span { display: inline-block; color: inherit; text-decoration: underline; text-underline-offset: 0.1em; cursor: pointer; }
.hp-disclaimer--fixed.hp-text--right { text-align: right; }
.hp-disclaimer--fixed.hp-text--left { text-align: left; }
.hp-pct-stack--knockout sup { position: relative; color: inherit; font-family: inherit; font-size: 0.58em; font-weight: 700; line-height: 0.8; letter-spacing: 0.02em; vertical-align: text-top; }
.hp-pct-stack--knockout sub { position: relative; color: inherit; font-family: inherit; font-size: 0.34em; font-weight: 700; line-height: 0.8; letter-spacing: 0.02em; }
span.hp-pct-stack--knockout { display: inline-grid; grid-template-columns: 1fr; text-align: center; vertical-align: 0.27em; }
.hp-pct-stack--knockout sub > sup, .hp-pct-stack--knockout sup > sup { position: absolute; font-size: 0.4em; }
sup.hp-dollar-sup { font-size: 0.6em; }
.hp-h1--lg { font-size: 1.375em; display: block; }
.hp-plus--ff { display: inline-flex; flex-flow: row; justify-content: center; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 1024px) {
  .hp-eyebrow--knockout { font-size: 2.91em; }
  .hp-brow-2 { font-size: 1.4em; }
  .hp-brow-3 { font-size: 1.6em; }
  .hp-coupon { font-size: 1.164em; }
  .hp-disclaimer--fixed { font-size: 0.8em; }
  .hp-h1--lg { font-size: 1.353em; }
}

/* button variants used by the offer heroes */
a.hp-cta--narrow, span.hp-cta--narrow { padding-left: 0.6em; padding-right: 0.6em; margin: 0 0.2em; }
a.hp-cta.hp-cta--narrow, span.hp-cta.hp-cta--narrow, a.hp-cta--outline.hp-cta--narrow, span.hp-cta--outline.hp-cta--narrow { padding-left: 2em; padding-right: 2em; }
.hp-root .hp-ctas--mobile-stack a, .hp-root .hp-ctas--mobile-stack span { margin-top: 0.21em; margin-bottom: 0.2em; }
@media (max-width: 1023px) { .hp-root a.hp-cta.hp-cta--m-sm, .hp-root a.hp-cta--m-sm { font-size: 2.025em; line-height: 2.3; padding: 0 1.7em; } }
@media (min-width: 1024px) {
  a.hp-cta--narrow, span.hp-cta--narrow { margin: 0 0.5em; }
  .hp-root .hp-ctas--mobile-stack a, .hp-root .hp-ctas--mobile-stack span { margin-top: 0; margin-bottom: 0; }
}


/* ---- hp-ko-bmsm  (old: hero--bmsm, template 2) 1/3 text block, split offer ---- */
section.hp-ko-bmsm { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-bmsm::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 108%); }
.hp-ko-bmsm__txt { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0; overflow: hidden; }
.hp-ko-bmsm__txt .hp-vcenter { text-align: center; }
.hp-ko-bmsm .hp-eyebrow--knockout small { display: inline-block; line-height: 100%; font-size: 0.686em; vertical-align: 0.13em; }
.hp-ko-bmsm h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 12.69em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-bmsm .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.645em; font-weight: 500; line-height: 1.3; letter-spacing: normal; }
.hp-ko-bmsm .hp-offer-sep { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.53em; font-weight: 500; line-height: 2.5; letter-spacing: normal; }
.hp-ko-bmsm .hp-offer--split { position: relative; display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); justify-content: space-evenly; margin: 0.5em 0 0; padding: 0; overflow: hidden; }
.hp-ko-bmsm .hp-offer--split > div { position: relative; margin: 0; padding: 0.4em 0; overflow: hidden; }
.hp-ko-bmsm .hp-offer--split > div:first-of-type { border-right: 2px solid; }
.hp-ko-bmsm h2 { color: inherit; font-family: poppins, sans-serif; font-size: 4.3875em; font-weight: 500; line-height: 1.1; letter-spacing: normal; }
.hp-ko-bmsm .hp-h2-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.025em; font-weight: 500; line-height: 1; letter-spacing: normal; }
.hp-ko-bmsm .hp-coupon { width: 100%; font-weight: 500; margin-top: 1.5em; }
.hp-ko-bmsm .hp-ctas { margin-top: 2em; }
.hp-ko-bmsm .hp-cta { width: 9.5em; }
@media (min-width: 1024px) {
  .hp-ko-bmsm::before { padding-top: var(--hp-ko-h-dt, 42.917%); }
  .hp-ko-bmsm.hp-ko--left .hp-ko-bmsm__txt { left: 0; right: auto; margin: 0; }
  .hp-ko-bmsm.hp-ko--right .hp-ko-bmsm__txt { left: auto; right: 0; margin: 0; }
  .hp-ko-bmsm.hp-ko--center .hp-ko-bmsm__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-bmsm__txt { width: 33%; }
  .hp-ko-bmsm small { padding-bottom: 0.5em; }
  .hp-ko-bmsm h1 { font-size: 9em; }
  .hp-ko-bmsm .hp-h1-subhead { font-size: 2.44em; line-height: 1; }
  .hp-ko-bmsm .hp-offer-sep { font-size: 1.8624em; line-height: 2.7; }
  .hp-ko-bmsm .hp-offer--split { margin: 0; }
  .hp-ko-bmsm .hp-offer--split > div { padding: 0; }
  .hp-ko-bmsm .hp-offer--split > div:first-of-type { border-right: 1px solid; }
  .hp-ko-bmsm h2 { font-size: 2.56em; }
  .hp-ko-bmsm .hp-h2-subhead { font-size: 1.455em; }
  .hp-ko-bmsm .hp-coupon { margin-top: 2.5em; }
  .hp-ko-bmsm .hp-ctas { margin-top: 3em; }
  .hp-ko-bmsm .hp-cta { width: 11em; }
}

/* ---- hp-ko-toggle5  (old: hero--toggle-five, template 12) headline + price list ---- */
.hp-ko-toggle5::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 106.67%); }
.hp-ko-toggle5__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-toggle5__txt .hp-eyebrow--knockout { font-size: 2.278em; margin-bottom: 0.6em; }
.hp-ko-toggle5 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 8.86em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-toggle5 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 0.327em; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; margin-top: 0.6em; }
.hp-ko-toggle5 .hp-vcenter .hp-coupon { color: #000; font-size: 1.6875em; margin-top: 0; }
.hp-ko-toggle5 .hp-vcenter .hp-ctas { display: flex; flex-flow: wrap; justify-content: center; align-items: center; width: 100%; margin: 1.4em auto 0; text-align: center; }
.hp-ko-toggle5 a.hp-cta { width: 43.3%; margin: 0 0.45em 0.9em; padding: 0; }
.hp-ko-toggle5 .hp-disclaimer--fixed { color: #000; text-transform: none; }
@media (min-width: 1024px) {
  .hp-ko-toggle5::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-toggle5__txt { width: 100%; }
  .hp-ko-toggle5__txt .hp-eyebrow--poppins { font-size: 1.6em; }
  .hp-ko-toggle5 .hp-vcenter h1 { font-size: 6.18375em; }
  .hp-ko-toggle5 .hp-vcenter .hp-h1-subhead { font-size: 0.33em; }
  .hp-ko-toggle5 .hp-vcenter .hp-coupon { margin-top: 1.5em; font-size: 1em; }
  .hp-ko-toggle5 .hp-vcenter .hp-ctas { margin: 2em auto 0; }
  .hp-ko-toggle5 a.hp-cta { width: 11.625em; margin: 0 0.5em; }
  .hp-ko-toggle5 .hp-disclaimer--fixed { text-transform: uppercase; }
}

/* ---- hp-ko-1  (old: hero--ko-1, template 3) big % knockout, text block 50% ---- */
.hp-ko-1::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 100%); }
.hp-ko-1__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-1__txt .hp-eyebrow--knockout { font-size: 4.3875em; margin-bottom: 0.3em; }
.hp-ko-1 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 24.13em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-1 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.04em; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-1 .hp-vcenter .hp-h1-subhead:first-child { margin-bottom: -0.6em; }
.hp-ko-1 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; }
.hp-ko-1 .hp-vcenter .hp-coupon { margin-top: 1.4em; }
.hp-ko-1 .hp-vcenter .hp-ctas { margin-top: 2.4em; }
@media (max-width: 1023px) {
  .hp-ko-1.hp-ko--m-left::before, .hp-ko-1.hp-ko--m-right::before { padding-top: var(--hp-ko-h-m, 117.33%); }
  .hp-ko-1.hp-ko--m-left .hp-ko-1__txt { width: 60%; left: 0; right: auto; }
  .hp-ko-1.hp-ko--m-right .hp-ko-1__txt { width: 60%; right: 0; left: auto; }
  .hp-ko-1.hp-ko--m-left .hp-h1-subhead, .hp-ko-1.hp-ko--m-right .hp-h1-subhead { font-weight: 700; }
  .hp-ko-1.hp-ko--m-left .hp-eyebrow--knockout, .hp-ko-1.hp-ko--m-right .hp-eyebrow--knockout { font-size: 3.375em; padding-bottom: 0.2em; }
  .hp-ko-1.hp-ko--m-left .hp-coupon, .hp-ko-1.hp-ko--m-right .hp-coupon { font-size: 2.025em; }
  .hp-ko-1.hp-ko--m-left .hp-cta, .hp-ko-1.hp-ko--m-right .hp-cta { padding: 0 1.6em; margin-bottom: 0.9em; }
}
@media (min-width: 1024px) {
  .hp-ko-1::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-1__txt { width: 50%; }
  .hp-ko-1.hp-ko--left .hp-ko-1__txt { left: 0; right: auto; }
  .hp-ko-1.hp-ko--right .hp-ko-1__txt { right: 0; left: auto; }
  .hp-ko-1.hp-ko--center .hp-ko-1__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-1__txt .hp-eyebrow--knockout { font-size: 2.6em; }
  .hp-ko-1 .hp-vcenter h1 { font-size: 19.5em; }
  .hp-ko-1 .hp-vcenter .hp-h1-subhead { font-size: 2.1825em; }
  .hp-ko-1 .hp-vcenter .hp-h1-subhead:first-child { margin-bottom: -0.8em; }
  .hp-ko-1 .hp-vcenter .hp-h1-subhead:last-child { margin-top: -0.4em; }
  .hp-ko-1 .hp-vcenter .hp-coupon { margin-top: 1.2em; font-size: 1.164em; }
  .hp-ko-1 .hp-vcenter .hp-ctas { margin-top: 1.8em; }
}

/* ---- hp-ko-2  (old: hero--ko-2, template 4) art sets the height; text block 60% / 33% ---- */
.hp-ko-2__txt { position: absolute; width: 60%; height: 100%; right: 0; top: 0; margin: 0; padding: 0 0 1em; overflow: hidden; }
.hp-ko-2__txt .hp-eyebrow--knockout { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 4em; letter-spacing: 0.03em; padding-bottom: 0.2em; }
.hp-ko-2 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 12em; font-weight: 700; letter-spacing: 0.025em; line-height: 0.88; padding: 0; }
.hp-ko-2 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3em; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; }
.hp-ko-2 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0.3em; }
.hp-ko-2 .hp-vcenter .hp-coupon { line-height: 1.3; letter-spacing: 0.02em; margin-top: 0.3em; padding-bottom: 0.5em; }
.hp-ko-2 .hp-vcenter .hp-ctas { margin-top: 0.8em; }
.hp-ko-2 .hp-vcenter a:not(:last-of-type) { margin-bottom: 0.5em; }
.hp-ko-2 .hp-disclaimer--fixed { font-size: 1.6875em; font-weight: 500; line-height: 1.2; }
.hp-ko-2.hp-ko--left .hp-ko-2__txt { left: 0; right: auto; }
.hp-ko-2.hp-ko--right .hp-ko-2__txt { right: 0; left: auto; }
.hp-ko-2.hp-ko--center .hp-ko-2__txt { left: 0; right: 0; margin: 0 auto; }
@media (max-width: 1024px) {
  .hp-ko-2.hp-ko--m-left .hp-ko-2__txt { left: 0; right: auto; }
  .hp-ko-2.hp-ko--m-right .hp-ko-2__txt { right: 0; left: auto; }
  .hp-ko-2.hp-ko--m-center .hp-ko-2__txt { left: 0; right: 0; margin: 0 auto; width: 100%; }
  .hp-ko-2.hp-ko--m-center .hp-vcenter a:not(:last-of-type) { margin-bottom: 0; }
}
@media (min-width: 1024px) {
  .hp-ko-2__txt { width: 33.3%; }
  .hp-ko-2__txt .hp-eyebrow--knockout { font-size: 2.6em; }
  .hp-ko-2 .hp-vcenter h1 { font-size: 9em; }
  .hp-ko-2 .hp-vcenter .hp-h1-subhead { font-size: 2.1825em; line-height: 1.2; }
  .hp-ko-2 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; }
  .hp-ko-2 .hp-vcenter .hp-coupon { margin-top: 2em; }
  .hp-ko-2 .hp-vcenter .hp-ctas { margin-top: 1em; }
  .hp-ko-2 .hp-vcenter a:not(:last-of-type) { margin-bottom: 0; }
  .hp-ko-2 .hp-disclaimer--fixed { font-size: 0.8em; }
}

/* ---- hp-ko-3  (old: hero--ko-3, template 5) poppins eyebrow, outlined or solid %; hp-33-66 = 1/3 text ---- */
.hp-ko-3::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 114%); }
.hp-ko-3__txt { position: absolute; width: 100%; height: 100%; right: 0; top: 0; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-3 .hp-vcenter .hp-eyebrow--poppins { font-size: 2.53em; letter-spacing: 0.01em; }
.hp-ko-3 .hp-vcenter h1 { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 16.2em; font-weight: 700; letter-spacing: 0.04em; margin-top: 0.15em; line-height: 0.82; }
.hp-ko-3 .hp-vcenter .hp-h1-subhead { position: relative; display: block; margin: 0; font-family: poppins, sans-serif; font-size: 3.04em; font-weight: 500; line-height: 1.1; letter-spacing: 0.01em; }
.hp-ko-3 .hp-vcenter .hp-coupon { margin-top: 1em; }
.hp-ko-3 .hp-vcenter .hp-cta, .hp-ko-3 .hp-vcenter .hp-cta--outline { margin-top: 1.5em; }
@media (max-width: 1023px) {
  .hp-ko-3 .hp-vcenter h1.hp-size-lock--m { font-size: 12em; }
  .hp-ko-3.hp-ko--m-left .hp-ko-3__txt { width: 60%; left: 0; right: auto; }
  .hp-ko-3.hp-ko--m-right .hp-ko-3__txt { width: 60%; right: 0; left: auto; }
  .hp-ko-3.hp-ko--m-center .hp-ko-3__txt { width: 100%; left: 0; right: auto; }
}
@media (min-width: 1024px) {
  .hp-ko-3::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-3__txt { width: 50%; }
  .hp-ko-3.hp-33-66 .hp-ko-3__txt { width: 33.333%; }
  .hp-ko-3 .hp-vcenter .hp-eyebrow--poppins { font-size: 1.455em; }
  .hp-ko-3.hp-ko--left .hp-ko-3__txt { left: 0; right: auto; }
  .hp-ko-3.hp-ko--right .hp-ko-3__txt { right: 0; left: auto; }
  .hp-ko-3.hp-ko--center .hp-ko-3__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-3 .hp-vcenter h1 { font-size: 9.3em; line-height: 0.88; }
  .hp-ko-3 .hp-vcenter h1.hp-size-lock--dt { font-size: 9.3em; }
  .hp-ko-3 .hp-vcenter .hp-h1-subhead { font-size: 1.746em; }
}

/* ---- hp-ko-4  (old: hero--ko-4, template 6) giant % with asterisk (hp-ast) ---- */
.hp-ko-4::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 100%); }
.hp-ko-4__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-4__txt .hp-eyebrow--poppins { font-size: 2.53em; letter-spacing: 0.01em; }
.hp-ko-4 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 24.13em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-4 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 6.1em; font-weight: 700; line-height: 1; letter-spacing: 0.05em; margin-top: -0.2em; }
.hp-ko-4 .hp-vcenter .hp-coupon { margin-top: 1.4em; }
.hp-ko-4 .hp-vcenter .hp-ctas { margin: 2.4em 0; }
.hp-ko-4 .hp-vcenter .hp-cta { border: 1px solid; }
@media (min-width: 1024px) {
  .hp-ko-4::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-4__txt { width: 33.3%; }
  .hp-ko-4__txt .hp-offer { margin-top: -1em; }
  .hp-ko-4.hp-ko--left .hp-ko-4__txt { left: 0; right: auto; }
  .hp-ko-4.hp-ko--right .hp-ko-4__txt { right: 0; left: auto; }
  .hp-ko-4.hp-ko--center .hp-ko-4__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-4__txt .hp-eyebrow--poppins { font-size: 1.746em; }
  .hp-ko-4 .hp-vcenter h1 { font-size: 23.28em; }
  .hp-ko-4 span.hp-pct-stack--knockout { font-size: 0.9em; vertical-align: 0.29em; }
  .hp-ko-4 .hp-vcenter .hp-h1-subhead { font-size: 5.587em; margin-top: -0.45em; }
  .hp-ko-4 .hp-vcenter .hp-coupon { margin-top: 0.7em; font-size: 1.2em; }
  .hp-ko-4 .hp-vcenter .hp-ctas { margin: 1.4em 0; }
}

/* ---- hp-ko-5  (old: hero--ko-5, template 7) two offers joined by a plus ---- */
.hp-ko-5::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 106.7%); }
.hp-ko-5__txt { position: absolute; width: 100%; height: 100%; right: 0; top: 0; margin: 0; padding: 0 0 5em; overflow: hidden; }
.hp-ko-5 .hp-vcenter > div { padding-bottom: 1em; }
.hp-ko-5__txt .hp-eyebrow--poppins { font-size: 2.3625em; font-weight: 500; letter-spacing: 0.05em; padding-bottom: 1em; }
.hp-ko-5 h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 9.7em; font-weight: 700; letter-spacing: 0.025em; line-height: 1; padding: 0; }
.hp-ko-5 h1 > .hp-plus { display: block; font-family: poppins, sans-serif; font-size: 0.45em; font-weight: 500; line-height: 0.6; margin: 0.6em 0 0.22em; }
.hp-ko-5 h1 > small { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 0.36em; font-weight: 500; line-height: 1.1; letter-spacing: normal; padding-top: 0; }
.hp-ko-5 .hp-vcenter .hp-coupon { line-height: 1.3; letter-spacing: 0.02em; margin-top: 1.2em; padding-bottom: 0.6em; }
.hp-ko-5 .hp-vcenter .hp-ctas { margin-top: 2.6em; }
.hp-ko-5 .hp-disclaimer--fixed { font-size: 1.6875em; font-weight: 500; line-height: 1.2; padding-bottom: 2em; }
.hp-ko-5.hp-ko--left .hp-ko-5__txt { left: 0; right: auto; }
.hp-ko-5.hp-ko--right .hp-ko-5__txt { right: 0; left: auto; }
.hp-ko-5.hp-ko--center .hp-ko-5__txt { left: 0; right: 0; margin: 0 auto; }
@media (max-width: 1024px) {
  .hp-ko-5.hp-ko--m-left .hp-ko-5__txt { left: 0; right: auto; width: 60%; }
  .hp-ko-5.hp-ko--m-right .hp-ko-5__txt { right: 0; left: auto; width: 60%; }
  .hp-ko-5.hp-ko--m-left .hp-ctas a:not(:last-of-type), .hp-ko-5.hp-ko--m-right .hp-ctas a:not(:last-of-type) { margin-bottom: 1em; }
  .hp-ko-5.hp-ko--m-center .hp-ko-5__txt { left: 0; right: 0; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .hp-ko-5::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-5__txt { width: 33.3%; padding-bottom: 0; }
  .hp-ko-5__txt .hp-eyebrow--poppins { font-size: 1.7em; padding-bottom: 0.9em; }
  .hp-ko-5__txt .hp-brow-2 { font-size: 1.2em; }
  .hp-ko-5 .hp-vcenter h1 { font-size: 5.3835em; line-height: 1; }
  .hp-ko-5 .hp-vcenter h1 > .hp-plus { font-size: 0.7em; margin: 0.2em 0 0; line-height: 0.8; }
  .hp-ko-5 .hp-vcenter .hp-coupon { margin-top: 2.2em; }
  .hp-ko-5 .hp-vcenter .hp-ctas { margin-top: 1.6em; }
  .hp-ko-5 .hp-disclaimer--fixed { font-size: 0.8em; padding-bottom: 1em; }
}

/* ---- hp-ko-6  (old: hero--ko-6, templates 9 and 22) % knockout with stacked poppins/knockout sub-offer; hp-50-50 = half width ---- */
.hp-ko-6__inner { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-6__inner::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 110%); }
.hp-ko-6__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-6__txt .hp-eyebrow--knockout { font-size: 4.978em; line-height: 0.9; margin-bottom: -0.1em; }
.hp-eyebrow--knockout small { display: block; font-size: 0.61em; }
.hp-ko-6 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 24.64em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-6 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.43em; font-weight: 600; line-height: 0.9; letter-spacing: 0.02em; margin-top: -0.75em; }
.hp-ko-6 .hp-vcenter .hp-subhead--poppins { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 8.33em; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-6 .hp-vcenter .hp-subhead--knockout { display: block; color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 8.33em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-6 .hp-vcenter .hp-plus { font-size: 2.868em; }
.hp-ko-6 .hp-vcenter .hp-coupon { margin-top: 1em; }
.hp-ko-6 .hp-vcenter .hp-ctas { margin-top: 2em; padding-bottom: 3em; }
.hp-ko-6 .hp-vcenter .hp-cta { border: 1px solid; }
@media (min-width: 1024px) {
  .hp-ko-6 > picture { display: none; }
  .hp-ko-6__inner::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-6__txt { width: 40.4%; }
  .hp-ko-6.hp-50-50 .hp-ko-6__txt { width: 50%; }
  .hp-ko-6.hp-ko--left .hp-ko-6__txt { left: 0; right: auto; }
  .hp-ko-6.hp-ko--right .hp-ko-6__txt { right: 0; left: auto; }
  .hp-ko-6.hp-ko--center .hp-ko-6__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-6__txt .hp-eyebrow--knockout { font-size: 4.074em; margin-bottom: 0; }
  .hp-eyebrow--knockout small { font-size: 0.625em; }
  .hp-ko-6 .hp-vcenter h1 { font-size: 17.68em; margin: -4% 0 0; }
  .hp-ko-6 .hp-vcenter .hp-plus { font-size: 2.07em; padding: 6px 0 0; }
  .hp-ko-6 .hp-vcenter .hp-h1-subhead { font-size: 2.6em; margin-top: -0.8em; line-height: 1; }
  .hp-ko-6 .hp-vcenter .hp-subhead--poppins { font-size: 4.8em; line-height: 1.1; }
  .hp-ko-6 .hp-vcenter .hp-subhead--knockout { font-size: 4.8em; line-height: 1; }
  .hp-ko-6 .hp-vcenter .hp-coupon { margin-top: 0; }
  .hp-ko-6 .hp-vcenter .hp-ctas { margin-top: 0.7em; padding-bottom: 1.7em; }
}

/* ---- hp-ko-7  (old: hero--ko-7, template 11) two lines (h1 + h2) ---- */
.hp-ko-7::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 106.6%); }
.hp-ko-7__txt { position: absolute; width: 100%; height: 100%; right: 0; top: 0; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-7 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 9.396em; font-weight: 700; letter-spacing: 0.025em; line-height: 0.92; padding: 0 0 0.1em; }
.hp-ko-7 .hp-vcenter h1 > small { display: block; line-height: 1; font-size: 0.63em; }
.hp-ko-7 .hp-vcenter h2 { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.9em; font-weight: 600; line-height: 1.2; letter-spacing: normal; margin-top: 0.35em; }
.hp-ko-7 .hp-vcenter .hp-coupon { font-size: 1.6875em; line-height: 1.3; letter-spacing: 0.02em; margin-top: 1.2em; padding-bottom: 0.6em; }
.hp-ko-7 .hp-vcenter .hp-ctas { padding-top: 1em; padding-bottom: 0; }
.hp-ko-7 .hp-vcenter .hp-cta { border: 1px solid; background-color: #f2f2f1; }
.hp-ko-7 .hp-disclaimer--fixed { font-size: 1.6875em; font-weight: 500; line-height: 1.2; padding-bottom: 0.5em; }
@media (min-width: 1024px) {
  .hp-ko-7::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-7__txt { width: 38%; }
  .hp-ko-7 .hp-vcenter h1 { font-size: 7.83em; }
  .hp-ko-7 .hp-vcenter h2 { font-size: 2.4em; line-height: 1.5; }
  .hp-ko-7 .hp-vcenter .hp-coupon { font-size: 1em; margin-top: 0.6em; }
  .hp-ko-7 .hp-disclaimer--fixed { font-size: 0.8em; padding-bottom: 1em; }
  .hp-ko-7.hp-ko--left .hp-ko-7__txt { left: 0; right: auto; }
  .hp-ko-7.hp-ko--right .hp-ko-7__txt { right: 0; left: auto; }
  .hp-ko-7.hp-ko--center .hp-ko-7__txt { left: 0; right: 0; margin: 0 auto; }
}

/* ---- hp-ko-8  (old: hero--ko-8, template 13) h1 + h2 + sub-title ---- */
.hp-ko-8::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 114%); }
.hp-ko-8__txt { position: absolute; width: 100%; height: 100%; right: 0; top: 0; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-8 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 11.4187em; font-weight: 700; letter-spacing: 0.027em; line-height: 0.84; padding: 0.05em 0 0.1em; }
.hp-ko-8 .hp-vcenter h1 > small { display: block; line-height: 1; font-size: 0.63em; }
.hp-ko-8 .hp-vcenter h2 { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.9em; font-weight: 600; line-height: 1.2; letter-spacing: normal; margin-top: 0.35em; }
.hp-ko-8 .hp-vcenter .hp-sub-title { display: inline-block; color: inherit; font-family: poppins, sans-serif; font-size: 2.41625em; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; margin-top: 0.3em; }
.hp-ko-8 .hp-vcenter .hp-ctas { padding-top: 4em; padding-bottom: 1em; }
.hp-ko-8 .hp-vcenter .hp-cta { background-color: #f2f2f1; }
.hp-ko-8 .hp-vcenter .hp-sub-title + .hp-ctas { margin-top: -1.4em; }
.hp-ko-8 .hp-disclaimer--fixed { color: #fff; font-size: 1.6875em; font-weight: 500; line-height: 1.2; padding-bottom: 1em; }
@media (max-width: 1023px) {
  .hp-ko-8 .hp-brow-2 { font-size: 2em; }
  .hp-ko-8.hp-ko--m-left .hp-ko-8__txt { width: 60%; left: 0; right: auto; }
  .hp-ko-8.hp-ko--m-right .hp-ko-8__txt { width: 60%; right: 0; left: auto; }
  .hp-ko-8.hp-ko--m-center .hp-ko-8__txt { width: 100%; left: 0; right: auto; }
  .hp-ko-8.hp-ko--m-left .hp-ko-8__txt .hp-cta, .hp-ko-8.hp-ko--m-right .hp-ko-8__txt .hp-cta { margin-bottom: 1em; }
}
@media (min-width: 1024px) {
  .hp-ko-8::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-8__txt { width: 50%; }
  .hp-ko-8 .hp-vcenter h1 { font-size: 7.5em; line-height: 0.88; padding: 0 0 0.1em; }
  .hp-ko-8 .hp-vcenter h2 { font-size: 2.4em; line-height: 1.5; }
  .hp-ko-8 .hp-vcenter .hp-sub-title { font-size: 1.5em; line-height: 1.2; margin-top: -0.2em; margin-bottom: -0.5em; }
  .hp-ko-8 .hp-vcenter .hp-ctas { padding-top: 1.5em; padding-bottom: 1em; }
  .hp-ko-8 .hp-vcenter .hp-sub-title + .hp-ctas { margin-top: 0; }
  .hp-ko-8 .hp-disclaimer--fixed { color: #000; font-size: 0.8em; padding-bottom: 2.4em; }
  .hp-ko-8.hp-ko--left .hp-ko-8__txt { left: 0; right: auto; }
  .hp-ko-8.hp-ko--right .hp-ko-8__txt { right: 0; left: auto; }
  .hp-ko-8.hp-ko--center .hp-ko-8__txt { left: 0; right: 0; margin: 0 auto; }
}

/* ---- hp-ko-9  (old: hero--ko-9, template 14) knockout % with the star (hp-plus--ff) ---- */
.hp-ko-9__inner { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-9__inner::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 110%); }
.hp-ko-9__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-9__txt .hp-eyebrow--knockout { font-size: 4.4375em; line-height: 0.9; margin-bottom: -0.3em; }
.hp-ko-9__txt .hp-plus--ff { width: 0.55em; height: 0.6em; }
.hp-ko-9__txt .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 24.9375em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-9__txt .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 3.47187em; font-weight: 500; line-height: 1; letter-spacing: normal; margin-top: -0.7em; }
.hp-ko-9__txt .hp-h1-subhead small { font-size: 0.6634em; }
.hp-ko-9 .hp-vcenter .hp-plus { font-size: 2.868em; }
.hp-ko-9 .hp-vcenter .hp-coupon { margin-top: 1.3em; line-height: 1.2; }
.hp-ko-9 .hp-vcenter .hp-ctas { margin-top: 3.2em; padding-bottom: 2em; }
.hp-ko-9 a.hp-cta--outline { margin: 0 0 0.4em; }
@media (max-width: 1023px) {
  .hp-ko-9.hp-ko--m-left .hp-ko-9__txt { width: 62%; left: 0; right: auto; }
  .hp-ko-9.hp-ko--m-right .hp-ko-9__txt { width: 62%; right: 0; left: auto; }
  .hp-ko-9.hp-ko--m-left .hp-cta.hp-cta:not(:last-of-type), .hp-ko-9.hp-ko--m-right .hp-cta.hp-cta:not(:last-of-type) { margin-bottom: 0.9em; }
}
@media (min-width: 1024px) {
  .hp-ko-9 > picture { display: none; }
  .hp-ko-9__inner::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-9__txt { width: 50%; }
  .hp-ko-9.hp-ko--left .hp-ko-9__txt { left: 0; right: auto; width: 34%; }
  .hp-ko-9.hp-ko--right .hp-ko-9__txt { right: 0; left: auto; width: 34%; }
  .hp-ko-9.hp-ko--center .hp-ko-9__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-9__txt .hp-eyebrow--knockout { font-size: 3.1875em; padding-bottom: 0.2em; }
  .hp-ko-9 .hp-vcenter h1 { font-size: 17.25em; }
  .hp-ko-9 .hp-vcenter .hp-plus { font-size: 2.07em; }
  .hp-ko-9__txt .hp-h1-subhead { font-size: 2.5875em; line-height: 1.1; }
  .hp-ko-9__txt .hp-h1-subhead small { font-size: 0.725em; }
  .hp-ko-9 .hp-vcenter .hp-coupon { margin-top: 1.8em; font-size: 1.16688em; }
  .hp-ko-9 .hp-vcenter .hp-ctas { margin-top: 2.6em; padding-bottom: 1.7em; }
  .hp-ko-9.hp-ko--m-left .hp-cta.hp-cta:not(:last-of-type), .hp-ko-9.hp-ko--m-right .hp-cta.hp-cta:not(:last-of-type) { margin-bottom: 0; }
}

/* ---- hp-ko-10  (old: hero--ko-10, template 15) h1 + two subheads. Art sets the height. ---- */
.hp-ko-10__txt { position: absolute; width: 57%; height: 100%; right: 0; top: 0; margin: 0; padding: 0 0 4em; overflow: hidden; }
.hp-ko-10 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 8.53125em; font-weight: 700; letter-spacing: 0.025em; line-height: 0.88; padding: 0; }
.hp-ko-10 .hp-vcenter .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.7em; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; padding: 0.5em 1em 0.6em; }
.hp-ko-10 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; font-weight: 500; font-size: 2.3625em; }
.hp-ko-10 .hp-vcenter .hp-ctas { margin-top: 1em; }
.hp-ko-10 .hp-vcenter .hp-cta:not(:last-of-type) { margin-bottom: 1em; }
.hp-ko-10.hp-ko--left .hp-ko-10__txt { left: 0; right: auto; }
.hp-ko-10.hp-ko--right .hp-ko-10__txt { right: 0; left: auto; }
.hp-ko-10.hp-ko--center .hp-ko-10__txt { left: 0; right: 0; margin: 0 auto; }
@media (max-width: 1024px) {
  .hp-ko-10.hp-ko--m-left .hp-ko-10__txt { left: 0; right: auto; }
  .hp-ko-10.hp-ko--m-right .hp-ko-10__txt { right: 0; left: auto; }
  .hp-ko-10.hp-ko--m-center .hp-ko-10__txt { left: 0; right: 0; margin: 0 auto; }
  .hp-ko-10 .hp-brow-2 { font-size: 1.8em; }
}
@media (min-width: 1024px) {
  .hp-ko-10__txt { width: 33%; }
  .hp-ko-10 .hp-vcenter h1 { font-size: 6.5625em; }
  .hp-ko-10 .hp-vcenter .hp-h1-subhead { font-size: 1.6em; font-weight: 600; line-height: 1.2; padding: 1em 0 1.1em; }
  .hp-ko-10 .hp-brow-2 { font-size: 1.2em; }
  .hp-ko-10 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; font-size: 1.125em; font-weight: 500; }
  .hp-ko-10 .hp-vcenter .hp-ctas { margin-top: 1em; }
  .hp-ko-10 .hp-vcenter .hp-cta:not(:last-of-type) { margin-bottom: 0; }
}

/* ---- hp-ko-11  (old: hero--ko-11, template 16) h1 + one line; subheads show on desktop only ---- */
.hp-ko-11__txt { position: absolute; width: 100%; height: 100%; right: 0; top: 0; margin: 0; padding: 0 0 4em; overflow: hidden; }
.hp-ko-11 .hp-vcenter h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 8.53125em; font-weight: 700; letter-spacing: 0.025em; line-height: 0.88; padding: 0; }
.hp-ko-11 .hp-vcenter .hp-h1-subhead { display: none; color: inherit; font-family: poppins, sans-serif; font-size: 2.7em; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; padding: 0.5em 1em 0.6em; }
.hp-ko-11 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; font-weight: 700; font-size: 2.3625em; }
.hp-ko-11 .hp-vcenter .hp-ctas { margin-top: 3em; }
.hp-ko-11.hp-ko--left .hp-ko-11__txt { left: 0; right: auto; }
.hp-ko-11.hp-ko--right .hp-ko-11__txt { right: 0; left: auto; }
.hp-ko-11.hp-ko--center .hp-ko-11__txt { left: 0; right: 0; margin: 0 auto; }
@media (max-width: 1024px) {
  .hp-ko-11.hp-ko--m-left .hp-ko-11__txt { left: 0; right: auto; width: 50%; }
  .hp-ko-11.hp-ko--m-right .hp-ko-11__txt { right: 0; left: auto; width: 50%; }
  .hp-ko-11.hp-ko--m-center .hp-ko-11__txt { left: 0; right: 0; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .hp-ko-11__txt { width: 32%; }
  .hp-ko-11 .hp-vcenter h1 { font-size: 6.5625em; }
  .hp-ko-11 .hp-vcenter .hp-h1-subhead { display: block; font-size: 1em; font-weight: 600; line-height: 1.8; padding: 1em 0 1.1em; }
  .hp-ko-11 .hp-vcenter .hp-h1-subhead:last-child { margin-top: 0; font-size: 1em; font-weight: 500; }
  .hp-ko-11 .hp-vcenter .hp-ctas { margin-top: 1em; }
  .hp-ko-11 .hp-vcenter .hp-cta:not(:last-of-type) { margin-bottom: 0; }
}

/* ---- hp-ko-12  (old: hero--ko-12, templates 18 and 25) outline buttons, optional row of buttons ---- */
.hp-ko-12__inner { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-12__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-12__txt .hp-eyebrow--knockout { font-size: 3.9875em; line-height: 0.9; padding-bottom: 0.3em; }
.hp-ko-12__txt h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 7.9375em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.hp-ko-12__txt .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.73375em; font-weight: 500; line-height: 1; letter-spacing: normal; }
.hp-ko-12__txt .hp-h1-subhead small { font-size: 0.6634em; }
.hp-ko-12 .hp-vcenter .hp-coupon { font-size: 1.69375em; margin-top: 1.4em; letter-spacing: 0.06em; line-height: 1.2; }
.hp-ko-12 .hp-vcenter .hp-ctas { margin-top: 2.8em; padding-bottom: 2em; }
.hp-ko-12 a.hp-cta--outline { color: inherit; border-color: inherit; }
@media (max-width: 1023px) {
  .hp-ko-12.hp-ko--m-left .hp-ko-12__txt { width: 62%; left: 0; right: auto; }
  .hp-ko-12.hp-ko--m-right .hp-ko-12__txt { width: 62%; right: 0; left: auto; }
  .hp-ko-12.hp-ko--m-left a.hp-cta--outline:not(:last-of-type), .hp-ko-12.hp-ko--m-right a.hp-cta--outline:not(:last-of-type) { margin-bottom: 0.9em; }
}
@media (min-width: 1024px) {
  .hp-ko-12__txt { width: 50%; }
  .hp-ko-12.hp-ko--left .hp-ko-12__txt { left: 0; right: auto; width: 50%; }
  .hp-ko-12.hp-ko--right .hp-ko-12__txt { right: 0; left: auto; width: 50%; }
  .hp-ko-12.hp-ko--center .hp-ko-12__txt { left: 0; right: 0; margin: 0 auto; width: 100%; }
  .hp-ko-12__txt .hp-eyebrow--knockout { font-size: 2.22375em; padding-bottom: 0.2em; }
  .hp-ko-12 h1 { font-size: 5.09063em; padding-bottom: 0; }
  .hp-ko-12__txt .hp-h1-subhead { font-size: 1.73438em; line-height: 1.1; }
  .hp-ko-12__txt .hp-h1-subhead small { font-size: 0.725em; }
  .hp-ko-12 .hp-vcenter .hp-coupon { margin-top: 1.8em; font-size: 0.891875em; }
  .hp-ko-12 .hp-vcenter .hp-ctas { margin-top: 0.8em; padding-bottom: 1.7em; }
}

/* ---- hp-ko-16  (old: hero--16, template 17) two stacked offers; art sets the height ---- */
.hp-ko-16__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-16__txt .hp-eyebrow--poppins { font-size: 2.25em; font-weight: 500; letter-spacing: 0.02em; line-height: normal; margin-bottom: 0.2em; }
.hp-ko-16 h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 15.7875em; font-weight: 700; line-height: 0.75; letter-spacing: 0.02em; margin-bottom: 0; }
.hp-ko-16 h1 sub > sup { font-size: 0.6em; }
.hp-ko-16 .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.22075em; font-weight: 500; line-height: normal; letter-spacing: 0.02em; }
.hp-ko-16 .hp-plus { font-size: 2.868em; font-weight: 500; line-height: 1.8; }
.hp-ko-16 .hp-coupon { font-size: 1.58563em; margin-top: 0.6em; }
.hp-ko-16 .hp-ctas { margin-top: 2em; padding-bottom: 3em; }
@media (max-width: 1023px) {
  .hp-ko-16.hp-ko--m-left .hp-ko-16__txt { width: 64%; left: 0; right: auto; }
  .hp-ko-16.hp-ko--m-right .hp-ko-16__txt { width: 64%; right: 0; left: auto; }
  .hp-ko-16.hp-ko--m-center .hp-ko-16__txt { width: 100%; left: 0; right: auto; }
  .hp-ko-16.hp-ko--m-left .hp-ctas a:not(:last-of-type), .hp-ko-16.hp-ko--m-right .hp-ctas a:not(:last-of-type) { margin-bottom: 0.6em; }
}
@media (min-width: 1024px) {
  .hp-ko-16__txt { width: 100%; }
  .hp-ko-16.hp-ko--left .hp-ko-16__txt { width: 33%; left: 0; right: auto; }
  .hp-ko-16.hp-ko--right .hp-ko-16__txt { width: 33%; right: 0; left: auto; }
  .hp-ko-16.hp-ko--center .hp-ko-16__txt { left: 0; right: 0; width: 100%; margin: 0 auto; }
  .hp-ko-16__txt .hp-eyebrow--poppins { font-size: 1.375em; margin-bottom: 0.6em; }
  .hp-ko-16 h1 { font-size: 11.0544em; line-height: 0.75; margin-bottom: 0.08em; }
  .hp-ko-16 .hp-plus { font-size: 2em; }
  .hp-ko-16 .hp-h1-subhead { font-size: 1.55438em; line-height: 1; }
  .hp-ko-16 .hp-coupon { margin-top: 1em; font-size: 0.9575em; }
  .hp-ko-16 .hp-ctas { margin-top: 1.8em; padding-bottom: 1.7em; }
}

/* ---- hp-ko-17  (old: hero--17, templates 19, 23, 24) eyebrow + big and small offers ---- */
.hp-ko-17__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-17__txt .hp-eyebrow { font-size: 1em; margin-bottom: 4em; }
.hp-ko-17__txt .hp-eyebrow--poppins { font-size: 2.025em; font-weight: 500; letter-spacing: 0.02em; line-height: normal; }
.hp-ko-17__txt .hp-eyebrow--knockout { font-size: 4.05em; font-weight: 700; letter-spacing: 0.02em; line-height: normal; }
.hp-ko-17 h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 11.8125em; font-weight: 700; line-height: 0.75; letter-spacing: 0.01em; margin-bottom: 0; }
.hp-ko-17 h1.hp-text--small { font-size: 6.75em; margin-bottom: 0.2em; }
.hp-ko-17 .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.59187em; font-weight: 500; line-height: normal; letter-spacing: 0.02em; }
.hp-ko-17 .hp-h1-subhead.hp-text--small { font-size: 1.91875em; }
.hp-ko-17 .hp-plus { font-size: 2.868em; font-weight: 500; line-height: 1.6; margin-bottom: 0.2em; }
.hp-ko-17 .hp-coupon { font-size: 1.58563em; margin-top: 1.4em; }
.hp-ko-17 .hp-ctas { margin-top: 3.5em; padding-bottom: 3em; }
@media (max-width: 1023px) {
  .hp-ko-17.hp-ko--m-left .hp-ko-17__txt { width: 61%; left: 0; right: auto; }
  .hp-ko-17.hp-ko--m-right .hp-ko-17__txt { width: 61%; right: 0; left: auto; }
  .hp-ko-17.hp-ko--m-center .hp-ko-17__txt { width: 100%; left: 0; right: auto; }
  .hp-ko-17.hp-ko--m-left .hp-ctas a:not(:last-of-type), .hp-ko-17.hp-ko--m-right .hp-ctas a:not(:last-of-type) { margin-bottom: 0.6em; }
}
@media (min-width: 1024px) {
  .hp-ko-17__txt { width: 100%; }
  .hp-ko-17.hp-ko--left .hp-ko-17__txt { width: 33%; left: 0; right: auto; }
  .hp-ko-17.hp-ko--right .hp-ko-17__txt { width: 33%; right: 0; left: auto; }
  .hp-ko-17.hp-ko--center .hp-ko-17__txt { left: 0; right: 0; width: 100%; margin: 0 auto; }
  .hp-ko-17__txt .hp-eyebrow { margin-bottom: 1.8em; }
  .hp-ko-17__txt .hp-eyebrow--poppins { font-size: 1.31937em; margin-bottom: 0.1em; }
  .hp-ko-17__txt .hp-eyebrow--knockout { font-size: 2.56937em; }
  .hp-ko-17 h1 { font-size: 8.19562em; line-height: 0.75; margin-bottom: 0.08em; }
  .hp-ko-17 h1.hp-text--small { font-size: 4.625em; margin-bottom: 0.2em; }
  .hp-ko-17 .hp-plus { font-size: 3.5em; line-height: 1.3; margin-bottom: 0; }
  .hp-ko-17 .hp-h1-subhead, .hp-ko-17 .hp-h1-subhead.hp-text--small { font-size: 1.51812em; line-height: 1; }
  .hp-ko-17 .hp-coupon { margin-top: 1.5em; font-size: 1.145em; }
  .hp-ko-17 .hp-ctas { margin-top: 2.2em; padding-bottom: 1.7em; }
}

/* ---- hp-ko-18  (old: hero--18, template 20) cardholder event: bottom-aligned text, dot badge (hp-dotwhack) ---- */
.hp-ko-18__txt { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0 0 4em; overflow: hidden; }
.hp-ko-18 .hp-vcenter { align-items: flex-end; }
.hp-ko-18__txt .hp-eyebrow { color: inherit; font-size: 1em; margin-bottom: 2.2em; }
.hp-ko-18__txt .hp-eyebrow--knockout { font-size: 5.25em; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.hp-ko-18__txt .hp-eyebrow--poppins { font-size: 1.82081em; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; }
.hp-ko-18__txt .hp-eyebrow--poppins small { font-size: 0.88em; display: block; }
.hp-ko-18__txt .hp-eyebrow img { display: inline-block; position: relative; height: auto; vertical-align: -0.06em; margin: 0; }
.hp-ko-18 h1 { color: inherit; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 9.49062em; font-weight: 700; line-height: 0.75; letter-spacing: normal; margin-bottom: 0; }
.hp-ko-18 h1.hp-text--small { font-size: 6.75em; margin-bottom: 0.2em; }
.hp-ko-18 .hp-h1-subhead { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 2.91094em; font-weight: 500; line-height: normal; letter-spacing: 0.02em; }
.hp-ko-18 .hp-h1-subhead.hp-text--small { font-size: 1.91875em; }
.hp-ko-18 .hp-h1-subhead--2 { display: block; color: inherit; font-family: poppins, sans-serif; font-size: 4.23562em; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; margin-top: 0.3em; }
.hp-ko-18 .hp-h1-subhead--2 > small { display: block; font-size: 0.48em; }
.hp-ko-18 .hp-plus { font-size: 2.868em; font-weight: 700; line-height: 1.4; margin-bottom: 0.2em; }
.hp-ko-18 .hp-coupon { font-size: 1.28588em; margin-top: 1em; }
.hp-ko-18 .hp-ctas { margin-top: 1.8em; padding-bottom: 3em; }
section.hp-ko-18 .hp-dotwhack { position: absolute; display: flex; flex-flow: row; justify-content: center; align-items: center; width: 15.5em; height: 15.5em; top: 0; left: 0; margin: 2em 0 0 2em; padding: 0; background-color: #8fcbc9; border-radius: 50%; text-align: center; z-index: 100; }
section.hp-ko-18 .hp-dotwhack > div { position: relative; width: 100%; margin: 0; padding: 0.2em 0 0; overflow: hidden; color: #fff; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 3.05625em; font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; transform: rotate(-6deg); }
@media (max-width: 1023px) {
  .hp-ko-18.hp-ko--m-left .hp-ko-18__txt { width: 61%; left: 0; right: auto; }
  .hp-ko-18.hp-ko--m-right .hp-ko-18__txt { width: 61%; right: 0; left: auto; }
  .hp-ko-18.hp-ko--m-center .hp-ko-18__txt { width: 100%; left: 0; right: auto; }
  .hp-ko-18.hp-ko--m-left .hp-ctas a:not(:last-of-type), .hp-ko-18.hp-ko--m-right .hp-ctas a:not(:last-of-type) { margin-bottom: 0.6em; }
}
@media (min-width: 1024px) {
  .hp-ko-18__txt { width: 100%; }
  .hp-ko-18.hp-ko--left .hp-ko-18__txt { width: 33%; left: 0; right: auto; }
  .hp-ko-18.hp-ko--right .hp-ko-18__txt { width: 33%; right: 0; left: auto; }
  .hp-ko-18 .hp-vcenter { align-items: center; }
  .hp-ko-18.hp-ko--center .hp-ko-18__txt { left: 0; right: 0; width: 100%; margin: 0 auto; padding-bottom: 0; padding-top: 0.4em; }
  .hp-ko-18__txt .hp-eyebrow { margin-bottom: 1em; }
  .hp-ko-18__txt .hp-eyebrow--knockout { font-size: 3.0625em; line-height: 1.15; }
  .hp-ko-18__txt .hp-eyebrow--poppins { font-size: 1.0625em; }
  .hp-ko-18__txt .hp-eyebrow--poppins small { font-size: 0.88em; }
  .hp-ko-18__txt .hp-eyebrow img { vertical-align: -0.04em; }
  .hp-ko-18 h1 { font-size: 5.7075em; line-height: 0.8; margin-bottom: 0.08em; }
  .hp-ko-18 h1.hp-text--small { font-size: 4.625em; margin-bottom: 0.2em; }
  .hp-ko-18 .hp-plus { font-size: 2em; line-height: 1.4; margin-bottom: 0; }
  .hp-ko-18 .hp-h1-subhead { font-size: 1.75em; line-height: 1; }
  .hp-ko-18 .hp-h1-subhead--2 { font-size: 2.5em; margin-top: 0.4em; }
  .hp-ko-18 .hp-coupon { margin-top: 0.8em; font-size: 0.75em; }
  .hp-ko-18 .hp-ctas { margin-top: 1.1em; padding-bottom: 1.7em; }
  .hp-ko-18 .hp-disclaimer--fixed { padding: 0.9em; }
  section.hp-ko-18 .hp-dotwhack { width: 8.7em; height: 8.7em; margin: 1.3em 0 0 1.3em; }
  section.hp-ko-18 .hp-dotwhack div { font-size: 1.7275em; }
}

/* ---- hp-ko-split  (old: hero--split, template 8) two offers side by side ---- */
section.hp-ko-split::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 84%); }
.hp-ko-split .hp-vcenter { position: absolute; left: 0; right: 0; text-align: center; }
.hp-ko-split__txt { position: relative; width: 100%; max-width: 1100px; height: auto; padding: 0; overflow: hidden; }
.hp-ko-split__txt__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-content: center; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-split__txt__grid > div { position: relative; margin: 0; padding: 1em; overflow: hidden; text-align: center; }
.hp-ko-split__txt__grid > div:first-child { border-right: 0.1em solid; }
.hp-ko-split__txt h1 { font-family: poppins, sans-serif; font-size: 4.3875em; font-weight: 500; line-height: 0.9; }
.hp-ko-split.hp-knockout h1 { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 7.425em; line-height: 0.95; }
.hp-ko-split__txt .hp-h1-subhead { display: inline-block; font-family: poppins, sans-serif; font-size: 2.025em; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; padding-bottom: 0.9em; }
.hp-ko-split__txt .hp-eyebrow--poppins { font-size: 2.3625em; font-weight: 700; letter-spacing: 0.06em; padding-bottom: 1em; line-height: 1.2; }
.hp-ko-split__txt .hp-coupon { font-size: 1.6875em; }
.hp-root .hp-ko-split__txt a.hp-cta--outline { margin-top: 1.9em; }
.hp-ko-split__alt-cta { position: relative; width: 100%; height: auto; margin: 0.8em 0 0; padding: 0; overflow: hidden; text-align: center; }
@media (min-width: 1024px) {
  section.hp-ko-split::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-split__txt .hp-eyebrow--poppins { font-size: 1.746em; line-height: 1.6; }
  .hp-ko-split__txt h1 { font-size: 5.238em; line-height: 1; }
  .hp-ko-split.hp-knockout h1 { font-size: 5.82em; }
  .hp-ko-split__txt .hp-h1-subhead { font-size: 1.89em; padding-bottom: 0.7em; }
  .hp-ko-split__txt .hp-coupon { font-size: 1.164em; }
  .hp-root .hp-ko-split__txt a.hp-cta--outline { margin-top: 2em; }
  .hp-ko-split__alt-cta { margin: 2em 0 0; }
}

/* ---- hp-ko-split2  (old: hero--split-2, template 10) title row on top, two offers below ---- */
section.hp-ko-split2::before { content: ""; display: block; padding-top: var(--hp-ko-h-m, 99.1%); }
.hp-ko-split2 .hp-vcenter { position: absolute; left: 0; right: 0; text-align: center; }
.hp-ko-split2__txt { position: relative; width: 100%; height: auto; padding: 0; overflow: hidden; }
.hp-ko-split2__txt__top { position: relative; width: 100%; height: auto; margin: 0; padding: 0 0 2.2em; overflow: hidden; text-align: center; }
.hp-ko-split2__txt__top > img { display: block; position: relative; width: 7.4em; height: auto; margin: 0 auto 0.8em; }
.hp-ko-split2__txt__top__title { color: #000; font-family: poppins, sans-serif; font-size: 6.01em; font-weight: 600; line-height: 1.1; letter-spacing: 0.04em; }
.hp-ko-split2__txt__top__title.hp-knockout { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); }
.hp-ko-split2__txt__top__title > small { font-size: 0.47em; vertical-align: 0.3em; }
.hp-ko-split2__txt__top__title .hp-text-deco { display: inline-block; position: relative; width: 0.46em; height: auto; margin: 0 0.1em; vertical-align: 0.05em; }
.hp-ko-split2__txt__top__title .hp-sub-title { position: relative; margin: 0; padding: 0 0 0.5em; overflow: hidden; color: #000; font-family: poppins, sans-serif; font-size: 0.43em; font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; text-align: center; }
.hp-ko-split2__txt__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-content: center; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-ko-split2__txt__grid > div { position: relative; margin: 0; padding: 0.4em 1em; overflow: hidden; text-align: center; }
.hp-ko-split2__txt__grid > div:first-child { border-right: 0.2em solid; }
.hp-ko-split2 h1 { font-family: poppins, sans-serif; font-size: 4.3875em; font-weight: 500; line-height: 0.9; }
.hp-ko-split2 h1.hp-knockout { font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-size: 8.8678em; line-height: 0.8; }
.hp-ko-split2__txt .hp-h1-subhead { display: inline-block; font-family: poppins, sans-serif; font-size: 3.524em; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; }
.hp-ko-split2__txt .hp-eyebrow--poppins { font-size: 2.3625em; font-weight: 700; letter-spacing: 0.06em; padding-bottom: 1em; line-height: 1.2; }
.hp-ko-split2__txt__bot { position: relative; width: 100%; height: auto; margin: 3.5em 0 0; padding: 0; overflow: hidden; text-align: center; }
.hp-ko-split2__txt .hp-coupon { font-size: 1.6875em; }
.hp-ko-split2 .hp-ctas { margin-top: 3.2em; padding-bottom: 5em; }
@media (min-width: 1024px) {
  section.hp-ko-split2::before { padding-top: var(--hp-ko-h-dt, 41.667%); }
  .hp-ko-split2__txt { width: 76.3889%; }
  .hp-ko-split2__txt .hp-eyebrow--poppins { font-size: 1.746em; line-height: 1.6; }
  .hp-ko-split2__txt__top > img { width: 3.7em; }
  .hp-ko-split2__txt__top__title { font-size: 3.55em; line-height: 1.1; }
  .hp-ko-split2__txt__top__title .hp-text-deco { width: 0.5em; }
  .hp-ko-split2__txt__top__title .hp-sub-title { font-size: 0.55em; }
  .hp-ko-split2__txt__grid > div { padding: 1em; }
  .hp-ko-split2 h1 { font-size: 5.82em; line-height: 0.8; }
  .hp-ko-split2 h1.hp-knockout { font-size: 7.478em; }
  .hp-ko-split2 .hp-h1-subhead { font-size: 2.972em; padding-bottom: 0.7em; }
  .hp-ko-split2__txt__grid > div:first-child { border-right: 0.1em solid; }
  .hp-ko-split2__txt__bot { margin: 2.2em 0 0; }
  .hp-ko-split2__txt .hp-coupon { font-size: 1.245em; }
  .hp-ko-split2 .hp-ctas { margin-top: 1.7em; padding-bottom: 2em; }
}

/* ---- inline marks: asterisk after the % (hp-ast) and the star after a plus (hp-plus--ff) ---- */
.hp-ast::after{content:"";position:static;display:inline-block;background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 385 448' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-57.9031,-27.3684)'%3E%3Cg transform='matrix(1040,0,0,1040,0,790.968)'%3E%3Cpath d='M0.384,-0.673L0.424,-0.601L0.281,-0.547L0.424,-0.493L0.383,-0.421L0.264,-0.512L0.284,-0.36L0.202,-0.36L0.219,-0.512L0.098,-0.418L0.056,-0.493L0.198,-0.547L0.056,-0.601L0.098,-0.674L0.219,-0.582L0.201,-0.734L0.284,-0.734L0.264,-0.582L0.384,-0.673Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:40% auto;background-repeat:no-repeat;background-position:0% 50%;z-index:10;width:0.3em;height:0.3em;vertical-align:baseline;transform:translate(2%,-150%);margin-right:-0.3em}
.hp-plus--ff::after{content:"";display:inline-block;position:relative;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 28 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(2.36335,0,6.53626e-16,2.36465,3.09773,28.4562)'%3E%3Cpath d='M9.944,-7.7C10.149,-7.187 10.23,-6.761 10.186,-6.424C10.113,-6.072 9.812,-5.918 9.284,-5.962L8.844,-5.962C8.595,-5.962 8.195,-5.951 7.645,-5.929C7.095,-5.907 6.651,-5.889 6.314,-5.874C6.314,-5.771 6.31,-5.628 6.303,-5.445C6.296,-5.262 6.292,-5.126 6.292,-5.038C6.292,-4.085 6.299,-3.373 6.314,-2.904C6.343,-1.951 5.933,-1.386 5.082,-1.21L5.038,-1.21L4.972,-1.232C4.312,-1.481 3.989,-1.995 4.004,-2.772C4.019,-3.036 3.975,-3.659 3.872,-4.642C3.857,-4.789 3.835,-5.023 3.806,-5.346L3.762,-5.346C3.63,-5.346 3.476,-5.331 3.3,-5.302C3.168,-5.273 2.977,-5.225 2.728,-5.159C2.479,-5.093 2.295,-5.045 2.178,-5.016L0.528,-4.62C0.088,-4.532 -0.264,-4.576 -0.528,-4.752C-0.88,-4.972 -1.122,-5.375 -1.254,-5.962C-1.459,-6.915 -1.107,-7.502 -0.198,-7.722C0.418,-7.869 1.254,-8.052 2.31,-8.272C2.457,-8.301 2.677,-8.349 2.97,-8.415C3.263,-8.481 3.483,-8.529 3.63,-8.558C3.659,-8.837 3.608,-9.218 3.476,-9.702C3.197,-10.611 3.241,-11.337 3.608,-11.88L3.718,-12.034L3.872,-11.968C5.163,-11.352 5.911,-10.355 6.116,-8.976C6.175,-8.976 6.263,-8.969 6.38,-8.954C6.497,-8.939 6.585,-8.932 6.644,-8.932C7.26,-8.873 7.751,-8.815 8.118,-8.756C9.101,-8.58 9.709,-8.228 9.944,-7.7Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E%0A");background-size:100% auto;background-repeat:no-repeat;z-index:10;width:100%;height:100%}


/* ---------------------------------------------------------------- 15. TOP BANNERS (hp-banner) */
/* "Tonight only" style strip: desktop = left / center / right grid, phones = stacked.
   Two sections (hp-banner--dt and hp-banner--m) with the same content; each is hidden at the other breakpoint.
   Colors: style="background-color:#..; color:#.." */
.hp-banner--dt .hp-banner__grid { display: none; }
.hp-banner--m .hp-banner__content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; margin: 0; padding: 3em 0 2em; overflow: hidden; }
.hp-banner--m .hp-banner__content > div { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; text-align: center; }
.hp-banner--m .hp-eyebrow--poppins { font-size: 2.21875em; font-weight: 500; padding-bottom: 0.25em; }
.hp-banner--m h4 { font-size: 2.98625em; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }
.hp-banner--m a.hp-banner__link { display: inline-block; color: inherit; font-family: poppins, sans-serif; font-size: 2.38875em; font-weight: 500; letter-spacing: 0.01em; line-height: 1.1; text-decoration: underline; text-underline-offset: 0.2em; padding-top: 0.6em; padding-bottom: 1.2em; margin: 0 1em; }
.hp-banner--dt h4, .hp-banner--m h4 { font-weight: 600; }
@media (min-width: 1024px) {
  .hp-banner--m { display: none; }
  .hp-banner--dt .hp-banner__grid { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0%; width: 100%; height: auto; margin: 0; padding: 1.6em 0; overflow: hidden; }
  .hp-banner--dt .hp-banner__item { position: relative; display: flex; flex-flow: row; justify-content: center; align-items: center; margin: 0; padding: 0; overflow: hidden; text-align: center; }
  .hp-banner--dt .hp-banner__item > div { position: relative; margin: 0; padding: 2px 0; overflow: hidden; }
  .hp-banner--dt .hp-banner__item--center { flex: 0 0 auto; min-width: 50%; white-space: nowrap; }
  .hp-banner--dt .hp-banner__item--left, .hp-banner--dt .hp-banner__item--right { min-width: 25%; }
  .hp-banner--dt .hp-banner__item-content > p, .hp-banner--dt a.hp-banner__link { color: inherit; font-family: poppins, sans-serif; font-size: 1.125em; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; }
  .hp-banner--dt a.hp-banner__link { text-decoration: underline; text-underline-offset: 0.2em; margin: 0 1em; }
  .hp-banner--dt h4 { font-size: 1.5em; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; }
  .hp-banner--dt .hp-disclaimer { font-size: 0.7125em; padding-top: 0.8em; }
}


/* ---------------------------------------------------------------- 16. CARDHOLDER CAMPAIGN (hp-cam) */
/* Template 21 (old: hp-cam--non-member). A purple framed panel: desktop = top row (title left, offer right,
   dot badge) + bottom row (card image, copy, link); phones = one stacked column (hp-cam--m). */
div.hp-cam__top { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; background-color: #6a336e; border: 1.3em solid #964c9c; }
.hp-cam__grid { position: relative; display: flex; flex-flow: row; width: 100%; height: auto; margin: 0; overflow: hidden; }
.hp-cam__grid--top { justify-content: space-between; align-items: center; padding: 1.5em 0; }
.hp-cam__grid--top > div { position: relative; width: 50%; height: auto; margin: 0; padding: 0; overflow: hidden; text-align: center; }
div.hp-cam__top__left { padding-left: 9em; }
section.hp-cam h2 { color: #fff; font-family: var(--hp-font-display, acumin-pro-extra-condensed, sans-serif); font-weight: 700; line-height: 0.95; letter-spacing: 0.02em; }
section.hp-cam p { color: #fff; font-family: poppins, sans-serif; font-weight: 600; letter-spacing: 0.02em; }
.hp-cam__top__left h2 { font-size: 6.375em; padding-bottom: 0.25em; }
.hp-cam__top__left h2 > img { display: inline-block; position: relative; height: auto; margin: 0; vertical-align: -0.04em; }
.hp-cam__top__left p { font-size: 1.1875em; line-height: 1.4; }
div.hp-cam__top__right { padding-right: 7em; }
.hp-cam__top__right h2 { font-size: 4.40875em; padding-bottom: 0; }
section.hp-cam span.hp-h2-subhead { display: inline-block; color: #fff; font-family: poppins, sans-serif; font-weight: 500; letter-spacing: 0.02em; }
.hp-cam__top__right span.hp-h2-subhead { font-size: 1.1875em; line-height: 1.4; }
section.hp-cam span.hp-h2-subhead > small { font-size: 0.63em; font-weight: 700; }
section.hp-cam .hp-plus { display: block; color: #fff; font-weight: 500; }
.hp-cam__top__right .hp-plus { font-size: 1.8em; margin: 0.1em 0; }
section.hp-cam h2.hp-text--small { color: #fff; font-family: poppins, sans-serif; font-weight: 500; }
.hp-cam__top__right h2.hp-text--small { font-size: 2.3125em; line-height: 1.2; letter-spacing: normal; padding-bottom: 0; }
.hp-cam__top__right span.hp-h2-subhead.hp-text--small { font-size: 1.1875em; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; }
section.hp-cam .hp-coupon { color: #fff; font-family: poppins, sans-serif; font-weight: 600; letter-spacing: 0.02em; }
.hp-cam__top__right .hp-coupon { font-size: 0.75em; line-height: 1.7; padding: 0.6em 0 1.6em; }
section.hp-cam a.hp-cta--ul { color: #fff; }
.hp-cam__top__right a { font-size: 1em; }
section.hp-cam .hp-cam__dotwhack { position: absolute; display: flex; flex-flow: row; justify-content: center; align-items: center; top: 0; right: 0; z-index: 10; background-color: #fff; border-radius: 50%; text-align: center; }
div.hp-cam__top__right .hp-cam__dotwhack { width: 7em; height: 7em; margin: 2em 10.8em 0 0; }
section.hp-cam .hp-cam__dotwhack > div { position: relative; width: 100%; margin: 0; overflow: hidden; color: #964c9b; font-family: poppins, sans-serif; font-size: 0.8125em; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; transform: rotate(6deg); }
div.hp-cam__top__right .hp-cam__dotwhack > div { font-size: 0.8125em; padding: 0.5em 0 0; }
div.hp-cam__bot { position: relative; width: 100%; height: auto; margin: 1.5em 0 0; padding: 0; overflow: hidden; background-color: #6a336e; }
div.hp-cam__grid--bot { width: 86%; margin: 0 auto; justify-content: center; align-items: flex-start; padding: 1.6em 0 0.5em; }
div.hp-cam__grid--bot > div { position: relative; height: auto; margin: 0; overflow: hidden; }
.hp-cam__grid--bot__left, .hp-cam__grid--bot__right { width: 10%; }
.hp-cam__grid--bot__left { padding: 0.5em 0 0; text-align: left; }
.hp-cam__grid--bot__left > img { display: inline-block; position: relative; width: 8.2em; height: auto; margin: 0; }
div.hp-cam__grid--bot__center { width: 80%; text-align: center; padding: 0; }
section.hp-cam h3 { color: #fff; font-family: poppins, sans-serif; font-weight: 600; letter-spacing: 0.01em; padding: 0.7em 0.1em; }
.hp-cam__grid--bot__center > h3 { font-size: 1.5em; line-height: 1.1; }
section.hp-cam .hp-disclaimer { text-align: center; color: #fff; }
.hp-cam__grid--bot__center .hp-disclaimer { font-size: 0.75em; letter-spacing: 0.03em; padding-top: 1em; }
.hp-cam__grid--bot__right { text-align: right; padding: 0.8em 0 0; }
.hp-cam__grid--bot__right a { color: #fff; }
/* phones */
.hp-cam--m { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-cam--m__content { position: relative; width: 100%; height: auto; margin: 0; padding: 3.8em 0 4em; overflow: hidden; background-color: #6a336e; border: 2.5em solid #964c9c; text-align: center; }
.hp-cam--m__intro { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-cam--m__intro h2 { font-size: 4.725em; padding-bottom: 0.4em; }
.hp-cam--m__intro h2 > img { vertical-align: -0.06em; }
.hp-cam--m__intro p { font-size: 2.26125em; line-height: 1.3; }
.hp-cam--m .hp-offer { margin-top: 3.8em; }
.hp-cam--m .hp-offer h2 { font-size: 7.625em; line-height: 0.85; }
.hp-cam--m .hp-offer .hp-h2-subhead { font-size: 2.53125em; }
.hp-cam--m .hp-offer .hp-h2-subhead small { font-size: 0.8em; }
.hp-cam--m .hp-offer .hp-plus { font-size: 3em; }
.hp-cam--m .hp-offer h2.hp-text--small { font-size: 4.51063em; line-height: 1.2; }
.hp-cam--m span.hp-h2-subhead.hp-text--small { font-size: 2.53125em; padding-bottom: 0.35em; }
.hp-cam--m .hp-coupon { font-size: 1.85625em; line-height: 1.3; }
.hp-cam--m .hp-ctas { margin-top: 2.5em; }
.hp-cam--m a.hp-cta--ul { font-size: 2.7em; }
img.hp-cam--m__cc-img { display: block; position: relative; width: 22.5em; height: auto; margin: 6em auto 3em; }
.hp-cam--m h3 { font-size: 3.54375em; line-height: 1.45; }
.hp-cam--m h3 > small { display: block; font-weight: 500; font-size: 0.715em; }
.hp-cam--m .hp-disclaimer { margin: 1.5em 0 1.4em; font-size: 1.85625em; letter-spacing: 0.1em; }
div.hp-cam--m .hp-cam__dotwhack { width: 13.8em; height: 13.8em; margin: 24em -0.1em 0 0; }
div.hp-cam--m .hp-cam__dotwhack > div { font-size: 1.64375em; padding: 0.5em 0 0; }


/* ---------------------------------------------------------------- 17. COUNTDOWN (hp-countdown) */
/* Old: promo-countdown (hpPromoCountdownBanner.css + inline script). Colors on the section's style.
   <section class="hp-countdown" style="background:#01961d; color:#fff" data-target="2027-01-01T01:00:00-05:00" data-expired-text="LIVE NOW">
     <div class="hp-countdown__inner"><p class="hp-countdown__line">
       <span class="hp-countdown__text">DEAL ENDS IN: </span>
       <span class="hp-countdown__timer" aria-live="polite">
         <span class="hp-countdown__part"><span class="num">00</span><span class="label">h</span></span> ... m, s
   The script in LOFT-HP-components-v1.js fills the numbers; no inline script is needed. */
.hp-root .hp-countdown { background: #524581; color: #fff; margin: 1% auto; padding: 3.95em 2em; }
.hp-countdown__inner { max-width: 1680px; margin: 0 auto; text-align: center; }
.hp-root .hp-countdown__line { display: inline-flex; align-items: baseline; justify-content: center; gap: 2.63em; margin: 0; font-family: var(--hp-font-display, 'acumin-pro-extra-condensed', sans-serif); letter-spacing: 0.06em; }
.hp-countdown__text { font-size: 3.95em; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.hp-countdown__timer { display: inline-flex; gap: 1em; font-size: 3.95em; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-countdown__part { display: flex; align-items: baseline; gap: 0.083em; }
.hp-countdown__part .num { display: inline-block; min-width: 2ch; text-align: right; }
.hp-countdown__part .label { font-size: 0.5em; font-weight: 700; opacity: 0.85; text-transform: lowercase; }
@media (min-width: 1024px) {
  .hp-root .hp-countdown { padding: 2.38em 1.5em; }
  .hp-root .hp-countdown__line { gap: 1.8em; }
  .hp-countdown__text, .hp-countdown__timer { font-size: 2.23em; }
  .hp-countdown__timer { gap: 0.27em; }
  .hp-countdown__part .label { font-size: 0.47em; }
}