/* ============================================================
   INDUSTRY / VERTICAL page. Left-aligned hero with a compliance
   pill row, the challenge/solution split (components.css), the dark
   "Where This Fits" band, the comparison table, and the closing CTA
   + prev/next pager.
   ============================================================ */
.vert-hero{
  position: relative; overflow: hidden;
  padding: 140px 0 56px;
}
@media (max-width: 1024px){ .vert-hero{ padding-top: 120px; } }
@media (max-width: 640px){ .vert-hero{ padding-top: 100px; } }
.vert-hero-inner{ max-width: none; }
.vert-hero .eyebrow{ text-transform: none; letter-spacing: 0.02em; }
.vert-hero h1{ margin: 0 0 18px; text-wrap: balance; }
.vert-hero .lede{
  font-size: 19px; line-height: 1.6; color: var(--text-secondary);
  font-style: italic; margin: 0;
}

/* ---------- optional hero right-side image (v_hero_image ACF field) ----------
   .vert-hero-inner only gets the .vert-hero-grid two-column split when
   that field is actually set (see hero.php) -- with no image, the hero
   stays exactly the original single-column layout above. Same grid
   proportions as .home-hero-grid so the two hero patterns feel related. */
.vert-hero-inner.vert-hero-grid{
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
}
@media (max-width: 940px){
  .vert-hero-inner.vert-hero-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.vert-hero-copy{ min-width: 0; }
.vert-hero-visual{ min-width: 0; }
.vert-hero-visual img{
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}

/* ---------- Where This Fits (dark band) ---------- */
.vert-fits-section{
  background-image: linear-gradient(135deg, #0F1A38 0%, #0B1224 60%);
  border-top: none; border-bottom: none; color: #fff;
}
.vert-fits-section .kicker{ color: #01AEF0; }
.vert-fits-section h2{ color: #fff; }
.vert-fits-section .check-card{
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.vert-fits-section .check-card p{ color: rgba(255,255,255,0.85); }
.vert-fits-section .check-card-icon{ background: rgba(1,174,240,0.15); }
.vert-fits-section .check-card-icon svg{ stroke: #01AEF0; }

/* ---------- comparison ---------- */
.vert-compare-section .compare-wrap{ margin-top: 4px; }

/* ---------- prev / next pager ---------- */
.vert-pager{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 36px;
}