/*
  www/css/hero-banner.css
  The hero's headline block: a stencil kicker plate, the big lowercase
  headline, and the slanted dark sticker tag with lime text (the original
  v1 treatment, ported unchanged). The fly-in / stamp is driven by js/hero.js.
*/

/* ---------- Stencil kicker plate ---------- */
.kicker {
  display: inline-flex; gap: 10px; align-items: center; margin-bottom: 20px; padding: 9px 16px 8px;
  background: var(--ink); color: var(--ghost);
  font: 400 14px/1 var(--f-stencil); letter-spacing: .2em; text-transform: uppercase;
  /* Clipped corners, like a cut stencil plate. */
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transform: rotate(-1.5deg);
}

/* ---------- Headline + sticker tag ---------- */
.hero__title {
  font: 400 clamp(52px, 6.8vw, 112px)/.88 var(--f-display); letter-spacing: -.03em; text-transform: lowercase;
  color: var(--ghost); text-shadow: 5px 6px 0 var(--ink);
}
.hero__title .line { display: block; width: max-content; transform-origin: 30% 60%; }

.hero__title-alt {
  display: inline-block; margin-top: 18px; padding: 10px 16px 8px; border-radius: 8px;
  background: var(--ink); color: var(--limao); text-shadow: none;
  font: 400 clamp(20px, 2.3vw, 34px)/1 var(--f-stencil); letter-spacing: .02em; text-transform: uppercase;
  transform: rotate(-2.5deg);
}

.hero__sub { max-width: 440px; margin: 18px 0 26px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; font-weight: 600; text-shadow: 0 2px 0 rgba(10, 17, 24, .25); }
.hero .signup__note { color: var(--ghost); }

@media (max-width: 860px) {
  .kicker { font-size: 11px; letter-spacing: .14em; white-space: nowrap; padding: 8px 12px 7px; }
  .hero__title { text-shadow: 3px 4px 0 var(--ink); }
}