/* Public marketing surfaces: landing page (/), role pages (/for/<slug>).
   The hero and cards keep a fixed dark palette in BOTH themes, so every
   colour inside them is set explicitly (never inherited from the body),
   otherwise light mode renders dark headings on dark cards. Text that sits
   on the page background uses Bootstrap theme variables instead. */

.vbr-hero {
  background: radial-gradient(ellipse at top, #1a2332 0%, #0d1117 70%);
  padding: 6rem 1rem 5rem;
  text-align: center;
  color: #e6edf3;
}
.vbr-hero h1 {
  font-size: 3rem; font-weight: 700; line-height: 1.15;
  background: linear-gradient(90deg, #4dabf7 0%, #74c0fc 50%, #91a7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1.25rem;
}
.vbr-hero p.lead { font-size: 1.5rem; color: #adb5bd; max-width: 760px; margin: 0 auto 2.25rem; }
.vbr-hero .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.vbr-hero .hero-kicker {
  display: inline-block; font-size: 0.85rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #74c0fc; margin-bottom: 1rem;
}
.vbr-hero .hero-audience { color: #c9d1d9; max-width: 720px; margin: 0 auto 1.75rem; }

.vbr-section { padding: 4.5rem 1rem; }
.vbr-section h2 { font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 0.75rem; }
.vbr-section .section-sub {
  text-align: center; color: var(--bs-secondary-color); max-width: 680px;
  margin: 0 auto 3rem; font-size: 1.05rem;
}
.vbr-section--dark { background: #0d1117; color: #e6edf3; }
.vbr-section--dark h2 { color: #e6edf3; }
.vbr-section--dark .section-sub { color: #8b949e; }

.vbr-card {
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  padding: 1.75rem; height: 100%; transition: transform .18s, border-color .18s;
  color: #c9d1d9;
}
.vbr-card:hover { transform: translateY(-3px); border-color: #4dabf7; }
.vbr-card .icon { font-size: 2rem; color: #4dabf7; margin-bottom: 0.75rem; }
.vbr-card h3, .vbr-card h5 { font-weight: 600; margin-bottom: 0.5rem; color: #e6edf3; }
.vbr-card p { color: #8b949e; margin-bottom: 0; line-height: 1.55; }
.vbr-card .text-muted, .pricing-card .text-muted { color: #8b949e !important; }
.vbr-card a:not(.btn) { color: #74c0fc; }
.trust-stat { font-size: 2.5rem; font-weight: 700; color: #4dabf7; }

.pricing-card {
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  padding: 2rem; height: 100%; color: #c9d1d9;
}
.pricing-card.featured { border-color: #4dabf7; box-shadow: 0 0 0 1px #4dabf7; }
.pricing-card h5 { color: #e6edf3; }
.pricing-card .price { font-size: 2.5rem; font-weight: 700; color: #e6edf3; }
.pricing-card ul { list-style: none; padding-left: 0; margin-top: 1rem; }
.pricing-card ul li { padding: 0.4rem 0; color: #c9d1d9; }
.pricing-card ul li i { color: #3fb950; margin-right: 0.5rem; }

.vbr-footer {
  background: #0d1117; border-top: 1px solid #30363d;
  padding: 3rem 1rem 2rem; color: #8b949e; font-size: 0.95rem;
}
.vbr-footer a { color: #c9d1d9; text-decoration: none; }
.vbr-footer a:hover { color: #4dabf7; }

/* ---- "Built for your role" cards (landing section + /for/ index) ---- */
.role-card {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  padding: 1.35rem 1.4rem; border-radius: 8px; text-decoration: none;
  background: #161b22; border: 1px solid #30363d; color: #c9d1d9;
  transition: transform .18s, border-color .18s;
}
.role-card:hover, .role-card:focus-visible { transform: translateY(-3px); border-color: #4dabf7; color: #c9d1d9; }
.role-card:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
.role-card .role-card-title { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.05rem; color: #e6edf3; margin: 0; }
.role-card .role-card-title i { color: #4dabf7; font-size: 1.25rem; }
.role-card p { color: #8b949e; margin: 0; line-height: 1.5; font-size: .95rem; }
.role-card .role-card-more { margin-top: auto; padding-top: .5rem; font-size: .9rem; color: #74c0fc; }

/* ---- Role page: week comparison ---- */
.week-card { height: 100%; border-radius: 8px; padding: 1.75rem; border: 1px solid #30363d; background: #161b22; color: #c9d1d9; }
.week-card--after { border-color: #1f6feb; background: linear-gradient(180deg, #13223a 0%, #161b22 60%); }
.week-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: #e6edf3; display: flex; align-items: center; gap: .5rem; }
.week-card h3 i { color: #4dabf7; }
.week-card ul { padding-left: 0; list-style: none; margin: 0; }
.week-card li { display: flex; gap: .65rem; padding: .45rem 0; line-height: 1.5; color: #c9d1d9; }
.week-card li i { flex: 0 0 auto; margin-top: .2rem; }
.week-card--before li i { color: #8b949e; }
.week-card--after li i { color: #3fb950; }

/* ---- Role page: feature list with tier badges ---- */
.feature-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid var(--bs-border-color); }
.feature-row:last-child { border-bottom: 1px solid var(--bs-border-color); }
.feature-row .feature-name { font-weight: 600; margin: 0 0 .2rem; font-size: 1.05rem; }
.feature-row .feature-name a { text-decoration: none; }
.feature-row .feature-name a:hover { text-decoration: underline; }
.feature-row .feature-blurb { margin: 0; color: var(--bs-secondary-color); line-height: 1.5; }
.feature-row .feature-note { display: block; margin-top: .2rem; font-size: .875rem; color: var(--bs-secondary-color); }
.feature-row .tier-badge { flex: 0 0 auto; min-width: 5.5rem; text-align: center; font-size: .78rem; letter-spacing: .03em; }

/* ---- Role page: citations ---- */
.cite-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.cite-list li { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .3rem .8rem; font-size: .875rem; }
.cite-list li strong { font-weight: 600; }
.cite-list li span { color: var(--bs-secondary-color); }

/* ---- Role page: CTA band ---- */
.role-cta { background: radial-gradient(ellipse at top, #1a2332 0%, #0d1117 70%); color: #e6edf3; padding: 4rem 1rem; text-align: center; }
.role-cta h2 { color: #e6edf3; font-size: 1.9rem; font-weight: 700; margin-bottom: .75rem; }
.role-cta p { color: #adb5bd; max-width: 640px; margin: 0 auto 1.75rem; }

.vbr-section h2.vbr-subhead { font-size: 1.5rem; text-align: left; margin-bottom: 1rem; }
.role-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border-radius: 999px;
  font-size: .9rem; text-decoration: none; border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); background: transparent; transition: border-color .15s, color .15s;
}
.role-pill:hover, .role-pill:focus-visible { border-color: #4dabf7; color: var(--bs-body-color); }
.role-pill:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
.role-pill i { color: #4dabf7; }

@media (max-width: 575.98px) {
  .vbr-hero { padding: 3.5rem 1rem 3rem; }
  .vbr-hero h1 { font-size: 2.1rem; }
  .vbr-hero p.lead { font-size: 1.15rem; }
  .vbr-section { padding: 3rem 1rem; }
  .vbr-section h2 { font-size: 1.75rem; }
  .feature-row { flex-direction: column; gap: .5rem; }
  .role-cta { padding: 3rem 1rem; }
}

/* Forced-colors / high-contrast: let the UA palette win inside the fixed-dark cards. */
@media (forced-colors: active) {
  .vbr-card, .pricing-card, .role-card, .week-card { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .vbr-card h3, .vbr-card h5, .vbr-card p, .pricing-card h5, .pricing-card .price,
  .role-card .role-card-title, .role-card p, .week-card h3, .week-card li { color: CanvasText; }
  .role-card .role-card-more, .vbr-card a:not(.btn) { color: LinkText; }
}

/* ---- Landing: knowledge-pack band (one-time purchase) ---- */
.pack-band { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; }
.pack-band .pack-band-copy { flex: 1 1 420px; }
.pack-band .pack-band-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .75rem; }
.pack-band .pack-kicker { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #4dabf7; margin-bottom: .35rem; }
.pack-band h3 { color: #e6edf3; font-weight: 600; margin-bottom: .4rem; }
.pack-band p { color: #c9d1d9; margin-bottom: 0; line-height: 1.55; }