/* Typography-only preview: Sora display type over existing Focusly light theme.
   Leave body copy, forms, color tokens, spacing, and timer behavior unchanged.
   Remove this stylesheet link to restore the previous typography. */
:root {
  --focusly-display-font: "Sora", "DM Sans", Manrope, ui-sans-serif, system-ui, sans-serif;
}

/* Brand and high-visibility headings, on the landing page and inside the app. */
.brand,
#home h1,
#home h2,
#home h3,
.signup h1,
.signup h2,
.content h1,
.content h2,
.content h3,
.section h2,
.achievement-card h4,
.stat .num,
.timer-time,
#guestStudyTimer .guest-clock {
  font-family: var(--focusly-display-font);
}

/* Sora is wider than the original headline font; give it natural tracking
   and a safe line-height rather than crowding large glyphs. */
.landing-v4 .hero-copy h1 {
  letter-spacing: -0.055em;
  line-height: 1.06;
}
.landing-v4 .hero-copy h1 .focus-word {
  letter-spacing: -0.06em;
}

/* Keep the digital readouts stable while the timer is running. */
#guestStudyTimer .guest-clock,
.timer-time,
.stat .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

@media (max-width: 420px) {
  .landing-v4 .hero-copy h1 {
    letter-spacing: -0.055em;
    overflow-wrap: normal;
  }
}