/* ==========================================================================
   ToonBee · Black Friday (g-offers-bf.php)
   Loads after the original page CSS and only adds/overrides what the
   Black Friday design needs. Everything new is scoped under .bf-* classes.
   ========================================================================== */

:root {
  --bf-black: #0a090c;
  --bf-ink: #19150b;
  --bf-gold: #ffc21a;
  --bf-gold-soft: #ffd36b;
  --bf-cream: #f5efe2;
  --bf-muted: #a89f8f;
  --bf-gold-grad: linear-gradient(180deg, #ffe485 0%, #ffc928 48%, #f6a10c 100%);
  --bf-gold-grad-x: linear-gradient(90deg, #ffb000 0%, #ffd54a 50%, #ffe58f 100%);
  /* Dark card used by every Black Friday panel */
  --bf-card-bg:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgb(255 122 26 / 18%) 0%, rgb(194 65 12 / 8%) 50%, rgb(10 9 12 / 0%) 100%),
    linear-gradient(180deg, rgb(29 25 40 / 90%) 0%, rgb(18 15 23 / 60%) 40%, rgb(10 9 12 / 0%) 75%),
    linear-gradient(160deg, #211b0e 0%, #0e0c0f 55%, #0a090c 100%);
  /* Honeycomb tile, same geometry as the ToonModel bonus card */
  --bf-hive-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='173.2' viewBox='0 0 100 173.2'%3E%3Cg fill='none' stroke='%23b67a13' stroke-width='1.4'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87'/%3E%3Cline x1='50' y1='115.47' x2='50' y2='173.2'/%3E%3C/g%3E%3C/svg%3E");
  --bf-hive-fade: radial-gradient(ellipse 38% 48% at 0% 0%, #000 0%, rgb(0 0 0 / 82%) 22%, rgb(0 0 0 / 30%) 52%, rgb(0 0 0 / 7%) 74%, transparent 100%), radial-gradient(ellipse 31% 43% at 100% 100%, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 65%) 30%, rgb(0 0 0 / 18%) 62%, transparent 100%);
}

body.bf-sale { padding-bottom: var(--bf-bar-height, 0px); }

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */
.bf-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid rgb(255 194 26 / 45%);
  border-radius: 50px;
  background: var(--bf-card-bg);
  box-shadow: 0 24px 60px rgb(10 9 12 / 25%);
}
.bf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--bf-hive-tile);
  background-size: 84px 145.488px;
  background-position: center -24px;
  opacity: .55;
  -webkit-mask-image: var(--bf-hive-fade);
  mask-image: var(--bf-hive-fade);
}

.bf-gold-text {
  background: var(--bf-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gold 3D button */
.bf-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 32px;
  border: 1px solid rgb(194 127 15 / 60%);
  border-radius: 18px;
  color: #1a1206 !important;
  background: var(--bf-gold-grad);
  box-shadow: 0 12px 32px rgb(255 176 0 / 35%), 0 4px 10px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -3px 0 rgb(184 101 0 / 20%);
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.bf-btn-gold:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 36px rgb(255 176 0 / 45%), 0 4px 10px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -3px 0 rgb(184 101 0 / 20%); }
.bf-btn-gold:focus-visible { outline: 3px solid #fff2bf; outline-offset: 4px; }
.bf-btn-gold svg { flex-shrink: 0; }

.bf-arrow-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1a1206;
}
.bf-arrow-dot svg { width: 16px; height: 16px; }

/* Payments + 60 day guarantee row */
.bf-trust {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.bf-trust__cards { width: 196px; height: 23px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%)); }
.bf-trust__div { width: 1px; height: 30px; background: rgb(255 255 255 / 14%); }
.bf-trust__seal-wrap { display: inline-flex; align-items: center; gap: 9px; }
.bf-seal {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: url("../images/black-friday/bf-seal.svg") center / contain no-repeat;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  line-height: 1;
}
.bf-seal::before {
  content: "";
  position: absolute;
  inset: 5.5px;
  border: 1px solid #e3a84f;
  border-radius: 50%;
  background: #16131a;
}
.bf-seal b { position: relative; color: #ffd36b; font-size: 14px; font-weight: 800; }
.bf-seal small { position: relative; color: #efe4cf; font-size: 5.5px; font-weight: 800; letter-spacing: .8px; margin-top: 1px; }
.bf-trust__text {
  margin: 0;
  white-space: nowrap;
  color: #efe4cf;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

/* Floating decoration images */
.bf-deco { position: absolute; z-index: 2; height: auto; pointer-events: none; user-select: none; max-width: none; }

/* --------------------------------------------------------------------------
   1 · Top announcement bar
   -------------------------------------------------------------------------- */
.bf-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--bf-gold);
  box-shadow: 0 4px 12px rgb(0 0 0 / 35%);
  color: var(--bf-black);
  font-family: "Outfit", sans-serif;
  line-height: 1;
}
.bf-topbar__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--bf-black);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
}
.bf-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 0 rgb(255 69 58 / 60%); animation: bf-live 1.6s ease-out infinite; }
@keyframes bf-live { 0% { box-shadow: 0 0 0 0 rgb(255 69 58 / 60%); } 100% { box-shadow: 0 0 0 7px rgb(255 69 58 / 0%); } }
.bf-topbar__msg { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.bf-topbar__msg strong { font-weight: 900; letter-spacing: .3px; }
.bf-topbar__dash { font-weight: 500; }
.bf-topbar__price {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 6px;
  background: #e0201b;
  box-shadow: 0 2px 4px rgb(122 10 6 / 35%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  transform: rotate(-3deg);
}
.bf-topbar__sep { width: 2px; height: 20px; background: rgb(10 9 12 / 35%); }
.bf-topbar__limited { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .8px; }
.bf-topbar__limited svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   2 · Header
   -------------------------------------------------------------------------- */
.banner.bf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 58px;
  background: var(--bf-black);
}
/* Pen: 1619x1033 sky at (-179, -114) on the 1440 header, so the clouds sit under the video.
   Kept at that size and centred on wider screens (edges fade into black), scaled with the layout below 1440. */
.bf-hero__sky {
  position: absolute;
  z-index: -2;
  left: calc(50% - min(899.5px, 62.47vw));
  top: max(-114px, -7.92vw);
  width: min(1619px, 112.43vw);
  height: min(1033px, 71.74vw);
  background: url("../images/black-friday/bf-hero-bg.jpg") center / 100% 100% no-repeat;
  filter: brightness(.52) saturate(1.05);
  pointer-events: none;
}
/* Honeycomb pools, top-left and bottom-right */
.bf-hero::before,
.bf-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1262px;
  height: 899px;
  pointer-events: none;
  background-image: var(--bf-hive-tile);
  background-size: 84px 145.488px;
  opacity: .62;
}
.bf-hero::before { left: -30px; top: 48px; -webkit-mask-image: radial-gradient(ellipse 38% 48% at 0% 0%, #000 0%, rgb(0 0 0 / 60%) 30%, transparent 75%); mask-image: radial-gradient(ellipse 38% 48% at 0% 0%, #000 0%, rgb(0 0 0 / 60%) 30%, transparent 75%); }
.bf-hero::after {
  /* Two pools on the right: a light one in the top corner, the original one bottom-right */
  inset: 0;
  width: auto;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 26% 42% at 100% 0%, rgb(0 0 0 / 75%) 0%, rgb(0 0 0 / 40%) 35%, transparent 75%), radial-gradient(ellipse 31% 43% at 100% 100%, #000 0%, rgb(0 0 0 / 55%) 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 26% 42% at 100% 0%, rgb(0 0 0 / 75%) 0%, rgb(0 0 0 / 40%) 35%, transparent 75%), radial-gradient(ellipse 31% 43% at 100% 100%, #000 0%, rgb(0 0 0 / 55%) 35%, transparent 75%);
}

.bf-hero .bf-hero__container { position: relative; padding-top: 92px; }
.bf-hero .mt5 { margin-top: 0; }
.bf-hero .header-left { position: relative; }

.bf-hero .banner-headline-1 { font-size: 71px; line-height: 1; margin-top: 0; }
.bf-hero .banner-headline-2 { font-size: 72px; line-height: 1; }
.bf-hero .banner-headline-3 { font-size: 52px; line-height: 1.1; }
.bf-hero .banner-headline-2-span-span {
  background: linear-gradient(180deg, #efe4cf 5%, #fcce61 38%, #f3a743 68%, #d9852a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgb(201 120 39 / 18%));
}
.bf-spark { position: absolute; width: 13px; height: 13px; overflow: visible; }
.bf-spark--cartoon { left: -8px; top: 4px; }
.bf-spark--clicks { right: -.2em; top: .08em; transform: scaleX(-1); }

.bf-hero .banner-headline-4 { font-size: 21px; line-height: 1.2; letter-spacing: -.28px; margin-top: 8px; }
.bf-ul { position: relative; white-space: nowrap; }
.bf-ul::after {
  content: "";
  position: absolute;
  left: 0;
  right: 4px;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgb(255 210 29 / 0%) 0%, #ffd21d 12%, #ffb000 88%, rgb(255 176 0 / 0%) 100%);
  box-shadow: 0 0 6px rgb(255 176 0 / 40%);
}

.bf-hero__rocket {
  left: 290px;
  top: 46px;
  width: 312px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 35%));
  animation: bf-float 4.6s ease-in-out infinite;
}
@keyframes bf-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -10px; }
}

