/*
  BEST VPN DIRECTORY DESIGN SYSTEM — websites/thevpnapp/css/directory-style.css
  ==============================================================================
  Full rewrite. The previous version of this file (and the templates that
  used it) copied a reference site's page skeleton almost exactly and only
  swapped colours — rejected. This version is built from this site's OWN
  real, already-live design language instead:

    - Colours, radii and the Open Sans/Roboto pairing are lifted directly
      from css/style.css (#ffc001 gold band + dark-card inversion from
      .feature_area/.feature_item, 36px/50px rounding, the gold accordion
      already used on faq/index.html).
    - The nav-overlap bug this replaces: .header_area is `position:absolute`
      site-wide (see css/style.css ~line 493), so every real inner page
      offsets its first section by the SAME amount .home_banner_area
      .banner_inner already uses (170px desktop, 100px <=1199px — see
      css/responsive.css line 26). .bv-shell below reproduces that exact,
      already-proven convention instead of a guessed value, which is what
      caused the breadcrumb/heading to sit under the header before.
    - The connection component takes its visual cue from the app's own real
      screens (img/banner/right-mobile.png's region/service selector rows,
      img/streaming.png's orbiting-service-icon illustration) — a dark
      "app card" list with a gold active outline on the destination row,
      not three equal boxes joined by plain arrows.

  Classes are namespaced `bv-` (Best VPN), replacing the old `vd-` set.
*/

/* ---------------------------------------------------------------------------
   Tokens
--------------------------------------------------------------------------- */
:root {
  /* Page background matches the real site's own content-page tone exactly
     (.background-dark / .footer-area in css/style.css, used by every real
     blog post) — not an independent, darker near-black of its own. */
  --bv-black: #222222;
  --bv-black-soft: #2c2c2c;
  --bv-charcoal: #2a2a2a;
  --bv-charcoal-2: #333333;
  --bv-charcoal-3: #3d3f43;
  --bv-line: rgba(255, 255, 255, 0.1);
  --bv-gold: #ffc001;
  --bv-gold-deep: #e6ac00;
  --bv-ink: #0d0d0d;
  --bv-white: #ffffff;
  --bv-muted: #b7b9bd;
  --bv-muted-2: #8a8d92;

  --bv-heading-font: 'Open Sans', sans-serif;
  --bv-body-font: 'Roboto', sans-serif;

  --bv-radius-sm: 14px;
  --bv-radius-md: 22px;
  --bv-radius-lg: 32px;
  --bv-radius-pill: 999px;

  /* Matches .home_banner_area .banner_inner exactly — see header note above. */
  --bv-header-offset: 170px;
  --bv-header-offset-tight: 100px;
}

/* ---------------------------------------------------------------------------
   Page shell — THE nav-overlap fix. Every bv-* page wraps its content in
   this immediately inside <main>, in place of ad hoc top padding.
--------------------------------------------------------------------------- */
.bv-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--bv-header-offset) 20px 0;
  color: var(--bv-white);
  font-family: var(--bv-body-font);
}
.bv-shell-wide {
  max-width: 1360px;
}
@media (max-width: 1199px) {
  .bv-shell {
    padding-top: var(--bv-header-offset-tight);
  }
}

/* Same width/centering as .bv-shell but WITHOUT the header-clearance top
   offset — for every content wrapper on a page after the first (e.g. after
   a full-width band section). Reusing .bv-shell itself for those, even
   with an inline padding-top override, is exactly what produced a large
   unwanted gap after the gold band before — this is the centralized fix. */
.bv-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--bv-white);
  font-family: var(--bv-body-font);
}

.bv-page-bg {
  background: var(--bv-black);
}

/* ---------------------------------------------------------------------------
   Breadcrumb
--------------------------------------------------------------------------- */
.bv-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--bv-body-font);
  font-size: 13px;
  color: var(--bv-muted-2);
  padding-top: 18px;
  margin-bottom: 8px;
}
.bv-crumb a {
  color: var(--bv-muted-2);
  text-decoration: none;
}
.bv-crumb a:hover,
.bv-crumb a:focus-visible {
  color: var(--bv-gold);
  text-decoration: underline;
}
.bv-crumb a:focus-visible {
  outline: 2px solid var(--bv-gold);
  outline-offset: 2px;
  border-radius: 3px;
}
.bv-crumb .bv-crumb-sep {
  opacity: 0.5;
}
.bv-crumb .bv-crumb-current {
  color: var(--bv-white);
}

