/* =============================================================
   VisionPakistan.digital — Main Stylesheet v1.0
   Design: TechCrunch × Verge × Linear × Stripe
   ============================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* ── GREEN + WHITE palette ── */

  /* Primary brand: vibrant green */
  --vp-blue:         #20bb5a;   /* primary accent — bright green */
  --vp-blue-dark:    #16a347;   /* darker vibrant green */
  --vp-blue-light:   #DCFCE7;   /* pale green tint */

  /* Dark sections */
  --vp-black:        #0D1B0F;

  /* Greens */
  --vp-green:        #20bb5a;   /* bright accent green */
  --vp-green-light:  #DCFCE7;
  --vp-green-mid:    #16a347;   /* medium vibrant green */
  --vp-green-forest: #0D1B0F;   /* darkest */

  /* Supporting palette (kept for badges / category colors) */
  --vp-purple:       #6D28D9;
  --vp-purple-light: #EDE9FE;
  --vp-orange:       #EA580C;
  --vp-orange-light: #FED7AA;
  --vp-amber:        #D97706;
  --vp-amber-light:  #FEF3C7;
  --vp-emerald:      #059669;
  --vp-emerald-light:#D1FAE5;
  --vp-teal:         #0D9488;
  --vp-teal-light:   #CCFBF1;
  --vp-rose:         #E11D48;
  --vp-rose-light:   #FFE4E6;
  --vp-indigo:       #4338CA;
  --vp-indigo-light: #E0E7FF;
  --vp-slate:        #475569;
  --vp-slate-light:  #F1F5F9;

  /* Neutrals */
  --vp-bg:           #FFFFFF;
  --vp-surface:      #F4FBF5;   /* very pale green tint */
  --vp-surface-2:    #E8F5EA;   /* light green surface */
  --vp-border:       #D1E8D4;   /* green-tinted border */
  --vp-border-dark:  #B0CEB5;

  /* Text */
  --vp-text-primary: #0D1B0F;   /* dark forest green (hunzaeats) */
  --vp-text-secondary:#16a347;
  --vp-text-muted:   #6b7280;   /* neutral gray for muted text */
  --vp-text-light:   #9ca3af;
  --vp-text-white:   #FFFFFF;

  /* Typography */
  --vp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vp-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes */
  --vp-text-xs:   0.75rem;
  --vp-text-sm:   0.875rem;
  --vp-text-base: 1rem;
  --vp-text-lg:   1.125rem;
  --vp-text-xl:   1.25rem;
  --vp-text-2xl:  1.5rem;
  --vp-text-3xl:  1.875rem;
  --vp-text-4xl:  2.25rem;
  --vp-text-5xl:  3rem;
  --vp-text-6xl:  3.75rem;

  /* Spacing */
  --vp-space-1: .25rem; --vp-space-2: .5rem;  --vp-space-3: .75rem;
  --vp-space-4: 1rem;   --vp-space-5: 1.25rem;--vp-space-6: 1.5rem;
  --vp-space-8: 2rem;   --vp-space-10:2.5rem; --vp-space-12:3rem;
  --vp-space-16:4rem;   --vp-space-20:5rem;   --vp-space-24:6rem;

  /* Radii */
  --vp-radius-sm: 4px;
  --vp-radius:    8px;
  --vp-radius-md: 12px;
  --vp-radius-lg: 16px;
  --vp-radius-full: 9999px;

  /* Shadows */
  --vp-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --vp-shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --vp-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --vp-shadow-lg: 0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --vp-shadow-xl: 0 20px 40px -8px rgba(0,0,0,.12);

  /* Layout */
  --vp-container: 1200px;
  --vp-content-w: 720px;
  --vp-sidebar-w: 312px;
  --vp-header-h:  112px;
  --vp-topbar-h:  40px;
  --vp-mainbar-h: 72px;

  /* Transitions */
  --vp-t:    150ms ease;
  --vp-t-md: 250ms ease;
}

/* ── 2. RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display: none !important; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--vp-font);
  font-size: var(--vp-text-base);
  color: var(--vp-text-primary);
  background: var(--vp-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, button, textarea, select { font: inherit; }

/* ── 3. LAYOUT ─────────────────────────────────────────────────── */
.vp-container {
  width: 100%;
  max-width: var(--vp-container);
  margin-inline: auto;
  padding-inline: var(--vp-space-6);
}

.vp-page-wrapper {
  padding-top: var(--vp-header-h);
}

.vp-main {
  min-height: 60vh;
}

/* ── 4. HEADER ─────────────────────────────────────────────────── */
.vp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--vp-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--vp-t-md), box-shadow var(--vp-t-md), background var(--vp-t-md);
}

.vp-header.is-sticky {
  border-bottom-color: var(--vp-border);
  box-shadow: 0 1px 0 var(--vp-border), 0 4px 16px rgba(0,0,0,.06);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Top bar */
.vp-header__topbar {
  height: var(--vp-topbar-h);
  background: #0D1B0F;
  color: rgba(255,255,255,.75);
  font-size: var(--vp-text-xs);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vp-header__topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--vp-space-4);
  height: 100%;
}

.vp-header__date { white-space: nowrap; color: rgba(255,255,255,.5); }

/* Ticker */
.vp-ticker {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  min-width: 0;
}

.vp-ticker__label {
  font-size: var(--vp-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vp-amber);
  white-space: nowrap;
  padding: 2px 10px;
  border: 1px solid rgba(217,119,6,.4);
  border-radius: var(--vp-radius-full);
  flex-shrink: 0;
  margin-right: var(--vp-space-4);
}

/* Clip zone — mask only applies here, label stays clean */
.vp-ticker__clip {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.vp-ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: vp-ticker 35s linear infinite;
}

.vp-ticker__item {
  color: rgba(255,255,255,.8);
  transition: color var(--vp-t);
  white-space: nowrap;
  padding-right: var(--vp-space-8);
}
.vp-ticker__item:hover { color: #fff; }
.vp-ticker__item::after {
  content: '·';
  color: rgba(255,255,255,.35);
  margin-left: var(--vp-space-8);
}

@keyframes vp-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.vp-header__topbar-actions { flex-shrink: 0; }

/* Main header bar */
.vp-header__main {
  height: var(--vp-mainbar-h);
  display: flex;
  align-items: center;
}

.vp-header__main-inner {
  display: flex;
  align-items: center;
  gap: var(--vp-space-8);
  width: 100%;
}

/* Logo */
.vp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.vp-logo__img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}

.vp-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--vp-blue);
  color: #fff;
  font-size: var(--vp-text-sm);
  font-weight: 900;
  border-radius: var(--vp-radius);
  letter-spacing: -.02em;
}

.vp-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.vp-logo__name {
  font-size: var(--vp-text-lg);
  font-weight: 700;
  color: var(--vp-text-primary);
  letter-spacing: -.02em;
}
.vp-logo__name strong { color: var(--vp-blue); }

.vp-logo__tagline {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  font-weight: 500;
  letter-spacing: .02em;
}

.vp-logo--light .vp-logo__name,
.vp-logo--light .vp-logo__tagline { color: rgba(255,255,255,.85); }
.vp-logo--light .vp-logo__name strong { color: #fff; }

/* Navigation */
.vp-nav { flex: 1; min-width: 0; }

.vp-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--vp-space-1);
  list-style: none;
}

.vp-nav__menu li > a {
  display: block;
  padding: var(--vp-space-2) var(--vp-space-3);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  color: var(--vp-text-secondary);
  border-radius: var(--vp-radius);
  transition: color var(--vp-t), background var(--vp-t);
  white-space: nowrap;
}

.vp-nav__menu li > a:hover,
.vp-nav__menu li.current-menu-item > a,
.vp-nav__menu li.current-menu-ancestor > a {
  color: var(--vp-text-primary);
  background: var(--vp-surface);
}

/* Header actions */
.vp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--vp-space-2);
  flex-shrink: 0;
}

/* Inline search bar */
.vp-search-bar { display: flex; align-items: center; }

.vp-search-bar__form { display: flex; align-items: center; flex-direction: row-reverse; }

.vp-search-bar__btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--vp-radius);
  color: var(--vp-text-muted);
  transition: color var(--vp-t), background var(--vp-t);
  flex-shrink: 0;
}
.vp-search-bar__btn:hover { color: var(--vp-text-primary); background: var(--vp-surface); }
.vp-search-bar.is-open .vp-search-bar__btn { color: var(--vp-blue); }

.vp-search-bar__input {
  width: 0; padding: 0;
  border: none; border-bottom: 2px solid transparent;
  outline: none; background: transparent;
  font-size: var(--vp-text-sm); color: var(--vp-text-primary);
  opacity: 0; pointer-events: none;
  transition: width .25s cubic-bezier(.4,0,.2,1), padding .2s, opacity .2s, border-color .2s;
}
.vp-search-bar.is-open .vp-search-bar__input {
  width: 200px; padding: 4px 8px 4px 0;
  border-bottom-color: var(--vp-blue);
  opacity: 1; pointer-events: auto;
}
.vp-search-bar__input::placeholder { color: var(--vp-text-muted); }
@media (max-width: 768px) {
  .vp-search-bar.is-open .vp-search-bar__input { width: 130px; }
}

