/* ══════════════════════════════════════════════════════════════════
   VPN4PROS — CSS Additions
   Covers: status cards, tools page, search form, FAQ accordion
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared ───────────────────────────────────────────────────────── */
.page-intro {
  font-size: 15px;
  color: var(--vp4-text-muted);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 680px;
}

/* ══════════════════════════════════════════════════════════════════
   STATUS SECTION (homepage + /status page)
   ══════════════════════════════════════════════════════════════════ */
.section-status {
  padding: 48px 0;
  background: var(--vp4-white);
  border-bottom: 1.5px solid var(--vp4-border);
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* Base card — used on both homepage and /status page */
.status-card {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .18s;
  box-shadow: var(--vp4-shadow-sm);
  text-decoration: none;
  color: var(--vp4-text);
  position: relative;
}
.status-card:hover {
  border-color: var(--vp4-border2);
  box-shadow: var(--vp4-shadow);
  transform: translateY(-1px);
  color: var(--vp4-text);
}
.status-card.status-active { border-left: 3px solid var(--vp4-green); }
.status-card.status-stale  { opacity: .85; }

/* Elements */
.status-flag     { font-size: 26px; line-height: 1; }
.status-country  { font-size: 13px; font-weight: 700; color: var(--vp4-text); }
.status-time     { font-size: 12px; color: var(--vp4-text-muted); }
.status-link     {
  font-size: 12px;
  font-weight: 700;
  color: var(--vp4-green-dark);
  margin-top: 4px;
  text-decoration: none;
}
.status-link:hover { color: var(--vp4-green); }

/* Indicator dot — positioned top-right */
.status-indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-indicator.active {
  background: var(--vp4-green);
  box-shadow: 0 0 0 2px var(--vp4-green-lite);
}
.status-indicator.stale { background: #bdbdbd; }

/* /status page cards are wider and show carrier breakdown */
@media (min-width: 700px) {
  .status-grid--full {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (max-width: 699px) {
  .status-grid--full {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Dark mode */
.dark .status-card { background: var(--vp4-white); border-color: var(--vp4-border); }
.dark .section-status { background: var(--vp4-white); }

/* ══════════════════════════════════════════════════════════════════
   TOOLS PAGE  (/tools, /tools/payload-generator, /tools/config-validator)
   ══════════════════════════════════════════════════════════════════ */

/* Index grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.tool-card {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .2s;
  box-shadow: var(--vp4-shadow-sm);
  color: var(--vp4-text);
  text-decoration: none;
}
.tool-card:hover {
  border-color: var(--vp4-green);
  box-shadow: var(--vp4-shadow-md);
  transform: translateY(-3px);
  color: var(--vp4-text);
}
.tool-icon {
  font-size: 32px;
  line-height: 1;
  width: 52px;
  height: 52px;
  background: var(--vp4-green-lite);
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-card h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--vp4-text);
  margin: 0;
}
.tool-card p {
  font-size: 14px;
  color: var(--vp4-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Tool page layout (sidebar + main) */
.tool-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.tool-main    { min-width: 0; }
.tool-sidebar { position: sticky; top: 72px; }
.tool-sidebar .vp4-card { padding: 20px; }
.tool-sidebar h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--vp4-text);
  margin-bottom: 14px;
}

/* Tool form card */
.tool-form {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  padding: 24px;
  box-shadow: var(--vp4-shadow-sm);
  margin-bottom: 0;
}
.tool-row { margin-bottom: 18px; }
.tool-row:last-child { margin-bottom: 0; }
.tool-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp4-text);
  margin-bottom: 7px;
}
.tool-row select,
.tool-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius);
  font-size: 14px;
  color: var(--vp4-text);
  background: var(--vp4-white);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--vp4-font);
}
.tool-row select:focus,
.tool-input:focus {
  border-color: var(--vp4-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.10);
}
textarea.tool-input { resize: vertical; min-height: 120px; }

/* Tool output card */
.tool-output {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  padding: 20px;
  box-shadow: var(--vp4-shadow-sm);
  margin-top: 16px;
}

/* Sidebar how-to steps */
.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  counter-reset: step;
}
.howto-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  list-style: none;
  counter-increment: step;
}
.howto-steps li::before {
  content: counter(step);
  min-width: 22px;
  height: 22px;
  background: var(--vp4-green);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.howto-steps li strong { display: block; font-weight: 700; color: var(--vp4-text); }
.howto-steps li p      { color: var(--vp4-text-muted); margin: 2px 0 0; }

@media (max-width: 800px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
}

.dark .tool-card,
.dark .tool-form,
.dark .tool-output { background: var(--vp4-white); border-color: var(--vp4-border); }
.dark .tool-row select,
.dark .tool-input { background: var(--vp4-white); color: var(--vp4-text); border-color: var(--vp4-border2); }

/* ══════════════════════════════════════════════════════════════════
   SEARCH PAGE  (views/search/results.php)
   ══════════════════════════════════════════════════════════════════ */
.search-form { margin-bottom: 24px; }

/* Input + button row */
.search-input-row {
  display: flex;
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius);
  overflow: hidden;
  background: var(--vp4-white);
  margin-bottom: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.search-input-row:focus-within {
  border-color: var(--vp4-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.10);
}
.search-input {
  flex: 1;
  padding: 11px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--vp4-text);
  background: transparent;
  font-family: var(--vp4-font);
}
.search-input::placeholder { color: var(--vp4-text-muted); }

