/* NOID desktop banner: .noid-ready-banner (former ab2) is shown to everyone; .noid-cards-banner (ab3)
   styles are kept for the unused banner-noid-ab3.html.ep.
   Sources: vendor kits noid-windows-2 / noid-cards, 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; }
}

/* ---- 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}}

/* ---- ab3: noid-cards ("One browser. Separate identities."), 1570 x 410 ---- */
.noid-cards-banner {
  --ng-content-max:1234px;
  --ng-gutter:40px;
  --ng-min-height:410px;
  container:noid-cards / inline-size;
  inline-size:100%;min-inline-size:0;background:#040608;color:#f8f8f7;
  font-family:NoidInter,Inter,Arial,sans-serif;font-synthesis:none;direction:ltr;text-align:start;
}
.noid-cards-banner,.noid-cards-banner * {box-sizing:border-box}
.noid-cards-banner .ng-surface {
  overflow:hidden;
  background:linear-gradient(#040608,#060b10);
}
.noid-cards-banner .ng-inner {
  position:relative;inline-size:calc(100% - var(--ng-gutter) * 2);max-inline-size:var(--ng-content-max);
  min-block-size:var(--ng-min-height);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,614fr) minmax(0,612fr);column-gap:8px;align-items:center;
}
.noid-cards-banner .ng-copy {min-inline-size:0;position:relative;z-index:1;padding-block:32px 34.5px}
.noid-cards-banner .ng-logo {display:block;inline-size:124px;block-size:auto;max-inline-size:100%}
.noid-cards-banner .ng-title {margin:18px 0 0;padding:0;color:#f8f8f7;font:700 68px/62px NoidInter,Inter,Arial,sans-serif;letter-spacing:-.35px;overflow-wrap:anywhere}
.noid-cards-banner .ng-title-line {display:block}
.noid-cards-banner .ng-title-line:first-child {font-size:72px}
.noid-cards-banner .ng-description {margin:14px 0 0;padding:0;color:#b8c5d4;font:400 26px/32px NoidInter,Inter,Arial,sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.noid-cards-banner .ng-cta {
  display:flex;inline-size:fit-content;min-inline-size:245px;max-inline-size:100%;min-block-size:58px;
  align-items:center;justify-content:space-between;gap:24px;margin-block-start:24.516px;padding:16px 40px 16px 58px;
  background:#fff;color:#0b0d10;border:0;border-radius:999px;text-decoration:none;text-align:start;
  font:600 20px/26px NoidInter,Inter,Arial,sans-serif;transition:background-color 150ms ease;
}
.noid-cards-banner .ng-cta > span {min-inline-size:0;overflow-wrap:anywhere}
.noid-cards-banner .ng-arrow {display:block;inline-size:24px;block-size:24px;flex:0 0 24px}
.noid-banner:hover .noid-cards-banner .ng-cta {background-color:#e6edf6}
.noid-cards-banner .ng-trial {padding:0;margin:15.5px 0 0;color:#99aabd;font:400 16px/22px NoidInter,Inter,Arial,sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.noid-cards-banner .ng-art-slot {
  --ng-scene-width:calc(100% + max(var(--ng-gutter), (100cqw - var(--ng-content-max)) / 2));
  position:relative;align-self:stretch;min-inline-size:0;z-index:0;pointer-events:none;
}
.noid-cards-banner .ng-art-background {
  position:absolute;inset-inline-end:100%;inset-block-start:50%;transform:translateY(-50%);
  inline-size:calc(var(--ng-scene-width) * 790 / 780);block-size:auto;display:block;
}
.noid-cards-banner .ng-art {
  position:absolute;inset-inline-start:0;inset-block-start:50%;transform:translateY(-50%);
  /* Extend the approved scene to the right edge, preserving its aspect ratio. */
  inline-size:var(--ng-scene-width);
  block-size:auto;display:block;
}
@container noid-cards (width < 1440px) {
  .noid-cards-banner .ng-title {font-size:58px;line-height:60px}
  .noid-cards-banner .ng-title-line:first-child {font-size:62px}
  .noid-cards-banner .ng-description {font-size:22px;line-height:29px}
}
@container noid-cards (width < 1200px) {
  .noid-cards-banner .ng-inner {inline-size:calc(100% - 64px)}
  .noid-cards-banner .ng-title {font-size:46px;line-height:50px}
  .noid-cards-banner .ng-title-line:first-child {font-size:50px}
  .noid-cards-banner .ng-description {font-size:20px;line-height:28px}
  .noid-cards-banner .ng-art-slot {--ng-scene-width:calc(100% + 32px)}
}
@container noid-cards (width < 1024px) {
  .noid-cards-banner .ng-inner {inline-size:calc(100% - 48px)}
  .noid-cards-banner .ng-title {font-size:42px;line-height:46px}
  .noid-cards-banner .ng-title-line:first-child {font-size:46px}
  .noid-cards-banner .ng-art-slot {--ng-scene-width:calc(100% + 24px)}
}
@media (prefers-reduced-motion:reduce) {.noid-cards-banner .ng-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; }