.styles-heading h2,.song-panel h3,.qr-results h3,.qr-order h3 { font-style:normal; letter-spacing:-.02em; }
.song-panel h3:focus { outline:none; }
.song-panel input:focus-visible,.song-panel textarea:focus-visible { outline:2px solid #7336d9; outline-offset:2px; }
.qr-results>.qr-gift-trigger { margin-block:16px 80px; padding-top:0; }
.quiz-receipt .quiz-receipt-shipping { margin-top:20px; }
@media (min-width:800px) and (min-height:680px) {
 body:is(.show-styles,.show-upload,.show-generation,.show-quiz-receipt) { --quiz-width:720px; }
 .styles-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .style-card { aspect-ratio:4/5; }
 .styles-head,.styles-scroll,.styles-footer,.upload-body,.upload-footer { padding-inline:28px; }
 .gen-stage { max-width:560px; width:100%; align-self:center; }
 #generation-step .song-panel { max-width:540px; margin-inline:auto; }
 .qr-results>section,.qr-intro { max-width:650px; margin-inline:auto; }
 .qr-portraits { max-width:500px; margin-inline:auto; }
 .qr-order,.qr-gift { max-width:480px; }
 .quiz-receipt { max-width:520px; margin-inline:auto; }
}

.progress { max-width:var(--quiz-width); }
#step1 .quiz-privacy { position:static; width:100%; margin-top:8px; box-sizing:border-box; padding:8px 10px; box-shadow:none; border:1px solid #e4dcf2; font-size:12px; }
#step1 .quiz-privacy p { margin-bottom:4px; }
#step1 .quiz-privacy button { padding:5px 8px; }
#step1 .intro-cta:has(.quiz-privacy) .quiz-privacy-settings { display:none; }
.upload-error:not(:empty) { position:static; padding:9px 12px; margin:0 0 7px; background:#fff0f1; color:#8c2943; border:1px solid #eed4da; border-radius:8px; box-shadow:none; }
#generation-step .song-panel:is([data-step="1"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="7"]) {
 top:auto; min-height:0; height:auto; max-height:calc(100% - var(--generation-header,145px) - 9px);
}
#generation-step.song-open:has(.song-panel:is([data-step="1"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="7"])) .gen-stage { visibility:visible; opacity:.62; }

/* Keep the upload actions above the footer when desktop cards get wider. */
@media (min-width:800px) {
 #upload-step .upload-pick {
  height:clamp(100px,calc(100svh - 390px),300px);
  aspect-ratio:auto;
 }
 #upload-step .upload-pick img.upload-illustration { object-fit:contain; }
}

/* Give the film perforations their own rows, including in mobile WebKit. */
#step1 .joint-photo { display:grid; grid-template-rows:13px minmax(0,1fr) 13px; padding:0 5px; }
#step1 .joint-photo::before,#step1 .joint-photo::after { position:static; align-self:center; margin-inline:5px; width:auto; height:6px; }
#step1 .joint-photo::before { grid-row:1; }
#step1 .joint-photo::after { grid-row:3; }
#step1 .joint-window { grid-row:2; min-height:0; height:100%; overflow:hidden; }