/* ============================================================
   home.css — VCPro Database homepage presentation layer
   Access InterComm · vcprodatabase.com

   Load AFTER bootstrap.min.css and theme.css. These rules
   intentionally win the cascade over theme.css for:
     .hero  .stat-value  .section-title  .feature-card
     .feature-icon  .icon-list  .screenshot-frame
     .pricing-card  .price-amount  .skip-link

   All new custom properties use the --vcx- prefix so they
   cannot collide with the existing --vc-* / --vcpro-* tokens.

   Contents
     1.  Tokens & base
     2.  Skip link
     3.  Section rhythm & headings
     4.  Navigation
     5.  Buttons
     6.  Hero
     7.  Stat strip
     8.  Screenshot frame
     9.  Icon lists
    10.  Panels & feature cards
    11.  Region distribution bars
    12.  Pricing
    13.  Testimonial
    14.  Closing CTA
    15.  Footer
    16.  Back to top
    17.  Motion preferences
    18.  Breadcrumbs & subpage hero
    19.  Centred title rule
    20.  Download / platform cards
    21.  Numbered install steps
    22.  Link cards
    23.  FAQ accordion
    24.  Career timeline
    25.  Author card
    26.  Fact list
    27.  Forms & contact channels
    28.  Checkout / purchase page
    29.  Renewal offer card
    30.  Sitemap link lists
    31.  FAQ groups & sticky contents
    32.  Legal documents
    33.  Customer tiles & pagination
    34.  A–Z directory index
    35.  Article / post cards
    36.  Article body & promo
    37.  Multi-section forms
    38.  Testimonial cards
   ============================================================ */

:root {
  --vcx-ink: #0f2340;
  --vcx-ink-soft: #5a6b85;
  --vcx-line: #e3e9f2;
  --vcx-hairline: #eef2f8;
  --vcx-surface: #f7f9fc;
  --vcx-brand: #0d6efd;
  --vcx-brand-dark: #0b2f6b;
  --vcx-accent: #dc3545;
  --vcx-radius: 1rem;
  --vcx-radius-lg: 1.375rem;
  --vcx-shadow-sm: 0 1px 2px rgba(15, 35, 64, .05), 0 8px 20px -14px rgba(15, 35, 64, .35);
  --vcx-shadow: 0 2px 4px rgba(15, 35, 64, .04), 0 22px 45px -28px rgba(15, 35, 64, .55);
}

html { scroll-behavior: smooth; }

body {
  color: var(--vcx-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[id] { scroll-margin-top: 6.5rem; }

main :where(h1, h2, h3, h4) {
  color: var(--vcx-ink);
  letter-spacing: -.02em;
}

:focus-visible {
  outline: 3px solid rgba(13, 110, 253, .45);
  outline-offset: 2px;
  border-radius: .35rem;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1090;
  padding: .65rem 1.1rem;
  border-radius: 0 0 .6rem .6rem;
  background: var(--vcx-brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Rhythm ---------- */
.vcx-section { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }
.vcx-surface { background: var(--vcx-surface); }
.vcx-measure { max-width: 46rem; margin-inline: auto; }

.vcx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vcx-brand);
}
.vcx-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.section-title {
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
}

/* ---------- Navigation ---------- */
.navbar {
  background-color: rgba(255, 255, 255, .9) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--vcx-line) !important;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.navbar.is-stuck {
  background-color: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 30px -24px rgba(15, 35, 64, .95);
}
.navbar-brand img { height: 46px; width: auto; }
.navbar .nav-link {
  font-weight: 500;
  color: var(--vcx-ink-soft);
  padding-inline: .85rem;
  white-space: nowrap;
}

/* Between the lg breakpoint and ~1400px the full menu plus both CTA buttons
   is tight enough that labels wrap and double the navbar height. Tighten
   spacing rather than letting the header grow. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar .nav-link { padding-inline: .5rem; font-size: .95rem; }
  .navbar .btn { --bs-btn-padding-x: .7rem; font-size: .875rem; white-space: nowrap; }
  .navbar-brand img { height: 40px; }
}

/* Tightest band: the lg container is only 960px, so squeeze harder. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .nav-link { padding-inline: .3rem; font-size: .875rem; }
  .navbar .btn { --bs-btn-padding-x: .55rem; font-size: .8rem; }
  .navbar-brand img { height: 34px; }
  .navbar .dropdown-toggle::after { margin-left: .2rem; }
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--vcx-brand); }
.navbar .nav-link.active { color: var(--vcx-ink); }
@media (min-width: 992px) {
  .navbar .nav-link.active::after {
    content: "";
    display: block;
    width: 1.35rem;
    height: 2px;
    margin: .2rem auto 0;
    border-radius: 2px;
    background: var(--vcx-accent);
  }
}
/* Bootstrap quirk: a .g-5 row inside a .container carries -24px side margins
   against the container's 12px padding, which pushes 12px past the viewport
   once the container goes fluid below 576px. Horizontal gutters do nothing
   for stacked columns, so cap them there. */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

.dropdown-menu {
  padding: .4rem;
  border: 1px solid var(--vcx-line);
  border-radius: .85rem;
  box-shadow: var(--vcx-shadow);
}
.dropdown-item {
  border-radius: .55rem;
  padding: .5rem .75rem;
  font-size: .95rem;
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: .7rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn-lg { border-radius: .8rem; }
.btn-primary { box-shadow: 0 12px 26px -16px rgba(13, 110, 253, .95); }
.btn-danger { box-shadow: 0 12px 26px -16px rgba(220, 53, 69, .95); }
.btn-primary:hover,
.btn-danger:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-light:hover { transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 5.5vw, 4.75rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(13, 110, 253, .14), transparent 62%),
    linear-gradient(180deg, #f6faff 0%, #ffffff 68%);
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.hero-tagline {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--vcx-brand);
  font-style: italic;
}
.hero-lede {
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  color: #33455f;
}
.hero-support {
  max-width: 52rem;
  margin-inline: auto;
  font-size: .975rem;
  color: var(--vcx-ink-soft);
}

.vcx-flag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .95rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-ink);
}
.vcx-flag .vcx-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--vcx-accent);
  box-shadow: 0 0 0 4px rgba(220, 53, 69, .15);
}