/* Burger */
.vp-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border-radius: var(--vp-radius);
  padding: 0 8px;
  color: var(--vp-text-muted);
  transition: background var(--vp-t);
}
.vp-header__burger:hover { background: var(--vp-surface); }
.vp-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--vp-t-md), opacity var(--vp-t);
}
.vp-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vp-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vp-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.vp-mobile-menu {
  background: var(--vp-bg);
  border-top: 1px solid var(--vp-border);
  padding: var(--vp-space-4) 0 var(--vp-space-6);
}

.vp-mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-1);
  margin-bottom: var(--vp-space-4);
}

.vp-mobile-menu__list li a {
  display: block;
  padding: var(--vp-space-3) var(--vp-space-4);
  font-weight: 600;
  border-radius: var(--vp-radius);
  color: var(--vp-text-primary);
  transition: background var(--vp-t);
}
.vp-mobile-menu__list li a:hover { background: var(--vp-surface); }

.vp-mobile-menu__cta {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
  padding-top: var(--vp-space-4);
  border-top: 1px solid var(--vp-border);
}

/* ── 5. READING PROGRESS ───────────────────────────────────────── */
.vp-reading-progress {
  position: fixed;
  top: var(--vp-header-h);
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0D1B0F, #20bb5a);
  z-index: 999;
  transition: width 100ms linear;
  border-radius: 0 3px 3px 0;
}

/* ── 6. (reserved) ─────────────────────────────────────────────── */

/* ── 7. BUTTONS ────────────────────────────────────────────────── */
.vp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--vp-space-2);
  padding: var(--vp-space-2) var(--vp-space-4);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  border-radius: var(--vp-radius);
  transition: all var(--vp-t);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  height: 36px;
}

.vp-btn--primary {
  background: var(--vp-blue);
  color: #fff;
  border: 1.5px solid var(--vp-blue);
  box-shadow: 0 1px 2px rgba(32,187,90,.2);
}
.vp-btn--primary:hover {
  background: var(--vp-blue-dark);
  border-color: var(--vp-blue-dark);
  box-shadow: 0 4px 14px rgba(32,187,90,.35);
  transform: translateY(-1px);
}

.vp-btn--outline {
  background: transparent;
  color: var(--vp-text-primary);
  border: 1.5px solid var(--vp-border-dark);
}
.vp-btn--outline:hover {
  border-color: var(--vp-blue);
  color: var(--vp-blue);
  background: var(--vp-blue-light);
}

.vp-btn--sm  { height: 30px; font-size: var(--vp-text-xs); padding-inline: var(--vp-space-3); }
.vp-btn--lg  { height: 44px; font-size: var(--vp-text-base); padding-inline: var(--vp-space-6); }
.vp-btn--xs  { height: 26px; font-size: var(--vp-text-xs); padding: 2px var(--vp-space-3); }
.vp-btn--full{ width: 100%; justify-content: center; }

/* ── 8. BADGES ─────────────────────────────────────────────────── */
.vp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--vp-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--vp-radius-full);
  white-space: nowrap;
  transition: opacity var(--vp-t);
  text-decoration: none;
}
.vp-badge:hover { opacity: .85; }

.vp-badge--sm  { padding: 2px 8px; font-size: 10px; }
.vp-badge--lg  { padding: 4px 14px; font-size: var(--vp-text-xs); }

.vp-badge--blue    { background: var(--vp-blue-light);    color: #0D1B0F; }
.vp-badge--purple  { background: var(--vp-purple-light);  color: #5B21B6; }
.vp-badge--green   { background: var(--vp-green-light);   color: #065F46; }
.vp-badge--orange  { background: var(--vp-orange-light);  color: #9A3412; }
.vp-badge--amber   { background: var(--vp-amber-light);   color: #92400E; }
.vp-badge--emerald { background: var(--vp-emerald-light); color: #064E3B; }
.vp-badge--teal    { background: var(--vp-teal-light);    color: #134E4A; }
.vp-badge--rose    { background: var(--vp-rose-light);    color: #9F1239; }
.vp-badge--indigo  { background: var(--vp-indigo-light);  color: #312E81; }
.vp-badge--slate   { background: var(--vp-slate-light);   color: #334155; }

/* ── 9. CARDS ──────────────────────────────────────────────────── */
.vp-card {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  overflow: hidden;
  transition: transform var(--vp-t-md), box-shadow var(--vp-t-md), border-color var(--vp-t-md);
  display: flex;
  flex-direction: column;
  position: relative;
}

.vp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-left: 3px solid transparent;
  transition: border-color var(--vp-t-md);
  pointer-events: none;
}

.vp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  border-color: var(--vp-border-dark);
}

.vp-card:hover::after { border-left-color: var(--vp-green); }

.vp-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--vp-surface);
}

.vp-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.vp-card:hover .vp-card__thumb img { transform: scale(1.04); }

.vp-card__body {
  padding: var(--vp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-2);
  flex: 1;
}

.vp-card__title {
  font-size: var(--vp-text-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--vp-text-primary);
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-card__title a { color: inherit; }
.vp-card__title a:hover { color: var(--vp-blue); }

.vp-card__excerpt {
  font-size: var(--vp-text-sm);
  color: var(--vp-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-card--large .vp-card__title { font-size: var(--vp-text-xl); font-weight: 800; -webkit-line-clamp: 2; }
.vp-card--large .vp-card__body  { padding: var(--vp-space-5); }

.vp-card--small {
  flex-direction: row;
  align-items: flex-start;
  border-radius: var(--vp-radius);
}

.vp-card--small .vp-card__thumb {
  width: 90px;
  min-width: 90px;
  height: 68px;
  aspect-ratio: unset;
  border-radius: var(--vp-radius) 0 0 var(--vp-radius);
}

.vp-card--small .vp-card__body {
  padding: var(--vp-space-3);
  gap: var(--vp-space-1);
}

.vp-card--small .vp-card__title {
  font-size: var(--vp-text-sm);
  font-weight: 700;
  -webkit-line-clamp: 2;
}

/* Post meta */
.vp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vp-space-1);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  margin-top: auto;
}

.vp-meta__author { font-weight: 600; color: var(--vp-text-secondary); }
.vp-meta__author:hover { color: var(--vp-blue); }
.vp-meta__sep { color: var(--vp-border-dark); }

/* ── 10. GRIDS ─────────────────────────────────────────────────── */
.vp-grid {
  display: grid;
  gap: var(--vp-space-5);
}

.vp-grid--two   { grid-template-columns: repeat(2, 1fr); }
.vp-grid--three { grid-template-columns: repeat(3, 1fr); }
.vp-grid--four  { grid-template-columns: repeat(4, 1fr); }

.vp-grid--lead-left {
  grid-template-columns: 1fr 340px;
  gap: var(--vp-space-5);
  align-items: start;
}

.vp-grid__stack {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
}

.vp-grid--two-col-sections {
  grid-template-columns: 1fr 1fr;
  gap: var(--vp-space-10);
  align-items: start;
}

.vp-grid--archive {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vp-space-6);
}

.vp-grid--scholarships-layout {
  grid-template-columns: 1fr 280px;
  gap: var(--vp-space-10);
  align-items: start;
}

/* ── 11. SECTIONS ──────────────────────────────────────────────── */
.vp-section {
  padding: var(--vp-space-16) 0;
  border-bottom: 1px solid var(--vp-border);
}

.vp-section:last-child { border-bottom: none; }

.vp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--vp-space-6);
  gap: var(--vp-space-4);
}

.vp-section-header__title {
  font-size: var(--vp-text-2xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--vp-text-primary);
  position: relative;
}

.vp-section-header__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  border-radius: 4px;
  margin-right: var(--vp-space-3);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.vp-section-header__title--blue::before   { background: var(--vp-blue); }
.vp-section-header__title--purple::before { background: var(--vp-purple); }
.vp-section-header__title--orange::before { background: var(--vp-orange); }
.vp-section-header__title--green::before  { background: var(--vp-green); }
.vp-section-header__title--emerald::before{ background: var(--vp-emerald); }
.vp-section-header__title--amber::before  { background: var(--vp-amber); }
.vp-section-header__title--rose::before   { background: var(--vp-rose); }
.vp-section-header__title--teal::before   { background: var(--vp-teal); }

.vp-section-header__more {
  display: inline-flex;
  align-items: center;
  gap: var(--vp-space-1);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  color: var(--vp-blue);
  transition: gap var(--vp-t);
  flex-shrink: 0;
}
.vp-section-header__more:hover { gap: var(--vp-space-2); }

.vp-section-desc {
  font-size: var(--vp-text-sm);
  color: var(--vp-text-muted);
  margin-top: calc(var(--vp-space-6) * -1 + var(--vp-space-2));
  margin-bottom: var(--vp-space-6);
}

.vp-section-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--vp-space-8);
}

/* ── 12. HERO ──────────────────────────────────────────────────── */
.vp-hero {
  padding: var(--vp-space-8) 0;
  border-bottom: 1px solid var(--vp-border);
  background: var(--vp-bg);
}

.vp-hero__grid {
  display: grid;
  grid-template-columns: 1fr 368px;
  gap: var(--vp-space-5);
  align-items: start;
}

.vp-hero__main {
  border-radius: var(--vp-radius-md);
  overflow: hidden;
  border: 1px solid var(--vp-border);
  background: var(--vp-surface);
  display: flex;
  flex-direction: column;
  transition: transform var(--vp-t-md), box-shadow var(--vp-t-md), border-color var(--vp-t-md);
}
.vp-hero__main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.06);
  border-color: var(--vp-green);
}

