/* Versioned homepage typography and color system. */
:root {
  --type-display: clamp(2.8rem, 4.7vw, 4.5rem);
  --type-section-title: clamp(2.25rem, 4vw, 3.25rem);
  --type-card-title: clamp(1.2rem, 1.7vw, 1.38rem);
  --type-lead: clamp(1.04rem, 1.35vw, 1.16rem);
  --type-body: 1rem;
  --type-label: clamp(0.92rem, 1.05vw, 1rem);
  --text-heading: #07111f;
  --text-label: #155bff;
  --text-body: #52647a;
  --text-heading-dark: #f7fbff;
  --text-label-dark: #79d3ff;
  --text-body-dark: #b4c5d8;
}

body {
  color: var(--text-body);
  font-size: var(--type-body);
}

h1,
h2,
h3,
h4 {
  color: var(--text-heading);
  font-weight: 750;
}

.eyebrow,
.section-head .eyebrow,
.hero .eyebrow,
.final-cta .eyebrow {
  margin-bottom: 16px;
  color: var(--text-label);
  font-size: var(--type-label);
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.hero .eyebrow {
  color: var(--text-label-dark);
  letter-spacing: 0.08em;
}

.gtm-hero h1 {
  margin-bottom: 24px;
  color: var(--text-heading-dark);
  font-size: var(--type-display);
  line-height: 1.01;
  letter-spacing: -0.05em;
}

.gtm-hero .hero-sub {
  color: var(--text-body-dark);
  font-size: clamp(1.08rem, 1.55vw, 1.24rem);
  line-height: 1.65;
}

.gtm-hero .hero-note {
  color: #9fb2c8;
  font-size: var(--type-body);
  line-height: 1.65;
}

.section-head h2,
.logic-grid h2,
.git-grid h2,
.rca-grid h2,
.rca-story h2,
.twin-section .section-head h2,
.final-cta h2 {
  margin-bottom: 18px;
  color: var(--text-heading);
  font-size: var(--type-section-title);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.twin-section .section-head > .eyebrow {
  font-size: var(--type-label);
  letter-spacing: 0.1em;
}

.section-head > p:not(.eyebrow),
.logic-grid > div > p:not(.eyebrow),
.git-grid > div > p:not(.eyebrow),
.rca-story-grid > div > p:not(.eyebrow),
.twin-section .section-head > p:not(.eyebrow),
.final-cta .container > p:not(.eyebrow) {
  color: var(--text-body);
  font-size: var(--type-lead);
  line-height: 1.68;
}

.platform-card h3,
.program-card h3,
.business-proof-card h3,
.trust-card h3,
.price-card h3,
.impact-card h2,
.twin-benefits h3 {
  color: var(--text-heading);
  font-size: var(--type-card-title);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.platform-card p,
.program-card p,
.business-proof-card p,
.trust-card p,
.price-card p,
.impact-card p,
.twin-benefits p,
.coverage-note,
.pricing-maturity-note {
  color: var(--text-body);
  font-size: var(--type-body);
  line-height: 1.65;
}

.platform-card-top em,
.program-card > span,
.business-proof-card > span,
.trust-card > span,
.price-kicker {
  color: var(--text-label);
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.09em;
}

.platform-card,
.platform-card.rez-card,
.platform-card.shell-card {
  border-top-color: #155bff;
}

.platform-card-top span,
.rez-card .platform-card-top span,
.shell-card .platform-card-top span {
  background: #155bff;
}

.program-card-blue,
.program-card-green,
.program-card-orange,
.program-card-slate,
.program-card-cyan,
.program-card-red {
  --program-accent: #155bff;
}

.section-navy h1,
.section-navy h2,
.section-navy h3,
.section-navy h4,
.business-proof-section h2,
.business-proof-section h3,
.final-cta h2 {
  color: var(--text-heading-dark);
}

.section-navy .eyebrow,
.business-proof-section .eyebrow,
.final-cta .eyebrow {
  color: var(--text-label-dark);
}

.section-navy p,
.section-navy .rca-story-grid > div > p:not(.eyebrow),
.business-proof-section .section-head > p:not(.eyebrow),
.business-proof-section .business-proof-card p,
.final-cta .container > p:not(.eyebrow) {
  color: var(--text-body-dark);
}

.btn-primary {
  color: var(--text-heading);
  background: #f28a18;
}

@media (max-width: 700px) {
  :root {
    --type-display: clamp(2.8rem, 12vw, 3.3rem);
    --type-section-title: clamp(2.15rem, 9vw, 2.65rem);
    --type-card-title: 1.24rem;
    --type-lead: 1.04rem;
    --type-label: 0.92rem;
  }

  .eyebrow,
  .section-head .eyebrow,
  .hero .eyebrow,
  .final-cta .eyebrow {
    letter-spacing: 0.075em;
  }

  .hero .eyebrow {
    font-size: 0.86rem;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  .gtm-hero .hero-sub,
  .gtm-hero .hero-note {
    font-size: 1rem;
    line-height: 1.68;
  }
}

@media (max-width: 360px) {
  .hero .eyebrow {
    white-space: normal;
  }
}