.vcx-note {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem 1.35rem;
  border: 1px solid rgba(220, 53, 69, .22);
  border-radius: var(--vcx-radius);
  background: linear-gradient(180deg, rgba(220, 53, 69, .07), rgba(220, 53, 69, .02));
}

.vcx-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.75rem;
  font-size: .875rem;
  color: var(--vcx-ink-soft);
}
.vcx-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.vcx-trust i { color: var(--vcx-brand); }
.vcx-trust .bi-gift-fill { color: var(--vcx-accent); }

/* ---------- Stat strip ---------- */
.vcx-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--vcx-line);
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  box-shadow: var(--vcx-shadow-sm);
  overflow: hidden;
}
@media (min-width: 768px) { .vcx-stats { grid-template-columns: repeat(4, 1fr); } }
.vcx-stat {
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fff;
}
.stat-value {
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--vcx-brand);
  font-variant-numeric: tabular-nums;
}
.vcx-stat-label {
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vcx-ink-soft);
}

/* ---------- Screenshot frame ---------- */
.vcx-shot { position: relative; }
.screenshot-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow);
}
.screenshot-frame img { display: block; width: 100%; height: auto; }
.vcx-chrome {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--vcx-line);
  background: linear-gradient(180deg, #fbfcfe, #eff3f9);
}
.vcx-chrome span.vcx-dot-ui {
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: #d5dde8;
}
.vcx-chrome .vcx-chrome-title {
  margin-left: .6rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--vcx-ink-soft);
}
.vcx-zoom {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  box-shadow: var(--vcx-shadow-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--vcx-ink);
  text-decoration: none;
}
.vcx-zoom:hover { color: var(--vcx-brand); border-color: rgba(13, 110, 253, .4); }

/* ---------- Lists ---------- */
.icon-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: .65rem;
}
.icon-list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .55rem;
  align-items: start;
  line-height: 1.5;
}
.icon-list li > i {
  color: var(--vcx-brand);
  font-size: .95rem;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Panels & cards ---------- */
.card { border-radius: var(--vcx-radius); border-color: var(--vcx-line); }
.vcx-panel {
  overflow: hidden;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
}
.vcx-panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--vcx-hairline);
  background: linear-gradient(180deg, #fbfcff, #f6f9ff);
}
.vcx-panel-head h3,
.vcx-panel-head h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.vcx-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .65rem;
  font-size: 1rem;
  color: var(--vcx-brand);
  background: rgba(13, 110, 253, .1);
}
.vcx-panel-body { padding: 1.35rem; }

/* Opt-in equal height. Only add this when the panel is the sole child of
   its grid column — a Bootstrap column stretches to the tallest column in
   the row, so two stacked panels would each claim the full height and
   overflow. Stacked panels should size to their own content. */
.vcx-panel--fill { height: 100%; }