/* ---------------------------------------------------------------------------
   Buttons — pill shaped, matching .app_btn_area .app_btn (border-radius:50px)
--------------------------------------------------------------------------- */
.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--bv-radius-pill);
  padding: 14px 30px;
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bv-btn-solid {
  background: var(--bv-gold);
  color: var(--bv-ink) !important;
}
.bv-btn-solid:hover,
.bv-btn-solid:focus-visible {
  background: var(--bv-white);
  transform: translateY(-1px);
}
.bv-btn-outline {
  border-color: var(--bv-gold);
  color: var(--bv-gold) !important;
  background: transparent;
}
.bv-btn-outline:hover,
.bv-btn-outline:focus-visible {
  background: var(--bv-gold);
  color: var(--bv-ink) !important;
}
.bv-btn-ghost {
  color: var(--bv-white) !important;
  padding: 14px 4px;
  gap: 6px;
}
.bv-btn-ghost:hover,
.bv-btn-ghost:focus-visible {
  color: var(--bv-gold) !important;
}
a.bv-btn:focus-visible,
button.bv-btn:focus-visible,
.bv-focusable:focus-visible {
  outline: 3px solid var(--bv-gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Eyebrow chip
--------------------------------------------------------------------------- */
.bv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--bv-radius-pill);
  border: 1px solid rgba(255, 192, 1, 0.4);
  color: var(--bv-gold);
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   Hero — service pages: split layout, text left / big service icon right.
--------------------------------------------------------------------------- */
.bv-hero {
  position: relative;
  padding: 8px 0 40px;
  overflow: hidden;
}
.bv-hero::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 192, 1, 0.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.bv-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.bv-hero-inner {
  min-width: 0;
}
.bv-hero-visual {
  display: flex;
  justify-content: center;
}

/* Shared big-visual panel — service icon here, region flag below. Same
   "text left / big visual right" family resemblance on purpose, while the
   surrounding chrome (fact strip vs. badges) keeps the two templates from
   reading as identical. */
.bv-hero-visual-panel {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: var(--bv-radius-lg);
  background: var(--bv-charcoal-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.bv-hero-visual-panel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bv-hero-visual-panel.bv-hero-visual-panel-initials {
  background: linear-gradient(135deg, var(--bv-gold), var(--bv-gold-deep));
}
.bv-hero-visual-panel.bv-hero-visual-panel-initials::after {
  content: attr(data-initials);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 64px;
}
@media (max-width: 900px) {
  .bv-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bv-hero-visual {
    order: -1;
  }
  .bv-hero-visual-panel {
    max-width: 180px;
  }
}
.bv-hero h1 {
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--bv-white);
}
.bv-hero-lede {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--bv-muted);
  margin-bottom: 24px;
}
.bv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* Inline fact strip — replaces the old boxed "info card" on the right */
.bv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--bv-line);
  border-bottom: 1px solid var(--bv-line);
}
.bv-fact {
  padding: 16px 26px 16px 0;
  margin-right: 26px;
  border-right: 1px solid var(--bv-line);
}
.bv-fact:last-child {
  border-right: none;
  margin-right: 0;
}
.bv-fact-label {
  display: block;
  font-family: var(--bv-heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-muted-2);
  margin-bottom: 6px;
}
.bv-fact-value {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--bv-white);
}

