/* =======================================================
   typography.css — type scale + reveal utilities
   ======================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
}

h1,
.h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

h2,
.h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

h3,
.h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.25rem;
  font-weight: 500;
}

p {
  max-width: 62ch;
}

.lead {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--muted-text);
  max-width: 56ch;
}

.section--light .lead,
.section--surface-2 .lead {
  color: var(--muted-text-light);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* on light surfaces, fall back to a deep amber so the yellow accent stays legible */
.section--light .eyebrow,
.section--surface-2 .eyebrow,
.process .eyebrow,
.faq .eyebrow,
.pricing-preview .eyebrow {
  color: var(--accent-deep);
}

.section--light .eyebrow::before,
.section--surface-2 .eyebrow::before,
.process .eyebrow::before,
.faq .eyebrow::before,
.pricing-preview .eyebrow::before {
  background: var(--accent-deep);
}

.section--light em,
.section--surface-2 em,
.process em,
.faq em {
  color: var(--accent-deep);
}

.section--light .draw-line::after,
.section--surface-2 .draw-line::after,
.process .draw-line::after,
.faq .draw-line::after {
  background: var(--accent-deep);
}

.display {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.mono {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  letter-spacing: 0;
}

strong, b {
  font-weight: 600;
}

em {
  font-style: italic;
  color: var(--accent);
}

/* word-level reveal (manual span wrapping in JS) */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  padding-inline: 0.04em;
}

.reveal-word > span {
  display: inline-block;
  transform: translateY(105%);
  will-change: transform;
}

.reveal-word.is-visible > span {
  transform: translateY(0);
  transition: transform 900ms var(--ease-out);
}

/* stagger via custom prop */
.reveal-word.is-visible > span {
  transition-delay: calc(var(--i, 0) * 35ms);
}

/* underline that draws itself */
.draw-line {
  position: relative;
  display: inline-block;
}

.draw-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08em;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ease-out);
}

.draw-line.is-visible::after {
  transform: scaleX(1);
}

/* text-balance headings for nicer wrapping */
h1, h2, .h1, .h2 {
  text-wrap: balance;
}

p.lead {
  text-wrap: pretty;
}