.vp-hero__main-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.vp-hero__main-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.vp-hero__main:hover .vp-hero__main-thumb img { transform: scale(1.03); }

.vp-hero__main-body {
  padding: var(--vp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
}

.vp-hero__main-title {
  font-size: var(--vp-text-4xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
  color: var(--vp-text-primary);
}
.vp-hero__main-title a { color: inherit; }
.vp-hero__main-title a:hover { color: var(--vp-blue); }

.vp-hero__main-excerpt {
  font-size: var(--vp-text-base);
  color: var(--vp-text-muted);
  line-height: 1.6;
}

.vp-hero__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
}

/* ── 12b. STATS STRIP (Stripe-style social proof) ──────────────── */
.vp-stats-strip {
  background: var(--vp-surface);
  border-bottom: 1px solid var(--vp-border);
  padding: var(--vp-space-5) 0;
}

.vp-stats-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.vp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vp-space-1);
  padding: var(--vp-space-3) var(--vp-space-8);
}

.vp-stat__num {
  font-size: var(--vp-text-2xl);
  font-weight: 900;
  color: var(--vp-text-primary);
  letter-spacing: -.03em;
  line-height: 1;
}

.vp-stat__label {
  font-size: var(--vp-text-xs);
  font-weight: 600;
  color: var(--vp-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.vp-stat__divider {
  width: 1px;
  height: 36px;
  background: var(--vp-border-dark);
  flex-shrink: 0;
}

/* ── 13. TRENDING ──────────────────────────────────────────────── */
.vp-section--trending { background: var(--vp-surface); }

.vp-trending__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--vp-space-4);
}

.vp-trending__item {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
  cursor: pointer;
}

.vp-trending__num {
  font-size: var(--vp-text-3xl);
  font-weight: 900;
  color: var(--vp-green);
  line-height: 1;
  letter-spacing: -.04em;
  opacity: .45;
  transition: opacity var(--vp-t-md);
}
.vp-trending__item:hover .vp-trending__num { opacity: 1; }

.vp-trending__thumb {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--vp-radius);
}
.vp-trending__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.vp-trending__item:hover .vp-trending__thumb img { transform: scale(1.05); }

.vp-trending__body { display: flex; flex-direction: column; gap: var(--vp-space-2); }

.vp-trending__title {
  font-size: var(--vp-text-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--vp-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vp-trending__title a { color: inherit; }
.vp-trending__title a:hover { color: var(--vp-blue); }

.vp-trending__date { font-size: var(--vp-text-xs); color: var(--vp-text-muted); }

/* ── 14. LIST POSTS (sidebar sections) ────────────────────────── */
.vp-list-posts {
  display: flex;
  flex-direction: column;
  margin-top: var(--vp-space-4);
  border-top: 1px solid var(--vp-border);
}

.vp-list-posts__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--vp-space-2);
  padding: var(--vp-space-3) 0;
  border-bottom: 1px solid var(--vp-border);
}

.vp-list-posts__title {
  font-size: var(--vp-text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--vp-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.vp-list-posts__title:hover { color: var(--vp-blue); }

.vp-list-posts__date {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 15. NEWSLETTER ────────────────────────────────────────────── */
.vp-section--newsletter-mid {
  background: var(--vp-black);
  border: none;
  padding: var(--vp-space-16) 0;
}

.vp-newsletter-mid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--vp-space-12);
}

.vp-newsletter-mid__eyebrow {
  font-size: var(--vp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vp-blue);
  margin-bottom: var(--vp-space-3);
}

.vp-newsletter-mid__title {
  font-size: var(--vp-text-3xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--vp-space-3);
}

.vp-newsletter-mid__desc {
  font-size: var(--vp-text-base);
  color: rgba(255,255,255,.6);
  line-height: 1.6;
}

/* Newsletter form */
.vp-newsletter-form { width: 100%; }

.vp-newsletter-form--mid .vp-newsletter-form__fields {
  display: flex;
  gap: var(--vp-space-2);
  min-width: 360px;
}

.vp-newsletter-form--default .vp-newsletter-form__fields,
.vp-newsletter-form--sidebar .vp-newsletter-form__fields,
.vp-newsletter-form--inline .vp-newsletter-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-2);
}

.vp-newsletter-form__input {
  flex: 1;
  height: 44px;
  padding: 0 var(--vp-space-4);
  border: 1.5px solid var(--vp-border-dark);
  border-radius: var(--vp-radius);
  font-size: var(--vp-text-sm);
  color: var(--vp-text-primary);
  background: var(--vp-bg);
  transition: border-color var(--vp-t), box-shadow var(--vp-t);
  min-width: 0;
}
.vp-newsletter-form__input:focus {
  outline: none;
  border-color: var(--vp-blue);
  box-shadow: 0 0 0 3px var(--vp-blue-light);
}

.vp-newsletter-form--footer .vp-newsletter-form__input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.vp-newsletter-form--footer .vp-newsletter-form__input::placeholder { color: rgba(255,255,255,.4); }

.vp-newsletter-form__btn { white-space: nowrap; flex-shrink: 0; }

.vp-newsletter-form__note {
  margin-top: var(--vp-space-2);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-light);
}

.vp-newsletter-form--footer .vp-newsletter-form__note { color: rgba(255,255,255,.4); }

.vp-newsletter-form__status { margin-top: var(--vp-space-2); font-size: var(--vp-text-sm); }

/* Footer newsletter */
.vp-footer__newsletter {
  background: #0D1B0F;
  padding: var(--vp-space-12) 0;
}

.vp-footer__newsletter-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--vp-space-12);
}

.vp-footer__newsletter-title {
  font-size: var(--vp-text-2xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: var(--vp-space-3);
}

.vp-footer__newsletter-desc { color: rgba(255,255,255,.5); font-size: var(--vp-text-sm); margin-bottom: var(--vp-space-4); }

.vp-footer__newsletter-social { display: flex; gap: var(--vp-space-3); }

.vp-footer__newsletter-form { min-width: 380px; }

/* Footer newsletter form */
.vp-newsletter-form--footer .vp-newsletter-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-2);
}

/* ── 16. FOOTER ────────────────────────────────────────────────── */
.vp-footer__main {
  background: #0D1B0F;
  padding: var(--vp-space-16) 0;
}

.vp-footer__grid {
  display: grid;
  grid-template-columns: 240px repeat(4, 1fr);
  gap: var(--vp-space-8);
}

.vp-footer__brand-desc {
  margin-top: var(--vp-space-3);
  font-size: var(--vp-text-sm);
  color: rgba(255,255,255,.45);
  line-height: 1.65;
}

.vp-footer__col-title {
  font-size: var(--vp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--vp-space-4);
}

.vp-footer__links { display: flex; flex-direction: column; gap: var(--vp-space-3); }
.vp-footer__links li a {
  font-size: var(--vp-text-sm);
  color: rgba(255,255,255,.55);
  transition: color var(--vp-t);
}
.vp-footer__links li a:hover { color: #fff; }

.vp-footer__bottom {
  background: #FFFFFF;
  border-top: 2px solid #0D1B0F;
  padding: var(--vp-space-4) 0;
}

.vp-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-space-4);
}

.vp-footer__copyright { font-size: var(--vp-text-xs); color: #6b7280; }

.vp-footer__legal {
  display: flex;
  gap: var(--vp-space-4);
}
.vp-footer__legal a {
  font-size: var(--vp-text-xs);
  color: #6b7280;
  transition: color var(--vp-t);
}
.vp-footer__legal a:hover { color: #0D1B0F; }

/* Social links */
.vp-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--vp-radius);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  transition: background var(--vp-t), color var(--vp-t);
}
.vp-social-link:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── 17. ARTICLE PAGE ──────────────────────────────────────────── */
.vp-main--article { padding-top: var(--vp-space-10); }

.vp-article-layout {
  display: grid;
  grid-template-columns: var(--vp-content-w) var(--vp-sidebar-w);
  gap: var(--vp-space-12);
  align-items: start;
  max-width: calc(var(--vp-content-w) + var(--vp-sidebar-w) + var(--vp-space-12));
  margin-inline: auto;
}

/* Article header */
.vp-article__header {
  margin-bottom: var(--vp-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-4);
}

.vp-article__title {
  font-size: var(--vp-text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--vp-text-primary);
}

.vp-article__deck {
  font-size: var(--vp-text-xl);
  color: var(--vp-text-secondary);
  line-height: 1.5;
  font-weight: 400;
  border-left: 3px solid var(--vp-blue);
  padding-left: var(--vp-space-4);
}

.vp-article__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vp-space-4);
  padding: var(--vp-space-4) 0;
  border-top: 1px solid var(--vp-border);
  border-bottom: 1px solid var(--vp-border);
}

/* Hero image */
.vp-article__hero-image {
  margin-bottom: var(--vp-space-8);
  border-radius: var(--vp-radius-md);
  overflow: hidden;
}
.vp-article__hero-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.vp-article__hero-image figcaption {
  padding: var(--vp-space-2) var(--vp-space-3);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  background: var(--vp-surface);
}

