/* ============================================
   THEME - site-wide type scale and section rhythm

   The homepage header and hero are the reference. Their values become the
   tokens below, and every shared heading, paragraph and section on every
   page reads them:
     headings   Sora 400, indigo #3230E0, highlighted phrase #FF668D
     h1 48px · h2 40px · h3 20px (500), stepping down at 1280/1024/640px
     body       Noto Sans 16px / 30px, #101010 · secondary text #4F3D72
     sections   50px top and bottom at every screen size

   This file loads after style.css, responsive.css, pages.css, header.css
   and hero.css, so it replaces the older per-component sizes those files
   still carry. Section-specific styles (e.g. css/tools.css) load after it
   and only add layout - they take their type from these tokens.
   ============================================ */

:root {
  --ink: #101010;
  --ink-muted: #4f3d72;
  --heading: #3230e0;
  --heading-accent: #ff668d;
  --heading-strong: #230d4f;

  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-body: 1.875; /* 30px at 16px */

  --section-pad-y: 50px;
  --section-head-gap: 30px;
}

@media (max-width: 1280px) {
  :root { --fs-h1: 42px; --fs-h2: 36px; }
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 32px;
    --section-head-gap: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 26px;
    --fs-h3: 18px;
    --section-head-gap: 32px;
  }
}

/* ---------- Body text ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* ---------- Section rhythm ----------
   One vertical padding for every content section. The homepage hero and the
   interior page banner size themselves around the fixed header, and the
   CTA band is a deliberately slim band, so they keep their own. Variants adjust the custom properties rather than the padding. */
section:not(.bf-hero):not(.page-hero):not(.cta-band) {
  padding-top: var(--section-pad-top, var(--section-pad-y));
  padding-bottom: var(--section-pad-bottom, var(--section-pad-y));
}

.page-section--flush-top { --section-pad-top: 0px; }

/* ---------- Section heads ---------- */
.section-header,
.page-section__head {
  margin-bottom: var(--section-head-gap);
}

.page-section__head.page-section__head--sm { margin-bottom: 24px; }

.section-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Indigo on light grounds; the on-dark accent switch in pages.css turns
     this warm inside dark sections. */
  color: var(--color-gold-600);
}

/* h2 - section titles on the homepage, interior pages and CTA bands */
.section-title,
.page-section__head h2,
.final-cta__title,
.cta-band__text h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--heading);
}

.page-section__head--sm h2 { font-size: var(--fs-h3); font-weight: 500; margin: 0; }

/* The highlighted phrase: the hero's pink, upright and at the same weight. */
.section-title em,
.page-section__head h2 em,
.final-cta__title em,
.cta-band__text h2 em,
.page-hero__title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--heading-accent);
}

/* Titles on the dark purple sections */
.founder .section-title,
.final-cta__title,
.cta-band__text h2 {
  color: #ffffff;
}

.section-subtitle,
.page-section__head p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.section-header:last-child,
.page-section__head:last-child { margin-bottom: 0; }

/* h1 - interior page banners and the legal pages */
.page-hero__title,
.legal h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.legal h1 { color: var(--heading); }

.page-hero__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* h3 - card and step titles */
.link-card__title,
.case-card__title,
.post-card__title,
.pilot-steps h3,
.service-card h3,
.security-item h3,
.proc-split__col h3,
.team-roster__tile h3,
.cost__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}