/* Service pages and the services hub: hero with breadcrumb and figure panel, fit, what you get, comparison, role chips, client work. */

.hero-figures{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;border:1px solid var(--hair-on-blue);border-radius:14px;background:#0024a01f;backdrop-filter:blur(8px)}
.hero-figures li{flex:1 1 0;min-width:140px;padding:18px 20px}
.hero-figures li+li{border-left:1px solid var(--hair-on-blue)}
.hero-figures b{display:block;font-size:30px;font-weight:300;letter-spacing:-.8px;line-height:1.1;margin-bottom:4px}
.hero-figures span{font-size:13px;color:#ffffffc8;line-height:1.4;display:block}
.hero-figures.stacked{flex-direction:column;max-width:380px;margin-left:auto;width:100%}
.hero-figures.stacked li{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:14px}
.hero-figures.stacked li+li{border-left:0;border-top:1px solid var(--hair-on-blue)}
.hero-figures.stacked b{margin:0}

/* Is it the right model? */
.fit-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.fit-card{padding:34px;border-radius:var(--radius-card);border:1px solid var(--border);background:white}
.fit-card.no{background:var(--tint-cool)}
.fit-card h3{font-size:20px;margin-bottom:18px}
.fit-card .arrow-link{display:flex;margin-top:6px}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.check-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:#33343f}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:600}
.fit-card.no .check-list li::before{content:"—";color:var(--muted)}

/* What you get: ruled points and a call-to-action tile */
.get-section{padding-top:0}
.get-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}
.get-grid article{padding:28px 28px 30px 0;border-bottom:1px solid var(--border)}
.get-grid article:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--border)}
.get-grid .card-number{font-size:14px}
.get-grid h3{font-size:19px;margin:14px 0 10px}
.get-grid p{font-size:15px;color:var(--muted);margin:0}
.get-grid .get-cta{background:var(--chip-bg);border-radius:var(--radius-card);border:0;padding:28px!important;margin:14px 0 14px 14px;display:flex;flex-direction:column;gap:8px}
.get-grid .get-cta h3{margin:0}


/* Comparison table */
.service-compare,.service-work{background:var(--tint-soft)}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:14px}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid var(--border);text-align:left}
.compare thead th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
.compare thead th.us{color:var(--blue-deep)}
.compare thead th:not(:first-child){text-align:center}
.compare td.mark{width:22%;text-align:center;font-size:18px}
.compare td.yes{color:var(--blue);font-weight:600}
.compare td.no{color:#a2a3ae}
.compare tbody th{font-weight:400}
.compare .us-col{background:#f5f8ff}

/* The product-leaders card */
.leader-grid.single{grid-template-columns:1fr}

@media (max-width:920px){
  .get-grid{grid-template-columns:1fr 1fr}
  .get-grid article,.get-grid article:not(:nth-child(3n+1)){padding:24px 24px 24px 0;border-left:0}
  .get-grid article:nth-child(even){padding-left:24px;border-left:1px solid var(--border)}
}
@media (max-width:720px){
  .get-section{padding-top:64px}
  .fit-grid,.split-2,.get-grid{grid-template-columns:1fr}
  .get-grid article:nth-child(even){padding-left:0;border-left:0}
  .get-grid .get-cta{margin:14px 0 0}
  .fit-card{padding:26px}
  .compare thead th,.compare td,.compare th{padding:12px 8px;font-size:13px}
  .compare thead th{font-size:10px;letter-spacing:.5px}
  .compare td.mark{width:24%}
  .hero-figures{flex-direction:column}
  .hero-figures li+li{border-left:0;border-top:1px solid var(--hair-on-blue)}
  .hero-figures li{display:grid;grid-template-columns:124px 1fr;align-items:center;gap:12px;padding:14px 16px}
  .hero-figures b{font-size:24px;margin:0}
}

/* Services hub: "which model fits" closing line */
.fits-closing{margin:28px 0 0;font-size:15px;color:var(--muted)}