/* DineQube V7.3.0 — stable Restaurant / Hotel / QR Menu motion + 100% zoom polish
   Loaded only on the three vertical/QR pages so the approved homepage stays locked. */

.page-restaurant,.page-hotel,.page-qr{--v72-shell:min(1280px,calc(100% - 48px));}
.page-restaurant .shell,.page-hotel .shell,.page-qr .shell{width:var(--v72-shell)}
.page-restaurant .page-hero,.page-hotel .page-hero,.page-qr .page-hero{padding:72px 0 70px;overflow:clip}
.page-restaurant .page-hero-grid,.page-hotel .page-hero-grid,.page-qr .page-hero-grid{
  grid-template-columns:minmax(360px,.82fr) minmax(0,1.38fr);
  gap:42px;align-items:center;
}
.page-restaurant .page-hero h1,.page-hotel .page-hero h1,.page-qr .page-hero h1{
  font-size:clamp(48px,4.8vw,72px);line-height:1.03;letter-spacing:-.05em;margin-bottom:22px;
  overflow:visible;
}
.page-restaurant .page-hero .lead,.page-hotel .page-hero .lead,.page-qr .page-hero .lead{max-width:600px}
.page-restaurant .reveal,.page-hotel .reveal,.page-qr .reveal{will-change:opacity,transform}