/* Article content typography */
.vp-article__content {
  font-size: var(--vp-text-lg);
  line-height: 1.75;
  color: var(--vp-text-secondary);
  max-width: 100%;
}

.vp-article__content h2 {
  font-size: var(--vp-text-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vp-text-primary);
  margin-top: var(--vp-space-10);
  margin-bottom: var(--vp-space-4);
  line-height: 1.25;
}

.vp-article__content h3 {
  font-size: var(--vp-text-xl);
  font-weight: 700;
  color: var(--vp-text-primary);
  margin-top: var(--vp-space-8);
  margin-bottom: var(--vp-space-3);
}

.vp-article__content p { margin-bottom: var(--vp-space-5); }

.vp-article__content a {
  color: var(--vp-blue);
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,.3);
  text-underline-offset: 3px;
}
.vp-article__content a:hover { text-decoration-color: var(--vp-blue); }

.vp-article__content ul,
.vp-article__content ol {
  margin-bottom: var(--vp-space-5);
  padding-left: var(--vp-space-6);
}
.vp-article__content ul { list-style: disc; }
.vp-article__content ol { list-style: decimal; }
.vp-article__content li { margin-bottom: var(--vp-space-2); }

.vp-article__content blockquote {
  margin: var(--vp-space-8) 0;
  padding: var(--vp-space-5) var(--vp-space-6);
  border-left: 4px solid var(--vp-blue);
  background: var(--vp-blue-light);
  border-radius: 0 var(--vp-radius) var(--vp-radius) 0;
  font-size: var(--vp-text-xl);
  font-style: italic;
  font-weight: 500;
  color: var(--vp-text-primary);
}

.vp-article__content code {
  font-family: var(--vp-mono);
  font-size: .875em;
  background: var(--vp-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--vp-rose);
}

.vp-article__content pre {
  background: var(--vp-black);
  color: #e2e8f0;
  padding: var(--vp-space-5);
  border-radius: var(--vp-radius-md);
  overflow-x: auto;
  font-family: var(--vp-mono);
  font-size: var(--vp-text-sm);
  margin-bottom: var(--vp-space-6);
}
.vp-article__content pre code { background: none; padding: 0; color: inherit; }

.vp-article__content img {
  border-radius: var(--vp-radius-md);
  margin: var(--vp-space-6) 0;
  width: 100%;
}

/* Table of Contents */
.vp-toc {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-5);
  margin-bottom: var(--vp-space-8);
}

.vp-toc__title {
  font-size: var(--vp-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vp-text-muted);
  margin-bottom: var(--vp-space-4);
}

.vp-toc__list { display: flex; flex-direction: column; gap: var(--vp-space-2); counter-reset: toc; }

.vp-toc__list li { counter-increment: toc; }

.vp-toc__list a {
  font-size: var(--vp-text-sm);
  font-weight: 500;
  color: var(--vp-text-muted);
  transition: color var(--vp-t);
  display: flex;
  gap: var(--vp-space-2);
}
.vp-toc__list a::before {
  content: counter(toc) ".";
  color: var(--vp-border-dark);
  font-weight: 700;
  min-width: 20px;
}
.vp-toc__list a.active { color: var(--vp-blue); }
.vp-toc__list a:hover  { color: var(--vp-blue); }
.vp-toc__list .vp-toc-sub { padding-left: var(--vp-space-5); }

/* Sidebar */
.vp-article-sidebar {
  position: sticky;
  top: calc(var(--vp-header-h) + var(--vp-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-5);
  max-height: calc(100vh - var(--vp-header-h) - var(--vp-space-12));
  overflow-y: auto;
  scrollbar-width: none;
}
.vp-article-sidebar::-webkit-scrollbar { display: none; }

.vp-toc--sidebar { margin-bottom: 0; }

/* Sidebar widgets */
.vp-sidebar-widget {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-5);
}

.vp-sidebar-widget--newsletter { background: var(--vp-black); }

.vp-sidebar-widget__title {
  font-size: var(--vp-text-sm);
  font-weight: 700;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vp-sidebar-widget--newsletter .vp-sidebar-widget__title { color: #fff; }

.vp-sidebar-widget__desc {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  margin-bottom: var(--vp-space-3);
  line-height: 1.5;
}
.vp-sidebar-widget--newsletter .vp-sidebar-widget__desc { color: rgba(255,255,255,.5); }

.vp-sidebar-widget__more {
  font-size: var(--vp-text-xs);
  color: var(--vp-blue);
  font-weight: 600;
}

.vp-sidebar-widget__note {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  margin-top: var(--vp-space-2);
  line-height: 1.4;
}

/* Sidebar jobs list */
.vp-sidebar-jobs { display: flex; flex-direction: column; gap: var(--vp-space-3); margin-bottom: var(--vp-space-4); }
.vp-sidebar-jobs__item { border-bottom: 1px solid var(--vp-border); padding-bottom: var(--vp-space-3); }
.vp-sidebar-jobs__item:last-child { border-bottom: none; padding-bottom: 0; }

.vp-sidebar-jobs__link { display: flex; flex-direction: column; gap: 2px; }
.vp-sidebar-jobs__title { font-size: var(--vp-text-sm); font-weight: 600; color: var(--vp-text-primary); }
.vp-sidebar-jobs__title:hover { color: var(--vp-blue); }
.vp-sidebar-jobs__company { font-size: var(--vp-text-xs); color: var(--vp-text-muted); }

/* Share buttons */
.vp-share { display: flex; align-items: center; gap: var(--vp-space-2); flex-wrap: wrap; }

.vp-share__btn {
  display: flex;
  align-items: center;
  gap: var(--vp-space-2);
  padding: var(--vp-space-2);
  border-radius: var(--vp-radius);
  color: var(--vp-text-muted);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  transition: all var(--vp-t);
  font-size: var(--vp-text-xs);
  font-weight: 600;
}
.vp-share__btn:hover { background: var(--vp-surface-2); color: var(--vp-text-primary); border-color: var(--vp-border-dark); }
.vp-share__btn--labeled { padding: var(--vp-space-2) var(--vp-space-3); }

/* Article bottom sections */
.vp-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vp-space-2);
  align-items: center;
  margin: var(--vp-space-8) 0;
  padding-top: var(--vp-space-6);
  border-top: 1px solid var(--vp-border);
}

.vp-article__tags-label { font-size: var(--vp-text-sm); color: var(--vp-text-muted); font-weight: 600; }

.vp-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-full);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  font-weight: 600;
  transition: all var(--vp-t);
}
.vp-tag:hover { background: var(--vp-blue-light); border-color: var(--vp-blue); color: var(--vp-blue); }

.vp-article__share-footer {
  display: flex;
  align-items: center;
  gap: var(--vp-space-4);
  padding: var(--vp-space-6) 0;
  border-top: 1px solid var(--vp-border);
  border-bottom: 1px solid var(--vp-border);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  color: var(--vp-text-muted);
  flex-wrap: wrap;
}

/* Author box */
.vp-author-box {
  display: flex;
  gap: var(--vp-space-5);
  align-items: flex-start;
  padding: var(--vp-space-6);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  margin: var(--vp-space-8) 0;
}

.vp-author-box__img {
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--vp-radius-full) !important;
  object-fit: cover;
  flex-shrink: 0;
}

.vp-author-box__label { font-size: var(--vp-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--vp-text-muted); font-weight: 700; }
.vp-author-box__name  { font-size: var(--vp-text-lg); font-weight: 800; margin: var(--vp-space-1) 0 var(--vp-space-2); letter-spacing: -.01em; }
.vp-author-box__name a:hover { color: var(--vp-blue); }
.vp-author-box__bio   { font-size: var(--vp-text-sm); color: var(--vp-text-muted); line-height: 1.6; }
.vp-author-box__social { margin-top: var(--vp-space-3); }

/* Newsletter inline CTA */
.vp-article__newsletter-cta {
  margin: var(--vp-space-8) 0;
}

.vp-article__newsletter-cta-inner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--vp-radius-lg);
  padding: var(--vp-space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vp-space-8);
  align-items: center;
}

.vp-article__newsletter-cta-copy h3 {
  font-size: var(--vp-text-xl);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--vp-space-2);
}
.vp-article__newsletter-cta-copy p {
  font-size: var(--vp-text-sm);
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}

/* Related */
.vp-article__related { margin-top: var(--vp-space-10); }
.vp-article__related-title { font-size: var(--vp-text-xl); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--vp-space-6); }

/* Jobs CTA */
.vp-jobs-cta-card {
  display: flex;
  align-items: center;
  gap: var(--vp-space-5);
  padding: var(--vp-space-5);
  background: var(--vp-amber-light);
  border: 1px solid rgba(217,119,6,.2);
  border-radius: var(--vp-radius-md);
  margin-top: var(--vp-space-8);
}
.vp-jobs-cta-card__icon { font-size: 2rem; flex-shrink: 0; }
.vp-jobs-cta-card__copy h3 { font-size: var(--vp-text-base); font-weight: 700; color: var(--vp-text-primary); margin-bottom: var(--vp-space-1); }
.vp-jobs-cta-card__copy p  { font-size: var(--vp-text-sm); color: var(--vp-text-muted); }