/* Callout — used for the "what this changes" note under the hero */
.bv-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bv-charcoal-3);
  border-left: 4px solid var(--bv-gold);
  border-radius: 0 var(--bv-radius-sm) var(--bv-radius-sm) 0;
  padding: 18px 20px;
  margin: 26px 0;
  color: var(--bv-muted);
  line-height: 1.6;
}
.bv-callout i {
  color: var(--bv-gold);
  font-size: 18px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Region hero — split layout, text left / big flag right. Distinct from
   the service hero via badges-under-heading instead of a fact strip, and a
   left-side glow instead of a right-side one.
--------------------------------------------------------------------------- */
.bv-region-hero {
  position: relative;
  padding: 8px 0 40px;
  overflow: hidden;
}
.bv-region-hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -140px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 192, 1, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bv-region-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.bv-region-hero-inner {
  min-width: 0;
}
.bv-region-hero-visual {
  display: flex;
  justify-content: center;
}
@media (max-width: 900px) {
  .bv-region-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bv-region-hero-visual {
    order: -1;
  }
  .bv-region-hero-visual .bv-hero-visual-panel {
    max-width: 180px;
  }
}
.bv-region-hero h1 {
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--bv-white);
}
.bv-region-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.bv-region-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--bv-radius-pill);
  background: var(--bv-charcoal-3);
  border: 1px solid var(--bv-line);
  font-family: var(--bv-heading-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--bv-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bv-region-badge strong {
  color: var(--bv-gold);
  font-weight: 800;
}
.bv-region-lede {
  position: relative;
  z-index: 1;
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--bv-muted);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   Section chrome shared by both templates
--------------------------------------------------------------------------- */
.bv-section {
  padding: 56px 0;
  border-top: 1px solid var(--bv-line);
  text-align: center;
}
.bv-section-eyebrow {
  display: block;
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bv-gold);
  margin-bottom: 10px;
}
.bv-section h2 {
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--bv-white);
  margin: 0 0 16px;
}
.bv-section-lede {
  color: var(--bv-muted);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Gold band — inverted section, matches .feature_area exactly (#ffc001) */
.bv-band-gold {
  background: var(--bv-gold);
  border-top: none;
  color: var(--bv-ink);
  padding: 56px 0;
}
.bv-band-gold .bv-section-eyebrow {
  color: rgba(13, 13, 13, 0.6);
}
.bv-band-gold h2,
.bv-band-gold .bv-section-lede {
  color: var(--bv-ink);
}
.bv-band-gold .bv-section-lede {
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Bento — "what changes / what doesn't", dark cards on the gold band,
   matching .feature_item's rounding (36px) and shadow treatment.
--------------------------------------------------------------------------- */
.bv-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 18px;
}
.bv-bento-card {
  background: var(--bv-black);
  border-radius: var(--bv-radius-lg);
  padding: 26px;
  box-shadow: rgba(19, 19, 19, 0.35) 0 4px 16px;
}
.bv-bento-card.bv-bento-wide {
  grid-column: span 2;
}
.bv-bento-card h3 {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bv-white);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bv-bento-card h3 i {
  color: var(--bv-gold);
}
.bv-bento-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bv-bento-card li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--bv-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}
.bv-bento-card.bv-bento-yes li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #6bd67a;
  font-weight: 700;
}
.bv-bento-card.bv-bento-no li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  color: #ff6b6b;
  font-weight: 700;
}
@media (max-width: 900px) {
  .bv-bento {
    grid-template-columns: 1fr;
  }
  .bv-bento-card.bv-bento-wide {
    grid-column: span 1;
  }
}

/* ---------------------------------------------------------------------------
   Connection recipe (SERVICE pages) — a dark "app card" list, echoing the
   real app's own selector rows (img/banner/right-mobile.png), with the
   destination row picking up the same gold active-outline the app itself
   uses on a selected item (img/streaming.png).
--------------------------------------------------------------------------- */
.bv-recipe {
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-lg);
  padding: 28px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.bv-recipe-row {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 6px 10px;
}
.bv-recipe-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--bv-radius-md);
  background: var(--bv-charcoal-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 2px solid transparent;
}
.bv-recipe-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bv-recipe-row-app .bv-recipe-icon {
  background: var(--bv-gold);
  padding: 16px;
}
.bv-recipe-row-dest .bv-recipe-icon {
  background: #f4f4f4;
  border-color: var(--bv-gold);
  box-shadow: 0 0 0 4px rgba(255, 192, 1, 0.15);
}
.bv-recipe-label {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--bv-white);
}
.bv-recipe-sublabel {
  font-size: 12px;
  color: var(--bv-muted-2);
}
.bv-recipe-link {
  flex: none;
  width: 60px;
  align-self: center;
  height: 2px;
  background-image: linear-gradient(to right, var(--bv-gold) 40%, transparent 0%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  position: relative;
}
.bv-recipe-link::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bv-gold);
}
.bv-recipe-caption {
  margin-top: 18px;
  color: var(--bv-muted-2);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 720px) {
  .bv-recipe {
    flex-direction: column;
    align-items: stretch;
  }
  .bv-recipe-row {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  .bv-recipe-link {
    width: 2px;
    height: 30px;
    align-self: flex-start;
    margin-left: 35px;
    background-image: linear-gradient(to bottom, var(--bv-gold) 40%, transparent 0%);
    background-size: 2px 10px;
  }
  .bv-recipe-link::after {
    right: 50%;
    top: auto;
    bottom: -3px;
    transform: translateX(50%);
  }
}

/* ---------------------------------------------------------------------------
   Route visual (REGION pages) — a horizontal dotted "flight path" arc, a
   deliberately different shape from the service recipe list above.
--------------------------------------------------------------------------- */
.bv-route {
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-lg);
  padding: 44px 28px 28px;
}
/* Grid, not flex + transform: icons live in row 1, labels in row 2, as
   independent grid areas. The old version raised the middle icon with
   `transform: translateY()` while the connecting line stayed at a fixed
   `bottom` offset computed from label text height — any label wrapping to
   a different line count (or simply being longer/shorter) silently moved
   the raised icon relative to the line, and on at least one region the
   line ended up cutting straight through the "Best VPN" label instead of
   sitting at icon level. Grid areas make each icon's and each label's
   position independent of the other nodes' text length, so this can't
   recur — the line is pinned to the bottom of icon row 1 regardless of
   how tall any label happens to render. */