.feature-card {
  height: 100%;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, .35);
  box-shadow: var(--vcx-shadow);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: .85rem;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #4f9cff);
  box-shadow: 0 12px 24px -16px rgba(13, 110, 253, .95);
}
.feature-icon--accent {
  background: linear-gradient(135deg, #c82333, #ef5b6b);
  box-shadow: 0 12px 24px -16px rgba(220, 53, 69, .95);
}

/* ---------- Region distribution ---------- */
.vcx-regions { width: 100%; border-collapse: collapse; }
.vcx-regions thead th {
  padding: 0 0 .6rem;
  border-bottom: 1px solid var(--vcx-line);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vcx-ink-soft);
}
.vcx-regions tbody th,
.vcx-regions tbody td {
  padding: .7rem 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--vcx-hairline);
}
.vcx-regions tbody tr:last-child th,
.vcx-regions tbody tr:last-child td { border-bottom: 0; }
.vcx-region-name {
  display: block;
  margin-bottom: .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--vcx-ink);
}
.vcx-bar {
  display: block;
  height: .45rem;
  max-width: 22rem;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
}
.vcx-bar > span {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d6efd, #6aa9ff);
}
.vcx-region-count {
  padding-left: 1rem !important;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vcx-w-us { --w: 100%; }
.vcx-w-eu { --w: 47.6%; }
.vcx-w-as { --w: 20.5%; }
.vcx-w-ca { --w: 7.1%; }
.vcx-w-me { --w: 4.6%; }
.vcx-w-la { --w: 1.7%; }

.vcx-linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--vcx-hairline);
  font-size: .92rem;
}
.vcx-linkrow .btn-link { padding: 0; font-size: inherit; text-decoration: none; }
.vcx-linkrow a:hover, .vcx-linkrow .btn-link:hover { text-decoration: underline; }

/* ---------- Pricing ---------- */
.pricing-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 110, 253, .25);
  border-radius: var(--vcx-radius-lg);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 34px 65px -38px rgba(13, 110, 253, .6);
}
.pricing-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d6efd, #dc3545);
}
.price-amount {
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--vcx-ink);
}
.vcx-plan-list { max-width: 26rem; }
.vcx-foot-blurb { max-width: 22rem; }
.vcx-pill {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vcx-brand);
  background: rgba(13, 110, 253, .1);
}

/* ---------- Testimonial ---------- */
.vcx-quote {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius-lg);
  background: #fff;
  box-shadow: var(--vcx-shadow);
}
.vcx-quote blockquote {
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  line-height: 1.65;
  color: #2b3d57;
}
.vcx-stars { color: #f0a92c; letter-spacing: .12em; }

/* ---------- Closing CTA ---------- */
.vcx-cta-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--vcx-radius-lg);
  color: #fff;
  background:
    radial-gradient(700px 320px at 15% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(135deg, var(--vcx-brand-dark), #0d6efd 58%, #4a93ff);
  box-shadow: 0 34px 70px -40px rgba(11, 47, 107, .95);
}
.vcx-cta-inner h2 { color: #fff; }
.vcx-cta-inner p { color: rgba(255, 255, 255, .88); }
.vcx-cta-inner .btn-light { color: var(--vcx-brand-dark); }
.vcx-cta-inner .btn-outline-light:hover { color: var(--vcx-brand-dark); }

/* ---------- Footer ---------- */
footer {
  background: var(--vcx-surface) !important;
  border-top: 1px solid var(--vcx-line) !important;
}
.vcx-foot-title {
  margin-bottom: .9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vcx-ink);
}
footer a { color: var(--vcx-ink-soft); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--vcx-brand); text-decoration: underline; }
footer hr { border-color: var(--vcx-line); opacity: 1; }

/* ---------- Back to top ---------- */
.vcx-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1035;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--vcx-line);
  border-radius: 50%;
  background: #fff;
  color: var(--vcx-brand);
  box-shadow: var(--vcx-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.vcx-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------- Motion preferences ---------- */
/* ============================================================
   18. Breadcrumbs & subpage hero
   ============================================================ */
.vcx-crumbs .breadcrumb {
  margin: 0;
  font-size: .85rem;
}
.vcx-crumbs .breadcrumb-item + .breadcrumb-item::before { color: #a9b6c9; }
.vcx-crumbs a { color: var(--vcx-ink-soft); text-decoration: none; }
.vcx-crumbs a:hover,
.vcx-crumbs a:focus-visible { color: var(--vcx-brand); text-decoration: underline; }
.vcx-crumbs .breadcrumb-item.active { color: var(--vcx-ink); font-weight: 600; }

/* Shorter hero for interior pages */
.hero--sub { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.hero--sub h1 { font-size: clamp(1.85rem, 3.8vw, 2.8rem); }

/* A hero already carries generous bottom padding — don't stack a full
   section's top padding on top of it. */
.hero + .vcx-section { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); }

/* ============================================================
   19. Centred title rule
   ============================================================ */
.text-center-line { position: relative; padding-bottom: 1.05rem; }
.text-center-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3.25rem;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--vcx-brand), var(--vcx-accent));
}