/* Breadcrumbs */
.vp-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vp-space-2);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  margin-bottom: var(--vp-space-4);
}
.vp-breadcrumbs a { color: var(--vp-text-muted); font-weight: 500; }
.vp-breadcrumbs a:hover { color: var(--vp-blue); }
.vp-breadcrumbs span[aria-current] { color: var(--vp-text-secondary); font-weight: 600; }

/* ── 18. JOBS ──────────────────────────────────────────────────── */
.vp-jobs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vp-space-4);
  margin-bottom: var(--vp-space-6);
}

.vp-jobs-tabs, .vp-jobs-filter-tabs {
  display: flex;
  align-items: center;
  gap: var(--vp-space-2);
  flex-wrap: wrap;
}

.vp-jobs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--vp-space-2);
  padding: 5px 14px;
  font-size: var(--vp-text-sm);
  font-weight: 600;
  border-radius: var(--vp-radius-full);
  border: 1.5px solid var(--vp-border-dark);
  color: var(--vp-text-muted);
  transition: all var(--vp-t);
}
.vp-jobs-tab:hover { border-color: var(--vp-text-primary); color: var(--vp-text-primary); background: var(--vp-surface); }
.vp-jobs-tab--active { background: var(--vp-black); color: #fff; border-color: var(--vp-black); }

.vp-jobs-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  background: rgba(255,255,255,.15);
  border-radius: var(--vp-radius-full);
  font-size: 10px;
  min-width: 18px;
}

.vp-jobs-featured { margin-bottom: var(--vp-space-5); }

/* Job card */
.vp-job-card {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--vp-space-4);
  transition: transform var(--vp-t-md), box-shadow var(--vp-t-md);
}
.vp-job-card:hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-md); }
.vp-job-card--featured { border-color: var(--vp-amber); background: var(--vp-amber-light); }

.vp-job-card__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--vp-radius);
  overflow: hidden;
  border: 1px solid var(--vp-border);
  background: var(--vp-surface);
}
.vp-job-card__logo img { width: 100%; height: 100%; object-fit: cover; }

.vp-job-card__logo-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vp-text-lg);
  font-weight: 800;
  background: linear-gradient(135deg, #0D1B0F, #20bb5a);
  color: #fff;
  border-radius: var(--vp-radius);
}

.vp-job-card__content { flex: 1; min-width: 0; }
.vp-job-card__title   { font-size: var(--vp-text-base); font-weight: 700; margin: var(--vp-space-2) 0 var(--vp-space-1); }
.vp-job-card__title a { color: var(--vp-text-primary); }
.vp-job-card__title a:hover { color: var(--vp-blue); }
.vp-job-card__company { font-size: var(--vp-text-sm); color: var(--vp-text-muted); margin-bottom: var(--vp-space-2); }

.vp-job-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vp-space-2);
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
}

.vp-job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vp-job-card__tag {
  padding: 2px 8px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--vp-text-muted);
}

.vp-job-card__tag--remote {
  background: var(--vp-teal-light);
  border-color: var(--vp-teal);
  color: var(--vp-teal);
}

.vp-job-card__deadline {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Jobs grid */
.vp-jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-3);
  margin-bottom: var(--vp-space-8);
}

/* Jobs hub */
.vp-jobs-hub-header { padding: var(--vp-space-10) 0 var(--vp-space-8); text-align: center; }
.vp-jobs-hub-header__inner { max-width: 640px; margin-inline: auto; }
.vp-jobs-hub-header__title { font-size: var(--vp-text-4xl); font-weight: 800; letter-spacing: -.03em; color: var(--vp-text-primary); margin: var(--vp-space-4) 0 var(--vp-space-3); }
.vp-jobs-hub-header__desc  { color: var(--vp-text-muted); margin-bottom: var(--vp-space-6); }
.vp-jobs-hub-stats { display: flex; align-items: center; justify-content: center; gap: var(--vp-space-3); font-size: var(--vp-text-xs); color: var(--vp-text-muted); margin-top: var(--vp-space-4); }

/* Jobs search */
.vp-jobs-search { max-width: 560px; margin-inline: auto; }
.vp-jobs-search__fields { display: flex; gap: var(--vp-space-2); }
.vp-jobs-search__field  { flex: 1; position: relative; display: flex; align-items: center; }
.vp-jobs-search__field svg { position: absolute; left: var(--vp-space-3); color: var(--vp-text-muted); }
.vp-jobs-search__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--vp-space-4) 0 calc(var(--vp-space-3) + 18px + var(--vp-space-2));
  border: 1.5px solid var(--vp-border-dark);
  border-radius: var(--vp-radius);
  font-size: var(--vp-text-base);
}
.vp-jobs-search__input:focus { outline: none; border-color: var(--vp-blue); box-shadow: 0 0 0 3px var(--vp-blue-light); }

/* Jobs post CTA */
.vp-jobs-post-cta {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: var(--vp-space-8) var(--vp-space-10);
  margin-top: var(--vp-space-10);
}
.vp-jobs-post-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--vp-space-8); }
.vp-jobs-post-cta__title { font-size: var(--vp-text-xl); font-weight: 800; letter-spacing: -.02em; }
.vp-jobs-post-cta__desc  { color: var(--vp-text-muted); margin-top: var(--vp-space-2); }

/* Jobs layout sidebar */
.vp-job-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--vp-space-10);
  align-items: start;
  padding: var(--vp-space-8) 0;
}

.vp-job-sidebar {
  position: sticky;
  top: calc(var(--vp-header-h) + var(--vp-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-5);
}

.vp-job-single__header {
  padding-bottom: var(--vp-space-8);
  border-bottom: 1px solid var(--vp-border);
  margin-bottom: var(--vp-space-8);
}

.vp-job-single__company-row {
  display: flex;
  align-items: center;
  gap: var(--vp-space-4);
  margin-bottom: var(--vp-space-4);
}

.vp-job-single__logo { width: 64px; height: 64px; border-radius: var(--vp-radius-md); object-fit: cover; border: 1px solid var(--vp-border); }
.vp-job-single__logo-placeholder {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vp-text-xl);
  font-weight: 900;
  background: linear-gradient(135deg, #0D1B0F, #20bb5a);
  color: #fff;
  border-radius: var(--vp-radius-md);
}

.vp-job-single__company { font-size: var(--vp-text-lg); font-weight: 700; color: var(--vp-text-primary); margin-bottom: var(--vp-space-2); }
.vp-job-single__title   { font-size: var(--vp-text-4xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: var(--vp-space-5); }

.vp-job-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vp-space-4);
  font-size: var(--vp-text-sm);
  color: var(--vp-text-muted);
  margin-bottom: var(--vp-space-5);
}

.vp-job-single__meta-item { display: inline-flex; align-items: center; gap: var(--vp-space-2); }

.vp-job-single__apply-top, .vp-job-single__apply-bottom {
  display: flex;
  align-items: center;
  gap: var(--vp-space-3);
  flex-wrap: wrap;
}

.vp-job-single__apply-bottom {
  margin-top: var(--vp-space-8);
  padding-top: var(--vp-space-8);
  border-top: 1px solid var(--vp-border);
}
.vp-job-single__apply-bottom p { font-size: var(--vp-text-sm); color: var(--vp-text-muted); margin-bottom: var(--vp-space-3); width: 100%; }

.vp-job-details { display: grid; grid-template-columns: auto 1fr; gap: var(--vp-space-2) var(--vp-space-4); }
.vp-job-details dt { font-size: var(--vp-text-xs); font-weight: 700; color: var(--vp-text-muted); text-transform: uppercase; letter-spacing: .06em; align-self: start; padding-top: 2px; }
.vp-job-details dd { font-size: var(--vp-text-sm); color: var(--vp-text-primary); }

/* ── 19. SCHOLARSHIPS ──────────────────────────────────────────── */
.vp-scholarships-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  overflow: hidden;
}

.vp-scholarship-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--vp-space-3);
  padding: var(--vp-space-4) var(--vp-space-5);
  border-bottom: 1px solid var(--vp-border);
  text-decoration: none;
  transition: background var(--vp-t);
}
.vp-scholarship-row:last-child { border-bottom: none; }
.vp-scholarship-row:hover { background: var(--vp-emerald-light); }

.vp-scholarship-row__icon { font-size: 1.25rem; flex-shrink: 0; }
.vp-scholarship-row__title { font-size: var(--vp-text-sm); font-weight: 600; color: var(--vp-text-primary); }
.vp-scholarship-row__meta { display: flex; align-items: center; gap: var(--vp-space-2); }
.vp-scholarship-row__deadline { font-size: var(--vp-text-xs); color: var(--vp-text-muted); white-space: nowrap; }

/* CTA cards */
.vp-cta-card {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-6);
  text-align: center;
}

.vp-cta-card__icon { font-size: 2.5rem; margin-bottom: var(--vp-space-4); }
.vp-cta-card__title { font-size: var(--vp-text-lg); font-weight: 800; color: var(--vp-text-primary); margin-bottom: var(--vp-space-2); }
.vp-cta-card__desc  { font-size: var(--vp-text-sm); color: var(--vp-text-muted); margin-bottom: var(--vp-space-5); }

/* Scholarship archive cards */
.vp-scholarships-archive {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-4);
  margin-bottom: var(--vp-space-8);
}

