/* freshpilot — shared by the 8 content pages. Loads after site.css. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

h1 { font-size: clamp(36px, 5vw, 52px); }

/* height:auto is load-bearing, not cosmetic. Every <img> now carries intrinsic
   width/height attributes so the browser can reserve space before the file
   lands (the CLS fix). But those attributes also map to the CSS width/height
   properties at low specificity, so with a stylesheet constraining only the
   width, the height attribute wins as a LITERAL pixel value and stretches the
   image -- the homepage hero rendered 440x1320 instead of 440x660. height:auto
   hands sizing back to the intrinsic aspect ratio.

   Inline `style` still overrides this, which is what the two deliberate
   exceptions rely on: smartlocker.jpg (height:100% + object-fit:cover) on
   index.html, and sarix-logo.png (height:128px) on about/integrations.

   Stays in content.css rather than site.css because the three legal pages
   load legal.css and contain no images at all. */
img { max-width: 100%; height: auto; display: block; }

h2 { font-size: clamp(28px, 3.5vw, 38px); }

.eyebrow {
  display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--forest); background: var(--forest-light);
  padding: 6px 18px; border-radius: var(--radius-full);
}

.section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.section-header h2 { margin-bottom: 12px; }

.section-header p { font-size: 17px; color: var(--bark-soft); line-height: 1.65; }

.page-hero h1 { max-width: 700px; margin: 0 auto 16px; }

.story-text { font-size: 17px; color: var(--bark-soft); line-height: 1.75; }

.story-text p + p { margin-top: 20px; }

.story-text strong { color: var(--bark); font-weight: 600; }

.cta-section {
  background: var(--bark); border-radius: var(--radius-xl);
  padding: 64px 48px; text-align: center; color: var(--cream);
}

.cta-section .btn-group { justify-content: center; }

@media (max-width: 1000px) {
  .lang-switch { display: none; }
  .cta-section { padding: 48px 28px; }
  .mobile-lang-row { display: flex !important; }
}