/* Laptop responsive scaling.
   The site is designed for ~1920px wide screens; most sizing (text, spacing,
   buttons, max-widths) is rem-based. Scaling the root font-size with the
   viewport makes the whole layout shrink proportionally on laptop screens,
   matching the desktop proportions. vw-based headings already scale natively.
   16px / 1920px = 0.8333vw. Clamped so text never becomes unreadably small. */
@media (min-width: 1024px) and (max-width: 1919.98px) {
  html {
    font-size: clamp(10.5px, 0.8333vw, 16px);
  }
}

/* Navbar: scroll away with the page instead of staying fixed on top */
header.fixed {
  position: absolute !important;
}

/* Pricing table: the sticky plan row was offset for the fixed navbar
   (104px); with the navbar scrolling away, a small gap is enough. */
.pricing-table .sticky {
  top: 16px !important;
}

/* Banner hero — cleaner, more professional heading treatment */
.intro__copy h1 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  max-width: 14em;
  text-wrap: balance;
}

.intro__copy h1 + p {
  max-width: 40ch;
  color: rgba(245, 246, 247, 0.72);
  line-height: 1.65;
}

.intro__copy .text-gradient {
  letter-spacing: 0.16em;
}

.intro__bg > div[aria-hidden] {
  background-color: rgba(4, 4, 4, 0.55) !important;
}