.vp-scholarship-card {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--vp-space-4);
  transition: transform var(--vp-t-md), box-shadow var(--vp-t-md);
}
.vp-scholarship-card:hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-md); }

.vp-scholarship-card__icon { font-size: 2rem; flex-shrink: 0; }
.vp-scholarship-card__thumb { width: 72px; height: 72px; border-radius: var(--vp-radius); object-fit: cover; flex-shrink: 0; }
.vp-scholarship-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--vp-space-2); }
.vp-scholarship-card__title { font-size: var(--vp-text-lg); font-weight: 700; line-height: 1.3; }
.vp-scholarship-card__title a { color: var(--vp-text-primary); }
.vp-scholarship-card__title a:hover { color: var(--vp-blue); }
.vp-scholarship-card__excerpt { font-size: var(--vp-text-sm); color: var(--vp-text-muted); }
.vp-scholarship-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vp-space-3); font-size: var(--vp-text-xs); color: var(--vp-text-muted); }
.vp-scholarship-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.vp-scholarship-card__deadline { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--vp-orange); }
.vp-scholarship-card__action { flex-shrink: 0; }

/* ── 20. ARCHIVE ───────────────────────────────────────────────── */
.vp-archive-header {
  padding: var(--vp-space-12) 0 var(--vp-space-8);
  border-bottom: 1px solid var(--vp-border);
  margin-bottom: var(--vp-space-8);
}

.vp-archive-header__inner {
  max-width: 640px;
}

.vp-archive-header__eyebrow {
  display: block;
  font-size: var(--vp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vp-text-muted);
  margin-bottom: var(--vp-space-3);
}

.vp-archive-header__title {
  font-size: var(--vp-text-5xl);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-4);
  position: relative;
  display: inline-block;
}

.vp-archive-header__title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
}

.vp-archive-header--blue   .vp-archive-header__title::after { background: var(--vp-blue); }
.vp-archive-header--purple .vp-archive-header__title::after { background: var(--vp-purple); }
.vp-archive-header--orange .vp-archive-header__title::after { background: var(--vp-orange); }
.vp-archive-header--green  .vp-archive-header__title::after { background: var(--vp-green); }
.vp-archive-header--emerald.vp-archive-header__title::after { background: var(--vp-emerald); }
.vp-archive-header--amber  .vp-archive-header__title::after { background: var(--vp-amber); }
.vp-archive-header--rose   .vp-archive-header__title::after { background: var(--vp-rose); }

.vp-archive-header__desc  { font-size: var(--vp-text-lg); color: var(--vp-text-muted); line-height: 1.6; }
.vp-archive-header__count { font-size: var(--vp-text-sm); color: var(--vp-text-light); margin-top: var(--vp-space-2); }

.vp-archive-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--vp-space-10);
  align-items: start;
}

.vp-archive-sidebar {
  position: sticky;
  top: calc(var(--vp-header-h) + var(--vp-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-5);
}

.vp-category-list { display: flex; flex-direction: column; gap: var(--vp-space-2); }
.vp-category-list__item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; }
.vp-category-list__count { font-size: var(--vp-text-xs); color: var(--vp-text-muted); font-weight: 600; }

/* ── 21. EMPTY STATES ──────────────────────────────────────────── */
.vp-empty-state {
  text-align: center;
  padding: var(--vp-space-20) var(--vp-space-6);
}
.vp-empty-state__icon { font-size: 3rem; margin-bottom: var(--vp-space-4); }
.vp-empty-state h2 { font-size: var(--vp-text-2xl); font-weight: 800; margin-bottom: var(--vp-space-3); }
.vp-empty-state p  { color: var(--vp-text-muted); max-width: 400px; margin-inline: auto; margin-bottom: var(--vp-space-6); }
.vp-empty-state__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--vp-space-2); }

/* ── 22. PAGINATION ────────────────────────────────────────────── */
.vp-pagination {
  margin-top: var(--vp-space-10);
  display: flex;
  justify-content: center;
}

.vp-pagination ul {
  display: flex;
  align-items: center;
  gap: var(--vp-space-2);
}

.vp-pagination a,
.vp-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--vp-space-3);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  border-radius: var(--vp-radius);
  border: 1.5px solid var(--vp-border);
  color: var(--vp-text-muted);
  transition: all var(--vp-t);
}

.vp-pagination a:hover { border-color: var(--vp-blue); color: var(--vp-blue); background: var(--vp-blue-light); }
.vp-pagination .current { background: var(--vp-blue); border-color: var(--vp-blue); color: #fff; }

/* ── 23. SEARCH ────────────────────────────────────────────────── */
.vp-search-results-header { padding: var(--vp-space-10) 0 var(--vp-space-8); }
.vp-search-results-header__title { font-size: var(--vp-text-3xl); font-weight: 800; letter-spacing: -.03em; margin-bottom: var(--vp-space-3); }
.vp-search-results-header__count { color: var(--vp-text-muted); font-size: var(--vp-text-sm); margin-bottom: var(--vp-space-6); }
.vp-search-results-form { max-width: 560px; }
.vp-search-results-form__inner { display: flex; gap: var(--vp-space-2); }
.vp-search-results-form__input {
  flex: 1;
  height: 44px;
  padding: 0 var(--vp-space-4);
  border: 1.5px solid var(--vp-border-dark);
  border-radius: var(--vp-radius);
  font-size: var(--vp-text-base);
}
.vp-search-results-form__input:focus { outline: none; border-color: var(--vp-blue); box-shadow: 0 0 0 3px var(--vp-blue-light); }

/* ── 24. PAGE ──────────────────────────────────────────────────── */
.vp-page-content {
  max-width: var(--vp-content-w);
  margin-inline: auto;
  padding: var(--vp-space-12) 0;
}

.vp-page-content__header { margin-bottom: var(--vp-space-8); }
.vp-page-content__title  { font-size: var(--vp-text-4xl); font-weight: 800; letter-spacing: -.03em; }
.vp-page-content__body   { @extend .vp-article__content; }

/* ── 25. SECTION COL ───────────────────────────────────────────── */
.vp-section-col { display: flex; flex-direction: column; }

/* ── 26. UTILITY ───────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 27. RESPONSIVE ────────────────────────────────────────────── */

/* Large tablet: 1024px */
@media (max-width: 1024px) {
  :root { --vp-header-h: 104px; }

  .vp-article-layout { grid-template-columns: 1fr; }
  .vp-article-sidebar { position: static; max-height: none; }

  .vp-hero__grid { grid-template-columns: 1fr; }
  .vp-hero__sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vp-space-4);
  }
  .vp-hero__sidebar .vp-card--small { flex-direction: column; }
  .vp-hero__sidebar .vp-card--small .vp-card__thumb { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: var(--vp-radius-md) var(--vp-radius-md) 0 0; }

  .vp-trending__grid { grid-template-columns: repeat(3, 1fr); }

  .vp-grid--lead-left { grid-template-columns: 1fr; }
  .vp-grid__stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vp-space-4); }

  .vp-footer__newsletter-inner { grid-template-columns: 1fr; }
  .vp-footer__newsletter-form { min-width: unset; }
  .vp-newsletter-form--footer .vp-newsletter-form__fields { flex-direction: row; }

  .vp-footer__grid { grid-template-columns: 1fr repeat(2, auto); }
  .vp-footer__brand { grid-column: 1 / -1; }

  .vp-archive-layout { grid-template-columns: 1fr; }
  .vp-archive-sidebar { position: static; }

  .vp-job-layout { grid-template-columns: 1fr; }
  .vp-job-sidebar { position: static; }
}

/* Tablet: 768px */
@media (max-width: 768px) {
  :root {
    --vp-container: 100%;
    --vp-header-h: 104px;
  }

  .vp-container { padding-inline: var(--vp-space-4); }

  /* Header: hide desktop nav, show burger */
  .vp-nav { display: none; }
  .vp-header__burger { display: flex; }
  .vp-header__topbar { display: none; }
  :root { --vp-topbar-h: 0px; --vp-header-h: 72px; }

  .vp-hero__main-title { font-size: var(--vp-text-2xl); }
  .vp-article__title { font-size: var(--vp-text-3xl); }
  .vp-article__content { font-size: var(--vp-text-base); }
  .vp-article__newsletter-cta-inner { grid-template-columns: 1fr; }

  .vp-trending__grid { grid-template-columns: repeat(2, 1fr); }
  .vp-grid--two   { grid-template-columns: 1fr; }
  .vp-grid--three { grid-template-columns: 1fr; }
  .vp-grid--four  { grid-template-columns: repeat(2, 1fr); }
  .vp-grid--archive { grid-template-columns: 1fr; }
  .vp-grid--two-col-sections { grid-template-columns: 1fr; gap: var(--vp-space-8); }
  .vp-grid--scholarships-layout { grid-template-columns: 1fr; }

  .vp-newsletter-mid { grid-template-columns: 1fr; gap: var(--vp-space-6); }
  .vp-newsletter-form--mid .vp-newsletter-form__fields { flex-direction: column; min-width: unset; }

  .vp-footer__grid { grid-template-columns: 1fr 1fr; }
  .vp-footer__brand { grid-column: 1 / -1; }

  .vp-jobs-header { flex-direction: column; }
  .vp-jobs-hub-header__title { font-size: var(--vp-text-3xl); }
  .vp-jobs-search__fields { flex-direction: column; }
  .vp-jobs-post-cta__inner { flex-direction: column; text-align: center; }

  .vp-job-single__title { font-size: var(--vp-text-2xl); }

  .vp-hero__sidebar { grid-template-columns: 1fr; }
  .vp-grid__stack { grid-template-columns: 1fr; }

  .vp-footer__bottom-inner { flex-direction: column; text-align: center; gap: var(--vp-space-2); }
  .vp-footer__legal { flex-wrap: wrap; justify-content: center; }
  .vp-stats-strip__inner { gap: var(--vp-space-2); }
  .vp-stat { padding: var(--vp-space-2) var(--vp-space-4); }
  .vp-stat__divider { display: none; }
}

