/* =============================================================================
   Best VPN flagship page — dense commercial redesign
   Scoped under .bv-page. Class names match HTML + interactive/vpn-finder/ui.ts.
   ============================================================================= */

.bv-page .sr-only,
.bv-page caption.sr-only {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Table cells can be hundreds of px past the viewport on small screens.
   Absolute sr-only nodes inside those cells expand document scrollWidth.
   Pin them with fixed + clip so they stay off-canvas without widening the page. */
.bv-page .bv-table .sr-only,
.bv-page .bv-table caption.sr-only {
  position: fixed;
  left: 0;
  top: 0;
}

/* -----------------------------------------------------------------------------
   Tokens
   ----------------------------------------------------------------------------- */

.bv-page {
  --bv-navy: #07111f;
  --bv-navy-900: #0b1a2e;
  --bv-navy-800: #10233d;
  --bv-blue: #0b62ff;
  --bv-blue-hover: #0954db;
  --bv-blue-deep: #0848c4;
  --bv-blue-soft: #eef4ff;
  --bv-blue-soft-2: #e3edff;
  --bv-blue-glow: #7db3ff;
  --bv-border: #dfe7f1;
  --bv-border-strong: #c9d7ea;
  --bv-row-line: #e8eef5;
  /* #64748b lands at 4.3-4.47:1 on the tinted section fills used below the
     board, just short of AA for body copy. */
  --bv-muted: #5d6b80;
  --bv-muted-2: #566476;
  --bv-ink: #0f172a;
  --bv-paper: #ffffff;
  --bv-mist: #f5f8fc;
  --bv-mist-2: #eef3f9;
  --bv-radius: 18px;
  --bv-radius-sm: 12px;
  --bv-radius-md: 16px;
  --bv-radius-lg: 20px;
  --bv-shadow: 0 8px 30px rgba(15, 35, 70, 0.08);
  --bv-shadow-sm: 0 4px 16px rgba(15, 35, 70, 0.06);
  --bv-shadow-md: 0 12px 36px rgba(15, 35, 70, 0.1);
  --bv-shadow-finder: 0 22px 56px rgba(7, 17, 31, 0.18);
  --bv-shadow-finder-hover: 0 26px 64px rgba(7, 17, 31, 0.22);
  --bv-max: 1200px;
  --bv-section-pad: 1.85rem;
  color: var(--bv-ink);
  background: var(--bv-mist);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bv-page *,
.bv-page *::before,
.bv-page *::after {
  box-sizing: border-box;
}

.bv-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Do not set display:block on every SVG — unsized SVGs then fill the
   containing block. Icons must declare width/height on their wrappers. */
.bv-page svg {
  max-width: 100%;
  flex: 0 0 auto;
}

.bv-page {
  overflow-x: clip;
  max-width: 100%;
}

.bv-page a {
  color: var(--bv-blue);
}

.bv-page a:hover {
  color: var(--bv-blue-hover);
}

.bv-wrap {
  width: min(100% - 2rem, var(--bv-max));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .bv-wrap {
    width: min(100% - 2.5rem, var(--bv-max));
  }
}

/* -----------------------------------------------------------------------------
   Hero — compact, calculator-first
   ----------------------------------------------------------------------------- */

.bv-hero {
  background:
    radial-gradient(ellipse 70% 55% at 82% 18%, rgba(59, 130, 246, 0.32), transparent 42%),
    radial-gradient(ellipse 45% 40% at 12% 80%, rgba(11, 98, 255, 0.14), transparent 50%),
    linear-gradient(180deg, #07111f 0%, #0b1a2e 58%, #0d2040 100%);
  color: #fff;
  padding: 0.55rem 0 4.1rem;
  position: relative;
  overflow: hidden;
}

.bv-hero__grid {
  display: grid;
  gap: 0.85rem;
  align-items: end;
}

@media (min-width: 960px) {
  .bv-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
    align-items: center;
  }
}

.bv-hero__visual {
  display: none;
  position: relative;
  justify-content: flex-end;
  align-items: center;
  min-height: 10.5rem;
}

@media (min-width: 960px) {
  .bv-hero__visual {
    display: flex;
  }
}

.bv-hero__map {
  position: absolute;
  inset: -8% -4% 8% -18%;
  background:
    radial-gradient(circle at 22% 38%, rgba(125, 179, 255, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 52%, rgba(125, 179, 255, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 34%, rgba(125, 179, 255, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 62%, rgba(125, 179, 255, 0.4) 0 2px, transparent 3px),
    radial-gradient(ellipse 70% 55% at 55% 48%, rgba(59, 130, 246, 0.28), transparent 62%),
    radial-gradient(ellipse 55% 42% at 58% 50%, rgba(11, 98, 255, 0.16), transparent 70%);
  opacity: 0.95;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 55% 48%, #000 20%, transparent 75%);
}

.bv-device-stack {
  position: relative;
  z-index: 1;
  width: min(100%, 20rem);
  height: 11rem;
}

.bv-device {
  position: absolute;
  border-radius: 14px;
  background: linear-gradient(160deg, #15263f, #0a1526);
  border: 1px solid rgba(125, 179, 255, 0.28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.bv-device--laptop {
  inset: 1.1rem 2.4rem 0 0;
}

.bv-device--phone {
  width: 4.6rem;
  height: 9.2rem;
  right: 0.2rem;
  bottom: 0;
  border-radius: 12px;
  z-index: 2;
}

.bv-device__screen {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  height: 100%;
  margin: 0.55rem;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(11, 98, 255, 0.35), transparent 55%),
    linear-gradient(180deg, #0d1a2e, #07111f);
}

.bv-device--phone .bv-device__screen {
  margin: 0.4rem;
  border-radius: 8px;
}

.bv-device__shield {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, #7db3ff, transparent 55%),
    linear-gradient(180deg, #3b82f6, #0b62ff);
  box-shadow: 0 0 24px rgba(11, 98, 255, 0.55);
}

.bv-device--phone .bv-device__shield {
  width: 1.55rem;
  height: 1.55rem;
}

.bv-device__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.bv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 0%, rgba(125, 179, 255, 0.12), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.bv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 179, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 179, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 72% 28%, black, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.bv-hero > .bv-wrap {
  position: relative;
  z-index: 1;
}

.bv-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

.bv-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.bv-breadcrumb a:hover {
  color: #fff;
}

.bv-breadcrumb span[aria-current="page"],
.bv-breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.88);
}

.bv-update {
  margin: 0.45rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bv-blue-glow);
}

.bv-hero h1 {
  margin: 0.4rem 0 0;
  max-width: 20ch;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #fff;
}

.bv-hero__lede {
  margin: 0.45rem 0 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.88rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bv-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.95rem;
  margin-top: 0.7rem;
}

.bv-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
  letter-spacing: 0.01em;
}

.bv-trust-row span::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bv-blue-glow);
  box-shadow: 0 0 0 3px rgba(125, 179, 255, 0.18);
}

/* -----------------------------------------------------------------------------
   Finder — dominates the first viewport
   ----------------------------------------------------------------------------- */

.bv-finder-anchor {
  margin-top: -2.85rem;
  position: relative;
  z-index: 5;
  padding-bottom: 0.65rem;
}

.bv-finder-card {
  background: var(--bv-paper);
  border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius-lg);
  box-shadow: var(--bv-shadow-finder);
  padding: 1.1rem 1.15rem 1.05rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  .bv-finder-card {
    padding: 1.2rem 1.45rem 1.15rem;
    min-height: 0;
    border-radius: 18px;
  }
}

.bv-finder-card:focus-within {
  box-shadow: var(--bv-shadow-finder-hover);
}

.bv-finder-card--results {
  min-height: 0;
}

.bv-finder-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: center;
}

.bv-eyebrow {
  margin: 0;
  color: var(--bv-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bv-step {
  margin: 0;
  color: var(--bv-muted);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.bv-progress {
  margin-top: 0.65rem;
  height: 7px;
  border-radius: 999px;
  background: #e8eef7;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 35, 70, 0.06);
}

.bv-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, #0b62ff 0%, #3b82f6 55%, #5b9bff 100%);
  border-radius: inherit;
  transition: width 0.25s ease;
  box-shadow: 0 0 12px rgba(11, 98, 255, 0.35);
}

.bv-finder-card__question {
  margin: 0.7rem 0 0;
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--bv-ink);
}

.bv-finder-card__helper {
  margin: 0.3rem 0 0;
  color: var(--bv-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  max-width: 46rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Options grid */

.bv-options {
  margin-top: 0.75rem;
  flex: 1 1 auto;
}

.bv-options--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .bv-options--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

@media (min-width: 960px) {
  .bv-options--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

@media (min-width: 1120px) {
  .bv-options--grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* When fewer than 6 children, keep a comfortable 3-col commercial rhythm */
  .bv-options--grid:has(> :nth-child(4)):not(:has(> :nth-child(6))),
  .bv-options--grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bv-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: 4.5rem;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  border: 2px solid var(--bv-border);
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  box-shadow: var(--bv-shadow-sm);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.bv-option__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: var(--bv-blue-soft);
  color: var(--bv-blue);
}

.bv-option__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bv-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

@media (min-width: 1120px) {
  .bv-option {
    flex-direction: column;
    align-items: flex-start;
    min-height: 6.35rem;
    padding: 0.8rem 0.7rem 0.85rem;
  }

  .bv-option__icon {
    width: 2.15rem;
    height: 2.15rem;
  }
}

.bv-option:hover {
  border-color: #9cbcff;
  background: #fbfdff;
  box-shadow: var(--bv-shadow);
  transform: translateY(-1px);
}

.bv-option:focus-visible {
  outline: 2px solid var(--bv-blue);
  outline-offset: 2px;
}

.bv-option.is-selected {
  border: 2px solid var(--bv-blue);
  background: #eef4ff;
  box-shadow:
    0 8px 24px rgba(11, 98, 255, 0.14),
    inset 0 0 0 1px rgba(11, 98, 255, 0.08);
}

.bv-option__label {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bv-ink);
  line-height: 1.2;
}

.bv-option__hint {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--bv-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bv-finder-card__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0;
}

.bv-dots {
  display: none;
  gap: 0.4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .bv-dots {
    display: flex;
  }
}

.bv-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #c9d7ea;
  transition: width 0.15s ease, background 0.15s ease;
}

.bv-dots span.is-active {
  background: var(--bv-blue);
  width: 1.25rem;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */

.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.55rem;
  padding: 0.55rem 1.05rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.bv-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bv-btn--primary {
  background: var(--bv-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 98, 255, 0.28);
}

.bv-btn--primary:hover:not(:disabled) {
  background: var(--bv-blue-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 98, 255, 0.34);
  transform: translateY(-1px);
}

.bv-btn--primary:active:not(:disabled) {
  background: var(--bv-blue-deep);
  transform: translateY(0);
}

.bv-btn--ghost {
  background: #fff;
  border-color: var(--bv-border);
  color: var(--bv-ink);
}

.bv-btn--ghost:hover:not(:disabled) {
  border-color: var(--bv-border-strong);
  background: var(--bv-mist);
  color: var(--bv-ink);
}

.bv-btn--small {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  border-radius: 10px;
}

.bv-table .bv-btn--primary,
.bv-table .bv-btn--small.bv-btn--primary {
  background: var(--bv-blue);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
  width: 100%;
  min-width: 7.5rem;
}

.bv-table .bv-btn--primary:hover:not(:disabled) {
  background: var(--bv-blue-hover);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Finder results
   ----------------------------------------------------------------------------- */

.bv-results {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.15rem;
}

@media (min-width: 900px) {
  .bv-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.bv-result {
  border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius-md);
  padding: 1.1rem 1.15rem;
  background: #fff;
  box-shadow: var(--bv-shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.bv-result.is-primary {
  border: 2px solid #9cbcff;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 48%);
  box-shadow: var(--bv-shadow-md);
}

.bv-result__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bv-result__role {
  color: var(--bv-blue);
}

.bv-result__score {
  color: var(--bv-muted);
  letter-spacing: 0.02em;
}

.bv-result h3 {
  margin: 0.55rem 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bv-result__best,
.bv-result__limit,
.bv-result__offer {
  margin: 0.45rem 0 0;
  color: var(--bv-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.bv-result__best {
  color: var(--bv-ink);
  font-weight: 600;
}

.bv-result ul {
  margin: 0.65rem 0 0;
  padding-left: 1.1rem;
  color: var(--bv-ink);
  font-size: 0.85rem;
  line-height: 1.45;
}

.bv-result ul li + li {
  margin-top: 0.25rem;
}

.bv-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.95rem;
}

.bv-result__actions .bv-btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   Sections — information dense
   ----------------------------------------------------------------------------- */

.bv-section {
  padding: 1.15rem 0;
  scroll-margin-top: 7.5rem;
}

.bv-longform > .bv-section {
  padding: 2.25rem 0;
}

@media (min-width: 768px) {
  .bv-section {
    padding: 1.25rem 0;
  }

  .bv-longform > .bv-section {
    padding: 2.75rem 0;
  }
}

@media (min-width: 1024px) {
  .bv-section {
    padding: 1.35rem 0;
  }

  .bv-longform > .bv-section {
    padding: 3.25rem 0;
  }
}

.bv-section--white {
  background: #fff;
}

.bv-section--navy {
  background:
    radial-gradient(ellipse 60% 80% at 90% 10%, rgba(59, 130, 246, 0.18), transparent 50%),
    linear-gradient(180deg, #07111f 0%, #0b1a2e 100%);
  color: #fff;
  padding: 1.1rem 0;
}

@media (min-width: 768px) {
  .bv-section--navy {
    padding: 1.2rem 0;
  }
}

.bv-section--stats {
  padding: 0.95rem 0;
}

.bv-section--navy .bv-kicker {
  color: var(--bv-blue-glow);
}

.bv-section--navy h2,
.bv-section--navy .bv-lede {
  color: #fff;
}

.bv-section--navy .bv-lede {
  color: rgba(255, 255, 255, 0.74);
}

.bv-section--navy a {
  color: #9cbcff;
}

.bv-section--navy a:hover {
  color: #fff;
}

.bv-kicker {
  margin: 0;
  color: var(--bv-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bv-section h2 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-weight: 800;
  color: var(--bv-ink);
}

.bv-section--navy h2 {
  color: #fff;
}

.bv-lede {
  margin: 0.35rem 0 0;
  color: var(--bv-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 38rem;
}

.bv-muted {
  color: var(--bv-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.bv-muted a {
  color: var(--bv-blue);
  font-weight: 700;
  text-decoration: none;
}

.bv-muted a:hover {
  text-decoration: underline;
}

.bv-section .bv-muted {
  margin: 0.65rem 0 0;
}

.bv-section p + .bv-btn,
.bv-section .bv-muted + .bv-btn,
.bv-section p > .bv-btn {
  margin-top: 0.85rem;
}

/* -----------------------------------------------------------------------------
   Benefits strip — compact 4-col
   ----------------------------------------------------------------------------- */

.bv-section--benefits {
  padding-top: 0.85rem;
  padding-bottom: 1rem;
}

.bv-benefits__title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bv-benefits {
  display: grid;
  gap: 0.5rem;
}

.bv-benefit__icon {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: 0.35rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 45%, #fff 0 28%, transparent 30%),
    linear-gradient(180deg, #dbe8ff, #c7dbff);
  box-shadow: inset 0 0 0 2px rgba(11, 98, 255, 0.2);
}

@media (min-width: 640px) {
  .bv-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .bv-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.bv-benefit {
  background: #fff;
  border: 1px solid var(--bv-border);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  box-shadow: var(--bv-shadow-sm);
  min-height: 100%;
}

.bv-section--white .bv-benefit {
  background: var(--bv-mist);
  box-shadow: none;
}

.bv-benefit h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bv-benefit p {
  margin: 0.25rem 0 0;
  color: var(--bv-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   Split layouts — table-dominant
   ----------------------------------------------------------------------------- */

.bv-split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 960px) {
  .bv-split {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
    gap: 1.5rem;
    align-items: start;
  }
}

.bv-split > :first-child .bv-btn {
  margin-top: 0.9rem;
}

.bv-split ul.bv-muted,
.bv-split .bv-muted ul {
  margin: 0.55rem 0 0;
  padding-left: 1.15rem;
}

.bv-split ul.bv-muted li + li {
  margin-top: 0.35rem;
}

/* -----------------------------------------------------------------------------
   Tables — full-width commercial
   ----------------------------------------------------------------------------- */

.bv-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius-md);
  background: #fff;
  box-shadow: var(--bv-shadow);
}

.bv-longform,
[data-best-vpn-longform] {
  overflow-x: clip;
  max-width: 100%;
}

.bv-split .bv-table-wrap {
  width: 100%;
}

.bv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 0.8rem;
  background: #fff;
}

.bv-table th,
.bv-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--bv-row-line);
}

.bv-table th {
  color: var(--bv-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f8fafc;
  white-space: nowrap;
}

.bv-table tbody tr {
  transition: background 0.12s ease;
}

.bv-table tbody tr:hover {
  background: #f8fbff;
}

.bv-table tr:last-child td {
  border-bottom: 0;
}

.bv-table td:last-child {
  white-space: nowrap;
}

.bv-provider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 10rem;
}

.bv-provider__mark {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bv-blue-soft);
  color: var(--bv-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(11, 98, 255, 0.1);
}

.bv-provider strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bv-provider span {
  display: block;
  color: var(--bv-muted);
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.bv-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  color: var(--bv-muted);
  font-weight: 800;
  font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Comparison tabs
   ----------------------------------------------------------------------------- */

.bv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0.9rem;
}

.bv-tab {
  border: 1px solid var(--bv-border);
  background: #fff;
  color: var(--bv-ink);
  border-radius: 999px;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.bv-tab:hover {
  border-color: #9cbcff;
  background: var(--bv-blue-soft);
}

.bv-tab:focus-visible {
  outline: 2px solid var(--bv-blue);
  outline-offset: 2px;
}

.bv-tab.is-active {
  background: var(--bv-navy);
  border-color: var(--bv-navy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(7, 17, 31, 0.18);
}

.bv-tab.is-active:hover {
  background: var(--bv-navy-900);
  border-color: var(--bv-navy-900);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Credibility navy band — compact
   ----------------------------------------------------------------------------- */

.bv-cred {
  display: grid;
  gap: 0.5rem;
  margin-top: 0;
}

@media (min-width: 640px) {
  .bv-cred {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .bv-cred {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

.bv-cred--stats {
  gap: 0.4rem;
}

@media (min-width: 960px) {
  .bv-cred--stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
  }
}

.bv-cred article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  background: rgba(255, 255, 255, 0.045);
  min-height: 100%;
  text-align: center;
}

.bv-cred--stats article {
  border: 0;
  background: transparent;
  padding: 0.35rem 0.25rem;
}

.bv-cred__stat {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}

.bv-cred h3 {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.82);
}

.bv-cred p:not(.bv-cred__stat) {
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   Cards — methodology / use-case / pricing denser grids
   ----------------------------------------------------------------------------- */

.bv-cards {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

@media (min-width: 640px) {
  .bv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .bv-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 1100px) {
  .bv-cards--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
  }
}

.bv-card {
  background: #fff;
  border: 1px solid var(--bv-border);
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
  box-shadow: var(--bv-shadow-sm);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.bv-section--white .bv-card {
  box-shadow: var(--bv-shadow);
}

.bv-card h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.bv-card p {
  margin: 0.3rem 0 0;
  color: var(--bv-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bv-card a {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--bv-blue);
  font-weight: 800;
  font-size: 0.76rem;
  text-decoration: none;
}

.bv-card a:hover {
  text-decoration: underline;
  color: var(--bv-blue-hover);
}

.bv-usecase {
  border-top: 3px solid var(--bv-blue);
  padding-top: 0.95rem;
}

.bv-usecase h3 {
  font-size: 0.95rem;
}

.bv-usecase p {
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Methodology denser feel */
.bv-cards--5 .bv-card {
  padding: 0.9rem 0.95rem;
}

.bv-cards--5 .bv-card h3 {
  font-size: 0.92rem;
}

.bv-cards--5 .bv-card p {
  font-size: 0.8rem;
  line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   Provider deep dives — commercial review cards
   ----------------------------------------------------------------------------- */

.bv-provider-block {
  background: #fff;
  border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius-lg);
  padding: 1rem 1.1rem 0.95rem;
  box-shadow: var(--bv-shadow);
  margin-top: 0.75rem;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 8rem;
}

.bv-provider-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bv-blue), #5b9bff);
  opacity: 0.85;
}

.bv-provider-block + .bv-provider-block {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .bv-provider-block {
    padding: 1.15rem 1.25rem 1.05rem;
  }
}

.bv-provider-block .bv-eyebrow {
  margin: 0;
}

.bv-provider-block h3 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
  font-weight: 800;
  line-height: 1.2;
}

.bv-provider-block__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  align-items: flex-start;
}

.bv-provider-block__checked {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bv-muted);
  letter-spacing: 0.02em;
}

.bv-provider-block__verdict {
  margin: 0.7rem 0 0;
  max-width: 52rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--bv-muted-2);
}

.bv-provider-block__grid {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

@media (min-width: 768px) {
  .bv-provider-block__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1.15rem;
  }
}

.bv-provider-block__grid h4 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-blue);
}

.bv-provider-block__grid p,
.bv-provider-block__grid ul {
  margin: 0.35rem 0 0;
  color: var(--bv-ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.bv-provider-block__grid ul {
  padding-left: 1.1rem;
}

.bv-provider-block__grid li + li {
  margin-top: 0.25rem;
}

.bv-provider-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.bv-provider-block > .bv-muted {
  margin: 0.55rem 0 0;
  max-width: 52rem;
  font-size: 0.92rem;
  color: var(--bv-muted-2);
}

.bv-section--compare {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.bv-compare-tool {
  display: grid;
  gap: 0.85rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--bv-border);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  box-shadow: var(--bv-shadow);
}

@media (min-width: 900px) {
  .bv-compare-tool {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    padding: 1.05rem 1.25rem;
  }
}

.bv-compare-tool__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.bv-compare-tool__visual {
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(11, 98, 255, 0.14), transparent 55%),
    var(--bv-mist);
}

.bv-compare-tool__scale {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  color: var(--bv-navy);
}

.bv-compare-tool__shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #0b62ff);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 8px 18px rgba(11, 98, 255, 0.28);
}

.bv-compare-tool__bar {
  width: 5.5rem;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b62ff, #7db3ff, #0b62ff);
  box-shadow: 0 8px 20px rgba(11, 98, 255, 0.25);
}

.bv-provider-meta {
  display: grid;
  gap: 0.65rem 0.85rem;
  margin-top: 1.05rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: var(--bv-mist);
  border: 1px solid var(--bv-border);
}

@media (min-width: 640px) {
  .bv-provider-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bv-provider-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bv-provider-meta > div,
.bv-provider-meta dt {
  min-width: 0;
}

.bv-provider-meta dt {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--bv-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bv-provider-meta dd {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--bv-ink);
}

.bv-provider-block > ul.bv-muted,
.bv-provider-block ul.bv-muted {
  margin: 0.95rem 0 0;
  padding-left: 1.15rem;
}

.bv-provider-block ul.bv-muted li + li {
  margin-top: 0.3rem;
}

.bv-provider-block > p.bv-muted {
  margin-top: 0.75rem;
}

.bv-provider-block .bv-btn {
  margin-top: 1rem;
}

.bv-provider-block .bv-btn + .bv-btn {
  margin-left: 0.5rem;
}

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */

.bv-faq {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

@media (min-width: 900px) {
  .bv-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1.25rem;
  }
}

.bv-faq details {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--bv-border);
  border-radius: 0;
  padding: 0.55rem 0.15rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bv-section--white .bv-faq details {
  box-shadow: none;
}

.bv-faq details[open] {
  border-color: var(--bv-border);
  box-shadow: none;
}

.bv-faq summary {
  cursor: pointer;
  font-weight: 750;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  list-style: none;
  color: var(--bv-ink);
}

.bv-faq summary::-webkit-details-marker {
  display: none;
}

.bv-faq summary::after {
  content: "+";
  float: right;
  margin-left: 0.75rem;
  color: var(--bv-blue);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}

.bv-faq details[open] summary::after {
  content: "–";
}

.bv-faq p {
  margin: 0.4rem 0 0.25rem;
  color: var(--bv-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  clear: both;
}

/* -----------------------------------------------------------------------------
   Final CTA + newsletter + contact
   ----------------------------------------------------------------------------- */

.bv-section--cta {
  padding-top: 0.75rem;
  padding-bottom: 1.1rem;
}

.bv-final-cta {
  display: grid;
  gap: 0.75rem;
  align-items: center;
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(59, 130, 246, 0.28), transparent 55%),
    linear-gradient(135deg, #07111f 0%, #12305a 100%);
  color: #fff;
  border-radius: 16px;
  padding: 0.95rem 1.1rem;
  box-shadow: var(--bv-shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 800px) {
  .bv-final-cta {
    grid-template-columns: 1.4fr auto;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
  }
}

.bv-final-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
}

.bv-final-cta p {
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
  line-height: 1.35;
  max-width: 36rem;
}

.bv-final-cta .bv-btn--primary {
  min-height: 2.65rem;
  padding-inline: 1.15rem;
  font-size: 0.88rem;
}

.bv-newsletter {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #0b62ff 0%, #2563eb 100%);
  color: #fff;
}

@media (min-width: 700px) {
  .bv-newsletter {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.bv-newsletter label {
  display: block;
  font-size: 0.84rem;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.95);
}

.bv-newsletter input {
  width: 100%;
  margin-top: 0.3rem;
  min-height: 2.55rem;
  border-radius: 10px;
  border: 0;
  background: #fff;
  color: var(--bv-ink);
  padding: 0.5rem 0.85rem;
  font: inherit;
}

.bv-newsletter input::placeholder {
  color: #94a3b8;
}

.bv-newsletter input:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  border-color: transparent;
}

.bv-newsletter .bv-btn--primary {
  background: var(--bv-navy);
  box-shadow: none;
  min-height: 2.55rem;
}

.bv-newsletter .bv-btn--primary:hover:not(:disabled) {
  background: #0a1628;
}

/* -----------------------------------------------------------------------------
   Sources + disclosure
   ----------------------------------------------------------------------------- */

.bv-sources {
  margin: 0.9rem 0 0;
  padding-left: 1.15rem;
}

.bv-sources li {
  margin: 0.35rem 0;
  color: var(--bv-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.bv-sources a {
  color: var(--bv-blue);
  font-weight: 650;
  text-decoration: none;
}

.bv-sources a:hover {
  text-decoration: underline;
}

.bv-disclosure {
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 1.05rem;
  border-radius: 12px;
  border: 1px solid #d7e3f4;
  background: #f3f8ff;
  color: var(--bv-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* -----------------------------------------------------------------------------
   Offer modal
   ----------------------------------------------------------------------------- */

.bv-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(1, 11, 24, 0.72);
  backdrop-filter: blur(2px);
}

@media (min-width: 640px) {
  .bv-modal {
    align-items: center;
  }
}

.bv-modal__dialog {
  width: min(100%, 560px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--bv-radius-md);
  padding: 1.35rem 1.35rem 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  border: 1px solid var(--bv-border);
}

.bv-modal__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.bv-modal__head h3 {
  margin: 0.25rem 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  font-weight: 800;
  line-height: 1.2;
}

.bv-modal__head .bv-muted {
  margin: 0.35rem 0 0;
}

.bv-icon-btn {
  border: 0;
  background: var(--bv-mist);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--bv-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.bv-icon-btn:hover {
  background: var(--bv-blue-soft);
  color: var(--bv-ink);
}

.bv-offer-grid {
  display: grid;
  gap: 0.7rem;
  margin: 1.05rem 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: var(--bv-mist);
  border: 1px solid var(--bv-border);
}

@media (min-width: 560px) {
  .bv-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bv-offer-grid dt {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--bv-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bv-offer-grid dd {
  margin: 0.2rem 0 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bv-ink);
}

.bv-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.bv-modal__actions .bv-btn {
  flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   Head-to-head / limits / misc content density
   ----------------------------------------------------------------------------- */

.bv-section ul.bv-muted {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
}

.bv-section ul.bv-muted li + li {
  margin-top: 0.35rem;
}

.bv-section h3.bv-kicker {
  margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Mobile / tablet — 768 & 640
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .bv-hero {
    padding: 0.9rem 0 3.75rem;
  }

  .bv-hero h1 {
    max-width: none;
  }

  .bv-finder-anchor {
    margin-top: -3.25rem;
  }

  .bv-finder-card {
    min-height: 20rem;
    border-radius: 18px;
  }

  .bv-finder-card__question {
    font-size: 1.45rem;
  }

  .bv-options--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bv-option {
    min-height: 5.25rem;
    padding: 1rem 1rem;
  }

  .bv-split {
    grid-template-columns: 1fr;
  }

  .bv-table-wrap {
    border-radius: 14px;
  }

  .bv-table {
    min-width: 680px;
  }

  .bv-provider-block {
    border-radius: 16px;
  }

  .bv-provider-meta {
    grid-template-columns: 1fr 1fr;
  }

  .bv-cards--4,
  .bv-cards--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bv-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bv-cred {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bv-final-cta {
    border-radius: 16px;
  }

  .bv-result__actions .bv-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .bv-wrap {
    width: min(100% - 1.5rem, var(--bv-max));
  }

  .bv-hero {
    padding: 0.85rem 0 3.5rem;
  }

  .bv-hero__lede {
    -webkit-line-clamp: 3;
    max-width: none;
  }

  .bv-trust-row {
    gap: 0.45rem 0.85rem;
  }

  .bv-finder-anchor {
    margin-top: -3rem;
    padding-bottom: 1rem;
  }

  .bv-finder-card {
    padding: 1.25rem 1.1rem 1.15rem;
    min-height: 0;
    border-radius: 16px;
  }

  .bv-progress {
    height: 9px;
  }

  .bv-finder-card__question {
    font-size: 1.35rem;
  }

  .bv-options--grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .bv-option {
    min-height: 4.75rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
  }

  .bv-option__label,
  .bv-option__hint {
    display: block;
  }

  .bv-option__hint {
    margin-top: 0.15rem;
  }

  .bv-finder-card__nav {
    flex-direction: column;
    align-items: stretch;
  }

  .bv-finder-card__nav .bv-btn {
    width: 100%;
  }

  .bv-benefits,
  .bv-cred {
    grid-template-columns: 1fr;
  }

  .bv-cards,
  .bv-cards--4,
  .bv-cards--5 {
    grid-template-columns: 1fr;
  }

  .bv-tabs {
    gap: 0.4rem;
    margin-top: 0.85rem;
  }

  .bv-tab {
    min-height: 2.2rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .bv-table th,
  .bv-table td {
    padding: 0.85rem 0.85rem;
  }

  .bv-provider-meta {
    grid-template-columns: 1fr;
  }

  .bv-faq {
    grid-template-columns: 1fr;
  }

  .bv-modal {
    padding: 0.75rem;
  }

  .bv-modal__dialog {
    border-radius: 14px;
    padding: 1.15rem;
  }

  .bv-modal__actions {
    flex-direction: column;
  }

  .bv-modal__actions .bv-btn {
    width: 100%;
  }

  .bv-section {
    padding: 1.1rem 0;
  }

  .bv-section--navy {
    padding: 1rem 0;
  }

  [data-best-vpn-longform] .bv-section {
    padding: 1.75rem 0;
  }
}

/* -----------------------------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bv-page *,
  .bv-page *::before,
  .bv-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .bv-option:hover,
  .bv-btn--primary:hover:not(:disabled) {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   Print
   ----------------------------------------------------------------------------- */

@media print {
  .bv-page {
    background: #fff;
    color: #000;
  }

  .bv-hero {
    background: #fff;
    color: #000;
    padding: 0 0 1rem;
  }

  .bv-hero__lede,
  .bv-update,
  .bv-breadcrumb,
  .bv-trust-row span {
    color: #333;
  }

  .bv-finder-anchor {
    margin-top: 0;
  }

  .bv-finder-card,
  .bv-table-wrap,
  .bv-provider-block,
  .bv-card,
  .bv-final-cta {
    box-shadow: none;
    break-inside: avoid;
  }

  .bv-btn,
  .bv-modal {
    display: none !important;
  }
}

/* Pack board capture: score pill geometry (truthful placeholder) */
.bv-page .bv-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

/* =============================================================================
   BOARD LAYER — approved pack composition (design-contracts/best-vpn)
   The pack reference is a 793px-wide export of the desktop composition. Every
   value below is expressed in reference pixels (1u) so the board keeps the same
   proportions at any viewport width, which is what the strict gate compares.
   ============================================================================= */

.bvb {
  /* Pack artboard is 793 wide. 100/793 ≈ 0.1261034 — keep stage full-bleed so
     1280 captures scale back to the same silhouette as the reference. */
  container-type: inline-size;
  width: 100%;
  --u: calc(100cqw / 793);
  /* The board reproduces the approved pack palette exactly. Longform readability
     tuning of the muted tones must not leak into the compared artboard. */
  --bv-muted: #64748b;
  --bv-muted-2: #5b6b7f;
  background: #fefefe;
  color: #0f172a;
  font-family: inherit;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.bvb *,
.bvb *::before,
.bvb *::after {
  box-sizing: border-box;
}

/* :where keeps the reset at zero specificity so the board rules below win. */
.bvb :where(p, h1, h2, h3, h4, ul, ol, table, figure, form, label) {
  margin: 0;
}

.bvb :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.bvb :where(a) {
  text-decoration: none;
}

.bvb-wrap {
  /* Reference content column runs x67 to x719 of the 793-wide pack stage. */
  width: calc(653 * var(--u));
  max-width: calc(100% - 2rem);
  margin-left: calc((100% - 793 * var(--u)) / 2 + 67 * var(--u));
  margin-right: auto;
}

/* `.bv-page a` colours every link blue, so the board button needs equal-or-
   higher specificity or its label disappears into its own background. */
.bv-page .bvb-btn,
.bvb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(23 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #034ff7;
  color: #fff;
  font-size: calc(8 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-decoration: none;
}

/* The site-wide `.bv-page a` link colour outranks a single board class, which
   left solid buttons with blue text on blue. Keep board button labels legible. */
.bvb .bvb-btn,
.bvb .bvb-btn:hover {
  color: #fff;
}

/* --- 1. Hero ---------------------------------------------------------------- */

.bvb-hero {
  position: relative;
  height: calc(286 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(ellipse 26% 34% at 71% 38%, rgba(23, 78, 168, 0.3), transparent 68%),
    #000d27;
  color: #fff;
}

.bvb-hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Approved hero artwork (dotted world map, connection nodes, laptop and handset
   renders, privacy pill) is a real asset cut from the pack rendering. */
.bvb-hero__devices {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(212 * var(--u));
}

.bvb-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: calc(31 * var(--u));
  padding-left: calc(2 * var(--u));
}

.bvb-crumbs {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font-size: calc(7.5 * var(--u));
  line-height: calc(10 * var(--u));
  color: #9db3d4;
}

.bvb-crumbs a,
.bvb-crumbs span {
  color: #9db3d4;
}

.bvb-h1 {
  margin-top: calc(14 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(29 * var(--u));
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #fff;
}

.bvb-lede {
  /* Reference lede: three lines inside a 266u column, regular weight. */
  margin-top: calc(9 * var(--u));
  max-width: calc(272 * var(--u));
  font-size: calc(9.25 * var(--u));
  line-height: calc(15.7 * var(--u));
  font-weight: 400;
  color: #d3dfee;
}

.bvb-trust {
  display: flex;
  gap: calc(15 * var(--u));
  margin-top: calc(10 * var(--u));
  font-size: calc(8 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: -0.02em;
  color: #eaedf1;
}

.bvb-trust li {
  display: flex;
  align-items: center;
  gap: calc(7.5 * var(--u));
}

.bvb-trust li::before {
  content: "";
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border: 1px solid #9dc2ea;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #cfe0f7 0 calc(1.6 * var(--u)), transparent calc(1.7 * var(--u)));
}

/* --- 2. Calculator band ----------------------------------------------------- */

.bvb-calcband {
  position: relative;
  /* flow-root keeps the card's negative top margin inside this band instead of
     collapsing it into the band box and shortening the whole board. */
  display: flow-root;
  height: calc(201 * var(--u));
  background: #f8f9fa;
  overflow: visible;
}

.bvb-calc {
  position: relative;
  z-index: 5;
  /* Reference calculator card runs x67-725, five units wider than the column. */
  margin-right: calc(-5 * var(--u));
  margin-top: calc(-73.5 * var(--u));
}

.bvb-calc .bv-finder-card {
  display: block;
  height: calc(188 * var(--u));
  margin: 0;
  padding: calc(16 * var(--u)) calc(21 * var(--u));
  border: 1px solid #edf0f4;
  border-radius: calc(7 * var(--u));
  background: #fff;
  box-shadow: 0 calc(9 * var(--u)) calc(26 * var(--u)) rgba(6, 20, 44, 0.14);
  position: relative;
  overflow: visible;
}

.bvb-calc .bv-finder-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.bvb-calc .bv-eyebrow {
  margin: 0;
  font-size: calc(6.2 * var(--u));
  line-height: calc(10 * var(--u));
  letter-spacing: 0.09em;
  font-weight: 700;
  text-transform: uppercase;
  color: #0b62ff;
}

.bvb-calc .bv-step {
  margin: 0;
  font-size: calc(6.5 * var(--u));
  line-height: calc(10 * var(--u));
  /* Pack tone #8c96a5 reads at 3.0:1. Same weight and metrics, AA contrast. */
  color: #6d7581;
}

.bvb-calc .bv-progress,
.bvb-calc .bv-finder-card__helper {
  display: none;
}

.bvb-calc .bv-finder-card__question {
  margin: calc(1 * var(--u)) 0 0;
  font-size: calc(12.7 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.bvb-calc .bv-options {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(8.5 * var(--u));
  margin: calc(7 * var(--u)) 0 0;
}

.bvb-calc .bv-option {
  --bvb-use-tint: #ebf3fb;
  --bvb-use-ink: #3454b4;
  display: block;
  height: calc(96 * var(--u));
  padding: calc(12 * var(--u)) calc(6 * var(--u)) 0;
  border: 1px solid #e9ecf1;
  border-radius: calc(5 * var(--u));
  background: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}

.bvb-calc .bv-option[data-use="streaming"] {
  --bvb-use-tint: #ecf1f9;
  --bvb-use-ink: #2d4283;
}

.bvb-calc .bv-option[data-use="privacy"] {
  --bvb-use-tint: #e6f5f3;
  --bvb-use-ink: #16484f;
}

.bvb-calc .bv-option[data-use="travel"] {
  --bvb-use-tint: #ecf6ed;
  --bvb-use-ink: #2e8c43;
}

.bvb-calc .bv-option[data-use="gaming"] {
  --bvb-use-tint: #f1effb;
  --bvb-use-ink: #3c34b4;
}

.bvb-calc .bv-option[data-use="torrenting"] {
  --bvb-use-tint: #e5f0fc;
  --bvb-use-ink: #1c84ec;
}

.bvb-calc .bv-option.is-selected {
  border-color: #0b62ff;
  background: #f3f7ff;
}

.bvb-calc .bv-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  margin: 0 auto calc(-3 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--bvb-use-tint) 0 46%,
    color-mix(in srgb, var(--bvb-use-tint) 45%, #fff) 68%,
    transparent 82%
  );
  color: var(--bvb-use-ink);
}

.bvb-calc .bv-option__icon svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  /* The shared icon set draws low inside its 24x24 viewBox; lift the glyph so it
     sits on the centre of the tint. */
  transform: translateY(calc(-9.5 * var(--u)));
}

.bvb-calc .bv-option__text {
  display: block;
  margin-top: calc(2 * var(--u));
}

.bvb-calc .bv-option__label {
  display: block;
  font-size: calc(8 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 700;
  color: #0f172a;
}

.bvb-calc .bv-option__hint {
  display: block;
  /* Artboard sets the hint in a column narrower than the card so every card
     breaks onto two lines. */
  max-width: calc(62 * var(--u));
  margin: calc(4 * var(--u)) auto 0;
  font-size: calc(6.5 * var(--u));
  line-height: calc(11.5 * var(--u));
  color: #6b7280;
}

.bvb-calc .bv-finder-card__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(13 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.bvb-calc .bv-dots {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}

.bvb-calc .bv-dots span {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 999px;
  background: #d5dae2;
}

.bvb-calc .bv-dots span.is-active {
  width: calc(15 * var(--u));
  height: calc(6 * var(--u));
  background: #0b62ff;
}

.bvb-calc .bv-finder-card__nav .bv-btn {
  min-height: 0;
}

.bvb-calc .bv-finder-card__nav [data-action="back"][disabled] {
  display: none;
}

.bvb-calc .bv-finder-card__nav [data-action="back"] {
  position: absolute;
  left: 0;
  height: calc(20 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px solid #e0e5ec;
  border-radius: calc(4 * var(--u));
  background: #fff;
  font-size: calc(7 * var(--u));
  color: #48566a;
}

.bvb-calc .bv-finder-card__nav [data-action="next"],
.bvb-calc .bv-finder-card__nav [data-action="reset"] {
  position: absolute;
  right: calc(-12.5 * var(--u));
  top: calc(-76 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0b62ff;
  color: transparent;
  font-size: 0;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(11, 98, 255, 0.35);
}

/* Reference shows the advance control in its solid state before a selection. */
.bvb-calc .bv-finder-card__nav [data-action="next"]:disabled {
  opacity: 1;
}

.bvb-calc .bv-finder-card__nav [data-action="next"]::after,
.bvb-calc .bv-finder-card__nav [data-action="reset"]::after {
  content: "\2192";
  color: #fff;
  font-size: calc(11 * var(--u));
  line-height: 1;
}

/* Results view keeps the same card geometry, scrollable inside the board */
.bvb-calc .bv-finder-card--results .bv-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  margin-top: calc(7 * var(--u));
  max-height: calc(96 * var(--u));
  overflow: hidden;
}

.bvb-calc .bv-finder-card--results .bv-result {
  padding: calc(8 * var(--u));
  border: 1px solid #e9ecf1;
  border-radius: calc(5 * var(--u));
  font-size: calc(6.5 * var(--u));
}

/* --- 3. Benefits ------------------------------------------------------------ */

.bvb-benefits__title {
  margin-top: calc(13 * var(--u));
  font-size: calc(9.3 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 700;
  text-align: center;
  color: #0f172a;
}

.bvb-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(7 * var(--u));
  margin-top: calc(8 * var(--u));
}

.bvb-benefits li {
  display: flex;
  gap: calc(9.5 * var(--u));
  /* Reference row starts 22.5u inside the content column. */
  padding-left: calc(22.5 * var(--u));
}

.bvb-benefits__icon {
  position: relative;
  flex: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(-1.5 * var(--u));
  border-radius: 50%;
  background: #d5dffb;
}

/* Reference glyphs are line icons, not solid marks. */
.bvb-benefits__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(11 * var(--u));
  height: calc(12 * var(--u));
  transform: translate(-50%, -50%);
  border: calc(1.8 * var(--u)) solid #1c56e8;
  border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
}

.bvb-benefits__text {
  display: block;
}

.bvb-benefits__text strong {
  display: block;
  font-size: calc(7.5 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: -0.02em;
  font-weight: 700;
}

.bvb-benefits__text span {
  display: block;
  margin-top: calc(2.5 * var(--u));
  font-size: calc(6.5 * var(--u));
  line-height: calc(12 * var(--u));
  color: #6b7280;
}

/* --- 4. Rankings + trust band ----------------------------------------------- */

.bvb-rankings {
  height: calc(361 * var(--u));
  padding-top: calc(15 * var(--u));
  background: #fefefe;
}

.bvb-rankings__grid {
  display: grid;
  grid-template-columns: calc(190 * var(--u)) calc(464 * var(--u));
  height: calc(229 * var(--u));
}

.bvb-rankings__copy {
  padding-top: calc(9 * var(--u));
  padding-right: calc(8 * var(--u));
}

.bvb-kicker {
  font-size: calc(6.5 * var(--u));
  line-height: calc(10 * var(--u));
  letter-spacing: 0.09em;
  font-weight: 700;
  text-transform: uppercase;
  color: #0b62ff;
}

.bvb-rankings__copy h2 {
  margin-top: calc(6 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bvb-rankings__lede {
  margin-top: calc(9 * var(--u));
  font-size: calc(9.4 * var(--u));
  line-height: calc(15 * var(--u));
  color: #4b5563;
}

.bvb-rankings__copy p:has(.bvb-btn) {
  margin-top: calc(12 * var(--u));
}

.bvb-rankings__copy .bvb-btn {
  /* Reference button is 126u wide with a smaller label than the closing CTA. */
  height: calc(23 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-size: calc(7 * var(--u));
}

.bvb-rankings__checked {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(11 * var(--u));
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
  color: #6b7280;
}

/* Reference pairs the update stamp with a small blue confirmation mark. */
.bvb-rankings__checked::before {
  content: "";
  flex: none;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) 50% 50% / calc(4 * var(--u)) calc(1.4 * var(--u)) no-repeat,
    #0b62ff;
}

.bvb-tablecard {
  height: calc(229 * var(--u));
  border: 1px solid #ebeef2;
  border-radius: calc(5 * var(--u));
  background: #fff;
  overflow: hidden;
}

.bvb-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.bvb-table th,
.bvb-table td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.bvb-table thead th {
  height: calc(27 * var(--u));
  font-size: calc(6.5 * var(--u));
  font-weight: 500;
  /* Pack tone #98a2b3 reads at 2.6:1 for the column labels. */
  color: #6d7581;
}

.bvb-table thead th:nth-child(1),
.bvb-table tbody td:nth-child(1) {
  width: 5.0%;
  padding-left: calc(4 * var(--u));
  text-align: left;
}

.bvb-table thead th:nth-child(2),
.bvb-table tbody td:nth-child(2) {
  width: 24.4%;
  padding-left: calc(9 * var(--u));
  text-align: left;
}

.bvb-table thead th:nth-child(3),
.bvb-table tbody td:nth-child(3) {
  width: 15.3%;
}

.bvb-table thead th:nth-child(4),
.bvb-table tbody td:nth-child(4) {
  width: 20.7%;
}

.bvb-table thead th:nth-child(5),
.bvb-table tbody td:nth-child(5) {
  width: 18.5%;
}

.bvb-table thead th:nth-child(6),
.bvb-table tbody td:nth-child(6) {
  width: 16.1%;
}

.bvb-table .bv-provider strong {
  /* Reference keeps every provider name on one line, including Private Internet Access. */
  white-space: nowrap;
}

.bvb-table tbody td {
  height: calc(32.4 * var(--u));
  border-top: 1px solid #f1f3f6;
  font-size: calc(7.5 * var(--u));
  color: #384252;
}

.bvb-table tbody tr:first-child td {
  border-top: 1px solid #eceff3;
}

.bvb-table .bv-rank {
  font-size: calc(7.5 * var(--u));
  font-weight: 600;
  color: #6b7280;
}

.bvb-table .bv-provider {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}

.bvb-table .bv-provider__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: #0b62ff;
  color: #fff;
  font-size: calc(8 * var(--u));
  font-weight: 700;
}

.bvb-table .bv-provider strong {
  font-size: calc(8 * var(--u));
  font-weight: 700;
  color: #0f172a;
}

.bvb-table .bv-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(44 * var(--u));
  height: calc(15 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: 1px solid #b9e3c6;
  border-radius: calc(4 * var(--u));
  background: #f2fbf5;
  color: #17703c;
  font-size: calc(7 * var(--u));
  font-weight: 700;
}

.bvb-table .bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: calc(18 * var(--u));
  padding: 0 calc(11.5 * var(--u));
  border: 0;
  border-radius: calc(3.5 * var(--u));
  background: #0b62ff;
  color: #fff;
  font-size: calc(6.5 * var(--u));
  font-weight: 600;
  box-shadow: none;
}

.bvb-tablecard__foot {
  height: calc(41 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(7 * var(--u));
}

.bvb-tablecard__foot a {
  color: #0b62ff;
  font-weight: 600;
}

.bvb-stats {
  /* Reference band occupies rows 732-839 of the compared window. */
  position: relative;
  margin-top: calc(1.5 * var(--u));
  height: calc(103.5 * var(--u));
  padding: calc(32 * var(--u)) calc(24 * var(--u)) 0;
  border-radius: calc(5 * var(--u));
  background:
    radial-gradient(ellipse 55% 70% at 88% 30%, rgba(23, 78, 168, 0.45), transparent 60%),
    linear-gradient(180deg, #021739 0%, #01102b 100%);
  color: #fff;
}

.bvb-stats__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.bvb-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: calc(15 * var(--u));
}

.bvb-stats__grid li {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  padding-left: calc(14 * var(--u));
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.bvb-stats__grid li:first-child {
  border-left: 0;
}

.bvb-stats__icon {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border: 1px solid rgba(125, 179, 255, 0.5);
  border-radius: calc(4 * var(--u));
  background: rgba(11, 98, 255, 0.14);
}

.bvb-stats__text strong {
  display: block;
  font-size: calc(11 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 700;
}

.bvb-stats__text span {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: calc(6.5 * var(--u));
  line-height: calc(10 * var(--u));
  color: #b8c8de;
}

/* --- 5. Panels (methodology, situations, comparison tool) -------------------- */

.bvb-panelsec {
  background: #fefefe;
}

.bvb-panel {
  padding: calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #f8f9fa;
}

.bvb-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bvb-panel__head h2 {
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bvb-panel__head p {
  margin-top: calc(4 * var(--u));
  font-size: calc(7.5 * var(--u));
  line-height: calc(11 * var(--u));
  color: #6b7280;
}

.bvb-panel__link {
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
  font-weight: 600;
  color: #0b62ff;
}

.bvb-cards {
  display: grid;
  gap: calc(13 * var(--u));
  margin-top: calc(12 * var(--u));
}

.bvb-cards--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bvb-cards li {
  height: calc(91 * var(--u));
  padding: calc(10 * var(--u));
  border: 1px solid #ebeef2;
  border-radius: calc(5 * var(--u));
  background: #fff;
  overflow: hidden;
}

.bvb-cards--tall li {
  height: calc(105 * var(--u));
}

/* Reference situation cards pack four text rows, so their rhythm is tighter
   than the five-card methodology row. */
.bvb-cards.bvb-cards--tall li strong {
  margin-top: calc(9 * var(--u));
}

.bvb-cards.bvb-cards--tall li em {
  margin-top: calc(7 * var(--u));
}

.bvb-cards.bvb-cards--tall li span:not(.bvb-cards__icon) {
  margin-top: calc(2 * var(--u));
}

.bvb-cards__icon {
  display: block;
  position: relative;
  width: calc(13.5 * var(--u));
  height: calc(13.5 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #eaf1ff;
}

/* Reference cards carry a small line glyph inside the tinted tile. */
.bvb-cards__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(9.5 * var(--u));
  height: calc(10 * var(--u));
  transform: translate(-50%, -50%);
  border: calc(1.6 * var(--u)) solid #2b4fd0;
  border-radius: calc(2.5 * var(--u));
}

.bvb-cards li strong {
  display: block;
  margin-top: calc(13 * var(--u));
  font-size: calc(7.5 * var(--u));
  line-height: calc(11 * var(--u));
  font-weight: 700;
}

.bvb-cards li em {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: calc(7 * var(--u));
  line-height: calc(10 * var(--u));
  font-style: normal;
  font-weight: 600;
  color: #0f172a;
}

.bvb-cards li span:not(.bvb-cards__icon) {
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: calc(6.5 * var(--u));
  line-height: calc(13 * var(--u));
  color: #6b7280;
}

.bvb-cards li a {
  display: inline-block;
  margin-top: calc(5 * var(--u));
  font-size: calc(6.5 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  color: #0b62ff;
}

.bvb-panelsec--test {
  height: calc(170 * var(--u));
}

.bvb-panelsec--test .bvb-panel {
  height: calc(159 * var(--u));
}

.bvb-panelsec--situation {
  height: calc(181 * var(--u));
}

.bvb-panelsec--situation .bvb-panel {
  height: calc(170 * var(--u));
}

.bvb-panelsec--tool {
  height: calc(189 * var(--u));
}

.bvb-panel--tool {
  display: grid;
  grid-template-columns: calc(198 * var(--u)) calc(365 * var(--u));
  height: calc(189 * var(--u));
  padding: calc(1 * var(--u)) calc(79 * var(--u)) 0 calc(12 * var(--u));
}

.bvb-tool__copy {
  position: relative;
  padding-top: calc(14 * var(--u));
}

.bvb-tool__copy h2 {
  font-size: calc(13.5 * var(--u));
  line-height: calc(17 * var(--u));
  letter-spacing: -0.025em;
  font-weight: 700;
}

.bvb-tool__copy p {
  margin-top: calc(4 * var(--u));
  font-size: calc(7.5 * var(--u));
  line-height: calc(11 * var(--u));
  color: #6b7280;
}

.bvb-tool__copy .bvb-btn {
  margin-top: calc(38 * var(--u));
}

.bvb-tool__art {
  position: absolute;
  left: calc(71 * var(--u));
  top: calc(94 * var(--u));
  width: calc(132 * var(--u));
  height: calc(90 * var(--u));
  background: url("/images/best-vpn/compare-scales.png") center / 100% 100% no-repeat;
}

.bvb-tool__card {
  height: calc(188 * var(--u));
  border: 1px solid #ebeef2;
  border-radius: calc(5 * var(--u));
  background: #fff;
  overflow: hidden;
}

.bvb-tool__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.bvb-tool__table th,
.bvb-tool__table td {
  padding: 0 calc(8 * var(--u));
  text-align: left;
  font-weight: 400;
}

/* Artboard runs a narrow attribute column and three wider vendor columns. */
.bvb-tool__table th:first-child {
  width: calc(73 * var(--u));
}

.bvb-tool__table thead th {
  height: calc(34 * var(--u));
  padding-left: 0;
  font-size: calc(8 * var(--u));
  font-weight: 700;
  color: #0f172a;
}

.bvb-tool__mark {
  display: inline-block;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin-right: calc(5 * var(--u));
  border-radius: 50%;
  background: #3a6ff8;
  vertical-align: calc(-2 * var(--u));
}

.bvb-tool__table thead th:nth-child(3) .bvb-tool__mark {
  background: #da3743;
}

.bvb-tool__table thead th:nth-child(4) .bvb-tool__mark {
  background: #04888e;
}

.bvb-tool__table tbody th,
.bvb-tool__table tbody td {
  height: calc(19 * var(--u));
  border-top: 1px solid #f1f3f6;
  font-size: calc(7 * var(--u));
  color: #384252;
}

.bvb-tool__table tbody td {
  padding-left: calc(18 * var(--u));
}

.bvb-tool__table tbody th {
  color: #6b7280;
}

.bvb-tool__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(38 * var(--u));
  font-size: calc(7 * var(--u));
}

.bvb-tool__foot a {
  color: #0b62ff;
  font-weight: 600;
}

/* --- 6. FAQ ----------------------------------------------------------------- */

.bvb-faq {
  height: calc(154 * var(--u));
  padding-top: calc(23 * var(--u));
  background: #fefefe;
}

/* Reference centres the heading in the space left of the corner link rather
   than across the full column. */
.bvb-faq__head {
  position: relative;
  display: flex;
  align-items: baseline;
}

.bvb-faq__head h2 {
  flex: 1 1 auto;
  position: relative;
  left: calc(-5 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.bvb-faq__head .bvb-panel__link {
  flex: none;
}

.bvb-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--u)) calc(8 * var(--u));
  margin-top: calc(5 * var(--u));
}

.bvb-faq__grid details {
  border: 1px solid #e8ebf0;
  border-radius: calc(4 * var(--u));
  background: #fff;
  overflow: hidden;
}

.bvb-faq__grid summary {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(24 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(15 * var(--u));
  font-size: calc(8.6 * var(--u));
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
}

.bvb-faq__grid summary::-webkit-details-marker {
  display: none;
}

.bvb-faq__grid summary::after {
  content: "+";
  position: absolute;
  right: calc(17 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
  color: #0b62ff;
}

.bvb-faq__grid details[open] summary::after {
  content: "\2212";
}

.bvb-faq__grid p {
  padding: 0 calc(14 * var(--u)) calc(10 * var(--u));
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
  color: #4b5563;
}

/* --- 7. Closing CTA --------------------------------------------------------- */

.bvb-ctasec {
  height: calc(179 * var(--u));
  background: #fefefe;
}

.bvb-cta {
  /* Reference panel occupies rows 1541-1706 of the compared window. */
  position: relative;
  margin-top: calc(-1 * var(--u));
  height: calc(166.5 * var(--u));
  border-radius: calc(6 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(ellipse 40% 70% at 78% 50%, rgba(23, 78, 168, 0.5), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #001231 0%, #000b25 100%);
  color: #fff;
}

/* Approved panel artwork (crest, handset render, network map) cut from the pack
   rendering; the panel's own copy is punched out so the board's HTML supplies it. */
.bvb-cta__art {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(654 * var(--u));
  height: 100%;
}

.bvb-cta__copy {
  position: absolute;
  left: calc(109 * var(--u));
  top: calc(28 * var(--u));
  width: calc(290 * var(--u));
}

.bvb-cta__copy h2 {
  font-size: calc(13.15 * var(--u));
  line-height: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bvb-cta__copy p {
  margin-top: calc(6 * var(--u));
  font-size: calc(8.1 * var(--u));
  line-height: calc(15 * var(--u));
  letter-spacing: -0.01em;
  color: #e3e6ea;
}

.bv-page .bvb-btn--solid,
.bvb-btn--solid {
  margin-top: calc(14 * var(--u));
  height: calc(24 * var(--u));
  padding: 0 calc(13 * var(--u));
  font-size: calc(7.5 * var(--u));
}


/* --- 8. Newsletter band ------------------------------------------------------ */

.bvb-newsband {
  margin-top: calc(0.25 * var(--u));
  height: calc(58 * var(--u));
  background: #0a2043;
  color: #fff;
}

.bvb-news {
  display: grid;
  grid-template-columns: calc(363 * var(--u)) minmax(0, 1fr);
  align-items: center;
  height: calc(58 * var(--u));
}

.bvb-news__label {
  display: block;
  padding-left: calc(7 * var(--u));
  font-size: calc(10.35 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 700;
}

.bvb-news__note {
  display: block;
  padding-left: calc(7 * var(--u));
  margin-top: calc(6 * var(--u));
  font-size: calc(8.3 * var(--u));
  line-height: calc(11 * var(--u));
  color: #a9bcd6;
}

.bvb-news__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(104 * var(--u));
  gap: calc(11 * var(--u));
}

.bvb-news input {
  height: calc(25 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px solid #2c4a75;
  border-radius: calc(4 * var(--u));
  background: #f7f9fc;
  color: #0f172a;
  font: inherit;
  font-size: calc(7.5 * var(--u));
}

.bvb-news .bvb-btn {
  justify-content: center;
  width: 100%;
  height: calc(26 * var(--u));
}

/* --- Longform (below the governed board) ------------------------------------ */

[data-best-vpn-longform] {
  background: var(--bv-mist, #f5f8fc);
}

[data-best-vpn-longform] .bv-section {
  padding: 2.25rem 0;
}

[data-best-vpn-longform] .bv-section h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

[data-best-vpn-longform] .bv-card p {
  -webkit-line-clamp: unset;
  display: block;
  font-size: 0.85rem;
}

/* Mobile: the pack registers a desktop composition only. Below 720px the board
   relaxes to a readable single-column stack instead of a 793px miniature. */
@media (max-width: 719px) {
  .bvb {
    /* The board's type scale is derived from 1u, so a pure percentage unit
       drives labels, table cells and step counters under 8px on a phone. The
       floor holds the smallest board label (6.2u) at roughly 11px and body
       copy (7u and up) at 12px or more, and stops applying above ~660px where
       the percentage is already larger. */
    --u: max(0.28cqw, 1.85px);
  }

  /* The desktop rule offsets the column against a 793u stage; below the breakpoint
     the stage no longer exists, so the column centres normally. */
  .bvb-wrap {
    width: min(100% - 2rem, 40rem);
    margin-left: auto;
    margin-right: auto;
  }

  .bvb-calc {
    margin-right: 0;
  }

  .bvb-news,
  .bvb-news__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    height: auto;
  }

  .bvb-newsband {
    height: auto;
    padding: 1.5rem 0;
  }

  .bvb-news input,
  .bvb-news .bvb-btn {
    height: 2.75rem;
    font-size: 0.95rem;
  }

  .bvb-news__label {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .bvb-news__note {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .bvb-hero,
  .bvb-rankings,
  .bvb-faq,
  .bvb-ctasec,
  .bvb-panelsec--test,
  .bvb-panelsec--situation,
  .bvb-panelsec--tool,
  .bvb-panelsec--test .bvb-panel,
  .bvb-panelsec--situation .bvb-panel,
  .bvb-panel--tool,
  .bvb-rankings__grid,
  .bvb-tablecard,
  .bvb-stats,
  .bvb-cards li,
  .bvb-tool__card,
  .bvb-calc .bv-finder-card {
    height: auto;
  }

  .bvb-hero {
    padding-bottom: 5rem;
  }

  .bvb-hero__art {
    display: none;
  }

  .bvb-h1 {
    font-size: 1.85rem;
    line-height: 1.15;
  }

  .bvb-lede,
  .bvb-trust {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .bvb-trust {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .bvb-calcband {
    height: auto;
    padding-bottom: 2rem;
  }

  .bvb-calc {
    margin-top: -4rem;
  }

  .bvb-calc .bv-finder-card {
    padding: 1rem;
  }

  .bvb-calc .bv-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bvb-calc .bv-option {
    height: auto;
    padding: 0.85rem 0.6rem;
  }

  .bvb-calc .bv-finder-card__nav {
    position: static;
    margin-top: 1rem;
  }

  .bvb-calc .bv-finder-card__nav [data-action="next"],
  .bvb-calc .bv-finder-card__nav [data-action="reset"] {
    position: static;
    width: auto;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.9rem;
  }

  .bvb-calc .bv-finder-card__nav [data-action="next"]::after,
  .bvb-calc .bv-finder-card__nav [data-action="reset"]::after {
    content: "";
  }

  .bvb-benefits,
  .bvb-rankings__grid,
  .bvb-cards--5,
  .bvb-stats__grid,
  .bvb-faq__grid,
  .bvb-panel--tool {
    grid-template-columns: minmax(0, 1fr);
  }

  .bvb-rankings,
  .bvb-panelsec,
  .bvb-faq,
  .bvb-ctasec {
    padding: 2rem 0;
  }

  .bvb-tablecard,
  .bvb-tool__card {
    overflow-x: auto;
  }

  .bvb-stats__grid li {
    padding-left: 0;
    border-left: 0;
  }

  .bvb-cta {
    padding: 1.5rem;
  }

  /* Must beat `.bv-page img { display: block }` (same file). */
  .bv-page .bvb-cta__art {
    display: none;
  }

  .bvb-cta__copy {
    position: static;
    width: auto;
  }
}

/* Phone readability floor for the longform sections below the board. These
   labels are set from a fixed rem scale rather than 1u, so they are unaffected
   by the board floor above and are raised only below the board breakpoint,
   which leaves the 1280 and 1440 strict captures untouched. */
@media (max-width: 719px) {
  .bv-table th,
  .bv-provider-block__grid h4,
  .bv-result__head {
    font-size: 0.8rem;
  }

  .bv-option__hint {
    font-size: 0.78rem;
  }
}

/* Phone reflow for the two board tables. The artboard grid holds six columns in
   793 reference px; at 390 the provider name, score pill and Best For cell land
   on top of one another because the table keeps a fixed layout. Both tables
   below reflow into one card per provider. Everything here is inside the board
   breakpoint, so the 1280 and 1440 strict captures are untouched. */
@media (max-width: 719px) {
  .bvb-tablecard {
    padding-bottom: 0.25rem;
    overflow-x: visible;
  }

  .bvb-table {
    display: block;
    table-layout: auto;
  }

  .bvb-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bvb-table tbody {
    display: block;
  }

  .bvb-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.75rem 0.75rem 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid #ebeef2;
    border-radius: 0.6rem;
  }

  .bvb-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: auto;
    padding: 0.28rem 0;
    border-top: 0;
    text-align: left;
    font-size: 0.85rem;
  }

  /* The artboard sets per-column percentages with :nth-child, which outranks a
     plain `td` rule, so the stacked cells need the same selector shape. */
  .bvb-table tbody tr td:nth-child(n + 3) {
    width: 100%;
  }

  .bvb-table tbody tr td:nth-child(1),
  .bvb-table tbody tr td:nth-child(2) {
    width: auto;
    padding: 0 0 0.35rem;
  }

  .bvb-table tbody tr td:nth-child(1) {
    padding-right: 0.5rem;
  }

  .bvb-table tbody tr td:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bvb-table tbody tr td:nth-child(3) {
    padding-top: 0.6rem;
    border-top: 1px solid #f1f3f6;
  }

  /* thead is hidden from sight, so each stacked value carries its own label. */
  .bvb-table tbody tr td:nth-child(3)::before {
    content: "Overall score";
  }

  .bvb-table tbody tr td:nth-child(4)::before {
    content: "Best for";
  }

  .bvb-table tbody tr td:nth-child(5)::before {
    content: "Starting price";
  }

  .bvb-table tbody tr td::before {
    flex: none;
    color: #6d7581;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .bvb-table tbody tr td:nth-child(6) {
    padding-top: 0.6rem;
  }

  .bvb-table .bv-rank {
    font-size: 0.85rem;
  }

  .bvb-table .bv-provider__mark {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
  }

  .bvb-table .bv-provider strong {
    font-size: 1rem;
    white-space: normal;
  }

  .bvb-table .bv-score-pill {
    min-width: 0;
    height: auto;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.8rem;
  }

  .bvb-table .bv-btn {
    width: 100%;
    height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
  }

  /* The scales illustration is absolutely positioned against the desktop copy
     column. Once the panel stacks it paints over the spec table values. */
  .bvb-tool__art {
    display: none;
  }

  .bvb-tool__copy .bvb-btn {
    margin-top: 1.25rem;
  }

  /* Artboard reserves 79u of right padding for the scales illustration. On a
     phone that squeezes the spec card to roughly half the column. */
  .bvb-panel--tool {
    padding: 1.25rem;
    row-gap: 1.25rem;
  }

  /* The spec matrix keeps four columns; below 720px it needs more room than the
     viewport, so the card becomes the scroll container rather than clipping the
     values. */
  .bvb-tool__card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bvb-tool__table {
    min-width: 30rem;
  }

  .bvb-tool__table th:first-child {
    width: 31%;
  }

  .bvb-tool__table th,
  .bvb-tool__table td {
    padding: 0 0.5rem;
  }

  .bvb-tool__table thead th {
    height: auto;
    padding: 0.85rem 0.5rem;
    font-size: 0.82rem;
  }

  .bvb-tool__table tbody th,
  .bvb-tool__table tbody td {
    height: auto;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.8rem;
  }

  .bvb-tool__table tbody td {
    padding-left: 0.5rem;
  }

  .bvb-tool__foot {
    height: auto;
    padding: 0.9rem 0;
    font-size: 0.85rem;
  }
}