.bv-route-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "icon-a icon-b icon-c"
    "label-a label-b label-c";
  column-gap: 12px;
  row-gap: 16px;
}
.bv-route-line {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 2px;
  margin: 0 32px 14px;
  background-image: linear-gradient(to right, var(--bv-gold) 45%, transparent 0%);
  background-size: 12px 2px;
  background-repeat: repeat-x;
}
.bv-route-icon-slot {
  display: flex;
  align-items: flex-end;
}
.bv-route-icon-slot-a {
  grid-area: icon-a;
  justify-content: flex-start;
}
.bv-route-icon-slot-b {
  grid-area: icon-b;
  justify-content: center;
  /* Raises the middle icon above the route line — padding on the slot,
     not a transform on the whole node, so it can never drag a label with
     it. */
  padding-bottom: 34px;
}
.bv-route-icon-slot-c {
  grid-area: icon-c;
  justify-content: flex-end;
}
.bv-route-label-block-a {
  grid-area: label-a;
  text-align: left;
}
.bv-route-label-block-b {
  grid-area: label-b;
  text-align: center;
}
.bv-route-label-block-c {
  grid-area: label-c;
  text-align: right;
}
.bv-route-label-block-a,
.bv-route-label-block-b,
.bv-route-label-block-c {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-route-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--bv-radius-md);
  background: var(--bv-charcoal-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 2px solid transparent;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
.bv-route-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bv-route-icon-app {
  background: var(--bv-gold);
  width: 72px;
  height: 72px;
}
.bv-route-icon-dest {
  background: #f4f4f4;
  border-color: var(--bv-gold);
  box-shadow: 0 0 0 4px rgba(255, 192, 1, 0.15);
}
.bv-route-icon.bv-route-icon-initials {
  background: linear-gradient(135deg, var(--bv-gold), var(--bv-gold-deep));
}
.bv-route-icon.bv-route-icon-initials::after {
  content: attr(data-initials);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 15px;
}
.bv-route-label {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--bv-white);
}
.bv-route-sublabel {
  font-size: 12px;
  color: var(--bv-muted-2);
}
.bv-route-caption {
  margin-top: 26px;
  color: var(--bv-muted-2);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 640px) {
  .bv-route-track {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon-a label-a"
      "icon-b label-b"
      "icon-c label-c";
    row-gap: 20px;
    column-gap: 16px;
    padding-left: 4px;
  }
  /* A route line spanning a paired icon+label layout reads as connecting
     the wrong things — dropped here, same as the equivalent line on the
     service template's recipe list at this width; the vertical stacking
     order alone still reads clearly as a sequence. */
  .bv-route-line {
    display: none;
  }
  .bv-route-icon-slot {
    align-items: center;
  }
  .bv-route-icon-slot-b {
    padding-bottom: 0;
  }
  .bv-route-label-block-a,
  .bv-route-label-block-b,
  .bv-route-label-block-c {
    text-align: left;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   Reason chips — replaces the earlier, rejected "three numbered rows" pattern.
--------------------------------------------------------------------------- */
.bv-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bv-chip-card {
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-md);
  padding: 22px;
}
.bv-chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bv-gold);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 14px;
}
.bv-chip-card h3 {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bv-white);
  margin: 0 0 8px;
}
.bv-chip-card p {
  color: var(--bv-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .bv-chip-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Steps — horizontal journey strip (SERVICE pages)
--------------------------------------------------------------------------- */
.bv-journey {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.bv-journey-step {
  flex: 1 1 0;
  position: relative;
  padding: 0 16px;
  text-align: center;
  margin-top: 3rem;
}
.bv-journey-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 2px;
  background-image: linear-gradient(to right, var(--bv-gold) 40%, transparent 0%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}
.bv-journey-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bv-gold);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.bv-journey-step h3 {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bv-white);
  margin: 0 0 8px;
  text-align: center;
}
.bv-journey-step p {
  color: var(--bv-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 780px) {
  .bv-journey {
    flex-direction: column;
    gap: 26px;
  }
  .bv-journey-step {
    text-align: left;
    padding-left: 60px;
  }
  .bv-journey-num {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  .bv-journey-step:not(:last-child)::after {
    top: 50px;
    left: 21px;
    right: auto;
    bottom: -26px;
    width: 2px;
    height: auto;
    background-image: linear-gradient(to bottom, var(--bv-gold) 40%, transparent 0%);
    background-size: 2px 8px;
  }
  .bv-journey-step h3{
    text-align: left;
  }
}

/* ---------------------------------------------------------------------------
   Timeline — vertical, for REGION pages (deliberately different from the
   horizontal journey strip above).
--------------------------------------------------------------------------- */
.bv-timeline {
  position: relative;
  padding-left: 40px;
}
.bv-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--bv-gold) 50%, transparent 0%);
  background-size: 2px 9px;
  background-repeat: repeat-y;
}
.bv-timeline-item {
  position: relative;
  margin-bottom: 26px;
}
.bv-timeline-item:last-child {
  margin-bottom: 0;
}
.bv-timeline-dot {
  position: absolute;
  left: -40px;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bv-gold);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bv-timeline-item h3 {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bv-white);
  margin: 0 0 6px;
}
.bv-timeline-item p {
  color: var(--bv-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Troubleshooting — issue / check / next action rows (service pages)
--------------------------------------------------------------------------- */
.bv-fix-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bv-fix-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-md);
  padding: 18px 20px;
}
.bv-fix-col-label {
  display: block;
  font-family: var(--bv-heading-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-gold);
  margin-bottom: 6px;
}
.bv-fix-issue {
  color: var(--bv-white);
  font-weight: 700;
  font-size: 0.95rem;
}
.bv-fix-arrow {
  color: var(--bv-muted-2);
  font-size: 1.1rem;
}
.bv-fix-action {
  color: var(--bv-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .bv-fix-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bv-fix-arrow {
    display: none;
  }
}

/* Availability / speed practical guidance (region pages) — reuses fix-list
   chrome but single-column, framed as guidance rather than issue/action. */
.bv-guide-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bv-guide-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-md);
  padding: 16px 20px;
}
.bv-guide-row i {
  color: var(--bv-gold);
  font-size: 1.1rem;
  margin-top: 3px;
}
.bv-guide-row p {
  margin: 0;
  color: var(--bv-muted);
  line-height: 1.6;
  font-size: 0.94rem;
}