/* Mobile: 480px */
@media (max-width: 480px) {
  .vp-trending__grid { grid-template-columns: 1fr; }
  .vp-grid--four { grid-template-columns: 1fr; }
  .vp-footer__grid { grid-template-columns: 1fr; }
  .vp-scholarship-card { flex-direction: column; }
  .vp-scholarship-card__action { width: 100%; }
  .vp-scholarship-card__action .vp-btn { width: 100%; justify-content: center; }
  .vp-jobs-cta-card { flex-direction: column; text-align: center; }
  .vp-author-box { flex-direction: column; align-items: flex-start; }
}

/* ── 28. FOCUS STYLES (accessibility) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--vp-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--vp-blue);
  outline-offset: 2px;
}

/* ── 29. EXPLORE MORE PAGE ──────────────────────────────────────── */
.vp-main--explore { padding-block: var(--vp-space-10) var(--vp-space-16); }

.vp-explore-hero { text-align: center; padding-bottom: var(--vp-space-12); }
.vp-explore-hero__title { font-size: var(--vp-text-4xl); font-weight: 900; letter-spacing: -.04em; color: var(--vp-text-primary); margin-bottom: var(--vp-space-3); }
.vp-explore-hero__sub   { font-size: var(--vp-text-lg); color: var(--vp-text-muted); max-width: 560px; margin-inline: auto; }

/* Partner cards */
.vp-explore-partners { margin-bottom: var(--vp-space-16); }
.vp-explore-partners__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--vp-space-5); }

.vp-partner-card {
  display: flex; gap: var(--vp-space-5); align-items: flex-start;
  padding: var(--vp-space-6); border-radius: var(--vp-radius-lg);
  border: 1px solid var(--vp-border); background: var(--vp-bg);
  text-decoration: none; transition: box-shadow var(--vp-t), border-color var(--vp-t), transform var(--vp-t);
}
.vp-partner-card:hover { box-shadow: var(--vp-shadow-md); border-color: var(--vp-blue-light); transform: translateY(-2px); }

.vp-partner-card--featured {
  border-color: var(--vp-orange);
  background: linear-gradient(135deg, #fff8f0 0%, #fff 60%);
}
.vp-partner-card--featured:hover { border-color: var(--vp-orange); box-shadow: 0 8px 32px rgba(234,88,12,.12); }

.vp-partner-card__logo {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--vp-radius-lg);
  background: var(--vp-orange); flex-shrink: 0;
}
.vp-partner-card__logo--blue    { background: var(--vp-blue); }
.vp-partner-card__logo--emerald { background: var(--vp-emerald); }
.vp-partner-card__logo-mark { color: #fff; font-size: var(--vp-text-sm); font-weight: 900; letter-spacing: -.02em; }

.vp-partner-card__body { flex: 1; min-width: 0; }
.vp-partner-card__badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--vp-orange); background: rgba(234,88,12,.1);
  padding: 2px 8px; border-radius: 99px; margin-bottom: var(--vp-space-2);
}
.vp-partner-card__badge--blue    { color: var(--vp-blue);    background: var(--vp-blue-light); }
.vp-partner-card__badge--emerald { color: var(--vp-emerald); background: var(--vp-emerald-light); }

.vp-partner-card__name { font-size: var(--vp-text-lg); font-weight: 800; color: var(--vp-text-primary); letter-spacing: -.02em; margin-bottom: var(--vp-space-2); }
.vp-partner-card__desc { font-size: var(--vp-text-sm); color: var(--vp-text-secondary); line-height: 1.6; margin-bottom: var(--vp-space-4); }
.vp-partner-card__cta  { display: inline-flex; align-items: center; gap: 6px; font-size: var(--vp-text-sm); font-weight: 700; color: var(--vp-orange); }
.vp-partner-card--featured .vp-partner-card__cta svg { transition: transform var(--vp-t); }
.vp-partner-card--featured:hover .vp-partner-card__cta svg { transform: translateX(4px); }

/* Category tiles */
.vp-explore-cats { margin-bottom: var(--vp-space-16); }
.vp-explore-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vp-space-3); }

.vp-cat-tile {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--vp-space-5) var(--vp-space-5);
  border-radius: var(--vp-radius-lg); text-decoration: none;
  transition: transform var(--vp-t), box-shadow var(--vp-t);
  min-height: 80px;
}
.vp-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--vp-shadow-md); }
.vp-cat-tile__name  { font-size: var(--vp-text-base); font-weight: 700; color: #fff; margin-bottom: 4px; }
.vp-cat-tile__count { font-size: var(--vp-text-xs); color: rgba(255,255,255,.7); }

.vp-cat-tile--blue    { background: var(--vp-blue); }
.vp-cat-tile--purple  { background: var(--vp-purple); }
.vp-cat-tile--orange  { background: var(--vp-orange); }
.vp-cat-tile--green   { background: var(--vp-green); }
.vp-cat-tile--emerald { background: var(--vp-emerald); }
.vp-cat-tile--teal    { background: var(--vp-teal); }
.vp-cat-tile--amber   { background: var(--vp-amber); }
.vp-cat-tile--rose    { background: var(--vp-rose); }

/* Popular section */
.vp-explore-popular { margin-bottom: var(--vp-space-16); }

/* Recent list */
.vp-explore-recent { margin-bottom: var(--vp-space-12); }
.vp-explore-recent__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.vp-explore-recent__item {
  display: flex; gap: var(--vp-space-4); align-items: flex-start;
  padding: var(--vp-space-4) 0; border-bottom: 1px solid var(--vp-border);
}
.vp-explore-recent__item:nth-child(odd)  { padding-right: var(--vp-space-8); }
.vp-explore-recent__item:nth-child(even) { padding-left: var(--vp-space-8); border-left: 1px solid var(--vp-border); }
.vp-explore-recent__thumb { flex-shrink: 0; width: 72px; height: 54px; border-radius: var(--vp-radius); overflow: hidden; background: var(--vp-surface); }
.vp-explore-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vp-explore-recent__body { flex: 1; min-width: 0; }
.vp-explore-recent__title { font-size: var(--vp-text-sm); font-weight: 700; line-height: 1.4; margin: var(--vp-space-1) 0 var(--vp-space-1); }
.vp-explore-recent__title a { color: var(--vp-text-primary); transition: color var(--vp-t); }
.vp-explore-recent__title a:hover { color: var(--vp-blue); }
.vp-explore-recent__time { font-size: var(--vp-text-xs); color: var(--vp-text-muted); }

.vp-explore-back { text-align: center; padding-top: var(--vp-space-8); }

@media (max-width: 1024px) {
  .vp-explore-partners__grid { grid-template-columns: 1fr 1fr; }
  .vp-explore-partners__grid .vp-partner-card--featured { grid-column: 1 / -1; }
  .vp-explore-cats__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .vp-explore-hero__title { font-size: var(--vp-text-3xl); }
  .vp-explore-partners__grid { grid-template-columns: 1fr; }
  .vp-explore-partners__grid .vp-partner-card--featured { grid-column: 1; }
  .vp-explore-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .vp-explore-recent__list { grid-template-columns: 1fr; }
  .vp-explore-recent__item:nth-child(even) { border-left: none; padding-left: 0; }
}

/* ── 30. LATEST UPDATES PAGE ────────────────────────────────────── */
.vp-main--latest { padding-block: var(--vp-space-10) var(--vp-space-16); }

.vp-latest-header { padding-bottom: var(--vp-space-8); border-bottom: 1px solid var(--vp-border); margin-bottom: var(--vp-space-8); }
.vp-latest-header__top { margin-bottom: var(--vp-space-6); }

.vp-latest-header__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--vp-text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--vp-rose); margin-bottom: var(--vp-space-3);
}
.vp-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--vp-rose);
  animation: vp-pulse 1.8s ease infinite;
}
@keyframes vp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

.vp-latest-header__title { font-size: var(--vp-text-4xl); font-weight: 900; letter-spacing: -.04em; color: var(--vp-text-primary); line-height: 1.1; margin-bottom: var(--vp-space-2); }
.vp-latest-header__sub   { font-size: var(--vp-text-base); color: var(--vp-text-muted); max-width: 520px; }