/* Filter selects row */
.search-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.search-filters select {
  padding: 8px 12px;
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--vp4-text);
  background: var(--vp4-white);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  font-family: var(--vp4-font);
}
.search-filters select:focus,
.search-filters select:hover { border-color: var(--vp4-green); }

/* Result count bar */
.search-count {
  font-size: 13px;
  color: var(--vp4-text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-count strong { color: var(--vp4-text); font-weight: 700; }

/* Pagination anchors inside .pagination (results.php uses bare <a> tags) */
.pagination a {
  padding: 8px 14px;
  border-radius: var(--vp4-radius);
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--vp4-border2);
  background: var(--vp4-white);
  color: var(--vp4-text-muted);
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
}
.pagination a:hover,
.pagination a.active {
  background: var(--vp4-green);
  border-color: var(--vp4-green);
  color: #fff;
}

.dark .search-input-row { background: var(--vp4-white); border-color: var(--vp4-border2); }
.dark .search-filters select { background: var(--vp4-white); color: var(--vp4-text); border-color: var(--vp4-border2); }

/* ══════════════════════════════════════════════════════════════════
   FAQ ACCORDION  (uses <details>/<summary>, not .faq-q/.faq-a)
   ══════════════════════════════════════════════════════════════════ */
details.faq-item {
  border-bottom: 1px solid var(--vp4-border);
}
details.faq-item:first-of-type {
  border-top: 1px solid var(--vp4-border);
}
details.faq-item summary {
  font-size: 15px;
  font-weight: 700;
  color: var(--vp4-text);
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  user-select: none;
  outline: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--vp4-green);
  flex-shrink: 0;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item summary:hover { color: var(--vp4-green-dark); }
details.faq-item p {
  font-size: 14px;
  color: var(--vp4-text-muted);
  line-height: 1.8;
  padding-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════
   HUB & SPOKE PAGES
   /country/                    → country hub   (PageController → vp4_pages)
   /country/{country}/          → country       (CountryController)
   /country/{country}/{carrier}/            → carrier    (CarrierController)
   /country/{country}/{carrier}/{app}/      → three-way  (CarrierController#showWithApp)
   ══════════════════════════════════════════════════════════════════ */

/* ── CSS variable aliases ─────────────────────────────────────────
   Maps the short WP-era names used in vp4_pages.content
   to real values. Defined on :root so they resolve everywhere.
   --surface uses a literal #fff (not --vp4-white which flips dark).  */
:root {
  --bg:           var(--vp4-bg);
  --surface:      #ffffff;
  --surface2:     var(--vp4-bg-dark);
  --border:       var(--vp4-border);
  --border2:      var(--vp4-border2);
  --border3:      var(--vp4-border3);
  --accent:       var(--vp4-green);
  --accent2:      var(--vp4-green-mid);
  --accent3:      #4ade80;
  --accent-light: var(--vp4-green-lite);
  --text:         var(--vp4-text);
  --text2:        var(--vp4-text-mid);
  --muted:        var(--vp4-text-muted);
  --muted2:       #9ca3af;
  --dark:         var(--vp4-dark);
  --dark2:        var(--vp4-dark2);
  --radius:       var(--vp4-radius);
  --radius-lg:    var(--vp4-radius-lg);
}
.dark {
  --surface:      #0f2d1a;
  --surface2:     #132616;
  --border:       var(--vp4-border);
  --border2:      var(--vp4-border2);
  --accent-light: var(--vp4-green-lite);
}

/* ── Page chrome (h1, intro) ──────────────────────────────────────*/
.page-main h1,
.container > h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: var(--vp4-text);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* ── Filter tabs (country hub — carrier pills) ────────────────────*/
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--vp4-border2);
  background: var(--vp4-white);
  color: var(--vp4-text-mid);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.filter-tabs a:hover  { border-color: var(--vp4-green); color: var(--vp4-green-dark); background: var(--vp4-green-lite); }
.filter-tabs a.active { background: var(--vp4-green); border-color: var(--vp4-green); color: #fff; }

/* ── Filter row (select + sort) ───────────────────────────────────*/
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-row select {
  padding: 8px 12px;
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--vp4-text);
  background: var(--vp4-white);
  outline: none;
  cursor: pointer;
  font-family: var(--vp4-font);
  transition: border-color .15s;
}
.filter-row select:hover,
.filter-row select:focus { border-color: var(--vp4-green); }

.sort-tabs { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sort-tabs a {
  padding: 7px 13px;
  border-radius: var(--vp4-radius);
  font-size: 12px;
  font-weight: 700;
  color: var(--vp4-text-muted);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}
.sort-tabs a:hover  { color: var(--vp4-text); background: var(--vp4-green-lite); border-color: var(--vp4-border2); }
.sort-tabs a.active { color: var(--vp4-green-dark); background: var(--vp4-green-lite); border-color: var(--vp4-border2); font-weight: 800; }

/* ── Filter link (three-way back/forward nav) ─────────────────────*/
.filter-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--vp4-green-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: var(--vp4-radius);
  border: 1.5px solid var(--vp4-border2);
  background: var(--vp4-white);
  transition: all .15s;
  text-decoration: none;
}
.filter-link:hover { background: var(--vp4-green-lite); border-color: var(--vp4-green); }

/* ── Empty state ──────────────────────────────────────────────────*/
.empty-state {
  padding: 48px 0;
  text-align: center;
  font-size: 15px;
  color: var(--vp4-text-muted);
  line-height: 1.7;
}
.empty-state a { color: var(--vp4-green-dark); font-weight: 700; }

/* ── FAQ section wrapper ──────────────────────────────────────────*/
.faq-section { margin-top: 48px; padding-top: 32px; border-top: 1.5px solid var(--vp4-border); }
.faq-section > h2 { font-size: 20px; font-weight: 800; color: var(--vp4-text); margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════════
   PAGE CONTENT — CMS HTML output (vp4_pages.content)
   The content uses <section> as layout primitive with inline
   background: var(--surface/bg/surface2). Inner elements use
   .vp4j-* classes (carrier pages) or raw HTML (hub pages).
   ══════════════════════════════════════════════════════════════════ */
.page-content {
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Sections get full-bleed padding */
.page-content section {
  padding: 52px 24px;
  width: 100%;
}

/* Inner content constraint */
.page-content section > *:not(style),
.page-content .vp4j-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Headings ─────────────────────────────────────────────────────*/
.page-content section h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  margin-bottom: 8px;
  line-height: 1.15;
}
.page-content section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 22px 0 9px;
  line-height: 1.3;
}
.page-content section > p,
.page-content .vp4j-lead {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 640px;
}
.page-content section > p strong,
.page-content section p strong { color: var(--text2); }

/* ── Links as border-background buttons ───────────────────────────
   All <a> tags inside .page-content that aren't inside a table,
   nav, or already a specific component class.                      */
.page-content a:not(
  [class^="vp4j"],
  nav a,
  table a,
  .vp4j-var-dl,
  .vp4j-dl-btn,
  .vp4j-cta-btn,
  .vp4j-app-link,
  .vp4j-pill
) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--vp4-radius);
  border: 1.5px solid var(--border2);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.page-content a:not(
  [class^="vp4j"],
  nav a,
  table a,
  .vp4j-var-dl,
  .vp4j-dl-btn,
  .vp4j-cta-btn,
  .vp4j-app-link,
  .vp4j-pill
):hover {
  background: var(--border2);
  border-color: var(--border3);
  color: var(--text2);
}

/* ── Buttons inside content ───────────────────────────────────────*/
.page-content button[onclick],
.page-content button[data-panel] {
  padding: 7px 14px;
  background: var(--surface);
  color: var(--text2);
  border: 1.5px solid var(--border2);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--vp4-font);
  transition: all .15s;
}
.page-content button[onclick]:hover,
.page-content button[data-panel]:hover,
.page-content button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Inputs ───────────────────────────────────────────────────────*/
.page-content input[type="text"],
.page-content input[type="email"] {
  padding: 10px 16px;
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-family: var(--vp4-font);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  max-width: 380px;
}
.page-content input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22,163,74,.10);
}

