.how {
  padding: 96px max(5vw, 24px);
  background: #fff;
}

.how-head {
  max-width: 1160px;
  margin: 0 auto 54px;
  text-align: center;
}

.how .title {
  margin: 10px 0 0;
}

.how-steps {
  max-width: 1160px;
  margin: 0 auto;
}

.how-step {
  display: grid;
  grid-template-columns: 64px minmax(230px, .8fr) minmax(300px, 1fr);
  align-items: center;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid #e4e6eb;
}

.how-num {
  color: #0869e8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}

.how-copy h3 {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -.055em;
}

.how-copy p {
  margin: 0;
  color: #777982;
  font-size: 15px;
  line-height: 1.55;
}

.how-visual {
  justify-self: end;
  width: min(100%, 420px);
  border: 1px solid #e2e4ea;
  border-radius: 18px;
  background: #fbfbfd;
  box-shadow: 0 12px 35px rgba(17, 24, 39, .04);
}

.how-plancmp { padding: 12px 18px; }
.how-pcrow { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 9px 0; color: #777982; cursor: pointer; }
.how-pcrow-hl { margin: 0 -8px; padding: 9px 8px; border: 1px solid #75a2f0; border-radius: 9px; background: #edf3ff; color: #202124; }
.how-pcrow:focus-visible { outline: 3px solid #0869e8; outline-offset: 3px; border-radius: 9px; }
.how-pname { font-size: 14px; }
.how-pright { display: flex; align-items: baseline; gap: 3px; }
.how-pamount { color: #202124; font-size: 28px; font-weight: 800; letter-spacing: -.06em; }
.how-pmo { color: #202124; font-size: 13px; font-weight: 700; }
.how-pbadge { margin-left: 7px; border-radius: 999px; background: #dfba30; color: #2b260f; padding: 3px 6px; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.how-pay { padding: 22px; }
.how-pay-row, .how-pay-total { display: flex; justify-content: space-between; align-items: center; color: #777982; font-size: 16px; }
.how-pay-row b, .how-pay-total b { color: #202124; }
.how-pay-row + .how-pay-row { margin-top: 9px !important; }
.how-pay-total { margin-top: 18px; padding-top: 22px; border-top: 1px solid #dedfe4; font-size: 18px; }
.how-pay-total b { font-size: 28px; letter-spacing: -.05em; }
.how-pay-btn { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; min-height: 70px; border-radius: 18px; background: #000; color: #fff; font-size: 24px; font-weight: 800; }
.how-pay-btn svg { width: 22px; height: 22px; }
.apple-pay-mark { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif; font-size: 30px; line-height: 1; }
.how-pay-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.how-pay-methods .svea-payment-icon { height: 40px; min-width: 54px; }
.how-pay-methods .svea-payment-icon img { display: block; width: auto; height: 100%; max-width: 78px; object-fit: contain; }
.how-pay-methods .how-pm { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid #dedfe4; border-radius: 6px; overflow: hidden; }
.how-step-img { display: block; width: 100%; height: 190px; border-radius: 18px; object-fit: cover; }

@media (min-width: 901px) {
  .how-step {
    grid-template-columns: 150px minmax(230px, .8fr) minmax(300px, 1fr);
  }

  .how-num {
    align-self: start;
    padding-top: 4px;
    font-size: clamp(86px, 9vw, 150px);
    line-height: .72;
    letter-spacing: -.1em;
  }
}

@media (max-width: 900px) {
  .how { padding: 56px 24px; }
  .how-head { margin-bottom: 36px; text-align: left; }
  .how-step { display: block; padding: 36px 0 42px; }
  .how-num { margin-bottom: 30px; font-size: clamp(96px, 24vw, 150px); line-height: .72; letter-spacing: -.1em; }
  .how-copy h3 { font-size: 30px; }
  .how-copy p { font-size: 18px; }
  .how-visual { width: 100%; margin-top: 34px; }
  .how-pcrow { min-height: 62px; padding: 12px 0; }
  .how-pcrow-hl { padding: 12px 8px; }
  .how-pay { padding: 18px; }
  .how-pay-methods { gap: 6px; }
  .how-pay-methods .svea-payment-icon { min-width: 48px; }
}