/* ============================================================
   20. Download / platform cards
   ============================================================ */
.vcx-dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius-lg);
  background: #fff;
  box-shadow: var(--vcx-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vcx-dl-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d6efd, #6aa9ff);
}
.vcx-dl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(13, 110, 253, .35);
}
.vcx-dl-body { padding: 2.1rem 1.75rem 1.75rem; text-align: center; }

.platform-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  border-radius: 1rem;
  font-size: 1.75rem;
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #4f9cff);
  box-shadow: 0 14px 28px -18px rgba(13, 110, 253, .95);
}

.vcx-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: .9rem 0 1.4rem;
}
.vcx-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: var(--vcx-surface);
  font-size: .78rem;
  font-weight: 600;
  color: var(--vcx-ink-soft);
}
.vcx-meta code {
  color: inherit;
  font-size: .78rem;
}

/* "Recommended for your device" — toggled by script, hidden otherwise */
.vcx-reco {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: none;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(13, 110, 253, .12);
  color: var(--vcx-brand);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.vcx-dl-card.is-recommended .vcx-reco { display: inline-flex; }
.vcx-dl-card.is-recommended {
  border-color: rgba(13, 110, 253, .45);
  box-shadow: 0 32px 62px -34px rgba(13, 110, 253, .7);
}

/* ============================================================
   21. Numbered install steps
   ============================================================ */
.vcx-steps {
  margin-top: auto;
  padding: 1.5rem 1.75rem 1.75rem;
  border-top: 1px solid var(--vcx-hairline);
  background: linear-gradient(180deg, #f9fbff, #f3f7ff);
}
.vcx-steps-title {
  margin-bottom: 1.1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vcx-brand);
}
.vcx-steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vcx-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: .85rem;
  padding-bottom: 1.1rem;
  font-size: .875rem;
  line-height: 1.55;
}
.vcx-steps li:last-child { padding-bottom: 0; }
.vcx-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: .8rem;
  top: 2rem;
  bottom: .4rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(13, 110, 253, .35), rgba(13, 110, 253, .08));
}
.step-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--vcx-brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

/* ============================================================
   22. Link cards
   ============================================================ */
.vcx-link-card {
  position: relative;
  height: 100%;
  padding: 1.6rem 1.25rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vcx-link-card:hover,
.vcx-link-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, .35);
  box-shadow: var(--vcx-shadow);
}
.vcx-link-card .vcx-tile {
  width: 2.6rem;
  height: 2.6rem;
  margin-inline: auto;
  font-size: 1.2rem;
}
.vcx-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-brand);
  text-decoration: none;
}
.vcx-more i { transition: transform .18s ease; }
.vcx-link-card:hover .vcx-more i { transform: translateX(3px); }

/* ============================================================
   23. FAQ accordion
   ============================================================ */
.vcx-faq .accordion-item {
  margin-bottom: .75rem;
  overflow: hidden;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius) !important;
  background: #fff;
}
.vcx-faq .accordion-item:last-child { margin-bottom: 0; }
.vcx-faq .accordion-button {
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  color: var(--vcx-ink);
  background: #fff;
}
.vcx-faq .accordion-button:not(.collapsed) {
  color: var(--vcx-brand);
  background: rgba(13, 110, 253, .06);
  box-shadow: none;
}
.vcx-faq .accordion-button:focus { box-shadow: none; }
.vcx-faq .accordion-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--vcx-ink-soft);
}

/* ============================================================
   24. Career timeline
   Markup: ul.timeline > li > div.timeline-body
   ============================================================ */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1.1rem;
  padding-bottom: 1.85rem;
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  grid-column: 1;
  justify-self: center;
  z-index: 1;
  width: .9rem;
  height: .9rem;
  margin-top: .32rem;
  border: 3px solid var(--vcx-brand);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}
.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .75rem;
  top: 1.5rem;
  bottom: .1rem;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(13, 110, 253, .4), rgba(13, 110, 253, .08));
}
.timeline-body { min-width: 0; }

