.brand{font-size:clamp(34px,3.6vw,46px)}
.brand .icon{width:1.9em;height:1.9em}

.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:clamp(28px,6vw,72px)}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero .headline{font-size:clamp(52px,7.4vw,104px)}
.note{font-size:15px;color:var(--ink-2)}
.hero-device img{width:100%}

/* Each idea gets its own sheet: the line beside the device, never on it. */
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin-top:clamp(88px,11vw,150px)}
.feature-text{display:flex;flex-direction:column;gap:16px}
.feature .headline{font-size:clamp(40px,5vw,72px)}
.device{justify-self:center;width:100%}
.device-phone{max-width:min(300px,78vw)}
.device-cover{max-width:380px}
.device-pad{max-width:440px}

.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:420px;margin-top:6px}
.swatches img{width:100%;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .16))}

.closer{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:clamp(96px,12vw,160px)}
.closer .headline{font-size:clamp(40px,5vw,72px)}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
  .hero-device{margin-right:calc(var(--pr) * -.5)}
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
  .feature:nth-of-type(odd) .feature-text{order:2}
}