/* Landing-page head (section#hero): status bar + header in the page flow, then the headline block. No hero art, so
   the section takes its content's height instead of the original fixed 810px / 844px. */
.section-hero.vsl-hero { height: auto; }
.vsl-hero .site-header { position: relative; }
.vsl-head { padding: 56px 48px 72px; }
@media (max-width: 767px) {
  .vsl-head { padding: 32px 20px 48px; }
}

/* Headline in the chrome of the site's 3D renders: white at the top of every line, through silver, to gunmetal at the
   bottom. Desktop words are inline-blocks (the word reveal), so each gets the gradient; the phone headline is one text
   run, so its gradient repeats once per line (1lh). */
.vsl-head h1 .reveal-word,
.vsl-head h1:not(:has(.reveal-word)) {
  background: linear-gradient(180deg, #fff 15%, #c3c7cd 50%, #6e737b 100%) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The description and chip a step brighter than the original's 64% white, so the top reads at a glance. */
.vsl-head .hero-description-reveal p { color: rgba(255, 255, 255, 0.82); }

/* The Apply button under the description: centred on desktop, full width on phones (the original hero's pill). */
.vsl-hero-cta { justify-content: center; margin-top: 8px; }
.vsl-hero-cta > button { min-width: 240px; }
@media (max-width: 767px) {
  .vsl-hero-cta > button { flex: 1 1 auto; }
}
@media (max-width: 767px) { .vsl-hero-cta { width: 100%; } }