/* Focused refinement layer: clearer first-screen hierarchy without replacing the existing visual system. */
.hero {
  min-height: 650px;
  padding: 78px 0 88px;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(44px, 4.5vw, 60px);
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.lead { color: #b1b9b4; }

.hero-facts {
  display: flex;
  align-items: flex-start;
  margin-top: 32px;
  border-block: 1px solid var(--line);
}

.hero-facts span {
  flex: 1;
  padding: 14px 14px 14px 0;
  color: #87918b;
  font-size: 11px;
}

.hero-facts span + span {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.hero-facts b {
  display: block;
  margin-bottom: 2px;
  color: #dbe2de;
  font-size: 12px;
}

.fineprint {
  margin-top: 14px;
  color: #7c8881;
}

.product-panel > a {
  padding: 16px 20px;
  transition: background .18s, color .18s;
}

.product-panel > a:hover {
  background: #1b2520;
  color: var(--green);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 70px 0;
    gap: 48px;
  }
}

@media (max-width: 600px) {
  .hero { padding-top: 48px; }
  .hero h1 {
    font-size: 38px;
    letter-spacing: -.035em;
  }
  .hero-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-facts span { padding: 12px 10px 12px 0; }
  .hero-facts span + span { padding-left: 10px; }
  .hero-facts span:last-child {
    grid-column: 1 / -1;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}