/* ============================================================
   25. Author card
   ============================================================ */
.vcx-author {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius-lg);
  background: #fff;
  box-shadow: var(--vcx-shadow);
}
.vcx-author-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--vcx-hairline);
  text-align: center;
}
@media (min-width: 768px) {
  .vcx-author-head {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
}
.vcx-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(135deg, var(--vcx-brand-dark), var(--vcx-brand));
  box-shadow: 0 14px 28px -18px rgba(13, 110, 253, .95);
}
.vcx-meta--start { justify-content: flex-start; }
@media (max-width: 767.98px) {
  .vcx-meta--start { justify-content: center; }
}

/* ============================================================
   26. Fact list
   Markup: dl.vcx-facts > div > (dt + dd)
   ============================================================ */
.vcx-facts { margin: 0; }
.vcx-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--vcx-hairline);
}
.vcx-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.vcx-facts dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vcx-ink-soft);
}
.vcx-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--vcx-ink);
}
.vcx-facts dd a { text-decoration: none; }
.vcx-facts dd a:hover { text-decoration: underline; }

@media (min-width: 992px) {
  .vcx-sticky { position: sticky; top: 6.5rem; }
}

/* ============================================================
   27. Forms & contact channels
   ============================================================ */
.form-label {
  margin-bottom: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--vcx-ink);
}
.form-control {
  padding: .65rem .9rem;
  border-color: var(--vcx-line);
  border-radius: .65rem;
}
.form-control:focus {
  border-color: rgba(13, 110, 253, .5);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
.form-control::placeholder { color: #9aa8bd; }
textarea.form-control { min-height: 9.5rem; }

.vcx-req {
  margin-left: .15rem;
  color: var(--vcx-accent);
  font-weight: 700;
}
.vcx-hint {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: var(--vcx-ink-soft);
}

/* Server-side / client-side form error */
.vcx-form-alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(220, 53, 69, .3);
  border-radius: var(--vcx-radius);
  background: rgba(220, 53, 69, .07);
  color: #a52834;
  font-size: .92rem;
}
.vcx-form-alert i { margin-top: .1rem; font-size: 1rem; }

/* Reserve space so the Turnstile widget doesn't shift layout on load */
.cf-turnstile { min-height: 65px; }

/* Icon + copy row used for support channels */
.contact-channel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-channel .feature-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .75rem;
  font-size: 1.1rem;
}

/* ============================================================
   28. Checkout / purchase page
   ============================================================ */
.vcx-price-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 2.25rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius-lg);
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: var(--vcx-shadow-sm);
}
.pricing-price {
  display: block;
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--vcx-ink);
}
.vcx-price-note {
  margin: 0;
  font-size: .875rem;
  color: var(--vcx-ink-soft);
}
.vcx-price-note .bi-gift-fill { color: var(--vcx-accent); }

/* Payment-method cards. Add h-100 in the markup for equal height. */
.pricing-card .card-body { position: relative; z-index: 1; }
.vcx-pay-note {
  margin: 1rem 0 0;
  font-size: .8rem;
  color: var(--vcx-ink-soft);
}

/* Assurance strip */
.vcx-trustbar {
  border-top: 1px solid var(--vcx-line);
  border-bottom: 1px solid var(--vcx-line);
  background: var(--vcx-surface);
  padding-block: 1.35rem;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-ink-soft);
}
.trust-item i {
  font-size: 1rem;
  color: var(--vcx-brand);
}

/* Policy links read as a row of chips rather than a bullet list */
.vcx-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vcx-policy-links a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--vcx-line);
  border-radius: .65rem;
  background: #fff;
  font-size: .875rem;
  font-weight: 600;
  color: var(--vcx-ink);
  text-decoration: none;
}
.vcx-policy-links a:hover,
.vcx-policy-links a:focus-visible {
  border-color: rgba(13, 110, 253, .4);
  color: var(--vcx-brand);
}
.vcx-policy-links i { color: var(--vcx-brand); }

/* ============================================================
   29. Renewal offer card
   ============================================================ */

/* In-flow pill, not absolutely positioned — .pricing-card sets
   overflow:hidden, which would clip a badge straddling the top edge. */
.pricing-badge {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.vcx-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .35rem .7rem;
  margin-top: .5rem;
}
.vcx-was {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--vcx-ink-soft);
  text-decoration: line-through;
}
.vcx-save {
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(25, 135, 84, .12);
  color: #146c43;
  font-size: .78rem;
  font-weight: 700;
}

