/* Laptop / desktop layout only.
   Mobile and tablet use styles.css by itself. */

.section-pad{
  padding:clamp(4rem,7vw,6.5rem) clamp(3rem,5vw,5rem);
}

h1{
  font-size:clamp(4.4rem,7.2vw,6.6rem);
  max-width:10ch;
}

h2{
  font-size:clamp(3rem,4.8vw,4rem);
  max-width:12ch;
}

.hero{
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:clamp(3rem,6vw,6rem);
  min-height:calc(100vh - 74px);
}

.hero-text{
  font-size:clamp(1.18rem,1.7vw,1.42rem);
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
}

.hero-points span{
  text-align:left;
}

.button-row{
  display:flex;
  flex-wrap:wrap;
}

.hero-visual{
  justify-content:center;
}

.phone-card{
  width:min(290px,24vw);
  padding:9px;
  border-radius:34px;
}

.phone-card img{
  border-radius:26px;
}

.hero-phone{
  width:min(315px,27vw);
}

.split-section{
  grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);
  gap:clamp(3rem,6vw,6rem);
}

.split-section.reverse{
  grid-template-columns:minmax(260px,.88fr) minmax(0,1.12fr);
}

.split-section.reverse .split-copy{order:2}
.split-section.reverse .split-visual{order:1}

.split-copy{
  max-width:620px;
}

.problem p:not(.eyebrow),
.split-copy p,
.cta p{
  font-size:1.2rem;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:end;
}

.section-heading.centered{
  display:block;
  text-align:center;
}

.section-heading.centered h2{
  max-width:900px;
  margin:0 auto;
}

.feature-grid{
  grid-template-columns:repeat(4,1fr);
}

.use-list{
  grid-template-columns:repeat(3,1fr);
}

.footer{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding:2rem clamp(3rem,5vw,5rem);
  align-items:center;
}

.footer nav{
  margin-top:0;
}

/* Wide laptop refinement */
@media (min-width:1200px){
  .phone-card{
    width:300px;
  }
  .hero-phone{
    width:330px;
  }
}