/* ---------------------------------------------------------------------------
   FAQ — reuses the site's real .accordion/.panel component (see
   faq/index.html) so behaviour and look match exactly: gold blocks, black
   text, +/- toggle. Layout wrapper only is namespaced here.
--------------------------------------------------------------------------- */
.bv-faq-list .accordion {
  font-family: var(--bv-heading-font);
  /* border-radius: 0; */
}
/* css/style.css sets `.accordion:focus { outline: 0; }` sitewide (it also
   affects the real faq/index.html page) — restored here for keyboard users
   navigating these FAQ lists specifically. */
.bv-faq-list .accordion:focus-visible {
  outline: 3px solid var(--bv-white);
  outline-offset: -3px;
}
.bv-faq-list .accordion:first-child {
  border-radius: var(--bv-radius-sm) var(--bv-radius-sm) 0 0;
}
.bv-faq-list .accordion:nth-last-of-type(2),
.bv-faq-list .panel:last-child {
  /* border-radius: 0 0 var(--bv-radius-sm) var(--bv-radius-sm); */
}
.bv-faq-list .panel p {
  padding: 4px 4px 20px;
  margin: 0;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Related rail (SERVICE pages) — horizontal discovery rail, not a grid.
--------------------------------------------------------------------------- */
.bv-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}
.bv-rail::-webkit-scrollbar {
  height: 8px;
}
.bv-rail::-webkit-scrollbar-thumb {
  background: var(--bv-charcoal-3);
  border-radius: var(--bv-radius-pill);
}
.bv-rail-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-md);
  padding: 20px;
  text-decoration: none !important;
  color: var(--bv-white) !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: block;
}
.bv-rail-card:hover,
.bv-rail-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bv-gold);
}
.bv-rail-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--bv-radius-sm);
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 14px;
}
.bv-rail-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bv-rail-card-category {
  display: block;
  font-family: var(--bv-heading-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-gold);
  margin-bottom: 6px;
}
.bv-rail-card h3 {
  font-family: var(--bv-heading-font);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--bv-white);
}
.bv-rail-card p {
  color: var(--bv-muted-2);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* Related geo rows (REGION pages) — wide rows, flag-forward, distinct from
   the service rail card shape above. */
.bv-geo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bv-geo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-radius-md);
  padding: 14px 18px;
  text-decoration: none !important;
  color: var(--bv-white) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bv-geo-row:hover,
