:root {
  --ink: #14213d;
  --ink-soft: #34445f;
  --accent: #ff6b57;
  --accent-dark: #e94f3d;
  --paper: #fbfaf7;
  --white: #fff;
  --mist: #eef1f5;
  --line: #dfe4eb;
  --success: #17835b;
  --warning: #d18616;
  --danger: #c93b3b;
  --shadow: 0 18px 50px rgba(20, 33, 61, .10);
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.app-header {
  position: sticky; top: 0; z-index: 40; height: 72px; padding: 0 max(20px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20, 33, 61, .08);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 1.05rem; letter-spacing: .025em; }
.brand strong { font-weight: 800; }
.brand-mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); border-radius: 10px; overflow: hidden; transform: rotate(-3deg); }
.brand-mark span { position: absolute; width: 15px; height: 19px; border: 2px solid var(--white); border-radius: 2px; background: transparent; }
.brand-mark span:nth-child(1) { transform: translate(-5px, 2px) rotate(-10deg); opacity: .6; }
.brand-mark span:nth-child(2) { transform: translate(5px, 2px) rotate(10deg); opacity: .8; }
.brand-mark span:nth-child(3) { transform: translate(0, -1px); border-color: var(--accent); background: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 14px; color: var(--ink); background: var(--white); box-shadow: 0 5px 18px rgba(20,33,61,.08); }
.cart-button span { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--accent); border: 2px solid var(--paper); border-radius: 999px; font-size: .68rem; font-weight: 800; }

main { min-height: calc(100vh - 72px); }
.screen { display: none; animation: screenIn .24s ease both; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(5px); } }