.vcx-list-narrow {
  max-width: 22rem;
  margin-inline: auto;
}

/* ============================================================
   30. Sitemap link lists
   ============================================================ */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sitemap-list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .55rem;
  align-items: start;
  padding: .55rem 0;
  border-bottom: 1px solid var(--vcx-hairline);
}
.sitemap-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.sitemap-list li > i {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--vcx-brand);
  transition: transform .15s ease;
}
.sitemap-list li:hover > i { transform: translateX(2px); }
.sitemap-list a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--vcx-ink);
  text-decoration: none;
}
.sitemap-list a:hover,
.sitemap-list a:focus-visible {
  color: var(--vcx-brand);
  text-decoration: underline;
}
.sitemap-list a[aria-current="page"] {
  color: var(--vcx-ink-soft);
  font-weight: 600;
  cursor: default;
}

/* Neutral informational note (distinct from the red-tinted .vcx-note) */
.vcx-info {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: var(--vcx-surface);
  font-size: .875rem;
  color: var(--vcx-ink-soft);
}
.vcx-info i { margin-top: .1rem; color: var(--vcx-brand); }
/* Long URLs must not force horizontal scroll on narrow screens. */
.vcx-info a { overflow-wrap: anywhere; }

/* ============================================================
   31. FAQ groups & sticky contents
   ============================================================ */
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq-group-title {
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.vcx-toc {
  padding: 1.25rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
}
@media (min-width: 992px) {
  .vcx-toc { position: sticky; top: 6.5rem; }
}
.vcx-toc-title {
  margin-bottom: .85rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vcx-ink-soft);
}
.vcx-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vcx-toc li + li { margin-top: .2rem; }
.vcx-toc a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border-radius: .55rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--vcx-ink);
  text-decoration: none;
}
.vcx-toc a:hover,
.vcx-toc a:focus-visible {
  background: rgba(13, 110, 253, .08);
  color: var(--vcx-brand);
}
.vcx-toc .vcx-count {
  flex: 0 0 auto;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--vcx-surface);
  font-size: .75rem;
  font-weight: 700;
  color: var(--vcx-ink-soft);
}

/* Jump chips shown in place of the sidebar on small screens */
.vcx-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.vcx-jump a {
  padding: .4rem .85rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-ink);
  text-decoration: none;
}
.vcx-jump a:hover,
.vcx-jump a:focus-visible {
  border-color: rgba(13, 110, 253, .4);
  color: var(--vcx-brand);
}

/* ============================================================
   32. Legal documents
   ============================================================ */
.legal-doc {
  max-width: 44rem;   /* keeps line length readable in a wide column */
}
.legal-doc h2 {
  margin: 2.75rem 0 .9rem;
  font-size: 1.3rem;
  font-weight: 700;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p {
  line-height: 1.75;
  color: #33455f;
}

.legal-toc {
  margin: 0;
  padding-left: 1.2rem;
}
.legal-toc li { margin-bottom: .45rem; }
.legal-toc li:last-child { margin-bottom: 0; }
.legal-toc li::marker {
  color: var(--vcx-ink-soft);
  font-weight: 700;
  font-size: .85rem;
}
.legal-toc a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--vcx-ink);
  text-decoration: none;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--vcx-brand);
  text-decoration: underline;
}

.clause-list {
  padding-left: 1.4rem;
  line-height: 1.7;
  color: #33455f;
}
.clause-list li {
  margin-bottom: .8rem;
  padding-left: .2rem;
}
.clause-list li:last-child { margin-bottom: 0; }
.clause-list li::marker {
  color: var(--vcx-brand);
  font-weight: 700;
}

/* Block-capital legal notices. The capitalisation is deliberate — warranty
   disclaimers are conventionally set in caps to be legally conspicuous — so
   this loosens the typography instead of changing the case. */
.legal-notice {
  margin: 1.25rem 0;
  padding: 1.3rem 1.45rem;
  border: 1px solid var(--vcx-line);
  border-left: 4px solid var(--vcx-accent);
  border-radius: .75rem;
  background: var(--vcx-surface);
  font-size: .875rem;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--vcx-ink-soft);
}
.legal-notice p { color: inherit; line-height: inherit; }

/* Unresolved placeholder text in a draft legal document. Highlighted so it
   cannot be published by accident — delete the wrapper once the real wording
   is in place. */
.legal-todo {
  padding: .1rem .35rem;
  border-radius: .3rem;
  background: #fff3cd;
  box-shadow: inset 0 0 0 1px #ffe08a;
  color: #664d03;
}

