/* ConcertCut marketing site — the small shared layer Tailwind utilities can't express.
   Everything visual lives in Tailwind classes (js/tailwind.config.js holds the tokens);
   this file only covers state that js/site.js toggles by class name plus a few globals. */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* anchors land below the fixed 5rem header */

/* Honeypot field (site.js also injects its own). Off-screen, never display:none, so bots still fill it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Waitlist feedback — site.js REPLACES className with "waitlist-msg ok|err", so style by these names only. */
.waitlist-msg { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 18px; letter-spacing: 0.02em; }
.waitlist-msg:empty { display: none; }
.waitlist-msg.ok { color: #95d1d5; }
.waitlist-msg.err { color: #FF3366; }

/* Mobile nav: site.js toggles .open on .nav-links when .nav-burger is clicked. */
.nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 5rem; left: 0; right: 0;
  padding: 1rem; gap: 0.25rem; background: #12151C; border-top: 1px solid #1F2430; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8); }
.nav-links.open a { display: block; border-radius: 0.25rem; }
@media (min-width: 768px) {
  .nav-links.open { position: static; flex-direction: row; padding: 0; gap: 1.5rem; background: none; border: 0; box-shadow: none; }
}

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Hero Headline — maximized font size for 7-column layout, strictly prevented from wrapping */
.hero-title {
  font-size: clamp(22px, 6.0vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
@media (min-width: 640px) {
  .hero-title {
    font-size: clamp(34px, 4.8vw, 42px);
    line-height: 1.08;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: clamp(40px, 3.4vw, 46px);
    line-height: 1.06;
  }
}
@media (min-width: 1280px) {
  .hero-title {
    font-size: 48px;
    line-height: 1.06;
  }
}


/* ── Mobile type scale ──
   Headline utilities (text-display-hero / text-headline-xl / text-headline-lg) carry desktop sizes and
   the pages set no responsive variants, so on a phone they ran 5–6 lines tall. Tailwind's play-CDN
   <style> is injected AFTER this file, so a bare class can't beat a utility; the doubled selector
   (0,2,0) wins over the utility (0,1,0) without !important. */
@media (max-width: 639px) {
  .text-display-hero.text-display-hero { font-size: 38px; line-height: 44px; letter-spacing: -0.02em; }
  .text-headline-xl.text-headline-xl   { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
  .text-headline-lg.text-headline-lg   { font-size: 28px; line-height: 36px; }
  /* Waitlist cards: Cloudflare Turnstile's flexible widget needs ≥300px; p-unit-8 left it ~279px
     and the widget spilled past the card edge. */
  #waitlist .p-unit-8 { padding: 1.5rem 1.25rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .text-display-hero.text-display-hero { font-size: 50px; line-height: 58px; }
  .text-headline-xl.text-headline-xl   { font-size: 38px; line-height: 46px; }
}

/* "US only for now" note under the waitlist forms (site.js geoBanner) */
.geo-note { margin-top: .75rem; font-size: .85rem; line-height: 1.4; opacity: .75; }