/* Comparison pages: hub and "Leadspicker vs X". Builds on product-v2.css (pv2-wrap, pv2-section, pv2-eyebrow, pv2-feature, pv2-cta).
   Colours stay black/white plus the hero palette; the Leadspicker column is marked by weight, not by colour. */
.background-video-3:has(.vs-hero) { height: 620px; }
.vs-hero__in { position: relative; max-width: 860px; margin: 0 auto; padding: 56px 32px 72px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; }
.vs-hero__in h1 { font-family: Inter, sans-serif; font-size: 64px; line-height: 1.04; letter-spacing: -.025em; font-weight: 600; margin: 0 0 20px; }
.vs-hero__in > p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0 0 28px; max-width: 620px; }
.vs-hero__in .button-group-main { justify-content: center; }
.vs-logos { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.vs-logos__vs { font-size: 14px; color: rgba(255,255,255,.7); }
.vs-logo { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); overflow: hidden; }
.vs-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-mini { display: inline-block; width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; vertical-align: -4px; object-fit: cover; }
.vs-mini--lp svg { display: block; width: 18px !important; height: 20px !important; }
.vs-tool__n { display: inline-flex; align-items: center; }
.vs-logo__mono { font-size: 30px; font-weight: 600; color: #0a0a0a; }
.vs-logo svg { display: block; width: 38px !important; height: 42px !important; }

/* every section: same header, then one bordered block */
.vs-head { max-width: 760px; margin-bottom: 32px; }
.vs-head h2 { font-size: 44px; line-height: 1.08; letter-spacing: -.02em; font-weight: 500; margin: 0; color: #0a0a0a; }
.vs-head p { font-size: 18px; line-height: 1.5; color: #525252; margin: 14px 0 0; }
.vs-cells { display: grid; border: 1px solid #e5e5e5; border-radius: 14px; overflow: hidden; }
.vs-cells--3 { grid-template-columns: repeat(3, 1fr); }
.vs-cells--4 { grid-template-columns: repeat(4, 1fr); }
.vs-cell { padding: 30px 28px; box-shadow: 0 0 0 .5px #e5e5e5; }
.vs-cell small { display: block; font-size: 13px; color: #8a8a8a; margin-bottom: 10px; }
.vs-cell h3 { font-size: 20px; line-height: 1.22; font-weight: 500; letter-spacing: -.01em; margin: 0 0 8px; color: #0a0a0a; }
.vs-cell p { font-size: 15px; line-height: 1.5; color: #525252; margin: 0; }
.background-video-3:has(.vs-hub) { height: 620px; }
.vs-updated { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 16px; }
.vs-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 30px; }
.vs-crumbs a { color: inherit; text-decoration: none; }
.vs-crumbs a:hover { color: #fff; }

/* at a glance */
.vs-glance { display: grid; grid-template-columns: 220px 1fr 1fr; border: 1px solid #e5e5e5; border-radius: 14px; overflow: hidden; }
.vs-glance > * { padding: 22px 24px; border-bottom: 1px solid #e5e5e5; font-size: 15px; line-height: 1.5; color: #404040; }
.vs-glance > :nth-last-child(-n+3) { border-bottom: 0; }
.vs-glance__h { font-size: 15px; font-weight: 600; color: #0a0a0a; background: #fafafa; }
.vs-glance__k { font-weight: 500; color: #0a0a0a; }
.vs-glance__v--lp { background: #fafafa; color: #0a0a0a; }

/* feature table */
.vs-table-wrap { border: 1px solid #e5e5e5; border-radius: 14px; }
.vs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.vs-table thead th { position: sticky; top: 72px; z-index: 2; background: #fff; padding: 18px 24px; font-size: 15px; font-weight: 600; color: #0a0a0a; text-align: left; border-bottom: 1px solid #0a0a0a; }
.vs-table thead th:first-child { border-top-left-radius: 14px; }
.vs-table thead th:last-child { border-top-right-radius: 14px; }
.vs-table th[scope="colgroup"] { padding: 28px 24px 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #737373; text-align: left; border-bottom: 1px solid #e5e5e5; }
.vs-table tbody th[scope="row"] { width: 34%; padding: 16px 24px; font-weight: 500; color: #0a0a0a; text-align: left; vertical-align: top; border-bottom: 1px solid #efefef; }
.vs-table td { width: 33%; padding: 16px 24px; color: #404040; vertical-align: top; border-bottom: 1px solid #efefef; }
.vs-table tbody tr:last-child > * { border-bottom: 0; }
.vs-table td:nth-child(2) { background: #fafafa; color: #0a0a0a; }
.vs-val { display: flex; align-items: flex-start; gap: 10px; }
.vs-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1; }
.vs-mark--yes { background: #0a0a0a; color: #fff; }
.vs-mark--part { background: #e5e5e5; color: #0a0a0a; }
.vs-mark--no { background: #fff; color: #8a8a8a; box-shadow: inset 0 0 0 1px #d4d4d4; }
.vs-note a { color: inherit; }
.vs-note { font-size: 13px; line-height: 1.5; color: #737373; margin: 14px 0 0; }

/* FAQ */
.vs-faq { border-top: 1px solid #e5e5e5; }
.vs-faq details { border-bottom: 1px solid #e5e5e5; }
.vs-faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 19px; line-height: 1.3; font-weight: 500; color: #0a0a0a; cursor: pointer; list-style: none; }
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; color: #737373; }
.vs-faq details[open] summary::after { content: "−"; }
.vs-faq p { font-size: 16px; line-height: 1.55; color: #525252; margin: 0; padding: 0 48px 24px 0; max-width: 860px; }

/* sources */
.vs-sources { font-size: 14px; line-height: 1.6; color: #737373; }
.vs-sources h2 { font-size: 15px; font-weight: 600; color: #0a0a0a; margin: 0 0 8px; }
.vs-sources p { margin: 0 0 10px; max-width: 880px; }
.vs-sources ul { margin: 0; padding-left: 18px; }
.vs-sources a { color: #404040; }

/* hub */
.vs-hub-hero { max-width: 1330px; margin: 0 auto; padding: 88px 32px 112px; color: #fff; }
.vs-hub-hero h1 { font-family: Inter, sans-serif; font-size: 72px; line-height: 1.02; letter-spacing: -.025em; font-weight: 600; margin: 0 0 22px; max-width: 900px; }
.vs-hub-hero .pv2-eyebrow { color: rgba(255,255,255,.7); }
.vs-hub-hero .pv2-eyebrow::before { background: #f3d2a6; }
.hero-v3.vs-hub { min-height: 0; height: auto; padding: 0; }
.vs-hub-hero p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; max-width: 640px; }
.vs-group { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 44px 0; border-top: 1px solid #e5e5e5; }
.vs-group:first-of-type { border-top: 0; padding-top: 0; }
.vs-group h2 { font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; margin: 0 0 8px; color: #0a0a0a; }
.vs-group > div > p { font-size: 15px; line-height: 1.5; color: #737373; margin: 0; }
.vs-tools { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e5e5e5; border-radius: 14px; overflow: hidden; background: #fff; }
.vs-tool { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: #fff; box-shadow: 0 0 0 .5px #e5e5e5; color: inherit; text-decoration: none; transition: background .25s; }
.vs-tool:hover { background: #fafafa; }
.vs-tool strong { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: #0a0a0a; }
.vs-tool svg { width: 15px; height: 15px; stroke: #0a0a0a; fill: none; stroke-width: 1.8; transition: transform .25s; }
.vs-tool:hover svg { transform: translate(2px, -2px); }
.vs-tool span { font-size: 14px; line-height: 1.42; color: #525252; }

@media (max-width: 991px) {
  .background-video-3:has(.vs-hero), .background-video-3:has(.vs-hub) { height: auto; min-height: 0; }
  .vs-hero__in { padding: 40px 20px 64px; }
  .vs-hero__in h1 { font-size: 42px; }
  .vs-hero__in > p { font-size: 17px; }
  .vs-head h2 { font-size: 34px; }
  .vs-cells--3, .vs-cells--4 { grid-template-columns: 1fr; }
  .vs-group { grid-template-columns: 1fr; gap: 20px; }
  .vs-tools { grid-template-columns: 1fr 1fr; }
  .vs-hub-hero { padding: 56px 20px 72px; }
  .vs-hub-hero h1 { font-size: 46px; }
}
@media (max-width: 767px) {
  .vs-glance { grid-template-columns: 1fr 1fr; }
  .vs-glance > * { padding: 14px 16px; font-size: 14px; }
  .vs-glance__k { grid-column: 1 / -1; background: #fafafa; border-bottom: 0; padding-bottom: 0; font-size: 13px; color: #737373; }
  .vs-glance > .vs-glance__corner { display: none; }
  .vs-glance > :nth-last-child(3) { border-bottom: 0; }
  /* the table becomes stacked rows: label above two labelled cells */
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table td, .vs-table tbody th { display: block; width: auto; }
  .vs-table thead { display: none; }
  .vs-table tbody th[scope="row"] { width: auto; padding: 14px 16px 6px; border-bottom: 0; }
  .vs-table th[scope="colgroup"] { padding: 22px 16px 8px; }
  .vs-table td { padding: 8px 16px; border-bottom: 0; background: none !important; }
  .vs-table td::before { content: attr(data-label); display: block; font-size: 12px; color: #8a8a8a; margin-bottom: 3px; }
  .vs-table tr > td:last-child { padding-bottom: 14px; border-bottom: 1px solid #efefef; }
  .vs-tools { grid-template-columns: 1fr; }
  .vs-faq p { padding-right: 0; }
  .vs-faq summary { font-size: 17px; }
}