/* Data-centre and Services pages layout, v1 (24 Sep 2026).
 * Reuses the unscoped components in ai-pages-v1.css (.ai-hero, .ai-jump, .ai-glance,
 * .ai-trust, .ai-faq, .ai-mcta) and supplies their tokens for .svc-page.
 * Versioned: .css is cached max-age=1y immutable. Change it as svc-pages-v2.css.
 */
.svc-page {
  --ai-line: hsl(var(--border));
  --ai-card: hsl(var(--card));
  --ai-muted: hsl(var(--muted-foreground));
  --ai-accent: hsl(var(--primary));
  --ai-accent-soft: hsl(216 57% 55% / 0.12);
  --ai-ok: #34d399;
  --ai-no: #fb923c;
}
.svc-page [id] { scroll-margin-top: 9rem; }
.svc-page .ai-hero { border-bottom: 1px solid var(--ai-line); }
.svc-page .ai-hero .ai-pill { display: inline-flex; margin-bottom: 1.25rem; }
.svc-page .ai-lede-2 { font-size: 1rem; line-height: 1.65; color: var(--ai-muted); margin: -1rem 0 2rem; max-width: 40rem; }
.svc-page .ai-hero .seo-hero-ctas a { min-height: 3.25rem; }
.svc-page .svc-glance { padding: 2.5rem 0; border-bottom: 1px solid var(--ai-line); }

/* FAQ in two columns, like the AI pages */
.svc-page #faq .ai-wrap { max-width: 72rem; }
.svc-page #faq h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }

/* related links as cards */
.svc-page .seo-related-cluster ul a {
  display: block; padding: 0.85rem 1rem; border: 1px solid var(--ai-line); border-radius: 0.75rem;
  background: var(--ai-card); text-decoration: none !important; color: #fff !important;
  transition: border-color .2s;
}
.svc-page .seo-related-cluster ul a::after { content: " \2192"; color: var(--ai-accent); }
.svc-page .seo-related-cluster ul a:hover { border-color: hsl(216 57% 55% / 0.55); }

.svc-page a:focus-visible, .svc-page summary:focus-visible {
  outline: 2px solid var(--ai-accent); outline-offset: 3px; border-radius: 0.5rem;
}