/* Filter tabs */
.vp-latest-filters { display: flex; flex-wrap: wrap; gap: var(--vp-space-2); }
.vp-latest-filter {
  padding: var(--vp-space-1-5) var(--vp-space-4);
  border-radius: 99px; font-size: var(--vp-text-sm); font-weight: 500;
  color: var(--vp-text-secondary); background: var(--vp-surface);
  border: 1px solid var(--vp-border); transition: all var(--vp-t);
  white-space: nowrap;
}
.vp-latest-filter:hover { color: var(--vp-blue); border-color: var(--vp-blue); background: var(--vp-blue-light); }
.vp-latest-filter.is-active { color: var(--vp-bg); background: var(--vp-blue); border-color: var(--vp-blue); }

/* Date separator */
.vp-latest-date-sep {
  display: flex; align-items: center; gap: var(--vp-space-4);
  padding: var(--vp-space-6) 0 var(--vp-space-3);
}
.vp-latest-date-sep::before, .vp-latest-date-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--vp-border);
}
.vp-latest-date-sep__label {
  font-size: var(--vp-text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--vp-text-muted); white-space: nowrap;
}

/* Feed items */
.vp-latest-feed { display: flex; flex-direction: column; }

.vp-latest-item {
  display: flex; gap: var(--vp-space-4); align-items: flex-start;
  padding: var(--vp-space-5) 0; border-bottom: 1px solid var(--vp-border);
  transition: background var(--vp-t);
}

.vp-latest-item__thumb {
  flex-shrink: 0; width: 96px; height: 72px;
  border-radius: var(--vp-radius); overflow: hidden;
  background: var(--vp-surface);
}
.vp-latest-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vp-latest-item:hover .vp-latest-item__thumb img { transform: scale(1.04); }

.vp-latest-item__body { flex: 1; min-width: 0; }

.vp-latest-item__meta {
  display: flex; align-items: center; gap: var(--vp-space-3);
  margin-bottom: var(--vp-space-2);
}
.vp-latest-item__time {
  font-size: var(--vp-text-xs); color: var(--vp-text-muted); font-weight: 500;
}

.vp-latest-item__title {
  font-size: var(--vp-text-lg); font-weight: 700; line-height: 1.35;
  letter-spacing: -.02em; margin-bottom: var(--vp-space-1-5);
}
.vp-latest-item__title a { color: var(--vp-text-primary); transition: color var(--vp-t); }
.vp-latest-item__title a:hover { color: var(--vp-blue); }

.vp-latest-item__excerpt {
  font-size: var(--vp-text-sm); color: var(--vp-text-secondary); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Pagination */
.vp-latest-pagination {
  display: flex; align-items: center; justify-content: center; gap: var(--vp-space-4);
  padding-top: var(--vp-space-10);
}
.vp-latest-pagination__info { font-size: var(--vp-text-sm); color: var(--vp-text-muted); }

@media (max-width: 768px) {
  .vp-latest-header__title { font-size: var(--vp-text-3xl); }
  .vp-latest-item__thumb { width: 72px; height: 56px; }
  .vp-latest-item__title { font-size: var(--vp-text-base); }
  .vp-latest-item__excerpt { display: none; }
}
@media (max-width: 480px) {
  .vp-latest-filter { font-size: var(--vp-text-xs); padding: var(--vp-space-1) var(--vp-space-3); }
}

/* ── 31. POST A JOB PAGE ────────────────────────────────────────── */
.vp-main--post-job { padding-bottom: var(--vp-space-20); }

.vp-paj-hero {
  text-align: center;
  padding: var(--vp-space-12) 0 var(--vp-space-10);
}
.vp-paj-hero__eyebrow {
  display: inline-block;
  font-size: var(--vp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vp-green);
  background: var(--vp-blue-light);
  padding: 4px 14px;
  border-radius: var(--vp-radius-full);
  margin-bottom: var(--vp-space-4);
}
.vp-paj-hero__title {
  font-size: var(--vp-text-4xl);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-3);
  line-height: 1.1;
}
.vp-paj-hero__sub {
  font-size: var(--vp-text-lg);
  color: var(--vp-text-muted);
  max-width: 500px;
  margin-inline: auto;
}

.vp-paj-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--vp-space-8);
  align-items: start;
}

/* Benefits sidebar */
.vp-paj-benefits {
  position: sticky;
  top: calc(var(--vp-header-h) + var(--vp-space-6));
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-6);
}
.vp-paj-benefits__title {
  font-size: var(--vp-text-base);
  font-weight: 700;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-4);
}
.vp-paj-benefits__list {
  display: flex;
  flex-direction: column;
  gap: var(--vp-space-3);
  font-size: var(--vp-text-sm);
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-5);
}
.vp-paj-check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: var(--vp-green);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
  margin-right: var(--vp-space-2);
}
.vp-paj-benefits__note {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  border-top: 1px solid var(--vp-border);
  padding-top: var(--vp-space-4);
  line-height: 1.6;
}
.vp-paj-benefits__note a { color: var(--vp-green); }

/* Form card */
.vp-paj-form-wrap {
  background: #fff;
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  overflow: hidden;
}

.vp-paj-form { padding: var(--vp-space-8); }

.vp-paj-section {
  padding-bottom: var(--vp-space-8);
  margin-bottom: var(--vp-space-8);
  border-bottom: 1px solid var(--vp-border);
}
.vp-paj-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.vp-paj-section__title {
  font-size: var(--vp-text-lg);
  font-weight: 700;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-5);
  display: flex;
  align-items: center;
  gap: var(--vp-space-3);
}
.vp-paj-section__num {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--vp-black);
  color: #fff;
  border-radius: 50%;
  font-size: var(--vp-text-xs);
  font-weight: 800;
  flex-shrink: 0;
}

.vp-paj-row { display: grid; gap: var(--vp-space-4); margin-bottom: var(--vp-space-4); }
.vp-paj-row--two   { grid-template-columns: 1fr 1fr; }
.vp-paj-row--three { grid-template-columns: 1fr 1fr 1fr; }

/* Fields */
.vp-field { display: flex; flex-direction: column; gap: var(--vp-space-2); margin-bottom: var(--vp-space-4); }
.vp-field:last-child { margin-bottom: 0; }

.vp-field__label {
  font-size: var(--vp-text-sm);
  font-weight: 600;
  color: var(--vp-text-primary);
}
.vp-field__req { color: var(--vp-rose); }
.vp-field__hint { font-size: var(--vp-text-xs); color: var(--vp-text-muted); }

.vp-field__input,
.vp-field__select,
.vp-field__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--vp-border-dark);
  border-radius: var(--vp-radius);
  font-size: var(--vp-text-sm);
  color: var(--vp-text-primary);
  background: #fff;
  transition: border-color var(--vp-t), box-shadow var(--vp-t);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}
.vp-field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.vp-field__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.vp-field__input:focus,
.vp-field__select:focus,
.vp-field__textarea:focus {
  outline: none;
  border-color: var(--vp-green);
  box-shadow: 0 0 0 3px rgba(32,187,90,.15);
}

.vp-field__input.vp-field--error,
.vp-field__select.vp-field--error,
.vp-field__textarea.vp-field--error {
  border-color: var(--vp-rose);
  box-shadow: 0 0 0 3px rgba(225,29,72,.1);
}

/* Form footer */
.vp-paj-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-space-6);
  padding-top: var(--vp-space-6);
  border-top: 1px solid var(--vp-border);
  flex-wrap: wrap;
}
.vp-paj-terms {
  font-size: var(--vp-text-xs);
  color: var(--vp-text-muted);
  flex: 1;
  min-width: 200px;
}

.vp-paj-submit { gap: var(--vp-space-2); }

/* Message box */
.vp-paj-msg {
  margin-top: var(--vp-space-4);
  padding: var(--vp-space-3) var(--vp-space-4);
  border-radius: var(--vp-radius);
  font-size: var(--vp-text-sm);
  font-weight: 600;
}
.vp-paj-msg--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.vp-paj-msg--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* Success state */
.vp-paj-success {
  padding: var(--vp-space-16) var(--vp-space-8);
  text-align: center;
}
.vp-paj-success__icon {
  width: 64px;
  height: 64px;
  background: var(--vp-green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--vp-space-5);
}
.vp-paj-success__title {
  font-size: var(--vp-text-3xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--vp-text-primary);
  margin-bottom: var(--vp-space-3);
}
.vp-paj-success__body {
  font-size: var(--vp-text-base);
  color: var(--vp-text-muted);
  max-width: 420px;
  margin: 0 auto var(--vp-space-6);
  line-height: 1.6;
}
.vp-paj-success__actions { display: flex; gap: var(--vp-space-3); justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 900px) {
  .vp-paj-layout { grid-template-columns: 1fr; }
  .vp-paj-benefits { position: static; }
  .vp-paj-row--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .vp-paj-form { padding: var(--vp-space-5); }
  .vp-paj-row--two,
  .vp-paj-row--three { grid-template-columns: 1fr; }
  .vp-paj-footer { flex-direction: column; align-items: stretch; }
  .vp-paj-hero__title { font-size: var(--vp-text-3xl); }
}

/* ── 30. PRINT ──────────────────────────────────────────────────── */
@media print {
  .vp-header, .vp-footer, .vp-article-sidebar, .vp-reading-progress,
  .vp-share, .vp-article__newsletter-cta, .vp-article__jobs-cta { display: none !important; }
  .vp-article-layout { grid-template-columns: 1fr; }
  .vp-article__content { font-size: 11pt; }
}