/* Fresh canvas.fig: desktop 451:1032, mobile 858:1646.
   Text uses normal flow; source coordinates become spacing and minimum sizes. */
.how-section.how-redesign { position:relative; isolation:isolate; width:calc(100% - 220px); max-width:1703px; min-height:1137px; height:auto; margin:100px auto; padding:100px 130px; border-radius:50px; background:#000; overflow:hidden; }
.how-redesign .how-design-content { position:static; }
.how-redesign #how-title,.how-design-intro,.how-design-choice { position:relative; z-index:2; }
.how-redesign #how-title { margin:0; max-width:835px; font:600 55px/70px "Onest",Arial,sans-serif; letter-spacing:0; color:#fff; }
.how-design-intro { margin-top:60px; max-width:835px; color:#c4c4c4; font:500 19px/24px "Onest",Arial,sans-serif; }
.how-design-intro p { margin:0; }
.how-design-intro p+p { margin-top:24px; }
.how-design-photo { position:absolute; z-index:0; top:0; right:0; width:49.8%; height:100%; overflow:hidden; border-radius:50px; }
.how-design-photo img { width:216.84%; max-width:none; height:100%; object-fit:cover; position:absolute; left:-57.51%; top:0; }
.how-design-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#000,transparent 52%); }
.how-design-choice { margin-top:120px; max-width:956px; }
.how-design-choice>h3 { margin:0 0 40px; color:#fff; font:600 40px/51px "Onest",Arial,sans-serif; }
.how-design-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.how-design-card { display:flex; flex-direction:column; min-width:0; min-height:472px; padding:40px; border-radius:25px; background:#fff; color:#000; }
.how-design-card h4 { margin:0; font:600 26px/33px "Onest",Arial,sans-serif; }
.how-design-description { margin:30px 0 0; min-height:72px; font:500 19px/24px "Onest",Arial,sans-serif; color:#515151; }
.how-design-watch { display:flex; align-items:center; gap:30px; width:fit-content; margin:28px 0 0; min-height:69px; color:#515151; font:500 17px/22px "Onest",Arial,sans-serif; }
.how-design-watch img { display:block; flex:0 0 69px; width:69px; height:69px; }
.how-design-watch:focus-visible,.how-design-store:focus-visible { outline:3px solid #1977f3; outline-offset:4px; }
.how-design-stores { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:50px; }
.how-design-store { display:flex; justify-content:center; align-items:center; position:static; width:100%; min-width:0; height:50px; flex-shrink:0; padding:0; border-radius:9px; background:#000; color:#fff; transition:opacity .15s linear; }
.how-design-store:hover { background:#000; opacity:.85; }
.how-design-store:active { opacity:.7; }
.how-design-store img { display:block; flex-shrink:0; }
.how-design-qr { display:flex; align-items:center; gap:29px; min-height:110px; margin-top:auto; padding:18px 16px 18px 14px; border:1px solid #d7d8df; border-radius:9px; background:#fff; }
.how-design-qr .qr-decoration { display:grid; place-items:center; position:relative; flex:0 0 116px; width:116px; height:64px; margin:0; padding:0; background:none; border:0; border-radius:0; overflow:hidden; }
.how-design-qr .qr-decoration img { width:64px; height:64px; object-fit:contain; }
.how-design-qr p { margin:0; color:#515151; font:500 19px/24px "Onest",Arial,sans-serif; }
@media(min-width:769px) and (max-width:1600px) {
 .how-section.how-redesign { width:calc(100% - 80px); padding:80px 60px; }
 .how-design-intro { max-width:65%; }
}
@media(min-width:769px) and (max-width:1100px) {
 .how-section.how-redesign { width:calc(100% - 40px); padding:60px 40px; min-height:0; }
 .how-design-photo { opacity:.5; }
 .how-design-intro { max-width:85%; }
 .how-design-card { padding:30px; }
 .how-design-qr { gap:10px; }
 .how-design-qr .qr-decoration { flex-basis:70px; width:70px; }
}
@media(max-width:768px) {
 .how-section.how-redesign { width:100%; max-width:none; margin:70px auto; padding:70px 30px; min-height:0; border-radius:25px; }
 .how-redesign .how-design-content { display:contents; }
 .how-redesign #how-title { position:relative; z-index:2; max-width:100%; font-size:26px; line-height:33px; }
 .how-design-intro { position:relative; z-index:2; margin-top:30px; max-width:100%; font-size:15px; line-height:19px; }
 .how-design-intro p+p { margin-top:19px; }
 .how-design-photo { position:relative; width:calc(100% + 60px); height:auto; aspect-ratio:360/504; margin:31px -30px 0; border-radius:0; }
 .how-design-photo img { width:226.4%; left:-77.42%; height:100%; }
 .how-design-photo::after { background:linear-gradient(180deg,#000 0,transparent 30%,transparent 74%,#000 100%); }
 .how-design-choice { position:relative; z-index:2; max-width:100%; margin-top:70px; }
 .how-design-choice>h3 { margin-bottom:40px; font-size:22px; line-height:28px; }
 .how-design-options { grid-template-columns:minmax(0,1fr); gap:10px; }
 .how-design-card { min-height:368px; padding:30px; }
 .how-design-card h4 { font-size:20px; line-height:26px; }
 .how-design-description { margin-top:20px; min-height:57px; font-size:15px; line-height:19px; }
 .how-design-watch { gap:20px; min-height:50px; margin-top:20px; font-size:13px; line-height:17px; }
 .how-design-watch img { flex-basis:50px; width:50px; height:50px; }
 .how-design-stores { padding-top:45px; }
 .how-design-apple { order:-1; }
 .how-design-store { height:40px; }
 .how-design-qr { min-height:98px; margin-top:37px; gap:20px; padding:14px 15px 14px 9px; }
 .how-design-qr .qr-decoration { flex-basis:102px; width:102px; height:54px; }
 .how-design-qr .qr-decoration img { width:54px; height:54px; }
 .how-design-qr p { font-size:13px; line-height:17px; }
}
@media(max-width:340px) {
 .how-design-card { padding:24px; }
 .how-design-qr { gap:10px; }
 .how-design-qr .qr-decoration { flex-basis:74px; width:74px; }
}