.bv-geo-row:focus-visible {
  border-color: var(--bv-gold);
  background: var(--bv-charcoal);
}
.bv-geo-flag {
  width: 46px;
  height: 46px;
  border-radius: var(--bv-radius-sm);
  background: #f4f4f4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.bv-geo-flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bv-geo-flag.bv-geo-flag-initials {
  background: linear-gradient(135deg, var(--bv-gold), var(--bv-gold-deep));
}
.bv-geo-flag.bv-geo-flag-initials::after {
  content: attr(data-initials);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 12px;
}
.bv-geo-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.bv-geo-row-body strong {
  display: block;
  font-family: var(--bv-heading-font);
  font-size: 0.98rem;
}
.bv-geo-row-body span {
  display: block;
  color: var(--bv-muted-2);
  font-size: 0.82rem;
  margin-top: 2px;
}
.bv-geo-row i {
  color: var(--bv-muted-2);
  flex: none;
}
.bv-geo-row:hover i {
  color: var(--bv-gold);
}

/* ---------------------------------------------------------------------------
   CTA band
--------------------------------------------------------------------------- */
.bv-cta-band {
  background: linear-gradient(180deg, var(--bv-charcoal) 0%, var(--bv-black) 100%);
  border-top: none;
  text-align: center;
  padding: 64px 20px;
}
.bv-cta-band h2 {
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--bv-white);
  margin: 0 0 26px;
}
.bv-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------------------------------------------------------------------------
   Table of contents pills