/* ── Tables ───────────────────────────────────────────────────────*/
.page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.page-content table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.page-content table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: var(--surface);
  color: var(--text2);
}
.page-content table tr:last-child td { border-bottom: none; }
.page-content table tr:nth-child(even) td { background: var(--accent-light); }
.page-content table tr:hover td { background: var(--accent-light); }
.page-content table td:first-child { font-weight: 600; color: var(--text); }

/* Table scroll wrapper — applied via JS below, or use overflow on parent */
.page-content section > table,
.page-content .vp4j-cfg-wrap,
.page-content .vp4j-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

/* ── FAQ details ──────────────────────────────────────────────────*/
.page-content details {
  border-bottom: 1px solid var(--border);
}
.page-content details:first-of-type { border-top: 1px solid var(--border); }
.page-content details summary {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  user-select: none;
}
.page-content details summary::-webkit-details-marker { display: none; }
.page-content details summary::after {
  content: '+';
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 400;
  transition: transform .2s;
}
.page-content details[open] summary::after { transform: rotate(45deg); }
.page-content details p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  padding-bottom: 16px;
}

/* ── Dark mode ────────────────────────────────────────────────────*/
.dark .filter-tabs a         { background: var(--vp4-white); border-color: var(--vp4-border); }
.dark .filter-tabs a.active  { background: var(--vp4-green); border-color: var(--vp4-green); color: #fff; }
.dark .filter-row select     { background: var(--vp4-white); color: var(--vp4-text); }
.dark .sort-tabs a.active,
.dark .sort-tabs a:hover     { background: var(--vp4-green-bg); border-color: var(--vp4-border); }
.dark .filter-link           { background: var(--vp4-white); border-color: var(--vp4-border); }
.dark .faq-section           { border-color: var(--vp4-border); }
.dark .page-content table td,
.dark .page-content table th { background: var(--surface); }
.dark .page-content table tr:nth-child(even) td,
.dark .page-content table tr:hover td { background: var(--accent-light); }

/* ── Mobile ───────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .page-content section { padding: 40px 16px; }
  .sort-tabs { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .sort-tabs a { padding: 6px 10px; font-size: 11px; }
  .filter-tabs a { font-size: 12px; padding: 6px 12px; }
  .filter-row { gap: 8px; }

  /* Stack table rows on small screens */
  .page-content table {
    display: block;
  }
  .page-content table thead { display: none; }
  .page-content table tbody { display: block; }
  .page-content table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .page-content table tr:last-child { border-bottom: none; }
  .page-content table tr:nth-child(even) { background: var(--accent-light); }
  .page-content table td {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent !important;
    flex: 0 0 auto;
  }
  .page-content table td:first-child { flex: 0 0 100%; font-size: 14px; margin-bottom: 2px; }
  .page-content table td:last-child   { flex: 0 0 100%; margin-top: 4px; }

  .page-content a:not([class^="vp4j"], nav a, table a) {
    font-size: 12px;
    padding: 7px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   COUNTRIES HUB  /country/  (.vp4i-* system)
   ══════════════════════════════════════════════════════════════════ */
.vp4i *,.vp4i *::before,.vp4i *::after{box-sizing:border-box;margin:0;padding:0}
.vp4i a{text-decoration:none;color:inherit}
.vp4i ul,.vp4i ol{list-style:none}
.vp4i button,.vp4i input{font-family:inherit;font-size:inherit}
.vp4i-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.vp4i-label{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--vp4-green);margin-bottom:8px}
.vp4i-h2{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--vp4-text);letter-spacing:-.025em;margin-bottom:6px;line-height:1.15}
.vp4i-lead{font-size:15px;color:var(--vp4-text-muted);margin-bottom:28px;max-width:600px;line-height:1.7}
.vp4i-hidden{display:none !important}

