/* NOID desktop banner, A/B test: ab1 = .noid-windows-banner, ab2 = .noid-ready-banner.
   Sources: vendor kits noid-windows-1 / noid-windows-2, copied as is except asset paths and
   the shared self-hosted Inter. Below 768px the WhoVPN banner is shown instead. */
@font-face {
  font-family: NoidInter;
  src: url("../fonts/noid/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* the whole banner is one link (a.noid-banner); the CTA inside is a <span> */
.noid-banner {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.noid-banner:hover, .noid-banner:focus { color: inherit; text-decoration: none; }
.noid-banner:focus-visible { outline: 3px solid #84b9ff; outline-offset: -3px; }
@media (max-width: 767.98px) {
  .noid-banner { display: none; }
}

/* ---- ab1: noid-windows-1 ---- */
.noid-windows-banner {
  --nw-content-max: 1232px;
  --nw-min-height: 448px;
  container: noid-windows / inline-size;
  inline-size: 100%;
  min-inline-size: 0;
  color: #f8f8f6;
  background: #050607;
  font-family: NoidInter, Inter, Arial, sans-serif;
  font-synthesis: none;
  font-weight: 400;
  text-align: start;
  direction: ltr;
}
.noid-windows-banner, .noid-windows-banner * { box-sizing: border-box; }
.noid-windows-banner .nw-surface {
  background: #050607 url("../images/noid/background-glow.svg") center / 100% 100% no-repeat;
}
.noid-windows-banner .nw-inner {
  inline-size: calc(100% - 80px);
  max-inline-size: var(--nw-content-max);
  min-block-size: var(--nw-min-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 548fr);
  column-gap: 124px;
  align-items: center;
}
.noid-windows-banner .nw-copy {
  min-inline-size: 0;
  padding-block: 47px 54.728px;
}
.noid-windows-banner .nw-logo {
  display: block;
  inline-size: 122px;
  block-size: auto;
  max-inline-size: 100%;
}
.noid-windows-banner .nw-title {
  padding: 0;
  margin: 26px 0 0;
  color: #f8f8f6;
  font: 700 58px / 62px NoidInter, Inter, Arial, sans-serif;
  letter-spacing: -2.8px;
  overflow-wrap: anywhere;
}
.noid-windows-banner .nw-title-line { display: block; }
.noid-windows-banner .nw-description {
  padding: 0;
  margin: 14.55px 0 0;
  color: #b9c6d9;
  font: 400 18px / 26px NoidInter, Inter, Arial, sans-serif;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}
.noid-windows-banner .nw-cta {
  display: flex;
  inline-size: fit-content;
  align-items: center;
  justify-content: space-between;
  gap: 27px;
  min-inline-size: 174px;
  max-inline-size: 100%;
  min-block-size: 52px;
  margin-block-start: 34.538px;
  padding: 14px 27px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0b0d10;
  font: 600 16px / 24px NoidInter, Inter, Arial, sans-serif;
  text-decoration: none;
  text-align: start;
  transition: background-color 150ms ease;
}
.noid-windows-banner .nw-cta > span { min-inline-size: 0; overflow-wrap: anywhere; }
.noid-banner:hover .noid-windows-banner .nw-cta { background-color: #dfe9f7; }
.noid-windows-banner .nw-arrow { display: block; flex: 0 0 24px; inline-size: 24px; block-size: 24px; }
.noid-windows-banner .nw-trial {
  padding: 0;
  margin: 16.27px 0 0;
  color: #a9bad1;
  font: 400 13px / 18px NoidInter, Inter, Arial, sans-serif;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.noid-windows-banner .nw-art { min-inline-size: 0; inline-size: 100%; max-inline-size: 548px; justify-self: end; transform: translateY(2px); }
.noid-windows-banner .nw-windows { display: block; inline-size: 100%; block-size: auto; max-inline-size: 100%; }

/* Adapt to the available component width, not the device category. */
@container noid-windows (width < 1440px) {
  .noid-windows-banner .nw-inner { column-gap: 64px; }
}
@container noid-windows (width < 1200px) {
  .noid-windows-banner .nw-inner { inline-size: calc(100% - 64px); column-gap: 32px; }
  .noid-windows-banner .nw-title { font-size: 48px; line-height: 54px; letter-spacing: -2.2px; }
}
@container noid-windows (width < 1024px) {
  .noid-windows-banner .nw-inner { inline-size: calc(100% - 48px); column-gap: 24px; }
  .noid-windows-banner .nw-title { font-size: 44px; line-height: 50px; letter-spacing: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .noid-windows-banner .nw-cta { transition: none; }
}

/* ---- ab2: noid-windows-2 ---- */
.noid-ready-banner {container:noid-ready / inline-size;inline-size:100%;min-inline-size:0;background:#050607;color:#f8f8f7;font-family:NoidInter,Inter,Arial,sans-serif;font-weight:400;font-synthesis:none;font-optical-sizing:auto;direction:ltr;text-align:start}
.noid-ready-banner,.noid-ready-banner * {box-sizing:border-box}
.noid-ready-banner .nr-surface {background:radial-gradient(ellipse 35% 85% at 72% 61%,#284d70 0%,#142738 48%,#050607 100%)}
.noid-ready-banner .nr-inner {
  --nr-u:min(1px,calc(100cqw / 1584));inline-size:calc(1240 * var(--nr-u));max-inline-size:1240px;
  min-block-size:calc(447 * var(--nr-u));margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,640fr) minmax(0,524fr);column-gap:calc(76 * var(--nr-u));align-items:center;
}
.noid-ready-banner .nr-copy {min-inline-size:0;padding-block:calc(29 * var(--nr-u)) calc(38.58 * var(--nr-u))}
.noid-ready-banner .nr-logo {display:block;inline-size:calc(114 * var(--nr-u));block-size:calc(32.62 * var(--nr-u));max-inline-size:100%}
.noid-ready-banner .nr-title {padding:0;margin:calc(18 * var(--nr-u)) 0 0;font-size:calc(80 * var(--nr-u));line-height:.96;letter-spacing:calc(-4.3 * var(--nr-u));font-weight:730;color:#f8f8f7;overflow-wrap:anywhere}
.noid-ready-banner .nr-title-line,.noid-ready-banner .nr-description-line {display:block}
.noid-ready-banner .nr-description {padding:0;margin:calc(17 * var(--nr-u)) 0 0;color:#becbda;font-size:calc(20 * var(--nr-u));line-height:1.35;letter-spacing:calc(-.4 * var(--nr-u));font-weight:400;overflow-wrap:anywhere}
.noid-ready-banner .nr-cta {
  display:flex;inline-size:fit-content;max-inline-size:100%;min-inline-size:calc(216 * var(--nr-u));min-block-size:calc(53 * var(--nr-u));
  align-items:center;justify-content:space-between;gap:calc(27 * var(--nr-u));margin-block-start:calc(21 * var(--nr-u));padding:calc(14.5 * var(--nr-u)) calc(29 * var(--nr-u));
  border:0;border-radius:calc(40 * var(--nr-u));background:#fff;color:#0a0c10;text-decoration:none;font-size:calc(18 * var(--nr-u));line-height:calc(24 * var(--nr-u));font-weight:600;transition:background .15s ease;
}
.noid-ready-banner .nr-cta>span {min-inline-size:0;overflow-wrap:anywhere}
.noid-ready-banner .nr-arrow {display:block;inline-size:calc(27 * var(--nr-u));block-size:calc(24 * var(--nr-u));flex:none}
.noid-banner:hover .noid-ready-banner .nr-cta {background:#e3edfa}
.noid-ready-banner .nr-trial {padding:0;margin:calc(12 * var(--nr-u)) 0 0;color:#a5b7cb;font-size:calc(14 * var(--nr-u));line-height:1.3;letter-spacing:calc(-.1 * var(--nr-u));overflow-wrap:anywhere}
.noid-ready-banner .nr-card-slot {container:noid-ready-card / inline-size;min-inline-size:0;position:relative;inset-block-start:calc(-3.5 * var(--nr-u))}
.noid-ready-banner .nr-identity {
  --nr-c:calc(100cqw / 524);min-block-size:calc(338 * var(--nr-c));padding:calc(29 * var(--nr-c)) calc(27 * var(--nr-c)) calc(19.8 * var(--nr-c));
  border:calc(1.1 * var(--nr-c)) solid #6c879c;border-radius:calc(25 * var(--nr-c));background:linear-gradient(150deg,rgba(30,40,47,.97),rgba(14,23,28,.97));
  box-shadow:0 calc(20 * var(--nr-c)) calc(64 * var(--nr-c)) rgba(1,9,16,.36);
}
.noid-ready-banner .nr-identity-header {display:flex;gap:calc(27 * var(--nr-c));align-items:center;padding:0 calc(10 * var(--nr-c)) calc(25 * var(--nr-c));border-bottom:calc(1 * var(--nr-c)) solid #33424d}
.noid-ready-banner .nr-identity-dot {inline-size:calc(54 * var(--nr-c));block-size:calc(54 * var(--nr-c));flex:none;border-radius:50%;background:#b2cfa9;box-shadow:inset 0 calc(2 * var(--nr-c)) calc(6 * var(--nr-c)) rgba(255,255,255,.13)}
.noid-ready-banner .nr-identity-person {min-inline-size:0}
.noid-ready-banner .nr-identity-name {padding:0;margin:0;font-size:calc(29 * var(--nr-c));letter-spacing:calc(-.65 * var(--nr-c));line-height:1.2;font-weight:650}
.noid-ready-banner .nr-identity-label {padding:0;margin:calc(6 * var(--nr-c)) 0 0;color:#adbed0;font-size:calc(16 * var(--nr-c));line-height:1.2}
.noid-ready-banner .nr-features {list-style:none;margin:calc(16 * var(--nr-c)) 0 0;padding:0 calc(10 * var(--nr-c))}
.noid-ready-banner .nr-features li {min-block-size:calc(58 * var(--nr-c));display:grid;grid-template-columns:calc(32 * var(--nr-c)) minmax(0,1fr) auto;align-items:center;gap:calc(21 * var(--nr-c));font-size:calc(18 * var(--nr-c));line-height:1.2;letter-spacing:calc(-.35 * var(--nr-c))}
.noid-ready-banner .nr-feature-icon {inline-size:calc(32 * var(--nr-c));block-size:calc(32 * var(--nr-c));display:block}
.noid-ready-banner .nr-feature-name {font-weight:500;min-inline-size:0;overflow-wrap:anywhere}
.noid-ready-banner .nr-feature-value {display:flex;align-items:center;gap:calc(11 * var(--nr-c));font-size:calc(15 * var(--nr-c));letter-spacing:0;color:#d6e1ed;min-inline-size:0;max-inline-size:calc(155 * var(--nr-c))}
.noid-ready-banner .nr-feature-value img {inline-size:calc(26 * var(--nr-c));block-size:calc(26 * var(--nr-c));flex:none}
.noid-ready-banner .nr-feature-value>span {min-inline-size:0;overflow-wrap:anywhere}
.noid-ready-banner .nr-ready {display:flex;align-items:center;gap:calc(15 * var(--nr-c));min-block-size:calc(54 * var(--nr-c));margin:calc(15 * var(--nr-c)) 0 0;padding:calc(12 * var(--nr-c)) calc(23 * var(--nr-c));border-radius:calc(12 * var(--nr-c));background:rgba(119,216,166,.12);color:#97f2bc;font-size:calc(18 * var(--nr-c));line-height:1.2;font-weight:500;letter-spacing:calc(-.2 * var(--nr-c))}
.noid-ready-banner .nr-ready>span:last-child {min-inline-size:0;overflow-wrap:anywhere}
.noid-ready-banner .nr-ready-dot {inline-size:calc(15 * var(--nr-c));block-size:calc(15 * var(--nr-c));border-radius:50%;background:#7eecad;flex:none;box-shadow:0 0 calc(14 * var(--nr-c)) rgba(94,237,163,.1)}
@container noid-ready (width < 1440px) {
  .noid-ready-banner .nr-inner {--nr-u:1px;inline-size:calc(100% - 80px);column-gap:40px}
  .noid-ready-banner .nr-title {font-size:68px;letter-spacing:-3.65px}
}
@container noid-ready (width < 1200px) {
  .noid-ready-banner .nr-inner {inline-size:calc(100% - 64px);column-gap:32px}
  .noid-ready-banner .nr-title {font-size:62px;letter-spacing:-3.3px}
  .noid-ready-banner .nr-description {font-size:19px}
}
@container noid-ready (width < 1024px) {
  .noid-ready-banner .nr-inner {inline-size:calc(100% - 48px);column-gap:24px}
  .noid-ready-banner .nr-title {font-size:56px;letter-spacing:-3px}
}
@media (prefers-reduced-motion:reduce) {.noid-ready-banner .nr-cta {transition:none}}

/* ---- CJK: Inter has no Han/Kana glyphs. Banner-subset Noto (shared with banner-whovpn.css). ---- */
@font-face {
  font-family: NoidNotoSC;
  src: url("../fonts/whovpn/NotoSansSC-banner.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: NoidNotoJP;
  src: url("../fonts/whovpn/NotoSansJP-banner.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
.noid-banner [lang="zh"], .noid-banner [lang="zh"] * { font-family: NoidInter, NoidNotoSC, sans-serif; }
.noid-banner [lang="ja"], .noid-banner [lang="ja"] * { font-family: NoidInter, NoidNotoJP, sans-serif; }