.legal-doc ul {
  padding-left: 1.4rem;
  line-height: 1.7;
  color: #33455f;
}
.legal-doc ul li { margin-bottom: .7rem; }
.legal-doc ul li:last-child { margin-bottom: 0; }
.legal-doc ul li::marker { color: var(--vcx-brand); }

/* ============================================================
   33. Customer tiles & pagination
   ============================================================ */
.customer-tile {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--vcx-line);
  border-radius: .7rem;
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vcx-ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.customer-tile::before {
  content: "";
  flex: 0 0 auto;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--vcx-brand);
  opacity: .55;
}
.customer-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 110, 253, .35);
  box-shadow: var(--vcx-shadow);
}

.pagination {
  gap: .3rem;
  --bs-pagination-border-color: var(--vcx-line);
  --bs-pagination-color: var(--vcx-ink);
  --bs-pagination-hover-color: var(--vcx-brand);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
.pagination .page-link {
  border-radius: .55rem;
  font-size: .9rem;
  font-weight: 600;
}
.pagination .page-item.active .page-link {
  box-shadow: 0 8px 18px -12px rgba(13, 110, 253, .95);
}
.pagination .page-item.disabled .page-link {
  background: var(--vcx-surface);
  color: #a9b6c9;
}

.vcx-resultcount {
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-ink-soft);
}

/* ============================================================
   34. A–Z directory index
   ============================================================ */

/* Letter bar — evenly sized keys rather than text-width pills */
.pagination-az { gap: .3rem; }
.pagination-az .page-link {
  min-width: 2.4rem;
  padding: .4rem .5rem;
  text-align: center;
  font-weight: 700;
}

/* Firm list. Grid rather than CSS columns so names read left-to-right in
   alphabetical order and rows stay aligned across the row. */
.firm-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.75rem;
  font-size: .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Explicit column counts rather than auto-fill, so the count is predictable
   at each breakpoint instead of varying with the longest name. */
@media (min-width: 576px)  { .firm-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .firm-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .firm-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .firm-columns {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 1.25rem;
    font-size: .84rem;
  }
}
.firm-columns li {
  min-width: 0;
  padding: .45rem 0;
  border-bottom: 1px solid var(--vcx-hairline);
  font-size: inherit;
  line-height: 1.4;
  color: var(--vcx-ink);
  overflow-wrap: break-word;
}
.firm-columns a {
  color: var(--vcx-ink);
  text-decoration: none;
}
.firm-columns a::after {
  content: "\F1C5";
  margin-left: .3rem;
  font-family: "bootstrap-icons";
  font-size: .7em;
  color: var(--vcx-brand);
  opacity: 0;
  transition: opacity .15s ease;
}
.firm-columns a:hover,
.firm-columns a:focus-visible { color: var(--vcx-brand); }
.firm-columns a:hover::after,
.firm-columns a:focus-visible::after { opacity: .75; }

/* ============================================================
   35. Article / post cards
   ============================================================ */
.post-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover,
.post-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, .35);
  box-shadow: var(--vcx-shadow);
}

.post-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  border-bottom: 1px solid var(--vcx-hairline);
  background: linear-gradient(135deg, #e9f1ff, #f8fbff);
  color: var(--vcx-brand);
  font-size: 2.1rem;
}
.post-card:hover .post-thumb { background: linear-gradient(135deg, #dfeaff, #f3f8ff); }

.post-card .card-body {
  display: flex;
  flex-direction: column;
}
.post-card h3 a {
  color: var(--vcx-ink);
  text-decoration: none;
}
.post-card:hover h3 a,
.post-card h3 a:focus-visible { color: var(--vcx-brand); }

.post-readmore {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vcx-brand);
}
.post-readmore i { transition: transform .18s ease; }
.post-card:hover .post-readmore i { transform: translateX(3px); }

/* ============================================================
   36. Article body & promo
   ============================================================ */

/* Hero image. Article images are square (1024x1024), so the box is square
   too — a 16:9 crop would cut roughly a quarter off the top and bottom.
   The fixed ratio still reserves layout space, so nothing jumps as it loads.
   object-fit: cover is kept as a safeguard for any future non-square image.
   Capped width because a full-bleed square would tower over the copy. */
.article-hero-img {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;   /* required: the HTML height attribute is a presentational
                     hint that would otherwise beat aspect-ratio */
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--vcx-radius);
  border: 1px solid var(--vcx-line);
  box-shadow: var(--vcx-shadow);
  background: var(--vcx-surface);
}

