.badge{display:inline-block;margin:0 0 14px;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;padding:5px 10px;border:1px solid var(--green);
  color:var(--green-ink)}
.mark.small{font-size:clamp(46px,9vw,112px)}

.dial{margin:0;text-align:center}
.dial img{display:block;margin:0 auto;width:100%;max-width:264px;height:auto;
  aspect-ratio:1;border-radius:50%;background:#000;
  box-shadow:0 0 0 10px #0b0b0b,0 0 0 13px #6b6d6f,0 16px 40px rgba(0,0,0,.35)}
.dial.big img{max-width:300px}
.dial figcaption{margin-top:24px;font-size:14px;color:var(--dim)}

.band{padding:48px 0 40px}
.band.alt{background:var(--hero)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:34px;counter-reset:s}
.steps li{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  counter-increment:s}
@media (min-width:720px){
  .steps li{grid-template-columns:220px 1fr;gap:36px}
  .steps .dial img{max-width:200px}
}
.steps b{display:block;font-family:var(--disp);font-weight:400;text-transform:uppercase;
  letter-spacing:.12em;font-size:16px;margin-bottom:6px}
.steps b::before{content:counter(s) ". ";color:var(--green-ink)}
.note{margin:30px 0 0;color:var(--dim)}

.trio{display:grid;grid-template-columns:1fr;gap:34px;margin:6px 0 34px}
@media (min-width:720px){.trio{grid-template-columns:1fr 1fr 1fr}
  .trio .dial img{max-width:200px}}

.ask{margin-top:40px;border-left:4px solid var(--green);padding:6px 0 6px 20px}
.ask p{margin:0 0 12px;max-width:62ch}
#install a,.note a{color:var(--green-ink);text-decoration:underline;
  text-underline-offset:2px}