/* Cormorant text remains accessible beneath each attached crayon canvas. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('../assets/fonts/cormorant-garamond/cormorant-garamond-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url('../assets/fonts/cormorant-garamond/cormorant-garamond-semibold-italic.woff2') format('woff2');
}

/* A crayon heading is real text, laid out by the browser and left
   transparent; the canvas draws each of its characters where they sit. It
   stays selectable, findable and read aloud. */
.crayon-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
  color: transparent;
}
/* Measured baseline: 0.008px below the box at 1440. The existing 24px
   gap needs 14.65px (rounded up to a layout unit); the phone's 26px gap
   already exceeds 0.42em. */
.crayon-heading:has(+ .sectionHead__lead) {
  margin-block-end: max(0px, calc(0.42em - var(--raw-spacing-md) + 0.02px));
}
.crayon-heading ::selection { color: var(--foreground); background: var(--raw-mint-a24); }
.crayon-heading.t-display {
  font-size: 5.75rem;
  line-height: 1.02;
}
@media (max-width: 1024px) { .crayon-heading.t-display { font-size: 4.25rem; } }
@media (max-width: 640px)  { .crayon-heading.t-display { font-size: 2.75rem; line-height: 1.05; } }

#product-heading, #uses-heading, #faq-heading {
  position: relative;
}
.crayon-ink {
  position: absolute;
  pointer-events: none;
  max-width: none;
}
@media (max-width: 1024px) { .hero__titles { position: relative; } }