.bf-offer-pill {
  display: flex;
  align-items: stretch;
  width: 410px;
  max-width: 100%;
  margin-top: 24px;
  overflow: hidden;
  border: 1.5px solid var(--bf-gold);
  border-radius: 12px;
  background: var(--bf-black);
  box-shadow: 0 6px 24px rgb(255 176 0 / 35%);
  font-family: "Outfit", sans-serif;
  line-height: 1;
}
.bf-offer-pill__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 14px;
  background: var(--bf-gold-grad-x);
  color: var(--bf-black);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.bf-offer-pill__tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.bf-offer-pill__deal {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: var(--bf-gold-grad-x);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.3px;
  white-space: nowrap;
}

.bf-hero__cta { position: relative; isolation: isolate; width: 410px; max-width: 100%; margin-top: 16px; padding: 19px 20px; gap: 12px; white-space: nowrap; }
/* Pulsing gold ring */
.bf-hero__cta::after,
.bf-bonus .toonmodel-bonus__cta::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgb(255 194 26 / 65%);
  animation: bf-cta-ring 2.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
.bf-hero__cta > * { position: relative; }
.bf-bonus .toonmodel-bonus__cta::after { animation-name: bf-cta-ring-soft; }
@keyframes bf-cta-ring-soft {
  0% { box-shadow: 0 0 0 0 rgb(255 194 26 / 38%), 0 0 0 0 rgb(255 194 26 / 18%); }
  70%, 100% { box-shadow: 0 0 0 9px rgb(255 194 26 / 0%), 0 0 0 16px rgb(255 194 26 / 0%); }
}
/* Same pulse as the header CTA, in a deeper amber so it reads on the white price card */
@keyframes bf-cta-ring-amber {
  0% { box-shadow: 0 0 0 0 rgb(246 161 12 / 70%), 0 0 0 0 rgb(246 161 12 / 38%); }
  70%, 100% { box-shadow: 0 0 0 12px rgb(246 161 12 / 0%), 0 0 0 22px rgb(246 161 12 / 0%); }
}
@keyframes bf-cta-ring {
  0% { box-shadow: 0 0 0 0 rgb(255 194 26 / 65%), 0 0 0 0 rgb(255 194 26 / 35%); }
  70% { box-shadow: 0 0 0 12px rgb(255 194 26 / 0%), 0 0 0 22px rgb(255 194 26 / 0%); }
  100% { box-shadow: 0 0 0 12px rgb(255 194 26 / 0%), 0 0 0 22px rgb(255 194 26 / 0%); }
}

.bf-hero__trust { margin-top: 16px; }

/* The audience marquee sits flush under the header, as in the design (style_new.css adds a 3% gap) */
.bf-hero + .slider-div-1 { margin-top: 0; }

