/* AI Solutions pages layout, v1 (24 Sep 2026).
 * Loaded after index-*.css and site-layout.css on the AI pages only.
 * Versioned filename on purpose: .css is served max-age=1y immutable,
 * so any change here ships as ai-pages-v2.css, never an edit in place.
 * Scoped to .ai-page so nothing leaks into the rest of the site.
 */

.ai-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;
  color: hsl(var(--foreground));
}
.ai-page [id] { scroll-margin-top: 9rem; }

.ai-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .ai-wrap { padding: 0 1.5rem; } }
.ai-measure { max-width: 46rem; }

/* ---------- section rhythm ---------- */
.ai-sec { padding: 4rem 0; }
@media (min-width: 1024px) { .ai-sec { padding: 5.5rem 0; } }
.ai-band {
  background: linear-gradient(180deg, hsl(240 27% 9%), hsl(240 30% 7%));
  border-top: 1px solid var(--ai-line);
  border-bottom: 1px solid var(--ai-line);
}
.ai-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-accent);
  margin: 0 0 0.75rem;
}
.ai-h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.ai-intro { font-size: 1.125rem; line-height: 1.7; color: var(--ai-muted); margin: 0 0 2rem; max-width: 46rem; text-wrap: pretty; }
.ai-page h3 { text-wrap: balance; }
.ai-sub { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 3rem 0 0.75rem; }

/* ---------- hero ---------- */
.ai-hero { padding: 7.5rem 0 3rem; position: relative; overflow: hidden; }
.ai-hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 60rem; height: 40rem;
  background: radial-gradient(closest-side, hsl(216 57% 55% / 0.18), transparent 70%);
  pointer-events: none;
}
.ai-hero-grid { display: grid; gap: 2.5rem; align-items: center; position: relative; }
@media (min-width: 1024px) {
  .ai-hero { padding: 9rem 0 4.5rem; }
  .ai-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; }
}
.ai-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.ai-lede { font-size: 1.1875rem; line-height: 1.65; color: hsl(240 5% 78%); margin: 0 0 2rem; max-width: 40rem; }
.ai-hero .seo-hero-ctas { margin-bottom: 1.75rem; }
.ai-hero .ai-crumb { font-size: 0.875rem; color: var(--ai-muted); margin-bottom: 1.25rem; }
.ai-hero .ai-crumb a { color: var(--ai-accent); text-decoration: underline; }
.ai-trust { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.ai-trust li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; color: hsl(240 5% 80%);
  padding: 0.4rem 0.75rem; border: 1px solid var(--ai-line); border-radius: 999px;
  background: hsl(240 27% 10% / 0.7);
}
.ai-trust li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ai-ok); }
.ai-hero .service-hero-photo {
  margin: 0; max-width: none;
  box-shadow: 0 30px 80px -30px hsl(216 57% 40% / 0.55);
}

/* ---------- at a glance ---------- */
.ai-glance { display: grid; gap: 1px; background: var(--ai-line); border: 1px solid var(--ai-line); border-radius: 1rem; overflow: hidden; margin: 0; }
@media (min-width: 640px) { .ai-glance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ai-glance { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.ai-glance > div { background: var(--ai-card); padding: 1.1rem 1.25rem; }
.ai-glance dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-accent); font-weight: 600; margin-bottom: 0.35rem; }
.ai-glance dd { margin: 0; font-size: 0.9rem; line-height: 1.5; color: hsl(240 5% 82%); }

