/* Local AI Referrals services hub — catalog & conversion components v2 */
/* Scope: /services/ page only. Uses the site token set (site-perf.css). */

/* ---------- "Start where you are" 2x2 router ---------- */
.svc-router-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.svc-router-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-top: 4px solid var(--primary, #00338d);
  border-radius: var(--radius-lg, 18px);
  background: var(--white, #fff);
  box-shadow: 0 1px 0 rgba(0,51,141,.04);
}
.svc-router-card h3 { margin: 0 0 .3rem; font-size: 1.12rem; color: var(--premium-ink, #071827); }
.svc-router-card p { margin: 0 0 .6rem; color: var(--text-light, #526071); font-size: .95rem; line-height: 1.6; }
.svc-router-card .btn { margin-top: auto; }
.svc-router-card.is-wide { grid-column: 1 / -1; }
.svc-router-card a:focus-visible { outline: 3px solid var(--focus-ring, #d8a23a); outline-offset: 3px; }
.svc-router-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  margin: .1rem 0 .45rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--surface-tint, #eef4f7);
  color: var(--primary, #00338d);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.svc-router-price { margin: 0 0 .3rem; font-size: 1.35rem; font-weight: 800; color: var(--primary, #00338d); }
.svc-router-price span { font-size: .82rem; font-weight: 600; color: var(--text-light, #526071); }

/* ---------- Offer ladder (Check -> Diagnose -> Fix -> Verify) ---------- */
.svc-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}
.svc-ladder-step {
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: 14px;
  background: var(--white, #fff);
  padding: 1rem 1.05rem;
  text-align: center;
}
.svc-ladder-step .svc-ladder-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary, #00338d);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: .45rem;
}
.svc-ladder-step strong { display: block; color: var(--premium-ink, #071827); font-size: 1rem; }
.svc-ladder-step span { display: block; color: var(--text-light, #526071); font-size: .8rem; line-height: 1.45; margin-top: .15rem; }
.svc-ladder-note { margin-top: 1.1rem; color: var(--text-light, #526071); font-size: .95rem; text-align: center; }

/* ---------- Compact trust strip (before flagship) ---------- */
.svc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 0;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: var(--radius-lg, 18px);
  background: var(--white, #fff);
}
.svc-trust-strip-item { display: flex; flex-direction: column; gap: .15rem; }
.svc-trust-strip-item strong { color: var(--premium-ink, #071827); font-size: .92rem; }
.svc-trust-strip-item span { color: var(--text-light, #526071); font-size: .88rem; }
.svc-trust-strip-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .9rem; font-weight: 700; }

/* ---------- Flagship (managed service) ---------- */
.svc-flagship {
  background: linear-gradient(135deg, #071827 0%, #00338D 70%, #0b2b55 100%);
  color: #fff;
  padding: 4.5rem 0;
}
.svc-flagship .eyebrow { color: #ffd98a; }
.svc-flagship h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.15; margin-bottom: 1rem; }
.svc-flagship p { color: rgba(255,255,255,.92); font-size: 1.02rem; line-height: 1.7; max-width: 820px; }
.svc-flagship .section-body { max-width: 820px; }
.svc-flagship .check-list li { color: rgba(255,255,255,.92); }
.svc-flagship .check-list li::before { color: #ffd98a; }
.svc-flagship-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 2.25rem;
}
.svc-flagship-step {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  padding: 1.1rem 1rem;
}
.svc-flagship-step strong { display: block; color: #ffd98a; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem; }
.svc-flagship-step span { display: block; color: #fff; font-weight: 700; font-size: 1rem; }
.svc-flagship-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.svc-flagship-note { margin-top: .9rem; color: rgba(255,255,255,.85); font-size: .92rem; }
.svc-flagship-note a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Sprint vs managed comparison ---------- */
.svc-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.svc-compare-card {
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: var(--radius-lg, 18px);
  background: var(--white, #fff);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 1px 0 rgba(0,51,141,.04);
}
.svc-compare-card.is-primary { border: 2px solid var(--primary, #00338d); }
.svc-compare-card h3 { margin: 0 0 .4rem; font-size: 1.2rem; color: var(--premium-ink, #071827); }
.svc-compare-card .svc-compare-price { font-size: 1.5rem; font-weight: 800; color: var(--primary, #00338d); margin: .4rem 0 .7rem; }
.svc-compare-card .svc-compare-price a { font-size: 1rem; font-weight: 750; }
.svc-compare-card ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.svc-compare-card ul li { color: var(--text-light, #526071); font-size: .95rem; padding: .3rem 0 .3rem 1.5rem; position: relative; }
.svc-compare-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--primary, #00338d); font-weight: 800; }

/* ---------- Trust section ---------- */
.svc-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.svc-trust-item {
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: 14px;
  background: var(--white, #fff);
  padding: 1.25rem 1.35rem;
}
.svc-trust-item h3 { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--premium-ink, #071827); }
.svc-trust-item p { margin: 0 0 .55rem; color: var(--text-light, #526071); font-size: .92rem; line-height: 1.6; }
.svc-trust-item a { font-weight: 700; font-size: .95rem; }
.svc-trust-note { margin-top: 1.25rem; color: var(--text-light, #526071); font-size: .9rem; line-height: 1.6; }

/* ---------- Problem-group catalog ---------- */
.svc-catalog-group { margin-bottom: 2.75rem; }
.svc-catalog-group:last-child { margin-bottom: 0; }
.svc-catalog-group h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 1.1rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--primary, #00338d);
  font-size: 1.28rem;
  color: var(--premium-ink, #071827);
}
.svc-catalog-group h3 .svc-group-number {
  color: var(--primary, #00338d);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.svc-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.svc-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: 16px;
  background: var(--white, #fff);
  padding: 1.35rem 1.3rem 1.3rem;
  box-shadow: 0 1px 0 rgba(0,51,141,.04);
  transition: box-shadow .2s ease, transform .2s ease;
}
.svc-card:hover { box-shadow: var(--shadow-md, 0 8px 20px rgba(0,34,68,.10)); transform: translateY(-2px); }
.svc-card .svc-card-problem { font-size: 1.02rem; font-weight: 750; color: var(--premium-ink, #071827); line-height: 1.45; }
.svc-card .svc-card-name { margin: 0; font-size: .86rem; font-weight: 600; color: var(--text-light, #526071); }
.svc-card .svc-card-fix { margin: .15rem 0 .4rem; font-size: .93rem; color: var(--text-light, #526071); line-height: 1.55; }
.svc-card .svc-card-price { font-size: 1.35rem; font-weight: 800; color: var(--primary, #00338d); margin-top: auto; }
.svc-card .svc-card-price span { display: block; font-size: .8rem; font-weight: 600; color: var(--text-light, #526071); margin-bottom: .1rem; }
.svc-card .btn { margin-top: .65rem; }

/* ---------- Recheck (post-fix) ---------- */
.svc-recheck {
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-light, #f5f7f8);
  padding: 1.6rem 1.6rem;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.svc-recheck h3 { margin: 0 0 .3rem; font-size: 1.12rem; color: var(--premium-ink, #071827); }
.svc-recheck p { margin: 0; color: var(--text-light, #526071); font-size: .95rem; line-height: 1.6; max-width: 660px; }
.svc-recheck .btn { flex: 0 0 auto; }

/* ---------- Limits statement ---------- */
.svc-limits {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border, #a5acaf);
  color: var(--text-light, #526071);
  font-size: .95rem;
  line-height: 1.7;
}
.svc-limits a { font-weight: 700; }

/* ---------- Escape hatch ---------- */
.svc-escape {
  border: 1px solid var(--border-soft, rgba(0,51,141,.16));
  border-radius: var(--radius-lg, 18px);
  background: var(--white, #fff);
  padding: 2.2rem 2rem;
  text-align: center;
}
.svc-escape h2 { margin-bottom: .6rem; }
.svc-escape p { color: var(--text-light, #526071); font-size: 1.02rem; max-width: 640px; margin: 0 auto 1.4rem; line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .svc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .svc-router-grid { grid-template-columns: 1fr; }
  .svc-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-flagship-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-compare-grid { grid-template-columns: 1fr; }
  .svc-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-card-grid { grid-template-columns: 1fr; }
  .svc-ladder { grid-template-columns: 1fr; }
  .svc-flagship-steps { grid-template-columns: 1fr; }
  .svc-flagship { padding: 3rem 0; }
  .svc-recheck { flex-direction: column; align-items: flex-start; }
  .svc-recheck .btn { width: 100%; justify-content: center; }
  .svc-flagship-actions .btn { width: 100%; justify-content: center; }
  .svc-trust-strip { flex-direction: column; align-items: flex-start; }
}

/* 2026-08-18 services-page contrast override */
/* Loaded before site-redesign-v2.css, so these scoped selectors intentionally
   outrank its generic heading/paragraph colors on dark and light sections. */
html[data-full-shell="v2"] body .page-header .eyebrow {
  color: #0b5fff;
}
html[data-full-shell="v2"] body .svc-flagship .eyebrow,
html[data-full-shell="v2"] body section.svc-flagship .eyebrow {
  color: #ffd98a;
}
html[data-full-shell="v2"] body .svc-flagship h2,
html[data-full-shell="v2"] body section.svc-flagship h2 {
  color: #fff;
}
html[data-full-shell="v2"] body .svc-flagship p,
html[data-full-shell="v2"] body .svc-flagship p strong,
html[data-full-shell="v2"] body .svc-flagship-note,
html[data-full-shell="v2"] body .svc-flagship-note a {
  color: rgba(255,255,255,.92);
}