/* Breadcrumb */
.vp4i-breadcrumb{background:var(--vp4-dark);border-bottom:1px solid rgba(255,255,255,.07)}
.vp4i-bc-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;height:40px;flex-wrap:wrap}
.vp4i-bc-item a{font-size:12px;color:rgba(255,255,255,.55);font-weight:500;transition:color .2s}
.vp4i-bc-item a:hover{color:var(--accent3,#4ade80)}
.vp4i-bc-sep{font-size:12px;color:rgba(255,255,255,.25)}
.vp4i-bc-current{font-size:12px;color:rgba(255,255,255,.85);font-weight:600}

/* Hero */
.vp4i-hero{background:linear-gradient(155deg,var(--vp4-dark) 0%,#143422 55%,#0d2a18 100%);padding:72px 0 80px;position:relative;overflow:hidden}
.vp4i-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(34,197,94,.07) 0%,transparent 70%);pointer-events:none}
.vp4i-hero-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.vp4i-hero-sublabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#4ade80;margin-bottom:14px}
.vp4i-hero-h1{font-size:clamp(26px,4.5vw,46px);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px;max-width:700px}
.vp4i-hero-h1 span{color:#4ade80}
.vp4i-hero-lead{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:28px;max-width:560px}

/* Search in hero */
.vp4i-hero-search{margin-bottom:32px}
.vp4i-search-input{padding:12px 18px;border-radius:var(--vp4-radius);border:none;background:rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:500;outline:none;width:100%;max-width:400px;transition:background .2s,box-shadow .2s}
.vp4i-search-input::placeholder{color:rgba(255,255,255,.4)}
.vp4i-search-input:focus{background:rgba(255,255,255,.15);box-shadow:0 0 0 2px rgba(74,222,128,.4)}

.vp4i-hero-stats{display:flex;gap:32px;flex-wrap:wrap}
.vp4i-hero-stat{display:flex;flex-direction:column;gap:3px;padding-right:32px;border-right:1px solid rgba(255,255,255,.1)}
.vp4i-hero-stat:last-child{border-right:none}
.vp4i-hero-stat-val{font-size:26px;font-weight:800;color:#fff;line-height:1}
.vp4i-hero-stat-key{font-size:11.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* Stats bar */
.vp4i-statsbar{background:var(--vp4-dark2);border-bottom:1px solid rgba(255,255,255,.06)}
.vp4i-statsbar-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:stretch;flex-wrap:wrap}
.vp4i-statsbar-item{display:flex;flex-direction:column;gap:2px;padding:18px 32px;border-right:1px solid rgba(255,255,255,.07)}
.vp4i-statsbar-item:last-child{border-right:none}
.vp4i-statsbar-val{font-size:18px;font-weight:800;color:#fff}
.vp4i-statsbar-key{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* How it works */
.vp4i-howit{background:var(--surface,#fff);padding:72px 0}
.vp4i-steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.vp4i-step-card{background:var(--bg,#f0fdf4);border:1px solid var(--border2);border-radius:var(--vp4-radius-lg);padding:28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.vp4i-step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vp4-green),#4ade80)}
.vp4i-step-num{font-size:36px;font-weight:800;color:var(--border2);line-height:1;letter-spacing:-.04em}
.vp4i-step-title{font-size:16px;font-weight:700;color:var(--vp4-text)}
.vp4i-step-body{font-size:14px;color:var(--vp4-text-muted);line-height:1.7}

/* Countries section */
.vp4i-countries{background:var(--bg,#f0fdf4);padding:72px 0}
.vp4i-filter-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.vp4i-filter-btn{padding:9px 18px;border-radius:var(--vp4-radius);border:1px solid var(--border2);background:var(--surface,#fff);color:var(--vp4-text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--vp4-font)}
.vp4i-filter-btn:hover,.vp4i-filter-btn.active{background:var(--vp4-green);color:#fff;border-color:var(--vp4-green)}
.vp4i-popular-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--vp4-text-muted);margin-bottom:12px}
.vp4i-popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px}
.vp4i-region-section{margin-bottom:40px}
.vp4i-region-label{font-size:13px;font-weight:700;color:var(--vp4-text-mid);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--border2);display:flex;align-items:center;gap:8px}
.vp4i-region-label::before{content:'';width:14px;height:14px;border-radius:3px;background:var(--vp4-green);display:inline-block;flex-shrink:0}
.vp4i-region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* Country card */
.vp4i-country-card{background:var(--surface,#fff);border:1px solid var(--border2);border-radius:var(--vp4-radius-lg);padding:20px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;overflow:hidden;color:var(--vp4-text);text-decoration:none}
.vp4i-country-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vp4-green),#4ade80)}
.vp4i-country-card:hover{box-shadow:0 8px 28px rgba(22,163,74,.1);transform:translateY(-2px);border-color:var(--border3)}
.vp4i-country-card.popular::after{content:'Popular';position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:20px;background:var(--vp4-green-lite);color:var(--vp4-green)}
.vp4i-country-flag{font-size:28px;line-height:1;margin-bottom:4px}
.vp4i-country-name{font-size:16px;font-weight:800;color:var(--vp4-text)}
.vp4i-country-region{font-size:11px;color:var(--vp4-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:4px}
.vp4i-country-networks{font-size:12.5px;color:var(--vp4-text-mid);font-weight:500;margin-bottom:4px}
.vp4i-country-apps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.vp4i-country-app-tag{font-size:11px;font-weight:600;padding:3px 8px;background:var(--vp4-green-lite);border:1px solid var(--border2);border-radius:6px;color:var(--vp4-text-mid)}
.vp4i-country-carriers{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.vp4i-carrier-chip{font-size:11.5px;font-weight:600;padding:4px 10px;background:var(--bg,#f0fdf4);border:1px solid var(--border2);border-radius:99px;color:var(--vp4-text-mid);transition:all .15s}
.vp4i-carrier-chip:hover{background:var(--vp4-green);color:#fff;border-color:var(--vp4-green)}
.vp4i-country-link{font-size:12.5px;font-weight:700;color:var(--vp4-green);display:inline-flex;align-items:center;gap:4px;margin-top:auto}
.vp4i-country-link:hover{color:var(--vp4-green-mid)}

/* Apps section */
.vp4i-apps{background:var(--surface2,#f8fffe);padding:72px 0}
.vp4i-apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.vp4i-app-card{background:var(--surface,#fff);border:1.5px solid var(--border2);border-radius:var(--vp4-radius-lg);padding:24px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,border-color .2s;color:var(--vp4-text);text-decoration:none}
.vp4i-app-card:hover{box-shadow:0 6px 24px rgba(22,163,74,.08);border-color:var(--border3)}
.vp4i-app-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vp4i-app-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.vp4i-app-badge.fastest{background:var(--vp4-green-lite);color:var(--vp4-green)}
.vp4i-app-name{font-size:15px;font-weight:800;color:var(--vp4-text)}
.vp4i-app-ext{font-size:11.5px;font-weight:600;color:var(--vp4-text-muted)}
.vp4i-app-body{font-size:13.5px;color:var(--vp4-text-muted);line-height:1.65;flex:1}
.vp4i-app-link{font-size:13px;font-weight:700;color:var(--vp4-green);display:inline-flex;align-items:center;gap:4px;margin-top:auto}
.vp4i-app-link:hover{color:var(--vp4-green-mid)}

/* Network index */
.vp4i-netindex{background:var(--surface,#fff);padding:72px 0}
.vp4i-netindex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.vp4i-netindex-country{display:flex;flex-direction:column;gap:8px}
.vp4i-netindex-country-name{font-size:14px;font-weight:800;color:var(--vp4-text);display:flex;align-items:center;gap:6px;margin-bottom:4px;text-decoration:none}
.vp4i-netindex-country-name:hover{color:var(--vp4-green)}
.vp4i-netindex-carriers{display:flex;flex-direction:column;gap:4px}
.vp4i-netindex-carrier{font-size:13px;color:var(--vp4-text-mid);text-decoration:none;display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-radius:var(--vp4-radius);border:1px solid var(--border);background:var(--bg,#f0fdf4);transition:all .15s}
.vp4i-netindex-carrier:hover{border-color:var(--vp4-green);background:var(--vp4-green-lite);color:var(--vp4-text)}
.vp4i-netindex-carrier span{font-size:11px;color:var(--vp4-text-muted);font-weight:700;background:var(--surface,#fff);padding:2px 6px;border-radius:99px}

/* FAQ */
.vp4i-faq{background:var(--surface,#fff);padding:72px 0}
.vp4i-faq-list{display:flex;flex-direction:column;gap:8px;margin-top:32px;max-width:780px}
.vp4i-faq-item{background:var(--bg,#f0fdf4);border:1px solid var(--border2);border-radius:var(--vp4-radius-lg);overflow:hidden;transition:border-color .2s}
.vp4i-faq-item[open]{border-color:var(--border3);background:var(--surface,#fff)}
.vp4i-faq-item summary{padding:18px 22px;font-size:14.5px;font-weight:700;color:var(--vp4-text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;user-select:none}
.vp4i-faq-item summary::-webkit-details-marker{display:none}
.vp4i-faq-item summary::after{content:'+';font-size:18px;color:var(--vp4-text-muted);font-weight:400;flex-shrink:0;transition:transform .2s}
.vp4i-faq-item[open] summary::after{transform:rotate(45deg);color:var(--vp4-green)}
.vp4i-faq-body{padding:0 22px 18px;font-size:14px;color:var(--vp4-text-muted);line-height:1.75;border-top:1px solid var(--border)}

/* WhatsApp */
.vp4i-wa{background:var(--vp4-dark);padding:64px 0}
.vp4i-wa-head{margin-bottom:32px}
.vp4i-wa-h2{font-size:clamp(20px,3vw,28px);font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:8px}
.vp4i-wa-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.65;max-width:560px}
.vp4i-wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vp4i-wa-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--vp4-radius-lg);padding:24px;display:flex;align-items:flex-start;gap:16px;transition:border-color .2s;text-decoration:none;color:inherit}
.vp4i-wa-card:hover{border-color:rgba(37,211,102,.3)}
.vp4i-wa-icon{width:44px;height:44px;border-radius:12px;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vp4i-wa-icon svg{width:22px;height:22px}
.vp4i-wa-content{flex:1}
.vp4i-wa-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.vp4i-wa-desc{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.6}
.vp4i-wa-btn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 16px;background:#25D366;color:#fff;font-size:13px;font-weight:700;border-radius:var(--vp4-radius);transition:background .2s}
.vp4i-wa-btn:hover{background:#22c55e}

/* CTA */
.vp4i-cta{background:var(--vp4-dark2);border-top:1px solid rgba(255,255,255,.06);padding:56px 0;text-align:center}
.vp4i-cta-h2{font-size:clamp(20px,3vw,28px);font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-.025em}
.vp4i-cta-sub{font-size:15px;color:rgba(255,255,255,.45);margin-bottom:24px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.65}
.vp4i-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:var(--vp4-green);color:#fff;font-size:14px;font-weight:700;border-radius:var(--vp4-radius);transition:background .2s,transform .2s;text-decoration:none}
.vp4i-btn-primary:hover{background:var(--vp4-green-mid);transform:translateY(-1px)}

/* Responsive */
@media(max-width:1024px){
  .vp4i-popular-grid,.vp4i-region-grid{grid-template-columns:repeat(2,1fr)}
  .vp4i-apps-grid{grid-template-columns:repeat(2,1fr)}
  .vp4i-netindex-grid{grid-template-columns:repeat(2,1fr)}
  .vp4i-steps-row{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .vp4i-hero{padding:48px 0 56px}
  .vp4i-wa-grid{grid-template-columns:1fr}
  .vp4i-steps-row{grid-template-columns:1fr}
  .vp4i-hero-stats{gap:20px}
  .vp4i-statsbar-inner{flex-wrap:wrap}
}
@media(max-width:480px){
  .vp4i-popular-grid,.vp4i-region-grid{grid-template-columns:1fr 1fr}
  .vp4i-apps-grid,.vp4i-netindex-grid{grid-template-columns:1fr}
  .vp4i-statsbar-inner{flex-direction:column}
  .vp4i-statsbar-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .vp4i-wa-card{flex-direction:column}
  .vp4i-hero-stats{flex-direction:column;gap:14px}
  .vp4i-hero-stat{border-right:none;padding-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}
  .vp4i-hero-stat:last-child{border-bottom:none}
  .vp4i-search-input{max-width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   SEARCH PAGE  /search/
   ══════════════════════════════════════════════════════════════════ */

/* Nav request link — subtle pill */
.nav-request {
  background: var(--vp4-green-lite);
  color: var(--vp4-green-dark) !important;
  padding: 5px 13px;
  border-radius: 99px;
  font-weight: 700 !important;
  border: 1.5px solid var(--vp4-border2);
  transition: background .15s, border-color .15s;
}
.nav-request:hover { background: var(--vp4-green); color: #fff !important; border-color: var(--vp4-green); }

/* Quick filter chips */
.src-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.src-chips-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vp4-text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.src-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border2);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vp4-text-mid);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.src-chip:hover { background: var(--vp4-green); border-color: var(--vp4-green); color: #fff; }
.src-chip span  { font-size: 10px; font-weight: 800; color: var(--vp4-text-muted); background: var(--vp4-bg); padding: 1px 5px; border-radius: 99px; }
.src-chip:hover span { background: rgba(255,255,255,.2); color: #fff; }
.src-chip-country { background: var(--vp4-green-lite); border-color: var(--vp4-border2); }

/* Section heading */
.src-section { margin-bottom: 36px; }
.src-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.src-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--vp4-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.src-section-title i { color: var(--vp4-green); }
.src-section-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--vp4-green-dark);
  text-decoration: none;
}
.src-section-link:hover { color: var(--vp4-green); }

/* Mini config card grid */
.src-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.src-mini-card {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: var(--vp4-text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.src-mini-card:hover {
  border-color: var(--vp4-border2);
  box-shadow: 0 4px 16px rgba(22,163,74,.08);
  transform: translateY(-1px);
}
.src-mini-top { display: flex; align-items: flex-start; gap: 8px; }
.src-mini-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.src-mini-meta { flex: 1; min-width: 0; }
.src-mini-carrier { font-size: 11.5px; font-weight: 700; color: var(--vp4-text-mid); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-mini-app    { font-size: 11px; color: var(--vp4-text-muted); display: block; }
.src-mini-dl     { font-size: 11px; font-weight: 700; color: var(--vp4-green); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 3px; }
.src-mini-title  { font-size: 13px; font-weight: 600; color: var(--vp4-text); line-height: 1.4; flex: 1; }
.src-mini-age    { font-size: 11px; color: var(--vp4-text-muted); margin-top: auto; }

/* Two-column browse block */
.src-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.src-browse-card {
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  padding: 20px;
}
.src-browse-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--vp4-text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.src-browse-card h3 i { color: var(--vp4-green); }
.src-browse-list { display: flex; flex-direction: column; gap: 2px; }
.src-browse-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--vp4-radius);
  font-size: 13px;
  color: var(--vp4-text-mid);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.src-browse-list li a:hover { background: var(--vp4-green-lite); color: var(--vp4-text); }
.src-browse-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--vp4-text-muted);
  background: var(--vp4-bg);
  padding: 2px 7px;
  border-radius: 99px;
}

/* CTA bar */
.src-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: var(--vp4-green-lite);
  border: 1.5px solid var(--vp4-border2);
  border-radius: var(--vp4-radius-lg);
  margin-top: 32px;
}
.src-cta strong { font-size: 15px; color: var(--vp4-text); }

/* ══════════════════════════════════════════════════════════════════
   STATUS PAGE  /status/
   ══════════════════════════════════════════════════════════════════ */

/* Global stats bar */
.sts-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: stretch;
  background: var(--vp4-white);
  border: 1.5px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  margin-bottom: 28px;
  overflow: hidden;
}
.sts-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-right: 1px solid var(--vp4-border);
}
.sts-stat:last-of-type { border-right: none; }
.sts-stat-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--vp4-text);
  line-height: 1;
}
.sts-stat-val small { font-size: 15px; font-weight: 600; color: var(--vp4-text-muted); }
.sts-stat-key { font-size: 11px; color: var(--vp4-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sts-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px 20px;
  font-size: 12px;
  color: var(--vp4-text-muted);
  min-width: 160px;
}
.sts-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.sts-dot.active { background: var(--vp4-green); }
.sts-dot.stale  { background: var(--vp4-text-muted); }

/* App coverage dots on cards */
.sts-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}
.sts-coverage-dot {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.sts-coverage-dot.covered { background: var(--vp4-green-lite); color: var(--vp4-green-dark); border: 1px solid var(--vp4-border2); }
.sts-coverage-dot.missing { background: var(--vp4-bg); color: var(--vp4-text-muted); border: 1px solid var(--vp4-border); opacity: .6; }

/* Carrier age */
.status-carrier-meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.status-carrier-age  { font-size: 10px; color: var(--vp4-text-muted); }

/* Card footer */
.sts-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--vp4-border);
}
.sts-request-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--vp4-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.sts-request-link:hover { color: var(--vp4-green); }

/* Coverage matrix table */
.sts-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--vp4-border);
  border-radius: var(--vp4-radius-lg);
  overflow: hidden;
  min-width: 600px;
}
.sts-matrix th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vp4-text-muted);
  background: var(--vp4-bg);
  border-bottom: 1px solid var(--vp4-border2);
  text-align: center;
  white-space: nowrap;
}
.sts-matrix th:first-child { text-align: left; }
.sts-matrix td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vp4-border);
  text-align: center;
  vertical-align: middle;
  background: var(--vp4-white);
}
.sts-matrix tr:last-child td { border-bottom: none; }
.sts-matrix tr:hover td { background: var(--vp4-green-lite); }
.sts-matrix-country { font-weight: 700; color: var(--vp4-text); text-decoration: none; white-space: nowrap; }
.sts-matrix-country:hover { color: var(--vp4-green); }
.sts-matrix-yes { color: var(--vp4-green); font-weight: 700; }
.sts-matrix-no  { color: var(--vp4-text-muted); }
.sts-matrix-req {
  font-size: 11px;
  font-weight: 700;
  color: var(--vp4-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--vp4-border2);
  border-radius: 6px;
  transition: all .15s;
}
.sts-matrix-req:hover { background: var(--vp4-green); color: #fff; border-color: var(--vp4-green); }

/* Mobile */
@media (max-width: 900px) {
  .src-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .src-mini-grid { grid-template-columns: 1fr; }
  .src-two-col   { grid-template-columns: 1fr; }
  .src-cta       { flex-direction: column; align-items: flex-start; }
  .sts-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }
  .sts-stat      { border-right: none; border-bottom: 1px solid var(--vp4-border); }
  .sts-stat:nth-child(odd)  { border-right: 1px solid var(--vp4-border); }
  .sts-legend    { grid-column: 1 / -1; border-top: 1px solid var(--vp4-border); flex-direction: row; flex-wrap: wrap; gap: 12px; min-width: 0; }
  .src-chips-row { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════
   SERVERS SECTION  (homepage + /servers/* pages)
   ══════════════════════════════════════════════════════════════════ */

.section-servers {
  padding: 56px 0;
  background: var(--vp4-dark);
  position: relative;
  overflow: hidden;
}
.section-servers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 70% at 90% 50%, rgba(34,197,94,.07) 0%, transparent 70%);
  pointer-events: none;
}
.section-servers .container { position: relative; z-index: 1; }

/* Header row */
.servers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.servers-head-text {}
.servers-head .section-chip {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
  color: #4ade80;
}
.servers-head .section-chip i { color: #4ade80; }
.servers-title {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 8px 0 6px;
}
.servers-title em { font-style: italic; color: #4ade80; }
.servers-sub {
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  max-width: 500px;
}

/* Server type grid */
.servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

/* Base card */
.server-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: var(--vp4-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, background .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.server-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vp4-green), #4ade80);
  opacity: 0;
  transition: opacity .2s;
}

/* Coming-soon variant — not clickable */
.server-card--coming {
  cursor: default;
  pointer-events: none;
  opacity: .72;
}

/* Live variant (SSH Tunnel — first to launch, still coming soon at Phase 04) */
.server-card--coming-ssh {
  border-color: rgba(34,197,94,.18);
}

/* Icon area */
.server-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(34,197,94,.10);
  border: 1.5px solid rgba(34,197,94,.20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #4ade80;
  flex-shrink: 0;
}

/* Card body */
.server-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.server-card-method {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.server-card-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  flex: 1;
}

/* Durations row */
.server-card-durations {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.server-duration-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.18);
  color: #4ade80;
}

/* Coming soon badge */
.server-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  margin-top: auto;
  align-self: flex-start;
}
.server-coming-badge i { font-size: 10px; }

/* Notify me CTA below grid */
.servers-notify {
  margin-top: 28px;
  padding: 20px 24px;
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(255,255,255,.07);
  border-radius: var(--vp4-radius-lg);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.servers-notify-text {
  flex: 1;
  min-width: 200px;
}
.servers-notify-text strong {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  display: block;
  margin-bottom: 3px;
}
.servers-notify-text p {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin: 0;
}

/* Nav — coming-soon disabled link */
.nav-coming-soon {
  position: relative;
  color: rgba(255,255,255,.35) !important;
  cursor: default;
  pointer-events: none;
}
.main-nav .nav-coming-soon {
  color: var(--vp4-text-muted) !important;
}

/* Tooltip on the Servers nav item */
.nav-servers-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-servers-wrap .nav-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--vp4-dark);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(34,197,94,.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
}
.nav-servers-wrap .nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(34,197,94,.25);
}
.nav-servers-wrap:hover .nav-tooltip { opacity: 1; }

/* Re-enable pointer events on the wrapper so tooltip shows on hover */
.nav-servers-wrap { pointer-events: auto; }

/* Dark mode adjustments (section already dark, nothing to flip) */
.dark .section-servers { background: #050f07; }

/* Mobile */
@media (max-width: 640px) {
  .section-servers { padding: 40px 0; }
  .servers-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .server-card { padding: 18px; }
  .servers-head { margin-bottom: 24px; }
  .servers-notify { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 380px) {
  .servers-grid { grid-template-columns: 1fr; }
}