/* The offer banner above the menu (template-parts/offers/banner.php), ported from the Oxilab theme.
   Loaded only while a banner is live. Product Layouts purple on a dark indigo, whichever offer is running;
   the button stays red. */
.bfb { position: relative; z-index: 2; overflow: hidden; isolation: isolate; color: #fff; background: #0c0a33; font-family: Lato, sans-serif; }
.bfb[hidden] { display: none; }
.bfb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(34% 300% at 72% -60%, rgba(81, 86, 252, .62), transparent 72%), radial-gradient(30% 260% at 4% 60%, rgba(81, 86, 252, .3), transparent 72%), linear-gradient(90deg, #0c0a33, #141052 55%, #1b1670); }
.bfb::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129, 133, 255, .8) 30%, rgba(190, 192, 255, .7) 66%, transparent); }
/* Words on the left, the button on the right, and the counter halfway between them. */
.bfb-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; min-height: 92px; padding-block: 8px; }
.bfb a { text-decoration: none; }
.bfb-main { display: flex; align-items: center; gap: 14px; min-width: 0; color: #fff; }
.bfb-main:hover { color: #fff; }
.bfb-sticker { position: relative; flex: none; display: grid; place-content: center; justify-items: center; width: 76px; height: 76px; color: #3a1d00; line-height: 1; transform: rotate(-9deg); animation: bfb-sway 6s ease-in-out infinite; }
.bfb-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
.bfb-sticker b, .bfb-sticker small { position: relative; }
.bfb-sticker b { font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.bfb-sticker small { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bfb-sticker.is-emoji { font-size: 50px; color: inherit; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
@keyframes bfb-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-3deg); } }
.bfb-words { display: grid; gap: 5px; min-width: 0; }
.bfb-title { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; background: linear-gradient(90deg, #ffffff, #dcdcff 60%, #a9abff); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.bfb-sub { font-size: 14px; font-weight: 400; line-height: 1.3; color: #e6e6fb; }
.bfb-side { display: contents; }
.bfb-act { display: flex; flex: none; align-items: center; gap: 16px; }
.bfb-count { display: flex; flex: none; gap: 8px; }
.bfb-count:not(.is-on) { visibility: hidden; }
.bfb-tile { display: grid; justify-items: center; align-content: center; gap: 3px; width: 62px; height: 54px; border-radius: 11px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.bfb-tile b { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.bfb-tile small { font-size: 10.5px; font-weight: 400; line-height: 1; color: #cfd0f2; }
.bfb-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 20px; border-radius: 12px; background: linear-gradient(135deg, #ff3346, #dc1230); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(255, 34, 58, .95); font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.bfb-go:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -10px rgba(255, 34, 58, 1); }
.bfb .ico { display: block; }
.bfb-go .ico { width: 16px; height: 16px; transition: transform .2s; }
.bfb-go:hover .ico { transform: translateX(3px); }
.bfb-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #d6d7f5; cursor: pointer; }
.bfb-close:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.bfb-close .ico { width: 13px; height: 13px; }
.bfb a:focus-visible, .bfb button:focus-visible { outline: 2px solid #a9abff; outline-offset: 2px; }
@media (max-width: 1199.98px) {
  .bfb-title { font-size: 21px; }
  .bfb-count { gap: 6px; }
  .bfb-tile { width: 54px; height: 50px; }
  .bfb-tile b { font-size: 18px; }
  .bfb-go { padding: 0 15px; }
  .bfb-act { gap: 12px; }
}
@media (max-width: 991.98px) {
  .bfb-in { position: relative; flex-direction: column; align-items: stretch; padding-block: 12px 14px; }
  .bfb-main { padding-right: 40px; }
  .bfb-side { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .bfb-act { display: contents; }
  .bfb-close { position: absolute; top: 10px; right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}
@media (max-width: 430px) {
  .bfb-sticker { width: 62px; height: 62px; }
  .bfb-sticker b { font-size: 16px; }
  .bfb-sticker small { font-size: 7.5px; }
  .bfb-sticker.is-emoji { font-size: 42px; }
  .bfb-main { gap: 10px; }
  .bfb-title { font-size: 18px; }
  .bfb-sub { font-size: 13px; }
  .bfb-count { gap: 4px; }
  .bfb-tile { width: 44px; height: 46px; border-radius: 9px; }
  .bfb-tile b { font-size: 16px; }
  .bfb-tile small { font-size: 9.5px; }
  .bfb-go { flex: 1; height: 44px; padding: 0 10px; font-size: 14px; }
  .bfb-side { gap: 8px; }
}
@media (max-width: 360px) {
  .bfb-tile { width: 37px; }
  .bfb-go .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bfb-sticker { animation: none; } .bfb-go, .bfb-go .ico { transition: none; } }

/* The header is fixed with the banner at its top. The page starts below the banner (--pl-bar, its height),
   and when scrolling the banner goes up with the page while the menu stays at the top (offer-banner.js). */
body.pl-has-banner { padding-top: var(--pl-bar, 0px); }
body.pl-has-banner header.fixed-top { top: var(--pl-top, 0px); }
/* The menu turns fixed after a little scrolling (script.js). Here it keeps its place under the banner. */
body.pl-has-banner header.fixed-top .navbar.sticky { position: relative; }
/* Where Get the deal lands on the pricing page, clear of the menu, also when the big section is off. */
#pricing-table { display: block; scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }