.digital-menu-page .menu-hero { background: radial-gradient(ellipse at 95% 10%, #dff4ff, transparent 55%), linear-gradient(145deg, #f7faff, #eef3fb); }
.digital-menu-page .menu-split { display: grid; gap: 40px; align-items: center; }
.digital-menu-page .menu-split > * { min-width: 0; }
.digital-menu-page .menu-illustration { margin: 0; }
.digital-menu-page .menu-phone { width: 100%; max-width: 370px; margin-inline: auto; padding: 22px; border: 1px solid #36516d; border-radius: 28px; background: #0c192c; color: #fff; box-shadow: 0 24px 60px #10234320; }
.digital-menu-page .menu-phone-top { display: grid; gap: 6px; margin-bottom: 20px; font-size: .95rem; }
.digital-menu-page .menu-phone-top span { color: #85edff; font-size: .65rem; }
.digital-menu-page .menu-account { display: flex; align-items: center; gap: 10px; font-size: .7rem; color: #c9daef; }
.digital-menu-page .menu-account svg { width: 32px; height: 32px; flex-shrink: 0; color: #85edff; }
.digital-menu-page .menu-categories { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0; }
.digital-menu-page .menu-categories li { padding: 6px 10px; border: 1px solid #36516d; border-radius: 20px; font-size: .7rem; color: #c9daef; }
.digital-menu-page .menu-product-card, .digital-menu-page .menu-basket-summary, .digital-menu-page .menu-loyalty-balance { padding: 16px; border: 1px solid #36516d; border-radius: 12px; margin-top: 12px; background: #182b42; font-size: .85rem; }
.digital-menu-page .menu-product-art { display: block; height: 78px; border-radius: 8px; margin-bottom: 14px; background: radial-gradient(ellipse at 50% 50%, #85edff40, transparent 60%), #153d51; }
.digital-menu-page .menu-ui-label { display: block; margin-bottom: 6px; color: #85edff; font-size: .65rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.digital-menu-page .menu-phone p { margin: 6px 0 0; color: #c9daef; font-size: .72rem; }
.digital-menu-page .menu-basket-summary > span:last-child, .digital-menu-page .menu-loyalty-balance > span:last-child { display: block; margin-top: 8px; color: #c9daef; font-size: .7rem; }
.digital-menu-page .menu-loyalty-balance { background: linear-gradient(110deg, #17417a, #153d51); }
.digital-menu-page figcaption, .digital-menu-page .menu-note { font-size: .8rem; color: #52647b; margin: 14px 0 0; }
.digital-menu-page .menu-steps { display: grid; gap: 28px; list-style: none; padding: 0; margin: 0; }
.digital-menu-page .menu-step { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #b4c9e3; border-radius: 50%; color: #1555b9; font-size: .85rem; font-weight: 750; margin-bottom: 20px; }
.digital-menu-page .menu-steps p { font-size: .93rem; margin-bottom: 0; }
.digital-menu-page .menu-gallery { display: grid; gap: 24px; align-items: start; }
.digital-menu-page .menu-example { margin: 0; }
.digital-menu-page .menu-example .site-media { position: relative; margin: 0; }
/* CSS viewports remove account greetings, repeated headers and the product-page address.
   Original pixels are uniformly scaled; source files are unchanged. */
.digital-menu-page .menu-categories.site-media { display: block; aspect-ratio: 805 / 825; border-radius: 12px; padding: 0; }
.digital-menu-page .menu-product { aspect-ratio: 808 / 825; }
.digital-menu-page .menu-basket { aspect-ratio: 806 / 947; }
.digital-menu-page .menu-categories.site-media img, .digital-menu-page .menu-product img, .digital-menu-page .menu-basket img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.digital-menu-page .menu-categories.site-media img { transform: translateY(-40.915395%); }
.digital-menu-page .menu-product img { transform: translateY(-33.75087%); }
.digital-menu-page .menu-basket img { transform: translateY(-34.098817%); }
.digital-menu-page .menu-qr { aspect-ratio: 806 / 947; }
.digital-menu-page .menu-qr img { width: 100%; height: 100%; object-fit: contain; }
.digital-menu-page .menu-loyalty-panel { padding: 28px; border: 1px solid #27415d; border-radius: 20px; background: #0c192c; }
.digital-menu-page .menu-loyalty-flow { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.digital-menu-page .menu-loyalty-flow li { position: relative; padding: 14px 16px; border: 1px solid #36516d; border-radius: 10px; background: #182b42; color: #fff; font-size: .85rem; }
.digital-menu-page .menu-loyalty-flow li:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -20px; color: #85edff; z-index: 1; }
.digital-menu-page .menu-options { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.digital-menu-page .menu-options li { padding: 20px 24px; background: #fff; border: 1px solid #dce5ef; border-radius: 12px; font-weight: 650; }
.digital-menu-page .menu-final { padding-top: 0; }
@media (min-width: 576px) { .digital-menu-page .menu-steps, .digital-menu-page .menu-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
    .digital-menu-page .menu-split { grid-template-columns: 1.2fr 1fr; gap: 56px; }
    .digital-menu-page .menu-split .site-heading { margin-bottom: 0; }
    .digital-menu-page .menu-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .digital-menu-page .menu-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .digital-menu-page .menu-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Browser-style frames preserve the existing privacy viewports. */
.digital-menu-page .menu-browser-frame { overflow: hidden; border: 1px solid #dce5ef; border-radius: 12px; box-shadow: 0 6px 18px #1023430c; background: #fff; }
.digital-menu-page .menu-browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #0c192c; color: #c9daef; }
.digital-menu-page .menu-browser-bar span { width: 6px; height: 6px; border-radius: 50%; background: #85edff; flex-shrink: 0; }
.digital-menu-page .menu-browser-bar b { font-size: .65rem; font-weight: 500; margin-left: 8px; }
.digital-menu-page .menu-browser-frame .site-media { border: 0; border-radius: 0; box-shadow: none; }
.digital-menu-page .menu-implementation-scope { font-size: .85rem; padding-left: 14px; border-left: 3px solid #155cd7; }