/* ---------- jump nav ---------- */
.ai-jump {
  position: sticky; top: 5rem; z-index: 40;
  background: hsl(var(--background) / 0.85);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--ai-line);
  border-bottom: 1px solid var(--ai-line);
}
.ai-jump ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0.6rem 0; overflow-x: auto; scrollbar-width: none; }
.ai-jump ul::-webkit-scrollbar { display: none; }
.ai-jump a {
  display: block; white-space: nowrap; font-size: 0.875rem; font-weight: 500;
  color: var(--ai-muted); padding: 0.4rem 0.85rem; border-radius: 999px;
  transition: color .15s, background-color .15s;
}
.ai-jump a:hover, .ai-jump a[aria-current="true"] { color: #fff; background: var(--ai-accent-soft); }
.ai-jump a.ai-jump-cta { color: #fff; background: var(--ai-accent); margin-left: auto; }

/* ---------- cards ---------- */
.ai-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .ai-grid-2 { grid-template-columns: repeat(2, 1fr); } .ai-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.ai-card {
  display: flex; flex-direction: column;
  background: var(--ai-card); border: 1px solid var(--ai-line); border-radius: 1.25rem;
  padding: 1.75rem; transition: border-color .2s, transform .2s;
}
a.ai-card:hover { border-color: hsl(216 57% 55% / 0.55); transform: translateY(-2px); }
.ai-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; }
.ai-card p { color: var(--ai-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.ai-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: grid; place-items: center;
  background: var(--ai-accent-soft); color: var(--ai-accent); margin-bottom: 1.25rem;
}
.ai-icon svg { width: 1.4rem; height: 1.4rem; }
.ai-card .ai-price-chip {
  margin-top: auto; padding-top: 1.25rem; font-size: 0.875rem; color: hsl(240 5% 80%);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem;
  border-top: 1px solid var(--ai-line); margin-top: auto;
}
.ai-card p + .ai-price-chip { margin-top: 1.25rem; }
.ai-card .ai-price-chip strong { color: #fff; }
.ai-card .ai-more { color: var(--ai-accent); font-weight: 600; white-space: nowrap; }

/* example build cards (built by the conversion pass) */
.ai-page #examples ~ .grid > div, .ai-examples > div { border-radius: 1.25rem; }

/* ---------- price cards ---------- */
.ai-prices { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
@media (min-width: 900px) { .ai-prices { grid-template-columns: repeat(3, 1fr); } }
.ai-prices > div {
  position: relative; background: var(--ai-card); border: 1px solid var(--ai-line);
  border-radius: 1.25rem; padding: 1.75rem; display: flex; flex-direction: column;
}
.ai-prices > div:first-child { border-color: hsl(216 57% 55% / 0.6); box-shadow: 0 0 0 1px hsl(216 57% 55% / 0.25), 0 20px 50px -30px hsl(216 57% 50% / 0.6); }
.ai-prices > div:first-child::before {
  content: "Most teams start here";
  position: absolute; top: -0.75rem; left: 1.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ai-accent); color: #fff; padding: 0.25rem 0.65rem; border-radius: 999px;
}
.ai-prices h3 { font-size: 1.125rem !important; margin: 0 0 0.75rem !important; color: #fff; }
.ai-price { margin: 0 0 1rem !important; line-height: 1.25; }
.ai-price span { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
.ai-price small { font-size: 0.8125rem; color: var(--ai-muted); }
.ai-prices p { color: var(--ai-muted); }
.ai-prices p:last-child { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--ai-line); font-size: 0.8125rem; }

/* ---------- AI check panel ---------- */
.ai-page section[aria-labelledby^="cta-"] {
  margin: 2.5rem 0 0 !important;
  border-radius: 1.5rem !important;
  border: 1px solid hsl(216 57% 55% / 0.45) !important;
  background:
    radial-gradient(40rem 20rem at 100% 0%, hsl(216 57% 55% / 0.16), transparent 70%),
    var(--ai-card) !important;
  padding: 2rem !important;
}
@media (min-width: 768px) { .ai-page section[aria-labelledby^="cta-"] { padding: 2.75rem !important; } }

/* ---------- process timeline ---------- */
.ai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 900px) { .ai-steps { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; } }
.ai-steps li {
  counter-increment: step; position: relative;
  background: var(--ai-card); border: 1px solid var(--ai-line); border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 4rem; color: var(--ai-muted); font-size: 0.9rem; line-height: 1.55;
}
.ai-steps li::before {
  content: counter(step);
  position: absolute; left: 1.1rem; top: 1.15rem;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--ai-accent-soft); color: var(--ai-accent); font-weight: 700; font-size: 0.9rem;
  border: 1px solid hsl(216 57% 55% / 0.4);
}
@media (min-width: 900px) {
  .ai-steps li { padding: 4rem 1.1rem 1.25rem; }
  .ai-steps li::before { left: 1.1rem; top: 1.1rem; }
}
.ai-steps li strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 0.25rem; }

/* ---------- split rows (text + diagram) ---------- */
.ai-split { display: grid; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.ai-split:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .ai-split { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } }
.ai-split p { color: var(--ai-muted); font-size: 1.0625rem; line-height: 1.7; }
.ai-page figure[id^="diagram-"] { margin: 0 !important; }
.ai-diagram-narrow { max-width: 48rem; margin: 2rem auto 0; }
.ai-diagrams { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 1024px) { .ai-diagrams { grid-template-columns: repeat(2, 1fr); } }

/* ---------- who for ---------- */
.ai-fit > div { border-radius: 1.25rem !important; }
.ai-fit ul { list-style: none !important; padding-left: 0 !important; }
.ai-fit li { position: relative; padding-left: 1.75rem; }
.ai-fit li::before {
  position: absolute; left: 0; top: 0.05rem; font-weight: 700;
}
.ai-fit > div:first-child li::before { content: "\2713"; color: var(--ai-ok); }
.ai-fit > div:last-child li::before { content: "\2715"; color: var(--ai-no); }

/* ---------- FAQ ---------- */
.ai-faq { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .ai-faq { grid-template-columns: 0.75fr 1.25fr; gap: 4rem; align-items: start; }
  .ai-faq-side { position: sticky; top: 10rem; }
}
.ai-faq-side p { color: var(--ai-muted); line-height: 1.7; margin: 0 0 1.5rem; }
.ai-faq .max-w-3xl { max-width: none; }

/* ---------- related ---------- */
.ai-page .seo-related-cluster { margin: 0 !important; }
.ai-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;
}
.ai-page .seo-related-cluster ul a::after { content: " \2192"; color: var(--ai-accent); }
.ai-page .seo-related-cluster ul a:hover { border-color: hsl(216 57% 55% / 0.55); }

/* ---------- closing ---------- */
.ai-page #contact { margin: 0 !important; border-radius: 1.5rem !important; padding: 3rem 1.5rem !important; }
.ai-page #contact > p:first-child { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem) !important; font-weight: 800 !important; }

/* ---------- mobile sticky CTA ---------- */
.ai-mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--ai-line);
  transform: translateY(110%); transition: transform .25s ease;
}
.ai-mcta.is-on { transform: none; }
.ai-mcta a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; border-radius: 0.6rem; font-weight: 600; font-size: 0.95rem;
}
.ai-mcta a:first-child { background: var(--ai-accent); color: #fff; flex: 2; }
.ai-mcta a:last-child { border: 1px solid var(--ai-line); color: #fff; }
@media (min-width: 1024px) { .ai-mcta { display: none; } }

/* ---------- motion: scroll-driven reveal, progressive enhancement ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ai-reveal {
      animation: ai-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    @keyframes ai-rise { from { opacity: 0.35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}

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