.wrap.wide { max-width: 1080px; }
.hero { display: grid; gap: 28px; align-items: center; margin: 4px 0 40px; }
.hero h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; max-width: 18ch; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.shot { margin: 0; display: flex; justify-content: center; }
.shot img { width: min(320px, 80vw); border-radius: 28px; border: 1px solid var(--line-2); box-shadow: 0 12px 32px rgba(19, 52, 59, .14); }
.shot.pair { gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.shot.pair img { width: min(260px, 42vw); }
.grid { display: grid; gap: 14px; }
.card h3 { margin-top: 0; }
.why ul { padding-left: 20px; }
.why li { margin: 10px 0; }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.15fr .85fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #install .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}