.hero { max-width: 1180px; min-height: 570px; margin: 0 auto; padding: 70px 40px 50px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.hero-copy h1 { max-width: 620px; margin: 7px 0 20px; font-size: clamp(2.7rem, 5.5vw, 5.3rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy > p:not(.eyebrow) { max-width: 600px; margin: 0 0 30px; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.65; }
.eyebrow { margin: 0; color: var(--accent-dark); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.button { border: 0; border-radius: 14px; padding: 13px 20px; font-weight: 750; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:active { transform: translateY(1px) scale(.99); }
.button:disabled { cursor: wait; opacity: .65; }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 10px 26px rgba(255,107,87,.25); }
.button-primary:hover { background: var(--accent-dark); box-shadow: 0 13px 30px rgba(255,107,87,.32); }
.button-ghost { color: var(--ink); background: var(--white); border: 1px solid var(--line); box-shadow: none; }
.button-large { min-height: 54px; padding-inline: 28px; }
.button-small { padding: 9px 13px; border-radius: 11px; font-size: .82rem; }
.button-full { width: 100%; }
.trust-row { display: flex; gap: 18px; margin-top: 35px; color: var(--ink-soft); font-size: .84rem; }
.trust-row span { display: flex; align-items: center; gap: 7px; }
.trust-row b { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent-dark); background: #ffe9e5; border-radius: 50%; font-size: .7rem; }

.hero-visual { position: relative; min-height: 440px; }
.hero-visual::before { content: ""; position: absolute; width: 360px; height: 360px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #d9e3f1; border-radius: 44% 56% 55% 45% / 51% 43% 57% 49%; }
.photo-card { position: absolute; padding: 11px 11px 38px; background: #fff; box-shadow: 0 24px 55px rgba(20,33,61,.20); }
.photo-card span { display: block; width: 100%; height: 100%; background-size: cover; }
.photo-card-one { width: 235px; height: 300px; left: 12%; top: 15%; transform: rotate(-10deg); }
.photo-card-one span { background: linear-gradient(145deg, rgba(20,33,61,.05), rgba(255,107,87,.12)), url("../img/sample-1.svg") center/cover; }
.photo-card-two { z-index: 2; width: 250px; height: 330px; left: 38%; top: 7%; transform: rotate(5deg); }
.photo-card-two span { background: linear-gradient(145deg, #9bb5c0, #e6c1a5 48%, #615e54); }
.photo-card-three { width: 210px; height: 270px; left: 34%; top: 38%; transform: rotate(13deg); }
.photo-card-three span { background: linear-gradient(145deg, #f4b59d, #617d72 56%, #293f48); }

.formats-section { max-width: 1180px; margin: 25px auto 70px; padding: 0 40px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 22px; }
.section-heading h2 { margin: 6px 0 0; font-size: 2rem; letter-spacing: -.03em; }
.section-heading > p { max-width: 320px; margin: 0; color: var(--ink-soft); text-align: right; }
.formats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: 16px; align-items: start; }
.format-card { min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,33,61,.04); }
.format-card .format-shape { width: var(--shape-w, 50px); height: var(--shape-h, 70px); display: grid; place-items: center; color: #fff; background: var(--ink); border: 4px solid #fff; outline: 1px solid var(--line); box-shadow: 0 4px 12px rgba(20,33,61,.15); font-size: .58rem; font-weight: 800; }
.format-card footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
.format-heading { display: flex; align-items: center; gap: 16px; }
.format-card .format-shape { flex: 0 0 var(--shape-w, 50px); }
.format-info { min-width: 0; }
.format-info h3 { margin: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.format-info p { margin: 4px 0 0; color: #718096; font-size: .85rem; line-height: 1.4; }
.format-tiers { width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.format-tiers th, .format-tiers td { padding: 7px 0; text-align: left; }
.format-tiers th { color: #58677d; font-weight: 600; border-bottom: 1px solid var(--line); }
.format-tiers td { border-bottom: 1px solid #eef1f5; }
.format-tiers tr:last-child td { border-bottom: 0; }
.format-tiers th:last-child, .format-tiers td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.format-single-note { margin: 0; color: #718096; font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.format-card strong { font-size: .98rem; }
.format-card small { display: block; margin-top: 3px; color: #718096; }
.format-card .price { color: var(--accent-dark); font-size: 1.08rem; font-weight: 850; white-space: nowrap; }
.skeleton-card { height: 155px; border-radius: var(--radius); background: linear-gradient(90deg, #eef0f2, #f7f7f7 45%, #eef0f2); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

.delivery-strip { max-width: 1100px; margin: 0 auto 90px; padding: 26px 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; color: #fff; background: var(--ink); border-radius: 24px; }
.delivery-strip > div { display: flex; align-items: center; gap: 16px; }
.delivery-strip > div + div { border-left: 1px solid rgba(255,255,255,.18); padding-left: 35px; }
.delivery-strip svg { width: 30px; height: 30px; color: var(--accent); }
.delivery-strip strong, .delivery-strip span { display: block; }
.delivery-strip span { margin-top: 3px; color: #bac5d7; font-size: .86rem; }

.narrow-screen { max-width: 900px; margin: 0 auto; padding: 38px 28px 120px; }
.progress-steps { margin: 0 auto 42px; display: flex; align-items: center; justify-content: center; color: #8b96a8; font-size: .78rem; font-weight: 700; }
.progress-steps span { display: flex; align-items: center; gap: 7px; }
.progress-steps b { display: grid; place-items: center; width: 25px; height: 25px; background: #e7eaf0; border-radius: 50%; font-size: .7rem; }
.progress-steps i { width: 60px; height: 2px; margin: 0 10px; background: #e2e6eb; }
.progress-steps .current { color: var(--ink); }
.progress-steps .current b { color: #fff; background: var(--ink); }
.progress-steps .done { color: var(--success); }
.progress-steps span.done b, .progress-steps i.done { color: #fff; background: var(--success); }
.screen-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.screen-heading h1 { margin: 4px 0 0; font-size: clamp(1.7rem, 5vw, 2.5rem); letter-spacing: -.035em; }
.back-button { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; font-size: 2rem; line-height: 1; }

.upload-zone { min-height: 190px; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; background: #fff; border: 2px dashed #cbd2dc; border-radius: var(--radius); transition: border .15s, background .15s; }
.upload-zone:hover, .upload-zone.dragover { background: #fff7f5; border-color: var(--accent); }
.upload-zone strong { font-size: 1.05rem; }
.upload-zone > span:last-child { color: #768296; font-size: .82rem; }
.upload-icon { width: 52px; height: 52px; margin-bottom: 7px; display: grid; place-items: center; color: var(--accent-dark); background: #ffe9e5; border-radius: 16px; }
.upload-icon svg { width: 27px; height: 27px; }
.privacy-note { margin: 12px 5px 30px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #718096; font-size: .78rem; }
.privacy-note svg { width: 16px; height: 16px; color: var(--success); }
.list-header { margin: 25px 0 14px; display: flex; justify-content: space-between; align-items: center; }
.list-header h2 { margin: 0; font-size: 1.15rem; }
.text-button { padding: 5px; border: 0; color: var(--accent-dark); background: transparent; font-weight: 800; }

.photos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.photo-item { display: grid; grid-template-columns: 135px 1fr; min-height: 170px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 22px rgba(20,33,61,.05); }
.photo-preview { position: relative; overflow: hidden; background: #e7e9ee; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview button { position: absolute; left: 8px; bottom: 8px; padding: 7px 10px; border: 0; border-radius: 10px; color: #fff; background: rgba(20,33,61,.82); backdrop-filter: blur(5px); font-size: .72rem; font-weight: 750; }
.quality-pill { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; background: var(--success); font-size: .62rem; font-weight: 800; }
.quality-pill.warning { background: var(--warning); }
.photo-details { padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.photo-title-row { display: flex; justify-content: space-between; gap: 8px; }
.photo-title-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.remove-photo { flex: 0 0 auto; border: 0; color: #9b2631; background: transparent; font-size: 1.2rem; line-height: 1; }
.compact-field span { display: block; margin-bottom: 3px; color: #69768b; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.compact-field select { width: 100%; padding: 8px 9px; color: var(--ink); background: #f6f7f9; border: 1px solid var(--line); border-radius: 9px; font-size: .76rem; }
.qty-row { display: flex; align-items: center; justify-content: space-between; }
.quantity-control { display: flex; align-items: center; gap: 8px; }
.quantity-control button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-weight: 800; }
.quantity-control span { min-width: 17px; text-align: center; font-size: .8rem; font-weight: 800; }
.item-price { color: var(--ink); font-size: .85rem; font-weight: 850; }

.sticky-footer { position: sticky; z-index: 10; bottom: 15px; margin-top: 25px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 25px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.sticky-footer div span, .sticky-footer div strong { display: block; }
.sticky-footer div span { color: #718096; font-size: .7rem; }
.sticky-footer div strong { margin-top: 2px; font-size: 1.3rem; }

.checkout-card { margin-bottom: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.checkout-card h2 { margin: 0 0 18px; font-size: 1.13rem; }
.delivery-options { display: grid; gap: 10px; }
.choice-card { position: relative; padding: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; border: 2px solid var(--line); border-radius: 15px; cursor: pointer; }
.choice-card.selected { background: #fff8f6; border-color: var(--accent); }
.choice-card input { position: absolute; opacity: 0; }
.choice-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); background: var(--mist); border-radius: 11px; font-size: 1.25rem; }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: 2px; color: #718096; line-height: 1.35; }
.choice-card em { color: var(--accent-dark); font-style: normal; font-size: .82rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.address-fields { margin-top: 13px; }
.field { display: block; margin-bottom: 13px; }
.field-wide { grid-column: 1 / -1; }
.field > span { display: block; margin: 0 0 6px 2px; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.field input, .field textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: #f8f9fa; border: 1px solid var(--line); border-radius: 12px; outline: none; }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,33,61,.08); }
.field input.invalid, .consent-row.invalid { border-color: var(--danger); }
.summary-heading { display: flex; justify-content: space-between; align-items: center; }
.checkout-items { display: grid; gap: 10px; margin-bottom: 18px; }
.checkout-item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 11px; }
.checkout-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; }
.checkout-item strong, .checkout-item small { display: block; }
.checkout-item strong { font-size: .8rem; }
.checkout-item small { margin-top: 3px; color: #718096; }
.checkout-item > b { font-size: .82rem; }
.totals-list { margin: 0; padding-top: 15px; border-top: 1px solid var(--line); }
.totals-list div { display: flex; justify-content: space-between; margin: 8px 0; }
.totals-list dt, .totals-list dd { margin: 0; }
.totals-list dt { color: #657187; }
.totals-list dd { font-weight: 750; }
.totals-list .grand-total { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 1.17rem; }
.totals-list .grand-total dt { color: var(--ink); font-weight: 800; }
.consent-row { margin: 20px 3px; padding: 2px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid transparent; border-radius: 5px; color: #5e6b80; font-size: .76rem; line-height: 1.55; }
.consent-row input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--accent); }
.consent-row a { color: var(--accent-dark); font-weight: 750; }
.payment-note { margin: 12px 0 0; color: #718096; text-align: center; font-size: .76rem; }

.centered-screen.active { min-height: calc(100vh - 72px); padding: 35px 20px; display: grid; place-items: center; }
.upload-progress-card, .success-card { width: min(100%, 500px); padding: 38px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }
.upload-progress-card h1, .success-card h1 { margin: 13px 0 8px; font-size: 2rem; letter-spacing: -.03em; }
.upload-progress-card p, .success-card > p:not(.eyebrow) { color: #657187; line-height: 1.55; }
.progress-ring { --progress: 0deg; width: 104px; height: 104px; margin: 0 auto; display: grid; place-items: center; background: conic-gradient(var(--accent) var(--progress), var(--mist) 0); border-radius: 50%; }
.progress-ring::before { content: ""; grid-area: 1/1; width: 82px; height: 82px; background: #fff; border-radius: 50%; }
.progress-ring span { z-index: 1; grid-area: 1/1; font-size: 1.2rem; font-weight: 850; }
.linear-progress { height: 8px; margin: 25px 0 10px; overflow: hidden; background: var(--mist); border-radius: 999px; }
.linear-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }
.upload-progress-card small { color: #7a8698; }
.success-icon { width: 75px; height: 75px; margin: 0 auto 20px; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-size: 2rem; font-weight: 800; box-shadow: 0 12px 30px rgba(23,131,91,.24); }
.reference-box { margin: 25px 0; padding: 18px; background: var(--mist); border-radius: 15px; }
.reference-box span, .reference-box strong { display: block; }
.reference-box span { color: #69768b; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.reference-box strong { margin: 5px 0 10px; font-size: 1.35rem; letter-spacing: .04em; }
.reference-box button { border: 0; color: var(--accent-dark); background: transparent; font-weight: 800; }

.editor-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0e172a; color: #fff; }
.editor-dialog::backdrop { background: rgba(5,10,22,.8); }
.editor-shell { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.editor-header { min-height: 70px; padding: max(12px, env(safe-area-inset-top)) 18px 12px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; text-align: center; background: #111d34; }
.editor-header strong, .editor-header span { display: block; }
.editor-header span { margin-top: 3px; color: #9cabc1; font-size: .7rem; }
.editor-close { border: 0; color: #fff; background: transparent; text-align: left; font-size: 2rem; }
.editor-header .text-button { color: #ff9b8d; }
.editor-workspace { min-height: 0; padding: 22px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.editor-stage { position: relative; max-width: 100%; max-height: 66vh; overflow: hidden; background: #293349; box-shadow: 0 12px 40px rgba(0,0,0,.35); touch-action: none; }
.editor-stage canvas { width: 100%; height: 100%; display: block; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.42) 33.3%, rgba(255,255,255,.42) 33.6%, transparent 33.8%, transparent 66.2%, rgba(255,255,255,.42) 66.4%, rgba(255,255,255,.42) 66.7%, transparent 66.9%), linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.42) 33.3%, rgba(255,255,255,.42) 33.6%, transparent 33.8%, transparent 66.2%, rgba(255,255,255,.42) 66.4%, rgba(255,255,255,.42) 66.7%, transparent 66.9%); border: 1px solid rgba(255,255,255,.8); }
.editor-workspace p { margin: 12px 0 0; color: #9cabc1; font-size: .75rem; }
.editor-controls { padding: 18px max(20px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-bottom)); background: #111d34; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; max-width: 380px; margin: 0 auto 15px; padding: 3px; background: #253149; border-radius: 11px; }
.segmented-control button { padding: 9px; border: 0; border-radius: 9px; color: #aeb9c9; background: transparent; font-size: .78rem; font-weight: 800; }
.segmented-control button.active { color: var(--ink); background: #fff; }
.zoom-control { max-width: 410px; margin: 0 auto 12px; display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; gap: 10px; color: #bdc6d4; }
.zoom-control input { width: 100%; accent-color: var(--accent); }
.editor-quality { margin-bottom: 13px; display: flex; justify-content: center; align-items: center; gap: 6px; color: #b8c3d2; font-size: .72rem; }
.editor-quality span { width: 7px; height: 7px; background: #37c18a; border-radius: 50%; }
.editor-quality.warning span { background: #e5a331; }
.editor-controls .button-ghost { color: #fff; background: transparent; border-color: #435069; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: max(25px, env(safe-area-inset-bottom)); max-width: calc(100% - 30px); padding: 12px 17px; color: #fff; background: #152039; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: .22s ease; font-size: .82rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .app-header { height: 64px; }
  main { min-height: calc(100vh - 64px); }
  .hero { min-height: auto; padding: 45px 24px 30px; grid-template-columns: 1fr; gap: 25px; }
  .hero-copy h1 { font-size: clamp(2.7rem, 12vw, 4.3rem); }
  .hero-visual { min-height: 360px; transform: scale(.88); margin: -20px; }
  .formats-section { padding: 0 20px; }
  .delivery-strip { margin: 0 20px 60px; padding: 23px; grid-template-columns: 1fr; }
  .delivery-strip > div + div { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .photos-grid { grid-template-columns: 1fr; }
  .photo-item { grid-template-columns: 120px 1fr; }
}

@media (max-width: 560px) {
  .brand { font-size: .9rem; }
  .brand-mark { width: 31px; height: 31px; }
  .hero { padding-top: 37px; }
  .hero-copy h1 { margin-top: 9px; }
  .hero-copy > p:not(.eyebrow) { font-size: 1rem; }
  .trust-row { gap: 11px; flex-wrap: wrap; }
  .hero-visual { min-height: 320px; transform: scale(.78); margin: -45px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 8px; text-align: left; }
  .formats-grid { grid-template-columns: minmax(0, 1fr); }
  .format-card { padding: 18px; }
  .narrow-screen { padding: 25px 15px 110px; }
  .progress-steps { margin-bottom: 28px; font-size: 0; }
  .progress-steps b { font-size: .7rem; }
  .progress-steps i { width: 45px; }
  .screen-heading { align-items: flex-start; }
  .upload-zone { min-height: 170px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .field-wide { grid-column: auto; }
  .checkout-card { padding: 18px; }
  .choice-card { grid-template-columns: auto 1fr; }
  .choice-card em { grid-column: 2; }
  .sticky-footer { bottom: 9px; }
  .sticky-footer .button { min-width: 130px; }
  .upload-progress-card, .success-card { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.customer-dialog {width:min(480px,calc(100% - 24px));max-height:90dvh;border:0;border-radius:20px;padding:0;color:var(--ink);}
.customer-dialog::backdrop {background:rgba(20,33,61,.5);}
.customer-shell {padding:24px;overflow:auto;}
.customer-shell .field {margin-top:16px;}
.customer-shell p {line-height:1.5;overflow-wrap:anywhere;}
.customer-shell .segmented-control {margin:16px 0;}
.mbway-card {margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;}
.mbway-number {display:block;font-size:1.7rem;letter-spacing:.04em;margin:12px 0;}
@media(max-width:560px) {.header-actions{gap:6px;}#accountButton{font-size:.72rem;padding:8px;} .brand{font-size:.85rem;} .customer-shell{padding:18px;}}