/* 첫 화면: 큰 이름(Blanket)과 한 줄 소개 → 큰 3D 아이폰(진짜 통화, HyperFrames) → 소개·핵심 사실·버튼.
   넓은 화면에서는 글은 왼쪽, 폰은 오른쪽에 화면 높이만큼 크게 */
.hero {
  padding-block: var(--s-5) var(--s-8);
  overflow-x: hidden;
  overflow-x: clip;
}

.hero-grid {
  display: grid;
  gap: var(--s-5);
}

.hero-title {
  display: grid;
  gap: var(--s-4);
}

.hero-name {
  font-size: var(--t-brand-size);
  line-height: var(--t-brand-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-brand);
}

.hero-tagline {
  font-size: var(--t-tagline-size);
  line-height: var(--t-tagline-lh);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-heading);
}

.hero-device {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
}

.hero-lead {
  max-width: var(--measure);
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  color: var(--text-secondary);
}

.hero-facts {
  border-top: 2px solid var(--line-strong);
}

.hero-facts div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.hero-facts dt {
  font-weight: var(--weight-semibold);
}

.hero-facts dd {
  color: var(--text-secondary);
  font-size: var(--t-small-size);
  line-height: var(--t-body-lh);
}

.hero-status {
  display: grid;
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.hero-status strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

@media (min-width: 64rem) {
  .hero {
    padding-block: var(--s-5) var(--s-9);
  }

  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--s-5);
    row-gap: var(--s-5);
  }

  .hero-title {
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: end;
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
  }

  .hero-lead,
  .hero-facts,
  .hero-actions,
  .hero-status {
    grid-column: 1 / span 6;
  }

  .hero-lead {
    grid-row: 2;
    max-width: 32rem;
  }

  .hero-facts {
    grid-row: 3;
    margin-top: var(--s-2);
  }

  .hero-actions {
    grid-row: 4;
    margin-top: var(--s-2);
  }

  .hero-status {
    grid-row: 5;
    align-self: start;
  }

  .hero-device {
    grid-column: 7 / -1;
    grid-row: 1 / span 5;
    align-self: start;
  }
}