--------------------------------------------------------------------------- */
.bv-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.bv-toc a {
  padding: 8px 16px;
  border-radius: var(--bv-radius-pill);
  background: var(--bv-charcoal-3);
  color: var(--bv-muted);
  font-family: var(--bv-heading-font);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.bv-toc a:hover,
.bv-toc a:focus-visible {
  background: var(--bv-gold);
  color: var(--bv-ink) !important;
}

/* =============================================================================
   INDEX PAGES — service + region directory
   Rebuilt on the reference site's own proven directory-index structure
   (left-aligned hero with a stat strip under a divider, a plain search
   input + separate filter-chip row, category groups, and a responsive
   auto-fill card grid) — reskinned entirely in Best VPN's own tokens
   (gold/black, Open Sans, bv- classes). One shared class set serves both
   indexes, same as the reference (only the card media differs: a real
   icon for services, a real flag or initials fallback for regions).
============================================================================= */
.bv-dir-hero {
  position: relative;
  padding: 8px 0 8px;
  overflow: hidden;
}
.bv-dir-hero::before {
  content: '';
  position: absolute;
  top: -160px;
  left: -120px;
  width: 560px;
  height: 420px;
  background: radial-gradient(ellipse, rgba(255, 192, 1, 0.14), transparent 70%);
  pointer-events: none;
}
.bv-dir-hero h1 {
  position: relative;
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--bv-white);
}
.bv-dir-intro {
  position: relative;
  max-width: 720px;
  color: var(--bv-muted);
}
.bv-dir-intro p {
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0;
}
.bv-dir-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 24px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--bv-line);
}
.bv-dir-stat-value {
  display: block;
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 32px;
  color: var(--bv-gold);
  line-height: 1.1;
}
.bv-dir-stat-label {
  display: block;
  margin-top: 2px;
  color: var(--bv-muted-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bv-dir-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 30px 0 8px;
}
.bv-dir-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}
.bv-dir-search input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border-radius: var(--bv-radius-pill);
  border: 1px solid var(--bv-line);
  background: var(--bv-black-soft);
  color: var(--bv-white);
  font-family: var(--bv-body-font);
  font-size: 15px;
}
.bv-dir-search input::placeholder {
  color: var(--bv-muted-2);
}
.bv-dir-search input:focus-visible {
  outline: 3px solid var(--bv-gold);
  outline-offset: 2px;
}
.bv-dir-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bv-muted-2);
  font-size: 13px;
  pointer-events: none;
}
.bv-dir-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bv-dir-filter-chip {
  border: 1px solid var(--bv-line);
  background: transparent;
  color: var(--bv-muted);
  border-radius: var(--bv-radius-pill);
  padding: 8px 16px;
  font-family: var(--bv-heading-font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bv-dir-filter-chip[aria-pressed="true"] {
  background: var(--bv-gold);
  border-color: var(--bv-gold);
  color: var(--bv-ink);
}
.bv-dir-filter-chip:hover,
.bv-dir-filter-chip:focus-visible {
  border-color: var(--bv-gold);
  color: var(--bv-white);
}
.bv-dir-filter-chip[aria-pressed="true"]:hover {
  color: var(--bv-ink);
}

.bv-dir-result-count {
  margin: 6px 0 8px;
  color: var(--bv-muted-2);
  font-size: 13px;
}

.bv-dir-empty {
  display: none;
  padding: 40px 20px;
  text-align: center;
  color: var(--bv-muted-2);
}
.bv-dir-empty p {
  font-size: 1rem;
  margin: 0;
}

.bv-dir-group {
  margin-top: 34px;
}
.bv-dir-group-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bv-line);
  color: var(--bv-muted);
  font-family: var(--bv-heading-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bv-dir-group-title span {
  color: var(--bv-gold);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}

/* Compact index card — logo/flag + name + category + one-line description,
   auto-filling the row instead of a fixed column count. */
.bv-dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
  list-style: none;
  padding: 0;
}
.bv-dir-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 16px;
  border-radius: var(--bv-radius-md);
  background: var(--bv-black-soft);
  border: 1px solid var(--bv-line);
  text-decoration: none !important;
  color: var(--bv-white) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bv-dir-card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(0, 0, 0, 0.35) 0 14px 26px;
  border-color: var(--bv-gold);
}
.bv-dir-card:focus-visible {
  outline: 3px solid var(--bv-gold);
  outline-offset: 3px;
}
.bv-dir-card-media {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  overflow: hidden;
  background: #f4f4f4;
}
.bv-dir-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bv-dir-card-media.bv-dir-card-media-initials {
  background: linear-gradient(135deg, var(--bv-gold), var(--bv-gold-deep));
}
.bv-dir-card-media.bv-dir-card-media-initials::after {
  content: attr(data-initials);
  color: var(--bv-ink);
  font-family: var(--bv-heading-font);
  font-weight: 800;
  font-size: 13px;
}
.bv-dir-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.bv-dir-card-category {
  display: block;
  margin-bottom: 2px;
  color: var(--bv-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bv-dir-card-name {
  margin: 0;
  color: var(--bv-white);
  font-family: var(--bv-heading-font);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
}
.bv-dir-card-desc {
  display: -webkit-box;
  margin: 2px 0 0;
  color: var(--bv-muted-2);
  font-size: 12px;
  line-height: 1.4em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bv-dir-card-arrow {
  flex: 0 0 auto;
  color: var(--bv-muted-2);
  font-size: 13px;
}
.bv-dir-card:hover .bv-dir-card-arrow,
.bv-dir-card:focus-visible .bv-dir-card-arrow {
  color: var(--bv-gold);
}

.bv-dir-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bv-gold) !important;
  text-decoration: none !important;
  font-family: var(--bv-heading-font);
  font-weight: 700;
}
.bv-dir-jump-link:hover,
.bv-dir-jump-link:focus-visible {
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bv-bento,
  .bv-recipe {
    /* handled per-component above; kept for clarity */
  }
}
@media (max-width: 640px) {
  .bv-hero-media-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .bv-facts {
    flex-direction: column;
  }
  .bv-fact {
    border-right: none;
    border-bottom: 1px solid var(--bv-line);
    padding: 12px 0;
    margin-right: 0;
  }
  .bv-fact:last-child {
    border-bottom: none;
  }
  .bv-region-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .bv-fix-row {
    padding: 16px;
  }
}