/* Shared premium workflow stage */
.v72-flow-card{
  --flow-accent:#0F7B5A;
  position:relative;min-height:500px;padding:58px 22px 82px;border:1px solid #dcebe5;border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,249,.96));
  box-shadow:0 28px 80px rgba(7,84,63,.12);overflow:hidden;isolation:isolate;
}
.v72-flow-card.hotel-flow{background:linear-gradient(145deg,#fff,#fffaf1);--flow-accent:#0F7B5A}
.v72-flow-card:before{content:"";position:absolute;inset:-35% auto auto 55%;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(15,123,90,.10),transparent 68%);z-index:-1}
.v72-flow-header{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:5}
.v72-flow-header>span:first-child{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:#55736b}
.v72-live-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #dcebe5;border-radius:999px;background:#fff;font-size:10px;font-weight:900;color:#315c51;white-space:nowrap}
.v72-live-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#16a372;box-shadow:0 0 0 4px rgba(22,163,114,.12);animation:v72Pulse 2.2s ease-in-out infinite}
.v72-flow-track{height:360px;display:grid;grid-template-columns:minmax(120px,.78fr) 36px minmax(150px,.95fr) 36px minmax(260px,1.72fr);gap:0;align-items:center}
.v72-step{position:relative;height:100%;min-width:0;border:1px solid #dcebe5;border-radius:22px;background:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 14px 38px rgba(7,84,63,.08)}
.v72-step-head{height:50px;padding:12px 13px 8px;display:flex;align-items:flex-start;gap:9px;flex:0 0 auto}
.v72-number{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e8f6f0;color:#0F7B5A;font-weight:900;font-size:11px;flex:0 0 auto}
.v72-step-head b{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#0C2923;line-height:1.3}
.v72-step-head small{display:block;margin-top:2px;color:#607873;font-size:9px;line-height:1.25}
.v72-media{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 10px 12px;background:linear-gradient(180deg,#fff,#fbfdfc)}
.v72-media img,.v72-media video{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;display:block}
.v72-step.qr-step .v72-media{padding:2px 10px 8px}
.v72-step.confirm-step .v72-media{padding:2px 12px 10px}
.v72-step.dashboard-step .v72-media{padding:10px 12px 14px}
.v72-flow-arrow{position:relative;height:2px;margin:0 5px;background:linear-gradient(90deg,rgba(15,123,90,.15),rgba(15,123,90,.72),rgba(15,123,90,.15));overflow:visible}
.v72-flow-arrow:after{content:"→";position:absolute;right:-4px;top:50%;transform:translateY(-54%);color:#0F7B5A;font-size:17px;font-weight:900}
.v72-flow-arrow:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#30c996;top:50%;left:0;transform:translateY(-50%);box-shadow:0 0 12px rgba(48,201,150,.8);animation:v72Travel 2.8s ease-in-out infinite}
.v72-ai-alert{position:absolute;right:24px;bottom:18px;min-width:245px;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:17px;background:linear-gradient(135deg,#061a42,#0d55c7 72%,#157bff);color:#fff;box-shadow:0 18px 46px rgba(23,105,255,.27);z-index:7;animation:v72Float 4s ease-in-out infinite}
.v72-ai-q{width:38px;height:38px;border-radius:12px;background:#1688ff;display:grid;place-items:center;font-weight:900;border:1px solid rgba(255,255,255,.42);box-shadow:0 0 0 6px rgba(23,105,255,.10);flex:0 0 auto}
.v72-ai-alert small{display:block;color:#a9cbff;font-size:9px;letter-spacing:.06em;text-transform:uppercase}.v72-ai-alert strong{display:block;font-size:11px;line-height:1.35}
.v72-ai-wave{margin-left:auto;width:58px;height:20px;display:flex;align-items:center;justify-content:center;gap:2px}.v72-ai-wave i{width:2px;border-radius:3px;background:#95c7ff;animation:v72Wave 1.15s ease-in-out infinite}.v72-ai-wave i:nth-child(1){height:6px}.v72-ai-wave i:nth-child(2){height:14px;animation-delay:.12s}.v72-ai-wave i:nth-child(3){height:20px;animation-delay:.24s}.v72-ai-wave i:nth-child(4){height:10px;animation-delay:.36s}.v72-ai-wave i:nth-child(5){height:16px;animation-delay:.48s}
.v72-scan-line{position:absolute;left:15%;right:15%;height:2px;top:18%;background:linear-gradient(90deg,transparent,#56e0ad,transparent);box-shadow:0 0 15px #56e0ad;z-index:4;animation:v72Scan 3.2s ease-in-out infinite;pointer-events:none}
.v72-scan-corners{position:absolute;inset:18% 16%;pointer-events:none;z-index:3;opacity:.55;background:linear-gradient(#0F7B5A,#0F7B5A) left top/18px 2px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) left top/2px 18px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) right top/18px 2px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) right top/2px 18px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) left bottom/18px 2px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) left bottom/2px 18px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) right bottom/18px 2px no-repeat,linear-gradient(#0F7B5A,#0F7B5A) right bottom/2px 18px no-repeat}

/* Restaurant & Hotel proof strips — keep original media fully readable */
.page-restaurant .media-proof,.page-hotel .media-proof{grid-template-columns:minmax(150px,.72fr) minmax(170px,.86fr) minmax(360px,1.9fr);gap:16px}
.page-restaurant .media-proof>div,.page-hotel .media-proof>div{min-height:260px;background:#fff}
.page-restaurant .media-proof img,.page-restaurant .media-proof video,.page-hotel .media-proof img,.page-hotel .media-proof video{max-height:330px;padding:12px;object-fit:contain}
.page-restaurant .bento-media,.page-hotel .bento-media{height:240px;background:#fbfdfc}
.page-restaurant .bento-media img,.page-hotel .bento-media img{object-fit:contain;padding:10px}

/* QR Menu — the hero visual must be side-by-side, never stacked at desktop zoom */
.v72-qr-stage{position:relative;min-height:500px;padding:54px 20px 24px;border:1px solid #dcebe5;border-radius:30px;background:linear-gradient(145deg,#fff,#f7fcf9);box-shadow:0 28px 80px rgba(7,84,63,.11);overflow:hidden}
.v72-qr-stage-head{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.v72-qr-stage-head span:first-child{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#55736b}
.v72-qr-pair{height:390px;display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:0;align-items:center}
.v72-qr-panel{height:100%;min-width:0;border:1px solid #dcebe5;border-radius:22px;background:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 34px rgba(7,84,63,.07)}
.v72-qr-panel-head{height:50px;padding:11px 13px;display:flex;gap:9px;align-items:flex-start}.v72-qr-panel-head b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.v72-qr-panel-head small{display:block;color:#607873;font-size:9px;margin-top:2px}
.v72-qr-panel-media{position:relative;flex:1;min-height:0;padding:8px 12px 12px;display:flex;align-items:center;justify-content:center}.v72-qr-panel-media img,.v72-qr-panel-media video{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px}
.v72-qr-video video{background:#091511}
.v72-qr-connector{height:2px;position:relative;margin:0 6px;background:linear-gradient(90deg,rgba(15,123,90,.15),rgba(15,123,90,.75),rgba(15,123,90,.15))}.v72-qr-connector:after{content:"→";position:absolute;right:-5px;top:50%;transform:translateY(-55%);font-weight:900;color:#0F7B5A;font-size:18px}.v72-qr-connector:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:#38ce9a;transform:translateY(-50%);box-shadow:0 0 12px #55d7a9;animation:v72Travel 2.7s ease-in-out infinite}
.v72-qr-flow-labels{position:absolute;left:24px;right:24px;bottom:18px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.v72-qr-flow-labels span{padding:6px 9px;border:1px solid #dcebe5;border-radius:999px;background:#fff;font-size:9px;font-weight:800;color:#45665e}

/* Missing base component used on About/Security: keep those pages from collapsing. */
.mini-stage{min-width:0;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid var(--border);border-radius:26px;background:linear-gradient(145deg,#fff,#f8fcfa);box-shadow:0 18px 54px rgba(7,84,63,.08);overflow:hidden}

/* Keep legacy product stages on Product / How It Works inside the viewport at 100% zoom. */
.product-stage{min-width:0}
.stage-scene.active{min-width:0}
.media-tile{min-width:0}

@keyframes v72Scan{0%,100%{top:18%;opacity:.35}50%{top:80%;opacity:1}}
@keyframes v72Travel{0%{left:0;opacity:.15}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:.15}}
@keyframes v72Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes v72Pulse{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes v72Wave{0%,100%{transform:scaleY(.45);opacity:.7}50%{transform:scaleY(1);opacity:1}}

/* 100% zoom / laptop safety */
@media(max-width:1240px){
  .page-restaurant,.page-hotel,.page-qr{--v72-shell:min(1180px,calc(100% - 36px))}
  .page-restaurant .page-hero-grid,.page-hotel .page-hero-grid,.page-qr .page-hero-grid{grid-template-columns:minmax(320px,.76fr) minmax(0,1.24fr);gap:30px}
  .v72-flow-card{padding-left:16px;padding-right:16px}.v72-flow-track{grid-template-columns:minmax(105px,.72fr) 28px minmax(135px,.9fr) 28px minmax(230px,1.6fr)}
  .v72-qr-pair{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}
}
@media(max-width:1100px){
  .page-restaurant .page-hero-grid,.page-hotel .page-hero-grid,.page-qr .page-hero-grid{grid-template-columns:1fr;gap:34px}
  .page-restaurant .page-hero .reveal:first-child,.page-hotel .page-hero .reveal:first-child,.page-qr .page-hero .reveal:first-child{max-width:760px}
  .v72-flow-card,.v72-qr-stage{max-width:900px;width:100%;margin-inline:auto}
  .page-restaurant .media-proof,.page-hotel .media-proof{grid-template-columns:.72fr .86fr 1.65fr}
}
@media(max-width:760px){
  .page-restaurant,.page-hotel,.page-qr{--v72-shell:calc(100% - 28px)}
  .page-restaurant .page-hero,.page-hotel .page-hero,.page-qr .page-hero{padding:54px 0 54px}
  .page-restaurant .page-hero h1,.page-hotel .page-hero h1,.page-qr .page-hero h1{font-size:clamp(42px,11.5vw,58px)}
  .v72-flow-card{min-height:auto;padding:58px 14px 84px}.v72-flow-track{height:auto;grid-template-columns:1fr;gap:12px}.v72-step{height:auto;min-height:310px}.v72-step.dashboard-step{min-height:260px}.v72-flow-arrow{width:2px;height:26px;margin:0 auto;background:linear-gradient(180deg,rgba(15,123,90,.15),rgba(15,123,90,.75),rgba(15,123,90,.15))}.v72-flow-arrow:after{content:"↓";right:auto;left:50%;top:auto;bottom:-11px;transform:translateX(-50%)}.v72-flow-arrow:before{left:50%;top:0;transform:translateX(-50%);animation:v72TravelDown 2.4s ease-in-out infinite}.v72-ai-alert{left:14px;right:14px;min-width:0;bottom:14px}.v72-ai-wave{display:none}
  .page-restaurant .media-proof,.page-hotel .media-proof{grid-template-columns:1fr 1fr}.page-restaurant .media-proof .wide,.page-hotel .media-proof .wide{grid-column:1/-1}
  .v72-qr-stage{min-height:auto;padding:58px 14px 24px}.v72-qr-pair{height:auto;grid-template-columns:1fr 30px 1fr}.v72-qr-panel{height:360px}.v72-qr-flow-labels{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}
}
@media(max-width:560px){
  .v72-qr-pair{grid-template-columns:1fr;gap:12px}.v72-qr-connector{width:2px;height:28px;margin:0 auto;background:linear-gradient(180deg,rgba(15,123,90,.15),rgba(15,123,90,.75),rgba(15,123,90,.15))}.v72-qr-connector:after{content:"↓";right:auto;left:50%;top:auto;bottom:-12px;transform:translateX(-50%)}.v72-qr-connector:before{left:50%;top:0;transform:translateX(-50%);animation:v72TravelDown 2.4s ease-in-out infinite}.v72-qr-panel{height:390px}.page-restaurant .media-proof,.page-hotel .media-proof{grid-template-columns:1fr}.page-restaurant .media-proof .wide,.page-hotel .media-proof .wide{grid-column:auto}
}
@keyframes v72TravelDown{0%{top:0;opacity:.2}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 8px);opacity:.2}}
@media(prefers-reduced-motion:reduce){.v72-scan-line,.v72-flow-arrow:before,.v72-qr-connector:before,.v72-ai-alert,.v72-ai-wave i,.v72-live-pill:before{animation:none!important}}


/* V7.3 motion stability: opacity-only entrance. No element zoom/translate on reveal. */
.page-restaurant .reveal,.page-hotel .reveal,.page-qr .reveal{opacity:0;transform:none!important;transition:opacity .44s ease!important;will-change:auto!important}
.page-restaurant .reveal.in-view,.page-hotel .reveal.in-view,.page-qr .reveal.in-view{opacity:1;transform:none!important}
.page-restaurant .stagger>*,.page-hotel .stagger>*,.page-qr .stagger>*{opacity:0;transform:none!important;transition:opacity .38s ease!important}
.page-restaurant .stagger.in-view>*,.page-hotel .stagger.in-view>*,.page-qr .stagger.in-view>*{opacity:1;transform:none!important}
.page-restaurant .world-card:hover,.page-hotel .world-card:hover,.page-qr .world-card:hover,
.page-restaurant .bento-card:hover,.page-hotel .bento-card:hover,.page-qr .bento-card:hover,
.page-restaurant .story-panel:hover,.page-hotel .story-panel:hover,.page-qr .story-panel:hover{transform:none!important}
.page-restaurant .world-card:hover .world-visual img,.page-hotel .world-card:hover .world-visual img,.page-qr .world-card:hover .world-visual img{transform:none!important}
.page-restaurant img,.page-hotel img,.page-qr img,.page-restaurant video,.page-hotel video,.page-qr video{backface-visibility:hidden}
.v72-flow-card,.v72-qr-stage,.v72-step,.v72-qr-panel{transform:none;contain:layout paint}
.v72-ai-alert{animation:v73SoftGlow 3.6s ease-in-out infinite!important}
@keyframes v73SoftGlow{0%,100%{box-shadow:0 18px 42px rgba(23,105,255,.20)}50%{box-shadow:0 20px 50px rgba(23,105,255,.31)}}

/* QR hero: QR and ordering video stay parallel on desktop/tablet. */
.page-qr .v72-qr-stage{width:100%;max-width:780px;margin-inline:auto}
.page-qr .v72-qr-pair{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important;align-items:stretch}
.page-qr .v72-qr-panel{min-width:0}
.page-qr .v72-qr-panel-media{overflow:hidden}
.page-qr .v72-qr-panel-media img,.page-qr .v72-qr-panel-media video{object-fit:contain;transform:none!important}
@media(max-width:760px){.page-qr .v72-qr-pair{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important}.page-qr .v72-qr-panel{height:330px}}
@media(max-width:600px){.page-qr .v72-qr-pair{grid-template-columns:1fr!important;gap:12px}.page-qr .v72-qr-panel{height:370px}.page-qr .v72-qr-connector{width:2px;height:28px;margin:0 auto;background:linear-gradient(180deg,rgba(15,123,90,.15),rgba(15,123,90,.75),rgba(15,123,90,.15))}.page-qr .v72-qr-connector:after{content:"↓";right:auto;left:50%;top:auto;bottom:-12px;transform:translateX(-50%)}.page-qr .v72-qr-connector:before{left:50%;top:0;transform:translateX(-50%);animation:v72TravelDown 2.4s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.page-restaurant .reveal,.page-hotel .reveal,.page-qr .reveal,.page-restaurant .stagger>*,.page-hotel .stagger>*,.page-qr .stagger>*{opacity:1!important;transition:none!important}.v72-ai-alert{animation:none!important}}