/* ============================================================
   SERGEBOT — content pages (service, industry, pilot, location, founder).
   Loaded after site.css and before site-ui.css. Typography mirrors the
   blog post body (blog/blog.css) so pages read as one site.
   Bump the ?v= query when this file changes.
   ============================================================ */

/* Metric-matched fallbacks for the hero only: the H1 and lead wrap the same before and after the web fonts
   swap in, so phones don't see a layout shift (measured: Sora/Arial 1.07, Manrope/Arial 1.03 at hero weights). */
@font-face { font-family: 'Sora Fallback'; src: local('Arial'), local('Helvetica'), local('Arimo'), local('Liberation Sans'); size-adjust: 107%; }
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('Helvetica'), local('Arimo'), local('Liberation Sans'); size-adjust: 103%; }

.page-hero--content { padding: clamp(120px, 16vh, 160px) 0 56px; }
.page-hero-inner { max-width: 820px; }
.page-hero--content h1 { font-family: 'Sora', 'Sora Fallback', sans-serif; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.12; overflow-wrap: break-word; }
.page-hero--content .page-lead { font-family: 'Manrope', 'Manrope Fallback', sans-serif; font-size: 1.12rem; color: var(--text); max-width: 700px; line-height: 1.7; }
.page-tagline { margin-top: 4px; }
.page-tagline strong { color: var(--violet-soft); font-weight: 600; }

/* Founder hero: photo beside the name, wraps above it on narrow screens. */
.page-hero-inner--founder { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; }
.founder-photo { flex: 0 0 auto; width: 200px; }
.founder-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--line-active); background: var(--surface);
}

.page-article { padding: 56px 0 24px; }
.prose { max-width: 720px; }
.prose p, .prose li { color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.prose p { margin-bottom: 22px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--violet-soft); text-decoration: underline; text-decoration-color: rgba(196,181,253,.45); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.prose a:hover { color: #fff; text-decoration-color: currentColor; }
.prose a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
.prose h2 {
  font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); margin: 48px 0 16px; padding-left: 16px; border-left: 3px solid var(--violet); line-height: 1.3;
}
.prose h3 { font-family: 'Sora', sans-serif; font-size: 1.08rem; font-weight: 600; color: var(--text); margin: 28px 0 10px; line-height: 1.4; }
.prose ul, .prose ol { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.prose ul { list-style: none; }
.prose ul li { padding-left: 22px; position: relative; }
.prose ul li::before { content: "\2192"; position: absolute; left: 0; color: var(--violet); font-size: .9rem; }
.prose ol { padding-left: 1.4em; }
.prose ol li::marker { color: var(--violet); font-family: 'Fira Code', monospace; font-size: .9rem; }

.page-faq { margin-top: 56px; padding-top: 8px; border-top: 1px solid var(--line); }
.page-faq h3 { margin-top: 26px; }
.page-faq p { margin-bottom: 0; }

.page-cta {
  margin: 56px 0 80px; padding: 36px 32px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(18,18,26,0.99) 0%, rgba(9,9,14,1) 100%);
  border: 1px solid rgba(167,139,250,0.25);
}
.page-cta h2 { margin-top: 0; border-left: 0; padding-left: 0; }
.page-cta p:last-child { margin-bottom: 0; }
.page-cta .page-cta-links { font-size: 1.08rem; color: var(--text); }
.page-cta .page-cta-links a { font-weight: 600; }

@media (max-width: 600px) {
  .page-cta { padding: 26px 20px; }
  .founder-photo { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .prose a { transition: none; }
}