.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 96px;
  padding-block: 32px 64px;
}
.tally-web .hero h1 {
  font-size: clamp(46px, 5.3vw, 68px);
  line-height: 1.2;
  letter-spacing: normal;
  font-weight: 600;
  margin-bottom: 24px;
}
.hero-gradient {
  background: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .hero-gradient { background-image: none; background-color: var(--brand-cream); }
}
@media (forced-colors: active) {
  .hero-gradient { background: none; color: CanvasText; }
}
.hero-lede { max-width: 370px; color: var(--web-muted); font-size: 18px; line-height: 1.65; }
.hero-actions { margin-top: 28px; }
.trip-scene { width: 100%; max-width: 440px; justify-self: end; }
.trip-scene > img { display: block; width: 100%; height: 448px; border-radius: 28px; object-fit: cover; object-position: 80% center; }
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  padding-block: 40px 48px;
  border-top: 1px solid var(--web-line);
  border-bottom: 1px solid var(--web-line);
}
.benefit-icon { width: 24px; height: 24px; margin-bottom: 16px; color: var(--web-muted); }
.tally-web .benefits h2 { font-size: 24px; font-weight: 550; letter-spacing: normal; }
.tally-web .benefits p { margin-top: 12px; color: var(--web-muted); font-size: 16px; line-height: 1.65; max-width: 300px; }
@media (max-width: 1050px) {
  .hero { gap: 40px; }
  .trip-scene > img { height: 400px; }
  .benefits { gap: 32px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-block: 24px 32px; }
  .hero-copy { text-align: center; }
  .tally-web .hero h1 { font-size: clamp(41px, 10.5vw, 60px); margin-bottom: 24px; }
  .hero-lede { max-width: 350px; margin-inline: auto !important; font-size: 16px; }
  .hero-actions { margin-top: 24px; }
  .trip-scene { justify-self: center; max-width: 440px; }
  .trip-scene > img { height: 280px; object-position: 80% 65%; }
  .benefits { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .benefits > div { position: relative; padding-left: 44px; }
  .benefit-icon { position: absolute; left: 0; top: 2px; }
  .tally-web .benefits h2 { font-size: 22px; }
  .tally-web .benefits p { max-width: 100%; margin-top: 8px; }
}