/* FRONT-03: keep every rule local to the illustrated home sequence. */
.sp-how { padding-top: 3rem; padding-bottom: 3rem; }
.sp-how__heading { max-width: 46rem; margin-inline: auto; text-align: center; }
.sp-how__eyebrow { color: #b9d8ff; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.sp-how__heading h2 { margin-top: .75rem; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.sp-how__steps { display: grid; gap: 1.25rem; max-width: 35rem; margin: 2rem auto 0; padding: 0; list-style: none; }
.sp-how__step { min-width: 0; padding: 1.25rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 1.25rem; background: rgb(255 255 255 / .035); }
.sp-how__number { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: rgb(59 130 246 / .15); color: #bfdbfe; font-size: .875rem; font-weight: 800; }
.sp-how__number--create { background: rgb(217 70 239 / .15); color: #f5d0fe; }
.sp-how__number--download { background: rgb(16 185 129 / .15); color: #a7f3d0; }
.sp-how__preview { margin: 1rem 0 1.25rem; border: 1px solid rgb(255 255 255 / .07); border-radius: .875rem; background: #10141f; pointer-events: none; user-select: none; }
.sp-how__preview-body { display: flex; align-items: center; justify-content: center; height: 240px; padding: .625rem; }
.sp-how__preview figcaption { padding: .5rem; border-top: 1px solid rgb(255 255 255 / .06); color: rgb(255 255 255 / .55); font-size: .6875rem; line-height: 1.4; text-align: center; }
.sp-how__image { display: block; max-width: 100%; height: auto; flex-shrink: 0; }
.sp-how__preview-body--create { flex-direction: column; gap: .375rem; }
.sp-how__weight { width: 166px; }
.sp-how__detail-gap { color: rgb(255 255 255 / .4); line-height: 1; letter-spacing: .15em; }
.sp-how__preview-body--result { display: grid; grid-template-columns: .85fr 1fr; gap: .5rem; }
.sp-how__video { width: 132px; justify-self: center; }
.sp-how__result-details { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sp-how__step h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.sp-how__description { margin-top: .625rem; color: rgb(255 255 255 / .7); font-size: .875rem; line-height: 1.65; }
.sp-how__note { max-width: 42rem; margin: 1.5rem auto 0; color: rgb(255 255 255 / .65); font-size: .875rem; line-height: 1.65; text-align: center; }
@media (min-width: 1024px) {
  .sp-how { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .sp-how__steps { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .sp-how__step { padding: .75rem; }
  .sp-how__preview-body { padding-inline: .25rem; }
  .sp-how__preview-body--result { height: auto; min-height: 310px; grid-template-columns: 1fr; gap: .75rem; padding-block: 1rem; }
  .sp-how__video { width: 108px; }
  .sp-how__result-details { gap: .25rem; }
}