/* ==========================================================================
   AI PAGE STYLES
   ==========================================================================
   Styles specific to ai.html. Every class here is prefixed
   .ai-* and fully self-contained — nothing on this page depends on a
   class defined in another page's CSS file. This is a deliberate
   choice, not just convention: while building this page, a real bug
   was found where contact.html depended on a class
   (.about-section) that only existed in about.css, which contact.html
   never loaded — so the styling silently did nothing. Keeping every
   class here self-contained and page-prefixed avoids that exact
   mistake happening again.

   Reuses .page-hero, .placeholder-note, .final-cta, .card, and .btn
   directly from components.css with zero changes — only the layout
   patterns unique to this page live here.
   ========================================================================== */


/* ==========================================================================
   SECTION RHYTHM — the alternating tinted/plain background pattern
   used throughout this page, same visual language as every other
   content page on the site.
   ========================================================================== */

.ai-section {
  padding-block: var(--space-5xl);
}

.ai-section.tinted {
  background: var(--color-sand);
}

.ai-section .section-eyebrow {
  display: block;
}


/* ==========================================================================
   PROSE COLUMN — caps line length for comfortable reading, same
   reasoning used on every other long-form page on this site.
   ========================================================================== */

.ai-prose {
  max-width: 680px;
}

.ai-prose p {
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-lg);
}

.ai-prose p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   CROSS-LINK NOTE — used once, pointing to Privacy Policy and FAQ for
   the complete, authoritative data-handling details rather than
   restating them here.
   ========================================================================== */

.ai-cross-links {
  margin-top: var(--space-lg);
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
}

.ai-cross-links a {
  color: var(--color-brand-blue);
  text-decoration: underline;
}


/* ==========================================================================
   TEXT + SCREENSHOT LAYOUT — for the sections where a real screenshot
   exists. Extends the same text+visual pairing already used on the
   homepage's feature cards, rather than inventing a new pattern for
   this page specifically.
   ========================================================================== */

.ai-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 900px) {
  .ai-section-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  /* Alternates image side for visual rhythm down the page, same
     reasoning as the homepage's alternating sections */
  .ai-section-grid.image-left {
    grid-template-columns: 1fr 1.2fr;
  }
  .ai-section-grid.image-left .ai-prose {
    order: 2;
  }
  .ai-section-grid.image-left .app-screenshot {
    order: 1;
  }
}