/* Body copy comes from the database, so style by element rather than class. */
.article-body {
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.8;
  color: #33455f;
}
.article-body > :first-child { margin-top: 0; }
.article-body h2 {
  margin: 2.5rem 0 .85rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vcx-ink);
}
.article-body h3 {
  margin: 2rem 0 .7rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--vcx-ink);
}
.article-body h4 {
  margin: 1.6rem 0 .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vcx-ink);
}
.article-body p { margin-bottom: 1.15rem; }
.article-body ul,
.article-body ol {
  margin-bottom: 1.15rem;
  padding-left: 1.4rem;
}
.article-body li { margin-bottom: .5rem; }
.article-body li::marker { color: var(--vcx-brand); }
.article-body a { color: var(--vcx-brand); }
.article-body img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: var(--vcx-radius);
}
.article-body blockquote {
  margin: 1.75rem 0;
  padding: .35rem 0 .35rem 1.25rem;
  border-left: 3px solid var(--vcx-brand);
  color: var(--vcx-ink-soft);
  font-style: italic;
}
.article-body table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: .92rem;
}
.article-body th,
.article-body td {
  padding: .6rem .75rem;
  border: 1px solid var(--vcx-line);
  text-align: left;
}
.article-body th { background: var(--vcx-surface); font-weight: 700; }
.article-body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--vcx-line);
  opacity: 1;
}

/* Byline row under the article heading */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem .9rem;
  font-size: .85rem;
  color: var(--vcx-ink-soft);
}
.article-meta i { color: var(--vcx-brand); }

/* End-of-article product promo */
.article-promo {
  max-width: 44rem;
  border: 1px solid rgba(13, 110, 253, .25);
  border-radius: var(--vcx-radius-lg);
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: var(--vcx-shadow-sm);
}
.article-promo h2 { color: var(--vcx-ink); }
.article-promo p { color: var(--vcx-ink-soft); line-height: 1.7; }

/* ============================================================
   37. Multi-section forms
   ============================================================ */
.form-fieldset {
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
}
.form-section-legend {
  float: none;            /* Bootstrap sets legend to 100% + float; reset both */
  width: auto;
  margin: 0 0 1.25rem;
  padding: 0 0 .75rem;
  border-bottom: 1px solid var(--vcx-hairline);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vcx-brand);
}
.form-fieldset > .row { clear: both; }

/* Required-field marker */
.form-req {
  margin-left: .15rem;
  color: var(--vcx-accent);
  font-weight: 700;
}

/* Anti-spam question, given visual weight so it is not skipped */
.form-challenge {
  padding: 1.25rem;
  border: 1px solid rgba(13, 110, 253, .25);
  border-radius: var(--vcx-radius);
  background: linear-gradient(180deg, #f7fbff, #ffffff);
}
.form-challenge-q {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vcx-ink);
}

/* Honeypot wrapper: present in the DOM for bots, off-screen for humans.
   Kept here rather than in a per-page <style> block so both forms share it. */
.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sticky submit bar at the foot of a long form */
.form-submitbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--vcx-line);
  border-radius: var(--vcx-radius);
  background: var(--vcx-surface);
}

/* ============================================================
   38. Testimonial cards
   ============================================================ */
.testimonial-card .bi-quote {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: rgba(13, 110, 253, .3);
}
.testimonial-card blockquote {
  font-size: .98rem;
  line-height: 1.7;
  color: #33455f;
}
.testimonial-card .blockquote-footer {
  padding-top: 1rem;
  border-top: 1px solid var(--vcx-hairline);
  font-size: .875rem;
  color: var(--vcx-ink-soft);
}
.testimonial-card .blockquote-footer::before { content: none; }
.testimonial-card .blockquote-footer strong { color: var(--vcx-ink); }
.testimonial-card cite { font-style: normal; }
.testimonial-card cite a {
  color: var(--vcx-brand);
  text-decoration: none;
}
.testimonial-card cite a:hover { text-decoration: underline; }

/* Rating summary shown above the quote grid */
.vcx-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .7rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--vcx-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--vcx-shadow-sm);
  font-size: .9rem;
  color: var(--vcx-ink-soft);
}
.vcx-rating strong { color: var(--vcx-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .feature-card:hover { transform: none; }
  .vcx-dl-card:hover,
  .vcx-link-card:hover,
  .vcx-link-card:focus-within { transform: none; }
  .vcx-link-card:hover .vcx-more i { transform: none; }
  .post-card:hover,
  .post-card:focus-within { transform: none; }
  .post-card:hover .post-readmore i { transform: none; }
}