/* Video caption */
.bf-hero .text-bg-1-new-inn.bf-caption {
  display: inline-block;
  padding: 6px 22px;
  border: 1px solid rgb(255 194 26 / 35%);
  border-radius: 999px;
  background: #14111a;
  box-shadow: 0 0 16px rgb(255 176 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 7%);
  color: #efe4cf;
  font-size: 21px;
  letter-spacing: .2px;
}
.bf-caption__brand {
  background: linear-gradient(90deg, #ffe08a, #ffb300);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Social proof + stats */
.bf-hero .bf-hero__proof { margin-top: 56px; }
.bf-hero .review-div-1 .From,
.bf-hero .review-div-2 p { color: #ffebdc !important; }
.bf-hero .points-div::before { background: rgb(255 255 255 / 12%); }
.bf-stat-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 8px 20px rgb(0 0 0 / 35%);
}
.bf-stat-tile img { width: 68px; height: 68px; }
.bf-hero .banner-points-div p { margin-top: 6px; color: #f5f1e8; font-family: "Outfit", sans-serif; font-size: 14px; line-height: 1.2; }

/* --------------------------------------------------------------------------
   3 · Pricing CTA (twice on the page)
   -------------------------------------------------------------------------- */
.bf-cta { position: relative; padding: 56px 15px 64px; background: #fff; }
.bf-cta--tight { padding-top: 24px; }
.bf-cta__inner { position: relative; max-width: 1266px; margin: 0 auto; }

.bf-hive-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 34px auto 40px;
  font-family: "Outfit", sans-serif;
  line-height: 1.1;
}
.bf-hex {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  isolation: isolate;
}
.bf-hex > svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.bf-hex--main { padding: 20px 43px; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.bf-hex--row { margin-top: -3px; padding: 14px 32px; color: var(--bf-gold); font-size: 19px; font-weight: 600; white-space: nowrap; }
.bf-hex--row > svg { filter: drop-shadow(0 6px 8px rgb(0 0 0 / 30%)); }
.bf-hex--row b { font-weight: 800; }
.bf-hex--row i { font-style: normal; font-weight: 700; }
.bf-hex-badge {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 28px;
  isolation: isolate;
  transform: translateX(-50%);
  color: var(--bf-black);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .8px;
  white-space: nowrap;
}
/* Safari rasterises a filtered, animated element at low resolution, so the drop shadow lives on a layer behind the text */
.bf-hex-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 189 34' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe485'/%3E%3Cstop offset='.5' stop-color='%23ffc928'/%3E%3Cstop offset='1' stop-color='%23f6a10c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8.29 6.64Q13.6 0 22.1 0H166.9Q175.4 0 180.71 6.64L183.69 10.36Q189 17 183.69 23.64L180.71 27.36Q175.4 34 166.9 34H22.1Q13.6 34 8.29 27.36L5.31 23.64Q0 17 5.31 10.36Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 25%));
}
.bf-hex-badge img { width: 16px; height: 16px; }
/* Quiet attention: the gold rims glow softly in turn and the badge drifts a few px */
.bf-hex--main > svg { animation: bf-hex-glow 3.6s ease-in-out infinite; }
.bf-hex--row > svg { animation: bf-hex-glow-row 3.6s ease-in-out infinite; animation-delay: .5s; }
.bf-hex-badge { animation: bf-badge-drift 3.6s ease-in-out infinite; }
.bf-hex-badge img { animation: bf-alarm-ring 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes bf-hex-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgb(255 194 26 / 0%)); }
  50% { filter: drop-shadow(0 0 9px rgb(255 194 26 / 45%)); }
}
@keyframes bf-hex-glow-row {
  0%, 100% { filter: drop-shadow(0 6px 8px rgb(0 0 0 / 30%)); }
  50% { filter: drop-shadow(0 6px 8px rgb(0 0 0 / 30%)) drop-shadow(0 0 8px rgb(255 194 26 / 38%)); }
}
/* Scroll-in: the badge starts big and springs down onto the plate, which gives a small bump */
.bf-js .bf-hex-badge {
  transition: scale .75s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
}
.bf-js .bf-hive-label:not(.is-in) .bf-hex-badge {
  scale: 2.6;
  opacity: 0;
}
.bf-js .bf-hive-label:not(.is-in) .bf-twinkle { animation-play-state: paused; }
.bf-hive-label.is-in .bf-hex--main { animation: bf-plate-land .55s .42s ease-out both; }
@keyframes bf-plate-land {
  0%, 100% { scale: 1; }
  35% { scale: .965 1.04; }
  65% { scale: 1.015 .985; }
}

/* Gold sparkles twinkling around the label, one after another */
.bf-twinkle {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, #fff3c4, #ffc21a);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px rgb(255 194 26 / 80%));
  opacity: 0;
  animation: bf-twinkle 3.2s ease-in-out infinite;
}
.bf-twinkle--1 { left: -14px; top: 14px; }
.bf-twinkle--2 { right: -18px; top: 30px; width: 11px; height: 11px; animation-delay: .8s; }
.bf-twinkle--3 { right: -6px; bottom: -10px; width: 16px; height: 16px; animation-delay: 1.6s; }
.bf-twinkle--4 { left: 4px; bottom: -14px; width: 10px; height: 10px; animation-delay: 2.4s; }
@keyframes bf-twinkle {
  0%, 100% { opacity: 0; scale: .3; rotate: 0deg; }
  15% { opacity: 1; scale: 1; rotate: 45deg; }
  30% { opacity: 0; scale: .4; rotate: 90deg; }
}

@keyframes bf-badge-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes bf-alarm-ring {
  0%, 78%, 100% { rotate: 0deg; }
  82% { rotate: -14deg; }
  86% { rotate: 12deg; }
  90% { rotate: -8deg; }
  94% { rotate: 4deg; }
}

.bf-cta__card { padding: 40px 24px 48px; text-align: center; }
.bf-cta__card::before { opacity: .9; }
.bf-cta__banner { display: block; width: 650px; max-width: 100%; height: auto; margin: 0 auto; }
.bf-was {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 18px;
  color: #8f877a;
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.bf-was s { position: relative; font-size: 46px; font-weight: 800; text-decoration: none; }
.bf-was s::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -12px;
  top: 52%;
  height: 4px;
  border-radius: 2px;
  background: rgb(255 69 58 / 71%);
  transform: rotate(-8deg);
}
.bf-now {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin: 6px 0 0;
  color: #e8dfcb;
  font-family: "Outfit", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}
.bf-now__price {
  background: var(--bf-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -2px;
  filter: drop-shadow(0 4px 16px rgb(255 176 0 / 20%));
}
.bf-btn-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 655px;
  max-width: 100%;
  margin: 32px auto 0;
  padding: 27px 30px;
  border: 1.5px solid var(--bf-gold);
  border-radius: 27px;
  background: linear-gradient(180deg, #26221a 0%, var(--bf-black) 100%);
  box-shadow: 0 14px 34px rgb(255 178 0 / 30%);
  color: #fff !important;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: -1.75px;
  text-decoration: none !important;
  transition: translate .2s ease;
  animation: bf-dark-breathe 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
.bf-btn-dark:hover { translate: 0 -2px; animation-play-state: paused; scale: 1.025; box-shadow: 0 18px 46px rgb(255 178 0 / 50%), 0 0 0 4px rgb(255 194 26 / 14%); }
/* Gentle breathing: a small lift in size, the glow swells, and the arrow nudges toward the click */
@keyframes bf-dark-breathe {
  0%, 100% { scale: 1; box-shadow: 0 14px 34px rgb(255 178 0 / 26%), 0 0 0 0 rgb(255 194 26 / 0%); border-color: rgb(255 194 26 / 80%); }
  50% { scale: 1.022; box-shadow: 0 18px 46px rgb(255 178 0 / 46%), 0 0 0 4px rgb(255 194 26 / 12%); border-color: #ffd54a; }
}
.bf-btn-dark svg { animation: bf-arrow-nudge 3.2s ease-in-out infinite; }
@keyframes bf-arrow-nudge {
  0%, 40%, 100% { translate: 0 0; }
  50% { translate: 5px 0; }
  60% { translate: 0 0; }
}
.bf-btn-dark:focus-visible { outline: 3px solid var(--bf-gold); outline-offset: 4px; }
.bf-btn-dark svg { width: 34px; height: 34px; flex-shrink: 0; }
.bf-cta__trust { display: flex; justify-content: center; margin-top: 16px; }

.bf-cta__box { width: 196px; filter: drop-shadow(0 22px 14px rgb(10 9 12 / 30%)); }
.bf-cta__box--left { left: -13px; top: 262px; transform: rotate(-6deg); }
.bf-cta__box--right { right: -12px; top: 288px; width: 191px; transform: rotate(6deg); }

/* --------------------------------------------------------------------------
   4 · ToonModel bonus card (Black Friday skin over toonmodel-bonus.css)
   -------------------------------------------------------------------------- */
.toonmodel-bonus.bf-bonus { margin-top: 24px; margin-bottom: 56px; }
.bf-bonus .toonmodel-bonus__card {
  overflow: visible;
  border: 1.5px solid rgb(255 194 26 / 45%);
  border-radius: 50px;
  background: var(--bf-card-bg);
  box-shadow: 0 24px 60px rgb(10 9 12 / 25%);
}
.bf-bonus .toonmodel-bonus__card::after { display: none; }
.bf-bonus .toonmodel-bonus__card::before { opacity: .55; }
.bf-bonus .toonmodel-bonus__badge {
  padding: 16px 44px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 548 66' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe485'/%3E%3Cstop offset='.5' stop-color='%23ffc928'/%3E%3Cstop offset='1' stop-color='%23f6a10c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16.09 12.88Q26.4 0 42.9 0H505.1Q521.6 0 531.91 12.88L537.69 20.12Q548 33 537.69 45.88L531.91 53.12Q521.6 66 505.1 66H42.9Q26.4 66 16.09 53.12L10.31 45.88Q0 33 10.31 20.12Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 25%));
  color: var(--bf-black);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
.bf-bonus .toonmodel-bonus__intro h2 { color: var(--bf-cream); }
.bf-bonus .toonmodel-bonus__title-line { color: var(--bf-cream); }
.bf-bonus .toonmodel-bonus__lifetime {
  background: var(--bf-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bf-bonus .toonmodel-bonus__subtitle { color: var(--bf-cream); }
.bf-bonus .toonmodel-bonus__daily { color: var(--bf-ink); }
.bf-bonus .toonmodel-bonus__description p { color: var(--bf-muted); }
.bf-bonus .toonmodel-bonus__description strong,
.bf-bonus .toonmodel-bonus__benefit strong { color: var(--bf-cream); }
.bf-bonus .toonmodel-bonus__topics li {
  border: 1px solid rgb(255 201 40 / 40%);
  border-radius: 10px;
  background: rgb(255 255 255 / 4%);
  box-shadow: none;
  color: var(--bf-gold-soft);
}
.bf-bonus .toonmodel-bonus__cta {
  width: fit-content;
  min-width: 0;
  margin: 0 auto;
  max-width: 100%;
  padding: 22px 30px;
  white-space: nowrap;
  gap: 14px;
  border: 1px solid rgb(194 127 15 / 60%);
  border-radius: 22px;
  background: var(--bf-gold-grad);
  box-shadow: 0 10px 22px rgb(255 176 0 / 20%), 0 4px 10px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -3px 0 rgb(184 101 0 / 20%);
  color: #1a1206;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.05px;
}
.bf-bonus .toonmodel-bonus__cta { position: relative; }
.bf-bonus .toonmodel-bonus__cta svg { width: 38px; height: 38px; flex-shrink: 0; }
.bf-bonus .toonmodel-bonus__cta {
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, filter .35s ease;
}
.bf-bonus .toonmodel-bonus__cta svg { transition: translate .35s cubic-bezier(.34, 1.56, .64, 1); }
/* Hover: the button lifts off the card, its shadow drops deeper and the arrow leans forward */
.bf-bonus .toonmodel-bonus__cta:hover {
  color: #1a1206;
  translate: 0 -6px;
  filter: brightness(1.05);
  box-shadow: 0 20px 36px rgb(255 176 0 / 26%), 0 12px 18px rgb(0 0 0 / 45%), inset 0 1.5px 0 rgb(255 247 207 / 85%), inset 0 -3px 0 rgb(184 101 0 / 20%);
}
.bf-bonus .toonmodel-bonus__cta:hover svg { translate: 4px 0; }
.bf-bonus .toonmodel-bonus__cta:active {
  translate: 0 -2px;
  transition-duration: .1s;
  box-shadow: 0 10px 22px rgb(255 176 0 / 35%), 0 4px 8px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -2px 0 rgb(184 101 0 / 20%);
}
.bf-bonus__bee { width: 204px; }
.bf-bonus__bee--gift { left: 52px; bottom: 35px; }
.bf-bonus__bee--point { right: 87px; top: 61px; width: 211px; }

/* --------------------------------------------------------------------------
   5 · Final pricing
   -------------------------------------------------------------------------- */
.bf-final { padding: 40px 24px 80px; background: #fff; }
.bf-final__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1780px;
  margin: 0 auto;
  padding: 90px 15px 80px;
  border-radius: 48px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgb(255 176 0 / 11%) 0%, rgb(255 176 0 / 3%) 45%, rgb(10 9 12 / 0%) 100%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgb(255 122 26 / 9%) 0%, rgb(194 65 12 / 4%) 50%, rgb(10 9 12 / 0%) 100%),
    linear-gradient(180deg, #1d1928 0%, #120f17 40%, rgb(10 9 12 / 0%) 70%),
    var(--bf-black);
  box-shadow: 0 24px 60px rgb(10 9 12 / 25%);
}
.bf-final__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.bf-final__lines::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The hive lines are drawn around the 460px card in a 1320 frame: keep that scale, centred on the card */
  background: url("../images/black-friday/bf-hive-lines.svg") center top / 1320px auto no-repeat;
}
.bf-final__lines::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 1000px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(10 9 12 / 95%) 0%, rgb(10 9 12 / 85%) 60%, rgb(10 9 12 / 0%) 100%);
  filter: blur(20px);
}
.bf-final__title {
  position: relative;
  margin: 0 auto;
  padding: 0 12px;
  color: #fff;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2.8px;
  text-align: center;
}
.bf-final__stage { position: relative; z-index: 3; width: 460px; max-width: 100%; margin: 64px auto 0; }

.bf-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 50px 66px 44px;
  border: 2px solid var(--bf-gold);
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 0 40px rgb(255 176 0 / 35%), 0 24px 60px rgb(0 0 0 / 40%);
  font-family: "Outfit", sans-serif;
  color: var(--bf-ink);
  text-align: left;
}
.bf-ribbon {
  position: absolute;
  top: -24px;
  left: 50%;
  display: flex;
  width: 418px;
  max-width: calc(100% - 20px);
  height: 48px;
  transform: translateX(-50%);
  isolation: isolate;
  font-family: "Outfit", sans-serif;
  line-height: 1;
}
.bf-ribbon > svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.bf-ribbon__shadow { filter: drop-shadow(0 6px 24px rgb(255 176 0 / 35%)); }
.bf-ribbon__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 64%;
  padding: 0 0 0 30px;
  color: var(--bf-black);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.bf-ribbon__tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.bf-ribbon__deal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: var(--bf-gold-grad-x);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.3px;
  white-space: nowrap;
}

.bf-plan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-plan__name { margin: 0; color: var(--bf-ink); font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.bf-plan__badge {
  display: inline-block;
  padding: 10px 14px;
  border: 1.5px solid rgb(255 194 26 / 40%);
  border-radius: 11px;
  background: #16131a;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.bf-price-card__was {
  position: relative;
  display: inline-block;
  margin: 18px 0 8px;
  color: #707070;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.8px;
}
.bf-price-card__was::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 3px;
  border-radius: 2px;
  background: rgb(240 48 48 / 54%);
  transform: rotate(-3deg);
}
.bf-price-card__now { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--bf-ink); font-family: "Zalando Sans SemiExpanded", sans-serif; line-height: 1.2; }
.bf-price-card__now b { font-size: 56px; font-weight: 800; }
.bf-price-card__now span { font-size: 20px; font-weight: 400; }
.bf-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bf-list li { position: relative; padding-left: 34px; color: var(--bf-ink); font-size: 21px; line-height: 1.2; }
.bf-list li svg { position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.bf-list mark { padding: 0 6px; border-radius: 5px; background: linear-gradient(90deg, #ffd84a 0%, #ffbf1f 100%); color: var(--bf-ink); font-weight: 800; }
.bf-buy-wrap { margin: 0; }
.bf-price-card .bf-buy { display: flex; width: 100%; padding: 24px 20px; border-radius: 20px; font-size: 26px; letter-spacing: -.3px; }
.bf-price-card .bf-buy svg { width: 32px; height: 32px; }
/* Final buy button: soft gold pulse ring, an arrow that nudges forward, and a springy lift on hover */
.bf-price-card .bf-buy {
  position: relative;
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, filter .35s ease;
}
.bf-price-card .bf-buy::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  animation: bf-cta-ring-amber 2.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
.bf-price-card .bf-buy svg { animation: bf-arrow-nudge 2.2s ease-in-out infinite; }
.bf-price-card .bf-buy:hover {
  translate: 0 -5px;
  transform: none;
  filter: brightness(1.05);
  box-shadow: 0 20px 36px rgb(255 176 0 / 30%), 0 12px 18px rgb(0 0 0 / 30%), inset 0 1.5px 0 rgb(255 247 207 / 85%), inset 0 -3px 0 rgb(184 101 0 / 20%);
}
.bf-price-card .bf-buy:hover svg { animation-play-state: paused; translate: 4px 0; }
.bf-price-card .bf-buy:active { translate: 0 -1px; transition-duration: .1s; }
.bf-price-card__trust { gap: 10px; justify-content: center; }
.bf-price-card__trust .bf-trust__cards { width: 162px; height: 19px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%)); }
.bf-price-card__trust .bf-trust__div { background: rgb(10 9 12 / 12%); }
.bf-price-card__trust .bf-seal { width: 34px; height: 34px; }
.bf-price-card__trust .bf-seal::before { inset: 4.5px; }
.bf-price-card__trust .bf-seal b { font-size: 12px; }
.bf-price-card__trust .bf-seal small { font-size: 4.8px; }
.bf-price-card__trust .bf-trust__text { color: var(--bf-ink); font-size: 12px; line-height: 1.15; }

/* Two plans: $37 without the bonus beside the $47 bundle with AI ToonModel */
.bf-final__stage--duo { width: 936px; }
.bf-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; align-items: stretch; gap: 16px; }
.bf-plans .bf-price-card { justify-content: flex-start; }
.bf-plans .bf-buy-wrap { margin-top: auto; }
.bf-plans .bf-buy { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.bf-plans .bf-plan { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 374px) { .bf-plans .bf-plan { flex-wrap: wrap; } }
.bf-price-card--basic { border-color: #e4dccb; box-shadow: 0 18px 44px rgb(0 0 0 / 35%); }
.bf-list li.bf-list__no { color: #9a9384; }
.bf-list li.bf-list__no span { display: block; }
.bf-price-card .bf-btn-outline {
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid var(--bf-black);
  background: #fff;
  box-shadow: 0 6px 14px rgb(0 0 0 / 12%);
  color: var(--bf-ink);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
/* The $37 button stays still: no ring, no arrow nudge, no hover lift */
.bf-price-card .bf-btn-outline::after,
.bf-price-card .bf-btn-outline svg { animation: none; }
.bf-price-card .bf-btn-outline,
.bf-price-card .bf-btn-outline:hover,
.bf-price-card .bf-btn-outline:active { translate: none; transition: none; }
.bf-price-card .bf-btn-outline:hover { color: var(--bf-ink); filter: none; box-shadow: 0 6px 14px rgb(0 0 0 / 12%); }
.bf-price-card .bf-btn-outline:hover svg { translate: none; }

/* Decorations, positioned from the centre of the panel so they hug the card */
.bf-final__deco--bee { left: calc(50% - 561px); top: 313px; width: 300px; }
.bf-final__deco--pct { z-index: 1; left: calc(50% + 202px); top: 305px; width: 138px; transform: rotate(-13.4deg); }
.bf-final__deco--sale { right: -18px; top: -44px; width: 220px; transform: rotate(10deg); }
.bf-final__deco--gift { z-index: 1; left: calc(50% - 402px); bottom: 71px; width: 197px; transform: rotate(-8deg); }
.bf-final__deco--coin1 { left: calc(50% + 539px); bottom: 51px; width: 112px; transform: rotate(12deg); }
.bf-final__deco--coin2 { left: calc(50% + 493px); bottom: 171px; width: 74px; opacity: .9; transform: rotate(-20deg); }
.bf-final__deco--coin3 { left: calc(50% + 585px); bottom: 188px; width: 56px; opacity: .75; filter: blur(1.5px); transform: rotate(30deg); }
/* Two plans are wider than one card: push the decorations out to the panel edges, and drop them where there's no room */
@media (min-width: 1400px) {
  .bf-final__stage--duo ~ .bf-final__deco--bee { left: calc(50% - 770px); top: 325px; }
  .bf-final__stage--duo ~ .bf-final__deco--pct { left: calc(50% + 484px); top: 308px; }
  .bf-final__stage--duo ~ .bf-final__deco--gift { left: calc(50% - 680px); bottom: 66px; }
  .bf-final__stage--duo ~ .bf-final__deco--coin1 { left: calc(50% + 609px); bottom: 32px; }
  .bf-final__stage--duo ~ .bf-final__deco--coin2 { left: calc(50% + 563px); bottom: 152px; }
  .bf-final__stage--duo ~ .bf-final__deco--coin3 { left: calc(50% + 655px); bottom: 169px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .bf-final__stage--duo ~ .bf-final__deco--bee { left: calc(50% - 650px); top: 360px; width: 200px; }
  .bf-final__stage--duo ~ .bf-final__deco--pct { left: calc(50% + 478px); top: 360px; width: 104px; }
  .bf-final__stage--duo ~ .bf-final__deco--gift { left: calc(50% - 600px); width: 150px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .bf-final__stage--duo ~ .bf-final__deco--bee,
  .bf-final__stage--duo ~ .bf-final__deco--pct,
  .bf-final__stage--duo ~ .bf-final__deco--gift { display: none; }
}
@media (max-width: 991px) {
  .bf-final__stage--duo { width: 460px; }
  .bf-plans { grid-template-columns: minmax(0, 460px); gap: 64px; }
}

/* --------------------------------------------------------------------------
   6 · Special bonus (gift)
   -------------------------------------------------------------------------- */
.section14.bf-gift-section { background: #fff; }
.bf-gift-section .section14-title { margin-bottom: 0; }
.bf-gift {
  position: relative;
  width: 927px;
  max-width: 100%;
  margin: 40px auto 0;
}
.bf-gift__card {
  padding: 52px 16px 56px;
  border-radius: 44px;
  font-family: "Outfit", sans-serif;
  text-align: center;
}
.bf-gift__card::before { opacity: .9; }
.bf-gift__included { margin: 0; color: #fff; font-size: 25px; font-weight: 600; line-height: 1.2; }
.bf-gift__included mark { display: inline-block; margin: 0 4px; padding: 1px 9px; border-radius: 6px; background: linear-gradient(90deg, #ffd84a 0%, #ffbf1f 100%); color: var(--bf-ink); font-weight: 800; letter-spacing: .5px; }
.bf-gift__included b { font-weight: 800; background: linear-gradient(180deg, #ffe485 0%, #f6a10c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.bf-voucher {
  position: relative;
  display: flex;
  width: 590px;
  max-width: 100%;
  min-height: 149px;
  margin: 22px auto 0;
  overflow: hidden;
  border: 1.5px solid #ffe7a3;
  border-radius: 18px;
  background: linear-gradient(110deg, #ffe68f 0%, #ffc928 50%, #f3a00e 100%);
  box-shadow: 0 14px 36px rgb(255 176 0 / 25%), inset 0 1.5px 0 rgb(255 246 208 / 70%);
  text-align: left;
}
.bf-voucher__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 150px;
  padding: 22px 0;
  border-right: 2px dashed rgb(138 90 10 / 40%);
  background: linear-gradient(180deg, #1d1810 0%, #0c0a0d 100%);
}
.bf-voucher__tab svg { width: 30px; height: 30px; }
.bf-voucher__free { background: linear-gradient(180deg, #ffe485 0%, #f6a10c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: .5px; }
.bf-voucher__bonus { color: #efe4cf; font-size: 12px; font-weight: 700; letter-spacing: 3px; }
/* The gift hops and wiggles every few seconds while FREE glows softly */
.bf-voucher__tab svg { transform-origin: 50% 90%; animation: bf-gift-hop 3.6s ease-in-out infinite; }
.bf-voucher__free { animation: bf-free-glow 3.6s ease-in-out infinite; }
@keyframes bf-gift-hop {
  0%, 62%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  68% { translate: 0 -7px; scale: 1.08; rotate: -8deg; }
  74% { translate: 0 0; scale: 1; rotate: 7deg; }
  79% { rotate: -5deg; }
  84% { rotate: 3deg; }
  89% { rotate: 0deg; }
}
@keyframes bf-free-glow {
  0%, 55%, 100% { filter: drop-shadow(0 0 0 rgb(255 194 26 / 0%)); }
  72% { filter: drop-shadow(0 0 10px rgb(255 194 26 / 55%)); }
}
.bf-voucher__notch {
  position: absolute;
  left: 140px;
  width: 22px;
  height: 22px;
  border: 1.5px solid #ffe7a3;
  border-radius: 50%;
  background: #0f0d0f;
}
.bf-voucher__notch--top { top: -11px; }
.bf-voucher__notch--bottom { bottom: -11px; }
.bf-voucher__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 28px 24px 26px; }
.bf-voucher__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--bf-ink);
  color: #ffd24a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.2;
}
.bf-voucher__chip svg { width: 12px; height: 12px; }
.bf-voucher__title { margin: 0; color: var(--bf-ink); font-family: "Zalando Sans SemiExpanded", sans-serif; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.6px; }
.bf-voucher__access { display: inline-flex; align-items: center; gap: 7px; color: #251b05; font-size: 19px; font-weight: 700; }
.bf-voucher__access svg { width: 20px; height: 20px; }

.bf-gift .toonmodel-gift__meaning { max-width: 560px; margin: 22px auto 20px; color: #fff; font-size: 22px; line-height: 1.4; }
.bf-gift .toonmodel-gift__meaning strong { color: #ffd24a; }
.bf-gift .toonmodel-gift__meaning span { margin-top: 8px; color: #ded8c8; font-size: 17px; }
.bf-gift .toonmodel-bonus__availability { margin: 0 auto 14px; }
.bf-gift .toonmodel-gift__limit { max-width: 560px; margin: 0 auto; color: #ded8c8; font-size: 17px; line-height: 1.5; }
.bf-gift .bf-gift__cta {
  width: 550px;
  max-width: 100%;
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 22px;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.05px;
}
.bf-gift .bf-gift__cta svg { width: 38px; height: 38px; }
/* Same treatment as the ToonModel bonus CTA: soft glow, gentle pulse ring, lift on hover */
.bf-gift .bf-gift__cta {
  position: relative;
  box-shadow: 0 10px 22px rgb(255 176 0 / 20%), 0 4px 10px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -3px 0 rgb(184 101 0 / 20%);
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, filter .35s ease;
}
.bf-gift .bf-gift__cta::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  animation: bf-cta-ring-soft 2.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
.bf-gift .bf-gift__cta svg { transition: translate .35s cubic-bezier(.34, 1.56, .64, 1); }
.bf-gift .bf-gift__cta:hover {
  transform: none;
  translate: 0 -6px;
  filter: brightness(1.05);
  box-shadow: 0 20px 36px rgb(255 176 0 / 26%), 0 12px 18px rgb(0 0 0 / 45%), inset 0 1.5px 0 rgb(255 247 207 / 85%), inset 0 -3px 0 rgb(184 101 0 / 20%);
}
.bf-gift .bf-gift__cta:hover svg { translate: 4px 0; }
.bf-gift .bf-gift__cta:active {
  translate: 0 -2px;
  transition-duration: .1s;
  box-shadow: 0 10px 22px rgb(255 176 0 / 35%), 0 4px 8px rgb(0 0 0 / 40%), inset 0 1.5px 0 rgb(255 247 207 / 80%), inset 0 -2px 0 rgb(184 101 0 / 20%);
}

.bf-gift__box { width: 173px; filter: drop-shadow(0 22px 14px rgb(10 9 12 / 28%)); }
.bf-gift__box--left { left: -38px; top: 178px; transform: rotate(-6deg); }
.bf-gift__box--right { right: -51px; top: 180px; width: 168px; transform: rotate(6deg); }
.bf-gift__bee { right: -45px; top: -111px; width: 188px; }
.bf-gift__giftbox { left: -54px; bottom: -18px; width: 157px; transform: rotate(-8deg); }

/* --------------------------------------------------------------------------
   7 · Countdown bar (promo-kit) Black Friday skin
   -------------------------------------------------------------------------- */
.bf-sale #promo-countdown-bar {
  gap: 44px;
  padding: 17px 24px max(14px, env(safe-area-inset-bottom));
  color: #fff;
  background:
    linear-gradient(90deg, #5c430b, #ffd24a 50%, #5c430b) top / 100% 2px no-repeat,
    linear-gradient(180deg, #16130d 0%, #060507 100%);
  border-top: 0;
  box-shadow: 0 -12px 32px rgb(0 0 0 / 30%);
}
.bf-sale .promo-bar-text { position: relative; padding-left: 62px; text-align: left; }
.bf-bar-badge {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd24a 0%, #ff9d00 100%);
  box-shadow: 0 6px 18px rgb(255 178 0 / 30%);
  transform: translateY(-50%) rotate(6deg);
}
.bf-bar-badge svg { width: 24px; height: 24px; }
.bf-sale .promo-bar-headline { color: #fff; font-family: "Zalando Sans SemiExpanded", sans-serif; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.bf-sale .promo-bar-headline em { font-style: normal; color: var(--bf-gold); }
.bf-sale .promo-bar-subtext { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; color: #b9b3a7; font-size: 14px; line-height: 1.5; opacity: 1; }
.bf-sale .promo-bar-subtext strong { display: inline-block; padding: 1px 8px; border-radius: 5px; background: #e0201b; color: #fff; font-weight: 900; transform: rotate(-3deg); }
.bf-bar-limited { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid rgb(255 255 255 / 18%); color: var(--bf-gold); font-weight: 800; letter-spacing: .6px; }
.bf-bar-limited svg { width: 14px; height: 14px; }
.bf-sale .promo-time-num { width: 50px; height: 48px; background: linear-gradient(180deg, #1d1910 0%, #0d0b08 100%); border: 1px solid rgb(255 194 26 / 28%); border-radius: 10px; box-shadow: none; }
.bf-sale .promo-time-current,
.bf-sale .promo-time-next { color: #ffd24a; font-family: "Zalando Sans SemiExpanded", sans-serif; font-size: 23px; line-height: 46px; font-weight: 800; }
.bf-sale .promo-time-label { color: #8f897e; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.bf-sale .promo-time-sep { color: var(--bf-gold); opacity: .9; font-weight: 800; }
.bf-sale #bv-proof { bottom: 12px; }
.bf-sale.checkout-open #promo-countdown-bar { visibility: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1441px) {
  .bf-hero__sky {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
}

@media (max-width: 1399px) {
  .bf-final__deco--coin3 { display: none; }
}

@media (max-width: 1199px) {
  .bf-hero .banner-headline-1 { font-size: 62px; }
  .bf-hero .banner-headline-2 { font-size: 63px; }
  .bf-hero .banner-headline-3 { font-size: 46px; }
  .bf-hero__rocket { left: 250px; top: 36px; width: 260px; }
  .bf-hero .banner-headline-4 { font-size: 19px; }

  .bf-cta__box { width: 160px; }
  .bf-cta__box--left { left: -10px; top: 280px; }
  .bf-cta__box--right { right: -10px; width: 156px; top: 294px; }
  .bf-bonus__bee { width: 170px; }
  .bf-bonus__bee--gift { left: 20px; bottom: 20px; }
  .bf-bonus__bee--point { right: 24px; top: 30px; width: 170px; }

  .bf-final__deco--bee { left: calc(50% - 470px); width: 240px; }
  .bf-final__deco--sale { width: 180px; }
  .bf-final__deco--pct { left: calc(50% + 200px); }
  .bf-final__deco--gift { left: calc(50% - 400px); width: 170px; }
  .bf-final__deco--coin1 { left: calc(50% + 330px); }
  .bf-final__deco--coin2 { left: calc(50% + 300px); }
  .bf-gift__box { width: 140px; }
  .bf-gift__box--left { left: -20px; top: 200px; }
  .bf-gift__box--right { right: -20px; top: 200px; width: 136px; }
  .bf-gift__bee { right: -10px; width: 160px; top: -100px; }
}

@media (max-width: 991px) {
  .bf-topbar__sep,
  .bf-topbar__limited,
  .bf-bar-limited { display: none; }
  .bf-topbar__msg { flex-wrap: nowrap; white-space: nowrap; }
  /* Header stacks: headline, video (moved by the page script), offer, CTA */
  .bf-hero__sky { left: calc(50% - 1095px); top: 190px; width: 1500px; height: 957px; }
  .bf-hero .bf-hero__container { padding-top: 36px; }
  .bf-hero .header-left { text-align: center; }
  .bf-hero .banner-headline-1,
  .bf-hero .banner-headline-2,
  .bf-hero .banner-headline-3 { margin: 0; line-height: .96; }
  .bf-hero .banner-headline-2 + .banner-headline-2 { margin-top: 2px; }
  .bf-hero .banner-headline-3 { margin-top: 6px; }
  .bf-hero .banner-headline-4 { margin-top: 14px; }
  /* The rocket badge becomes a centred kicker above the headline */
  .bf-hero__rocket { position: relative; left: auto; top: auto; display: block; width: 250px; margin: 0 auto 10px; }
  .bf-spark--cartoon { left: -14px; }
  .bf-offer-pill { margin-left: auto; margin-right: auto; }
  .bf-hero__cta { display: flex; margin-left: auto; margin-right: auto; }
  .bf-hero__trust { display: flex; justify-content: center; }
  .bf-hero .header-right { margin: 22px auto 0; }
  .bf-hero .bf-hero__proof { margin-top: 36px; }

  .bf-cta__box,
  .bf-gift__box { display: none; }
  .bf-hex--main { font-size: 26px; padding: 18px 36px; }
  .bf-hex--row { font-size: 17px; padding: 13px 26px; }
  .bf-btn-dark { font-size: 28px; padding: 22px 24px; }
  .bf-now__price { font-size: 76px; }

  .bf-final__title { font-size: 44px; letter-spacing: -1.8px; }
  .bf-final__deco--bee { left: calc(50% - 366px); top: 380px; width: 128px; }
  .bf-final__deco--sale { right: -14px; top: -36px; width: 150px; }
  .bf-final__deco--pct { left: calc(50% + 240px); top: 370px; width: 92px; }
  .bf-final__deco--gift { left: calc(50% - 366px); width: 128px; }
  .bf-final__deco--coin1 { left: calc(50% + 260px); bottom: 60px; width: 90px; }
  .bf-final__deco--coin2 { left: calc(50% + 250px); bottom: 170px; width: 60px; }

  .bf-gift__bee { right: -6px; top: -90px; width: 140px; }
  .bf-gift__giftbox { left: -16px; bottom: -14px; width: 120px; }

  /* promo-kit stacks the bar under 900px; keep it one compact row instead */
  .bf-sale #promo-countdown-bar { flex-direction: row; align-items: center; justify-content: center; gap: 24px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .bf-sale .promo-bar-text { align-self: center; margin-right: 0; padding-left: 54px; text-align: left; }
  .bf-bar-badge { width: 40px; height: 40px; border-radius: 12px; }
  .bf-bar-badge svg { width: 21px; height: 21px; }
}

@media (max-width: 767px) {
  /* style.css crops the intro (and "no other tool") video by making it ~2x wide and shifting it left; style_new.css caps videos at 100%,
     which keeps the shift but not the width and leaves the right half white */
  .bf-sale .bigleap-video,
  .bf-sale .bigleap-video-2 { max-width: none; }
  .bf-topbar { gap: 10px; min-height: 42px; padding: 7px 10px; }
  .bf-topbar__sep,
  .bf-topbar__limited { display: none; }
  .bf-topbar__msg { gap: 5px; font-size: 13px; }
  .bf-topbar__msg strong { letter-spacing: 0; }
  .bf-topbar__dash { display: none; }
  .bf-topbar__price { padding: 4px 6px; font-size: 14px; }
  .bf-topbar__live { padding: 5px 8px; font-size: 10px; }

  .bf-hero__sky { left: calc(50% - 803px); top: 60px; width: 1100px; height: 702px; }
  .bf-hero .bf-hero__container { padding-top: 18px; }
  /* style_new.css forces the phone headline with !important, so these have to as well */
  .bf-hero .banner-headline span { font-size: inherit !important; }
  .bf-hero .banner-headline-1 { font-size: 38px !important; line-height: .96 !important; margin-top: 0 !important; }
  .bf-hero .banner-headline-2 { font-size: 41px !important; line-height: .94 !important; }
  .bf-hero .banner-headline-3 { font-size: 28px !important; line-height: 1 !important; margin-top: 5px !important; }
  .bf-hero .banner-headline-4 { font-size: 16px !important; line-height: 1.3 !important; margin-top: 10px !important; }
  .bf-hero__rocket { display: none; }
  .bf-hero .header-right { margin-top: 14px; }
  .bf-spark { display: none; }
  .bf-ul::after { display: none; }
  .bf-hero .bf-offer-pill { margin-top: 14px; }
  .bf-hero .bf-hero__cta { margin-top: 10px; }
  .bf-offer-pill__tab { padding: 11px 10px; font-size: 12px; letter-spacing: 1px; }
  .bf-offer-pill__tab svg { width: 13px; height: 13px; }
  .bf-offer-pill__deal { padding: 6px 12px; font-size: 21px; }
  .bf-hero__cta,
  .bf-offer-pill { width: 100%; }
  .bf-hero__cta { gap: 10px; white-space: nowrap; font-size: 18px; letter-spacing: -.4px; padding: 14px 12px; }
  .bf-hero .text-bg-1-new-inn.bf-caption { font-size: 17px; padding: 5px 14px; }
  .bf-stat-tile,
  .bf-stat-tile img { width: 56px; height: 56px; border-radius: 14px; }

  .bf-cta { padding: 36px 12px 44px; }
  .bf-hive-label { margin: 24px auto 30px; max-width: 100%; }
  .bf-hex--main { padding: 15px 28px; font-size: 21px; }
  .bf-hex--row { padding: 11px 20px; font-size: 13px; }
  .bf-hex-badge { top: -26px; padding: 9px 22px; font-size: 10px; }
  .bf-cta__card { padding: 30px 16px 34px; border-radius: 30px; }
  .bf-was { gap: 8px; margin: 20px 0 12px; font-size: 24px; }
  .bf-was s { font-size: 28px; }
  .bf-now { flex-direction: column; align-items: center; gap: 6px; font-size: 20px; text-align: center; }
  .bf-now__lead { display: none; }
  .bf-now__price { font-size: 64px; }
  .bf-btn-dark { margin-top: 24px; padding: 18px 16px; border-radius: 20px; font-size: 21px; letter-spacing: -.8px; gap: 10px; }
  .bf-btn-dark svg { width: 28px; height: 28px; }

  .toonmodel-bonus.bf-bonus { margin-bottom: 36px; }
  .bf-bonus .toonmodel-bonus__card { padding-bottom: 150px; border-radius: 30px; }
  .bf-bonus .toonmodel-bonus__badge { padding: 10px 18px; border-radius: 16px; background: var(--bf-gold-grad); font-size: 15px; line-height: 1.3; }
  .bf-bonus .toonmodel-bonus__cta { width: 100%; padding: 18px 16px; white-space: normal; font-size: 20px; letter-spacing: -.6px; }
  .bf-bonus .toonmodel-bonus__cta svg { width: 30px; height: 30px; }
  .bf-bonus__bee { width: 120px; }
  .bf-bonus__bee--gift { left: 12px; bottom: 10px; }
  .bf-bonus__bee--point { right: 10px; top: auto; bottom: 14px; width: 120px; }

  .bf-final { padding: 24px 10px 56px; }
  .bf-final__panel { padding: 92px 12px 190px; border-radius: 32px; }
  .bf-final__title { font-size: 30px; letter-spacing: -1px; }
  .bf-final__stage { margin-top: 56px; }
  .bf-price-card { padding: 44px 22px 30px; gap: 24px; border-radius: 28px; }
  .bf-ribbon { height: 42px; }
  .bf-ribbon__tab { padding-left: 18px; font-size: 14px; letter-spacing: .6px; }
  .bf-ribbon__tab svg { width: 13px; height: 13px; }
  .bf-ribbon__deal { font-size: 20px; }
  .bf-plan__name { font-size: 28px; }
  .bf-plan__badge { padding: 8px 11px; font-size: 16px; }
  .bf-price-card__was { font-size: 26px; }
  .bf-price-card__now b { font-size: 48px; }
  .bf-list li { font-size: 18px; }
  .bf-price-card .bf-buy { font-size: 22px; }
  .bf-final__deco--bee { left: 4px; top: auto; bottom: 20px; width: 170px; }
  .bf-final__deco--gift { left: auto; right: 64px; bottom: 26px; width: 120px; }
  .bf-final__deco--sale { right: -10px; top: -24px; width: 104px; }
  .bf-price-card__trust { flex-wrap: wrap; row-gap: 10px; }
  .bf-price-card__trust .bf-trust__div { display: none; }
  .bf-final__deco--pct,
  .bf-final__deco--coin2 { display: none; }
  .bf-final__deco--coin1 { left: auto; right: 8px; bottom: 34px; width: 58px; }

  .bf-gift { margin-top: 28px; }
  .bf-gift__card { padding: 40px 14px 150px; border-radius: 30px; }
  .bf-gift__included { font-size: 20px; }
  .bf-voucher { flex-direction: column; min-height: 0; }
  .bf-voucher__tab { flex-basis: auto; flex-direction: row; gap: 8px; padding: 14px; border-right: 0; border-bottom: 2px dashed rgb(138 90 10 / 40%); }
  .bf-voucher__free { font-size: 28px; }
  .bf-voucher__notch { display: none; }
  .bf-voucher__body { align-items: center; padding: 18px 14px; text-align: center; }
  .bf-voucher__title { font-size: 28px; }
  .bf-gift .toonmodel-gift__meaning { font-size: 19px; }
  .bf-gift .bf-gift__cta { font-size: 20px; padding: 18px 16px; letter-spacing: -.6px; }
  .bf-gift .bf-gift__cta svg { width: 30px; height: 30px; }
  .bf-gift__bee { right: 6px; top: auto; bottom: 16px; width: 120px; }
  .bf-gift__giftbox { left: 10px; bottom: 16px; width: 112px; }

  .bf-sale #promo-countdown-bar { justify-content: space-between; gap: 8px; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
  .bf-sale .promo-bar-text { flex: 1 1 auto; min-width: 0; padding-left: 0; }
  .bf-bar-badge,
  .bf-bar-limited,
  .bf-bar-sale { display: none; }
  .bf-sale .promo-bar-headline { font-size: 16px; line-height: 1.2; letter-spacing: -.02em; }
  .bf-sale .promo-bar-subtext { gap: 4px; margin-top: 4px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
  .bf-sale .promo-bar-subtext strong { padding: 0 5px; }
  .bf-sale .promo-bar-timer { gap: 3px; }
  .bf-sale .promo-time-num { width: 29px; height: 34px; border-radius: 8px; }
  .bf-sale .promo-time-current,
  .bf-sale .promo-time-next { font-size: 16px; line-height: 32px; }
  .bf-sale .promo-time-sep { font-size: 13px; line-height: 34px; }
  .bf-sale .promo-time-label { font-size: 7px; letter-spacing: .06em; }
}

@media (max-width: 575px) {
  .bf-topbar__msg strong { display: none; }
  .bf-trust { gap: 10px; }
  .bf-cta__trust { flex-wrap: wrap; row-gap: 10px; }
  .bf-cta__trust .bf-trust__div { display: none; }
  .bf-trust__cards { width: 150px; height: 18px; }
  .bf-trust__text { font-size: 12px; }
  .bf-hex--row { white-space: normal; text-align: center; }
  .bf-final__title { font-size: 26px; }
  .bf-gift-section .section14-title { font-size: 27px !important; letter-spacing: -1px !important; }
  .bf-ribbon__tab { justify-content: center; width: 64%; padding-left: 8px; font-size: 15px; letter-spacing: .3px; }
  .bf-ribbon__tab svg { display: none; }
  .bf-ribbon__deal { font-size: 17px; }
}

@media (max-width: 374px) {
  .bf-sale .promo-bar-headline { font-size: 14.5px; }
  .bf-sale .promo-bar-subtext { font-size: 12px; }
}

@media (max-width: 359px) {
  .bf-sale #promo-countdown-bar { flex-direction: column; gap: 8px; }
  .bf-sale .promo-bar-text { text-align: center; }
  .bf-sale .promo-bar-subtext { justify-content: center; }
  .bf-ribbon__tab { padding-left: 6px; font-size: 13px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-hero__rocket,
  .bf-topbar__dot,
  .bf-hero__cta::after,
  .bf-bonus .toonmodel-bonus__cta::after,
  .bf-price-card .bf-buy::after,
  .bf-gift .bf-gift__cta::after,
  .bf-price-card .bf-buy svg,
  .bf-btn-dark,
  .bf-btn-dark svg,
  .bf-hex > svg,
  .bf-twinkle,
  .bf-voucher__tab svg,
  .bf-voucher__free,
  .bf-hex-badge,
  .bf-hex-badge img { animation: none; }
  .bf-js .bf-hex-badge { transition: none; }
  .bf-js .bf-hive-label:not(.is-in) .bf-hex-badge { scale: 1; opacity: 1; }
  .bf-hive-label.is-in .bf-hex--main { animation: none; }
  .bf-twinkle { display: none; }
  .bf-btn-gold,
  .bf-btn-dark,
  .bf-bonus .toonmodel-bonus__cta,
  .bf-bonus .toonmodel-bonus__cta svg { transition: none; }
}

/* ==========================================================================
   Offer pill under the final pricing title (same look as the PRO page pill)
   ========================================================================== */
.bf-users-line {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 22px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 30px auto 0;
  padding: 14px 30px;
  border: 2px solid rgb(255 194 26 / 60%);
  border-radius: 50px;
  background: rgb(22 19 26 / 90%);
  box-shadow: 0 0 30px rgb(255 176 0 / 25%);
  color: #fff;
  font-family: "Outfit", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  text-align: center;
}
.bf-users-line__deal { color: #ff5a4f; font-weight: 700; }
.bf-users-line__num {
  min-width: 32px;
  margin: 0 2px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1.5px var(--bf-gold);
  font-weight: 700;
  line-height: 1.2;
}
.bf-users-line__num [data-countdown-value] {
  background: linear-gradient(180deg, #ffdc37 0%, #ffac25 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The pill adds height, so the panel gives back some space above the title */
.bf-final__panel:has(.bf-users-line) { padding-top: 56px; }
/* Below 1400px the title reaches the SALE tag in the corner, so it keeps the original clearance */
@media (min-width: 768px) and (max-width: 1399px) {
  .bf-final__panel:has(.bf-users-line) { padding-top: 90px; }
}
@media (max-width: 1199px) {
  .bf-users-line { border-radius: 28px; font-size: 20px; }
}
@media (max-width: 767px) {
  .bf-final__panel:has(.bf-users-line) { padding-top: 64px; }
  .bf-users-line { margin-top: 20px; padding: 10px 16px; border-radius: 22px; font-size: 16px; }
  .bf-users-line__num { min-width: 26px; padding: 3px 10px; border-radius: 6px; }
}