html.how-dialog-open,html.how-dialog-open body { overflow:hidden; }
.how-dialog { width:min(1080px,calc(100% - 40px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto; padding:48px 24px 42px; border:1px solid #edddd5; border-radius:28px; background:#fcf8f4; color:#701625; overflow-y:auto; overscroll-behavior:contain; box-shadow:0 24px 100px #28131640; }
.how-dialog::backdrop { background:#291b19a8; backdrop-filter:blur(5px); }
.how-close { position:absolute; top:20px; right:20px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #bb787f; border-radius:50%; background:#fffaf6; color:#701625; cursor:pointer; }
.how-dialog-heading { position:relative; isolation:isolate; text-align:center; margin:0 auto 46px; padding:4px 24px; }
.how-dialog-heading::before { content:""; position:absolute; inset:0; z-index:-1; background:url('../assets/landing page/landing page 2.webp') center / cover no-repeat; opacity:.15; pointer-events:none; }
.how-eyebrow { margin:0 0 16px; text-transform:uppercase; font:600 13px/1.4 'Segoe UI',sans-serif; letter-spacing:3px; }
.how-dialog h2 { font:700 clamp(28px,3vw,40px)/1.12 Georgia,serif; margin:0 0 14px; color:#701625; }
.how-dialog-heading>p:last-child { font:400 18px/1.55 'Segoe UI',sans-serif; color:#666a79; margin:0; }
.how-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0; }
.how-steps-desktop { display:block; width:100%; max-width:100%; height:auto; margin:0; }
@media(min-width:851px) { .how-steps { display:none; } }
@media(max-width:850px) { .how-steps-desktop { display:none; } }
.how-steps li { position:relative; min-width:0; border:1px solid #f0ded7; border-radius:18px; padding:0 20px 20px; }
.how-step-image { margin:0 -20px; aspect-ratio:1.3; background-image:url('../assets/landing page/Four Steps to Cherished Video Memories.webp'); background-size:400% auto; background-repeat:no-repeat; border-radius:17px 17px 0 0; }
.how-step-one { background-position:0 0; }.how-step-two { background-position:33.333333% 0; }.how-step-three { background-position:66.666667% 0; }.how-step-four { background-position:100% 0; }
.how-steps h3 { font:700 21px/1.2 Georgia,serif; margin:10px 0 8px; color:#701625; }
.how-steps p { font:400 15px/1.55 'Segoe UI',sans-serif; margin:0; color:#666a79; }
.how-dialog-action { margin-top:44px; text-align:center; }
.how-dialog-action a { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:52px; width:min(310px,100%); padding:12px 24px; border-radius:40px; background:#701625; color:white; text-decoration:none; font:600 17px/1.4 'Segoe UI',sans-serif; }
.how-dialog-action a:hover { background:#56121e; }
.how-dialog a:focus-visible,.how-dialog button:focus-visible { outline:3px solid #bf858e; outline-offset:4px; }
@media(max-width:850px) { .how-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .how-step-image { max-height:210px; } .how-dialog-heading { margin-bottom:28px; } }
@media(max-width:500px) { .how-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:22px; padding:56px 18px 24px; } .how-close { right:14px; top:14px; } .how-dialog-heading { padding:0; } .how-dialog-heading>p:last-child { font-size:16px; } .how-desktop-break { display:none; } .how-steps { grid-template-columns:1fr; gap:16px; } .how-step-image { max-height:none; } .how-steps h3 { font-size:24px; } .how-steps p { font-size:16px; } .how-dialog-action { margin-top:26px; } }