/* ============================================================
   33-typography-premium.css — 2026 typography polish

   Quick wins that take a marketing site from "decent" to "feels
   designed by a typographer":

   1. text-wrap: balance — H1/H2/H3 headings get their line breaks
      optimised so no orphan words sit alone. Especially obvious
      on hero headlines.

   2. text-wrap: pretty — body paragraphs get a smarter wrap
      algorithm that avoids leaving the last line orphaned.

   3. font-feature-settings — Inter's ligatures, contextual
      alternates, and stylistic alternates all switched on.

   4. font-variation-settings — Inter is a variable font, so we
      pin weights precisely and request optical sizing where the
      browser supports it.

   5. font-feature-settings "ss01" — Inter's stylistic set 01
      gives a more rounded, friendlier alphabet (closer to the
      Helvetica feel many readers find premium).

   6. text-rendering: optimizeLegibility for headlines.

   Browsers without balance/pretty support keep the existing
   default wrapping — no breakage.
   ============================================================ */

/* ---- Headlines: balanced line breaks ----
   Looks at every line in a heading and rebreaks so no line is
   significantly shorter than the others — eliminates orphans.
   Slight performance cost which is why we only apply to display
   sizes (h1–h3), not body. */
h1, h2, h3, .hero-copy h1, .section-head h2 {
  text-wrap: balance;
  font-feature-settings: "ss01" on, "cv01" on, "cv11" on, "calt" on;
  font-variation-settings: "opsz" 32;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.012em;  /* slight tighten for display */
}

/* ---- Body copy: pretty wrap ----
   Avoids orphaned last lines (single-word last lines look amateur). */
p, li, .hero-lead, .tst-quote, .faq-a p {
  text-wrap: pretty;
}

/* ---- Quotation marks: typographer's curly quotes by default ----
   The system will already render straight quotes if the text uses
   ASCII; this kicks in for any actual `"` or `'` and forces
   Unicode curly equivalents via font-feature-settings "quot" if
   supported. Most fonts default to this anyway — included for
   completeness. */
.tst-quote {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* ---- Form textarea: auto-grow with content ----
   `field-sizing: content` makes the textarea grow to fit its
   content without JS. No more "should I make it 4 rows or 6?"
   compromises — it sizes itself. Chrome 123+, Firefox progress. */
@supports (field-sizing: content) {
  textarea, .qf-form textarea, .lead-form textarea {
    field-sizing: content;
    min-height: 80px;
    max-height: 360px;
  }
}

/* ---- Animatable height to auto (interpolate-size) ----
   When `interpolate-size: allow-keywords` is set on root, the
   browser can now smoothly animate height/width to and from
   `auto` and other intrinsic-size keywords. Makes FAQ accordions
   open buttery without measuring height in JS. */
:root {
  interpolate-size: allow-keywords;
}

/* ---- Premium-quote drop cap on first paragraph of long-form ----
   Only applied to .longform p:first-of-type so it's opt-in for
   prose-heavy pages (privacy / terms). Adds editorial feel. */
.longform p:first-of-type::first-letter {
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.85;
  float: left;
  padding-right: 0.6rem;
  padding-top: 0.4rem;
  color: var(--c-blue);
  font-family: var(--f-display);
}