/* WhoVPN Black Friday · responsive, embeddable campaign component.
   All selectors are isolated under .whox-bf-shell / .whox-bf.
   Breakpoints depend on the actual component/container width, not viewport. */
.whox-bf-shell {
  --bf-ink: #f8fafc;
  --bf-muted: #b9c5d1;
  --bf-lime: #d4ff27;
  --bf-deep: #07111e;
  display:block;
  width:100%;
  min-width:0;
  container: whoxBlackFriday / inline-size;
  overflow:hidden;
  background:
    radial-gradient(ellipse 58% 64% at 90% 78%, rgba(104,194,90,.19) 0%, transparent 77%),
    radial-gradient(ellipse 65% 58% at 74% 6%, rgba(20,69,78,.19) 0%, transparent 74%),
    linear-gradient(120deg,#081522 0%,#07111e 57%,#0b1824 100%);
}
a.whox-bf-shell,
a.whox-bf-shell:hover,
a.whox-bf-shell:focus {color:var(--bf-ink);text-decoration:none;}
a.whox-bf-shell:focus-visible {outline:3px solid var(--bf-lime);outline-offset:-3px;}
a.whox-bf-shell:hover .whox-bf__cta,
a.whox-bf-shell:focus-visible .whox-bf__cta {background:#e5ff7b;}
.whox-bf-shell *, .whox-bf-shell *::before, .whox-bf-shell *::after { box-sizing:border-box; }
.whox-bf {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  min-width:0;
  min-height:472px;
  overflow:hidden;
  border:0;
  border-radius:0;
  color:var(--bf-ink);
  font-family:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background:transparent;
  box-shadow:none;
}
.whox-bf::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background-image:
    radial-gradient(circle at 68% 16%,#93dfc5 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 26%,#d4ff27 0 1.1px,transparent 1.6px),
    radial-gradient(circle at 59% 69%,#a7ddc9 0 .8px,transparent 1.3px),
    radial-gradient(circle at 83% 87%,#91d8c7 0 1px,transparent 1.5px);
}
.whox-bf__copy {
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
  padding:clamp(30px,4.8cqi,70px) 0 clamp(30px,4cqi,56px) clamp(30px,4.8cqi,70px);
}
.whox-bf__brand {
  margin:0 0 17px;
  font-size:clamp(13px,1.18cqi,17px);
  font-weight:750;
  letter-spacing:.085em;
  text-transform:none;
  color:#eaf2f4;
  text-transform:none;
  letter-spacing:.015em;
}
.whox-bf__brand::before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 10px 2px 0;
  border-radius:50%;
  background:var(--bf-lime);
  box-shadow:0 0 16px rgba(212,255,39,.5);
}
.whox-bf__label {
  margin:0 0 10px;
  font-size:clamp(11px,1cqi,14px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--bf-lime);
  text-transform:uppercase;
}
.whox-bf__title {
  margin:0;
  font-size:clamp(43px,5.5cqi,82px);
  line-height:.98;
  letter-spacing:-.057em;
  font-weight:850;
  text-wrap:balance;
  color:#fff;
}
.whox-bf__title-accent { color:var(--bf-lime); }
.whox-bf__price {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:12px;
  row-gap:3px;
  margin:24px 0 9px;
}
.whox-bf__price-value {
  font-size:clamp(66px,7.8cqi,112px);
  line-height:.93;
  letter-spacing:-.09em;
  font-weight:830;
  white-space:nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.whox-bf__price-period {
  font-size:clamp(19px,2.2cqi,27px);
  font-weight:560;
  color:var(--bf-muted);
  white-space:nowrap;
  letter-spacing:-.02em;
}
.whox-bf__deal {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:8px 0 24px;
}
.whox-bf__saving {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 11px;
  font-size:14px;
  line-height:1.15;
  font-weight:800;
  white-space:nowrap;
  color:#0c1b11;
  background:var(--bf-lime);
  border-radius:100px;
}
.whox-bf__term {
  font-size:clamp(14px,1.4cqi,17px);
  font-weight:540;
  line-height:1.45;
  color:#e4edf3;
}
.whox-bf__row { display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin:0 0 17px; }
.whox-bf__cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-width:196px;
  min-height:54px;
  padding:13px 25px;
  border-radius:999px;
  color:#0b1710;
  background:var(--bf-lime);
  box-shadow:0 7px 26px rgba(212,255,39,.12);
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .18s ease, transform .18s ease,box-shadow .18s ease;
}
.whox-bf__cta svg { width:18px;height:18px; flex:none; }
.whox-bf__cta:hover { background:#e5ff7b;transform:translateY(-2px);box-shadow:0 9px 29px rgba(212,255,39,.18); }
.whox-bf__cta:focus-visible { outline:3px solid #fff;outline-offset:4px; }
.whox-bf__deadline { font-size:14px; line-height:1.4; color:#e0e9ee;font-weight:600; }
.whox-bf__legal { font-size:12px; line-height:1.5; color:var(--bf-muted); margin:0; max-width:590px; }
.whox-bf__scene {
  position:relative;
  z-index:1;
  min-width:0;
  min-height:472px;
  pointer-events:none;
  overflow:visible;
  align-self:stretch;
}
.whox-bf__scene::before {
  content:none;
  position:absolute;
  width:120%;
  aspect-ratio:1;
  bottom:-45%;right:-31%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(117,206,60,.16),rgba(15,85,48,.06) 48%,transparent 72%);
  filter:blur(2px);
}
.whox-bf__scene::after {
  content:none;
  position:absolute;
  right:6%;bottom:0;width:84%;height:28%;
  background:radial-gradient(ellipse at center bottom,rgba(11,26,33,.44),transparent 72%);
}
.whox-bf__alien {
  position:absolute;
  z-index:2;
  bottom:-35px;
  right:5%;
  width:85%;
  max-width:630px;
  height:auto;
  filter:drop-shadow(-24px 18px 24px rgba(0,0,0,.3));
}
.whox-bf__ufo {
  position:absolute;
  z-index:3;
  top:7%;
  left:-15%;
  width:32%;
  max-width:230px;
  height:auto;
  transform:rotate(-9deg);
  filter:drop-shadow(0 0 24px rgba(92,221,122,.23));
}
@container whoxBlackFriday (max-width: 1060px) {
  .whox-bf { min-height:432px; }
  .whox-bf__scene { min-height:432px; }
  .whox-bf__copy { padding:33px 0 33px 34px; }
  .whox-bf__brand {margin-bottom:11px;}
  .whox-bf__title {font-size:clamp(42px,5.5cqi,62px)}
  .whox-bf__price {margin-top:19px;}
  .whox-bf__price-value {font-size:clamp(64px,7.6cqi,86px);}
  .whox-bf__deal { margin-bottom:17px; }
  .whox-bf__alien {bottom:-24px;width:94%;right:1%;}
  .whox-bf__ufo {top:8%;width:32%;left:-17%;}
}
@container whoxBlackFriday (max-width: 620px) {
  .whox-bf {display:block;min-height:unset;border-radius:0;}
  .whox-bf__copy {padding:26px 24px 0;}
  .whox-bf__brand {font-size:14px;margin-bottom:12px;}
  .whox-bf__label {font-size:12px;}
  .whox-bf__title {font-size:clamp(40px,10cqi,58px);}
  .whox-bf__price {margin:16px 0 8px;}
  .whox-bf__price-value {font-size:clamp(60px,14cqi,82px);}
  .whox-bf__price-period {font-size:clamp(18px,3.5cqi,22px);}
  .whox-bf__deal {margin:4px 0 16px;}
  .whox-bf__row {margin-bottom:14px;}

  .whox-bf__scene {min-height:250px;height:250px;overflow:hidden;}
  .whox-bf__alien {width:min(74%,390px);right:3%;bottom:-58px;}
  .whox-bf__ufo {z-index:3;width:min(24%,132px);top:5%;left:6%;}
  .whox-bf__scene::before {width:75%;right:-7%;bottom:-84%;}
}
@container whoxBlackFriday (max-width: 480px) {
  .whox-bf {border-radius:0;}
  .whox-bf__copy {padding:22px 18px 0;}
  .whox-bf__brand {margin-bottom:9px;}
  .whox-bf__label {margin-bottom:7px;font-size:11px;letter-spacing:.12em;}
  .whox-bf__title {font-size:clamp(37px,10.5cqi,49px)}
  .whox-bf__price {gap:2px 10px;}
  .whox-bf__price-value {font-size:clamp(55px,14cqi,66px)}
  .whox-bf__price-period {font-size:18px;}
  .whox-bf__saving {min-height:27px;padding:4px 9px;font-size:12px;}
  .whox-bf__term {font-size:14px;}
  .whox-bf__row {align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:16px;}
  .whox-bf__cta {min-height:48px;min-width:0;width:100%;padding-block:11px;}
  .whox-bf__deadline {font-size:13px;}

  .whox-bf__scene {height:220px;min-height:220px;}
  .whox-bf__alien {right:4%;width:82%;bottom:-50px;}
  .whox-bf__ufo {width:21%;left:4%;top:2%;}
}
@container whoxBlackFriday (max-width: 345px) {
  .whox-bf__copy {padding-inline:17px;}
  .whox-bf__title {font-size:38px;}
  .whox-bf__price-value {font-size:61px;}
  .whox-bf__price-period {font-size:18px;}
  .whox-bf__term {font-size:13px;}
}
@media (prefers-reduced-motion: reduce) {
  .whox-bf__cta {transition:none;}
  .whox-bf__cta:hover {transform:none;}
}

/* Integrated layout: one full-width background, artwork contained in its own
   grid cell. Capped fluid values keep ultrawide screens at the same scale. */
.whox-bf-shell .whox-bf {
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  min-height:0;
  padding:0 clamp(20px, 4cqi, 64px);
  gap:clamp(16px, 3cqi, 40px);
}
.whox-bf-shell .whox-bf__copy {
  padding:clamp(28px, 4cqi, 56px) 0;
}
.whox-bf-shell .whox-bf__title {
  font-size:clamp(36px, 4.7cqi, 68px);
  line-height:1.05;
  overflow-wrap:normal;
  white-space:normal;
}
.whox-bf-shell .whox-bf__price-value {font-size:clamp(56px, 7cqi, 100px);}
.whox-bf-shell .whox-bf__label {overflow-wrap:anywhere;}
.whox-bf-shell .whox-bf__row {width:100%;margin-bottom:0;}
.whox-bf-shell .whox-bf__cta {
  max-width:100%;min-width:0;white-space:normal;text-align:center;
}
.whox-bf-shell .whox-bf__cta:hover,
.whox-bf-shell .whox-bf__cta:focus {color:#0b1710;text-decoration:none;}
.whox-bf-shell .whox-bf__scene {
  height:auto;min-height:0;overflow:visible;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding-top:24px;
}
.whox-bf-shell .whox-bf__alien {
  position:relative;inset:auto;display:block;
  width:100%;max-width:460px;height:auto;max-height:520px;
  object-fit:contain;object-position:center bottom;
  filter:none;
  /* The PNG has 60 transparent rows below the artwork (60 / 1496). */
  transform:translateY(4.02%);
}
.whox-bf-shell .whox-bf__ufo {
  width:30%;max-width:200px;height:auto;
  top:12%;left:0;transform:rotate(-9deg);
}
@container whoxBlackFriday (max-width: 900px) {
  .whox-bf-shell .whox-bf {grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:16px;}
  .whox-bf-shell .whox-bf__title {font-size:clamp(34px, 5cqi, 45px);}
  .whox-bf-shell .whox-bf__scene {align-self:end;}
  .whox-bf-shell .whox-bf__ufo {top:0;left:0;}
}
@container whoxBlackFriday (max-width: 640px) {
  .whox-bf-shell .whox-bf {display:grid;grid-template-columns:minmax(0, 1fr);gap:0;padding-inline:24px;}
  .whox-bf-shell .whox-bf__copy {padding:28px 0 20px;}
  .whox-bf-shell .whox-bf__title {font-size:clamp(32px, 8.5cqi, 50px);}
  .whox-bf-shell .whox-bf__price-value {font-size:clamp(54px, 13cqi, 76px);}
  .whox-bf-shell .whox-bf__scene {
    width:100%;height:240px;padding:0;align-self:auto;
    justify-content:center;
  }
  .whox-bf-shell .whox-bf__alien {width:auto;height:100%;max-width:80%;max-height:100%;}
  .whox-bf-shell .whox-bf__ufo {left:3%;top:12%;}
  .whox-bf-shell .whox-bf__row {flex-direction:column;align-items:flex-start;gap:12px;}
  .whox-bf-shell .whox-bf__cta {width:100%;min-height:48px;}
}
@container whoxBlackFriday (max-width: 360px) {
  .whox-bf-shell .whox-bf {padding-inline:16px;}
  .whox-bf-shell .whox-bf__copy {padding-top:24px;}
  .whox-bf-shell .whox-bf__scene {height:200px;}
}