/* Landing page: /hire-a-trivia-host/ only. Loaded via the pageCss front matter.

   Kept out of styles.css on purpose: /css/* is cached for 7 days, and the
   Cloudflare edge kept serving the old styles.css after deploy, so rules added
   there do not reach visitors for up to a week. A new file has no stale copy.
   After editing this file, bump the ?v= on pageCss in hire-a-trivia-host.njk.

   Scoped with lp- so nothing here touches existing pages. The hero is sized
   to its content rather than 100svh, so the quote button stays above the fold
   on short phone screens. */
/* The gap under the fixed nav lives on the wrapper, not the banner, because
   the banner removes itself when it expires (data-expires). */
.lp-top { padding-top: var(--nav-h); }
.lp-banner {
  background: var(--yellow); color: var(--text);
  font-family: var(--font-head); font-weight: 700; font-size: .85rem; line-height: 1.35;
  text-align: center; padding: .6rem var(--pad-h);
}
.lp-hero { position: relative; overflow: hidden; color: #fff; background: var(--bg-dark); }
.lp-hero-media { position: absolute; inset: 0; z-index: 0; }
.lp-hero-media picture { display: block; height: 100%; }
.lp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.lp-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,12,15,.92) 0%, rgba(10,12,15,.78) 50%, rgba(10,12,15,.45) 100%); }
.lp-hero-content { position: relative; z-index: 1;
  padding-block: clamp(1.5rem, 7vh, 5.5rem) clamp(2rem, 8vh, 6rem); }
.lp-hero h1 { color: #fff; max-width: 18ch; font-size: clamp(1.8rem, 3.6vw + .9rem, 3.7rem); }
.lp-hero-sub { font-size: clamp(1rem, .5vw + .9rem, 1.25rem); line-height: 1.55;
  color: rgba(255,255,255,.88); max-width: 46ch; margin-top: 1rem; }
.lp-hero-btns { margin-top: 1.5rem; }
.lp-hero-micro { margin-top: 1.1rem; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.8); }
.lp-hero-micro a, .section--closing .micro a[href^="tel:"] {
  color: var(--yellow); font-weight: 700; text-decoration: underline; white-space: nowrap; }

@media (max-width: 600px) {
  .lp-banner { font-size: .78rem; padding-block: .5rem; }
  .lp-hero-scrim { background: linear-gradient(rgba(10,12,15,.82), rgba(10,12,15,.9)); }
  .lp-hero-content { padding-block: 1.25rem 2.25rem; }
  .lp-hero h1 { line-height: 1.08; }
  .lp-hero-btns { gap: .6rem; }
  .lp-hero-btns .btn { flex: 1 1 100%; justify-content: center; padding-block: 14px; }
}

.lp-split--flip .split-media { order: 2; }
@media (max-width: 860px) { .lp-split--flip .split-media { order: 0; } }

.lp-callout { margin-top: 1.75rem; padding-left: 1.1rem; border-left: 3px solid var(--yellow);
  font-size: 1.15rem; font-weight: 700; color: var(--text); }
.lp-trust { margin-top: 1.5rem; font-family: var(--font-head); font-weight: 700; color: var(--blue); }

.lp-checks { margin-top: 1.75rem; display: grid; gap: .85rem; }
.lp-checks li { position: relative; padding-left: 2rem; color: var(--text-on-dark); }
.lp-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 800; }