.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) auto;
  grid-template-areas: "text window phone";
  align-items: center;
  gap: var(--sp-4) clamp(28px, 3.4vw, 64px);
  min-height: calc(100svh - 64px);
  padding: var(--sp-3) var(--page-gutter) var(--sp-4);
  overflow-x: clip;
}

.hero-text {
  grid-area: text;
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}

.hero-window {
  grid-area: window;
}

.hero-phone {
  grid-area: phone;
}

.hero-phone .phone-screen {
  height: min(68svh, 640px);
}

.hero-kicker {
  color: var(--gold);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.thesis-after {
  margin-top: var(--sp-2);
  color: var(--gold-bright);
  font-size: 0.62em;
  letter-spacing: 0.06em;
}

.hero-thesis {
  display: grid;
  font-family: var(--font-head);
  font-size: var(--fs-thesis);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.thesis-above {
  color: var(--crimson);
  padding-bottom: var(--sp-2);
}

.thesis-below {
  color: var(--ivory);
  padding-top: var(--sp-2);
}

.thesis-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-bright) 60%, transparent);
  box-shadow: 0 0 12px 1px rgba(230, 196, 111, 0.55);
}

.thesis-fall {
  position: absolute;
  left: clamp(120px, 12vw, 180px);
  top: 0;
  width: 0;
  height: 0;
}

.thesis-bullet,
.thesis-gem {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
}

.thesis-bullet {
  background: var(--crimson);
  border: 2px solid #ffe3e7;
  box-shadow: 0 0 12px rgba(255, 107, 125, 0.9);
  opacity: 0;
  transform: rotate(45deg);
}

.thesis-gem {
  background: var(--gold-bright);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  filter: drop-shadow(0 0 8px rgba(243, 212, 136, 0.9));
}

.hero-lead {
  max-width: 30em;
  color: var(--ivory-mid);
}

@media (max-width: 1240px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 250px auto;
    gap: var(--sp-3) 24px;
  }

  .hero-phone .phone-screen {
    height: min(66svh, 520px);
    min-height: 400px;
  }

  .hero-logo {
    width: 112%;
    margin-top: -24%;
  }

  .play-card {
    gap: var(--sp-2);
    padding: var(--sp-2);
  }

  .play-card .qr-code {
    width: 132px;
    height: 132px;
    padding: 8px;
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    grid-template-areas: "text window" "phone phone";
    min-height: 0;
  }

  .hero-phone {
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "window" "text" "phone";
  }

  .hero-window {
    justify-self: center;
    width: min(100%, 320px);
  }
}