/* ═══════════════════════════════════════════════════════════════════════
   MENEW — SHARED INTERACTIVE PHONE-DEMO ENGINE
   Loaded by guest.html, waiter.html, reception.html, restaurant.html only.
   Each page includes just its own view markup block (guestView / waiterView
   / receptionView / restoView) extracted verbatim from the original single-
   page site — this stylesheet covers all four so nothing is duplicated.
   ═══════════════════════════════════════════════════════════════════════ */

/* ===================== HOW IT WORKS ===================== */
.how{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.how-steps{display:flex;flex-direction:column;gap:14px}
.step{position:relative;padding:26px 26px 26px 30px;border-radius:20px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:.45s var(--ease);overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.step.active{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow)}
.step.active::before{transform:scaleY(1)}
.step-top{display:flex;align-items:center;gap:16px}
.step-n{flex:0 0 44px;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;background:rgba(233,165,60,.12);color:var(--gold);border:1px solid var(--line-2);transition:.4s}
.step.active .step-n{background:linear-gradient(135deg,var(--gold),var(--terra));color:#1a1109}
.step h3{font-size:1.4rem}
.step .desc{color:var(--muted);margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:.5s var(--ease);padding-left:60px}
.step.active .desc{max-height:140px;opacity:1;margin-top:14px}

/* sticky phone */
.how-visual{position:sticky;top:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone{position:relative;width:300px;height:610px;border-radius:46px;background:linear-gradient(160deg,#1d2a44,#0e1626);border:1px solid var(--line-2);box-shadow:0 50px 100px -30px rgba(0,0,0,.8),inset 0 0 0 6px #0a1120;padding:14px}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#0a1120;border-radius:0 0 16px 16px;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#1c2a45,#0c1424)}
.screen-pad{position:absolute;inset:0;padding:46px 18px 18px}

/* demo scenes */
.scene{position:absolute;inset:0;padding:46px 18px 18px;opacity:0;transform:translateY(14px);transition:.55s var(--ease);pointer-events:none}
.scene.show{opacity:1;transform:none;pointer-events:auto}
.demo-title{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;margin-bottom:4px}
.demo-sub{font-size:.74rem;color:var(--muted);margin-bottom:16px}

/* scene 1: scan */
.qr-frame{position:relative;width:150px;height:150px;margin:34px auto 0;border-radius:18px;background:#fff;padding:14px;box-shadow:0 14px 40px -10px rgba(0,0,0,.6)}
.qr-frame img,.qr-frame svg{width:100%;height:100%}
.scanline{position:absolute;left:8%;right:8%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 14px 3px rgba(233,165,60,.7);top:14px;animation:scan 2.1s var(--ease) infinite}
@keyframes scan{0%,100%{top:14px}50%{top:130px}}
.scan-corners i{position:absolute;width:20px;height:20px;border:3px solid var(--gold)}
.scan-corners i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.scan-corners i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.scan-corners i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.scan-corners i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.table-tag{margin:26px auto 0;text-align:center;font-size:.78rem;color:var(--gold);font-weight:600;letter-spacing:.1em}

/* scene 2: menu */
.menu-item{display:flex;align-items:center;gap:12px;padding:11px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:9px;transform:translateX(20px);opacity:0;animation:slideMenu .5s var(--ease) forwards}
.menu-item:nth-child(2){animation-delay:.1s}.menu-item:nth-child(3){animation-delay:.2s}.menu-item:nth-child(4){animation-delay:.3s}.menu-item:nth-child(5){animation-delay:.4s}
@keyframes slideMenu{to{transform:none;opacity:1}}
.mi-emoji{font-size:1.5rem;width:52px;height:52px;border-radius:12px;background:rgba(233,165,60,.1);display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.mi-emoji svg{width:100%;height:100%;display:block}
.mi-info{flex:1}
.mi-name{font-size:.84rem;font-weight:700}
.mi-price{font-size:.74rem;color:var(--muted)}
.mi-add{width:28px;height:28px;border-radius:9px;background:var(--gold);color:#1a1109;display:grid;place-items:center;font-weight:800;font-size:1rem}
/* menu header + language toggle */
.menu-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.menu-head .demo-title,.menu-head .demo-sub{margin-bottom:0}
.menu-head .demo-title{margin-bottom:2px}
.lang-toggle{display:flex;gap:2px;flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:30px;padding:3px}
.lang-toggle .lt{font-size:.64rem;font-weight:800;padding:4px 9px;border-radius:30px;color:var(--muted);transition:.35s var(--ease)}
.lang-toggle .lt.ar{font-family:'Noto Kufi Arabic',sans-serif}
.lang-toggle .lt.active{background:var(--gold);color:#1a1109;transform:scale(1.04)}
.menu-list{transition:direction 0s}
/* The menu can outgrow the phone's fixed screen height (more dishes, longer
   rows with a customize link) — scroll the list itself rather than clipping
   it, same as a real phone menu. The head stays put, cartbar still floats
   over the bottom, so the list gets breathing room to clear it. */
.scene[data-scene="1"]{display:flex;flex-direction:column}
.menu-head{flex:0 0 auto}
.menu-list{flex:1 1 auto;overflow-y:auto;padding-bottom:64px;margin-right:-6px;padding-right:6px}
.menu-list::-webkit-scrollbar{width:4px}
.menu-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
/* Arabic / right-to-left state */
.scene.ar-on .menu-head,.scene.ar-on .menu-list{direction:rtl}
.scene.ar-on .tr{font-family:'Noto Kufi Arabic',sans-serif}
.scene.ar-on .demo-title{font-size:1rem}

/* scene 3: shared cart */
.diners{display:flex;justify-content:center;gap:-6px;margin:6px 0 14px}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;border:2px solid #160f0a;margin-left:-8px;color:#1a1109}
.av:first-child{margin-left:0}
.cart-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:6px;opacity:0;transform:scale(.9)}
.cart-row.in{animation:popIn .45s var(--ease) forwards}
@keyframes popIn{to{opacity:1;transform:none}}
.cr-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#1a1109;flex:0 0 24px}
.cr-name{font-size:.76rem;font-weight:600;flex:1;line-height:1.2}
.cr-note{display:block;font-weight:500;font-size:.6rem;color:var(--muted);margin-top:1px}
.cr-price{font-size:.74rem;color:var(--gold);font-weight:700}
.cart-total{margin-top:14px;display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px dashed var(--line-2);font-weight:700}
.cart-total .t{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--gold)}

/* scene 4: sent */
.sent-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:80%;text-align:center;gap:18px}
.check{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--herb),#a7c77f);display:grid;place-items:center;box-shadow:0 16px 40px -10px rgba(132,168,95,.6);animation:popCheck .6s var(--ease)}
@keyframes popCheck{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.check svg{width:42px;height:42px;color:#0e2a08}
.sent-wrap h4{font-family:'Fraunces',serif;font-size:1.4rem}
.sent-wrap p{font-size:.82rem;color:var(--muted)}
.kitchen-pill{margin-top:6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--herb);border:1px solid rgba(132,168,95,.4);padding:6px 14px;border-radius:40px}

/* scene: customise a dish */
.cz-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cz-emoji{font-size:1.7rem;width:46px;height:46px;border-radius:13px;background:rgba(233,165,60,.12);display:grid;place-items:center;flex:0 0 46px;overflow:hidden}
.cz-emoji svg{width:100%;height:100%;display:block}
.cz-name{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600}
.cz-by{font-size:.72rem;color:var(--gold)}
.cz-group{margin-bottom:13px}
.cz-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;margin-bottom:7px}
.cz-opts{display:flex;gap:7px}
.cz-opt{flex:1;text-align:center;font-size:.74rem;font-weight:600;padding:8px 4px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);transition:.3s var(--ease)}
.cz-opt.sel{border-color:var(--gold);background:rgba(233,165,60,.14);color:var(--cream)}
.cz-opt.tap{transform:scale(.94)}
.cz-line{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:6px;font-size:.76rem;font-weight:500;transition:.3s var(--ease)}
.cz-line .cz-txt{flex:1}
.cz-line .cz-plus{font-size:.7rem;color:var(--muted);font-weight:700}
.cz-box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:.68rem;color:#1a1109;flex:0 0 18px;transition:.3s var(--ease)}
.cz-line.sel{border-color:var(--gold);background:rgba(233,165,60,.12)}
.cz-line.sel .cz-box{background:var(--gold);border-color:var(--gold)}
.cz-line.sel .cz-box::after{content:"✓"}
.cz-line.sel .cz-plus{color:var(--gold)}
.cz-add{width:100%;margin-top:6px;border:0;cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:700;color:#1a1109;background:linear-gradient(135deg,var(--gold),var(--gold-2));padding:13px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cz-add b{font-family:'Fraunces',serif}
.cz-add.tap{transform:scale(.96);box-shadow:0 10px 26px -8px rgba(233,165,60,.7)}

/* scene: bill */
.bill-row{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:8px;opacity:0;transform:translateX(14px)}
.bill-row.in{animation:slideMenu .45s var(--ease) forwards}
.bill-info{flex:1}
.bill-name{font-size:.84rem;font-weight:700}
.bill-meta{font-size:.68rem;color:var(--muted)}
.bill-amt{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:var(--gold)}
.bill-note{margin-top:14px;text-align:center;font-size:.68rem;color:var(--muted);line-height:1.4}

/* phone progress dots */
.demo-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:6}
.demo-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.4s}
.demo-dots i.on{background:var(--gold);width:22px;border-radius:6px}


/* ===================== RESTAURANT VIEW — dual phones ===================== */
.resto-view{display:none}
.resto-view.show{display:grid;grid-template-columns:1fr auto auto auto 1fr;gap:0 40px;align-items:stretch;justify-content:center}
.guest-view{display:block}
.guest-view.hide{display:none}
/* The card rails either side are taller than the phone (five cards against a
   490px screen), so the row height comes from them and centring left the
   phone floating with ~100px of dead space below it — the bottom edges did
   not line up. Pinning the label to the top of the column and the phone to
   the bottom aligns both edges with the card rail without shrinking the cards
   to fit or stretching the phone. On /waiters the column height already
   equals the content height, so this resolves to the same layout there. */
.resto-phone-wrap{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px}
.resto-phone-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dim);font-weight:700}
.resto-phone{position:relative;width:240px;height:490px;border-radius:38px;background:linear-gradient(160deg,#1d2a44,#0e1626);border:1px solid var(--line-2);box-shadow:0 40px 80px -24px rgba(0,0,0,.8),inset 0 0 0 5px #0a1120;padding:12px;flex-shrink:0}
.resto-phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:72px;height:19px;background:#0a1120;border-radius:0 0 13px 13px;z-index:5}
.resto-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#0c1424}
/* kitchen screen */
.k-header{padding:16px 14px 10px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.k-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--cream);margin-bottom:2px}
.k-sub{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim)}
.k-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.k-col-head{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:7px;padding:0 2px}
.k-card{border-radius:10px;padding:9px 10px;border:1px solid;margin-bottom:7px;transition:.5s var(--ease);cursor:pointer}

/* An order ticket arriving used to fade up eight pixels, which is how a
   notification behaves, not how a ticket behaves. Kitchens know one motion for
   a new ticket: paper advancing out of a printer in short steps. So the card
   is revealed top-down in discrete jumps with a fraction of a pixel of lateral
   judder — steps(), not a smooth ease, because a smooth reveal reads as a
   wipe and a stepped one reads as a feed.

   clip-path rather than height: the card's layout height is final from the
   first frame, so nothing below it reflows while the ticket appears. */
.ticket-print{animation:ticketFeed .62s steps(1,end) both}
@keyframes ticketFeed{
  0%  {clip-path:inset(0 0 100% 0);opacity:.6;transform:translate(0,-3px)}
  18% {clip-path:inset(0 0 80% 0); opacity:1; transform:translate(.7px,-2px)}
  38% {clip-path:inset(0 0 60% 0);            transform:translate(-.7px,-1px)}
  58% {clip-path:inset(0 0 38% 0);            transform:translate(.6px,0)}
  78% {clip-path:inset(0 0 16% 0);            transform:translate(-.5px,0)}
  100%{clip-path:inset(0 0 0 0);              transform:none}
}
/* Reduced motion keeps the arrival legible without the mechanical feel. */
@media(prefers-reduced-motion:reduce){
  .ticket-print{animation:ticketFadeIn .3s var(--ease) both}
  @keyframes ticketFadeIn{from{opacity:0}to{opacity:1}}
}
.k-card:active{transform:scale(.97)}
.k-card.leaving{opacity:0;transform:scale(.92);margin-bottom:-100px;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.a-order-row.leaving{opacity:0;transform:translateX(10px);margin-bottom:-100px;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.a-stat-val.pulse{animation:statPulse .5s var(--ease)}
@keyframes statPulse{0%,100%{color:inherit}50%{color:var(--herb)}}
.k-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4px}
.k-card-name{font-size:.74rem;font-weight:700;color:var(--cream);line-height:1.2}
.k-card-badge{font-size:.55rem;font-weight:800;padding:2px 7px;border-radius:99px;letter-spacing:.06em;flex-shrink:0}
.k-card-items{margin-top:6px}
.k-item{font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:5px;padding:1px 0}
.k-item::before{content:"·";color:var(--gold);font-weight:700}
.k-timer{font-size:.58rem;font-weight:700;margin-top:6px;font-family:monospace}
/* kitchen card states */
.k-card.new-state{background:rgba(224,101,74,.08);border-color:rgba(224,101,74,.28)}
.k-card.new-state .k-card-badge{background:rgba(224,101,74,.18);color:var(--terra)}
.k-card.new-state .k-timer{color:var(--terra)}
.k-card.prep-state{background:rgba(233,165,60,.08);border-color:rgba(233,165,60,.28)}
.k-card.prep-state .k-card-badge{background:rgba(233,165,60,.18);color:var(--gold)}
.k-card.prep-state .k-timer{color:var(--gold)}
.k-card.ready-state{background:rgba(132,191,142,.08);border-color:rgba(132,191,142,.28)}
.k-card.ready-state .k-card-badge{background:rgba(132,191,142,.2);color:var(--herb)}
.k-card.ready-state .k-timer{color:var(--herb)}
/* admin screen */
.a-header{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.a-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--cream);margin-bottom:2px}
.a-sub{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim)}
.a-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}
.a-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:9px 10px}
.a-stat-val{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--gold);line-height:1}
.a-stat-lbl{font-size:.58rem;color:var(--muted-dim);margin-top:3px;letter-spacing:.05em}
.a-stat-delta{font-size:.58rem;color:var(--herb);font-weight:700;margin-top:2px}
.a-orders{padding:0 10px 10px}
.a-orders-head{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;margin-bottom:7px;padding:0 2px}
.a-order-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:5px;opacity:0;transform:translateX(10px);transition:.4s var(--ease)}
.a-order-row.in{opacity:1;transform:none}
.a-order-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.a-order-info{flex:1;min-width:0}
.a-order-table{font-size:.68rem;font-weight:700;color:var(--cream)}
.a-order-items{font-size:.58rem;color:var(--muted);margin-top:1px}
.a-order-amt{font-size:.72rem;font-weight:700;color:var(--gold);font-family:'Fraunces',serif;flex-shrink:0}
/* scene 5: order confirmed + tracker */
.confirm-wrap{display:flex;flex-direction:column;align-items:center;padding:20px 16px;gap:0}
.confirm-check{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));display:grid;place-items:center;margin-bottom:10px;box-shadow:0 12px 30px -8px rgba(233,165,60,.6);animation:popCheck .6s var(--ease)}
.confirm-check svg{width:26px;height:26px;color:#1a1109}
.confirm-title{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;margin-bottom:2px;text-align:center}
.confirm-sub{font-size:.72rem;color:var(--muted);margin-bottom:14px;text-align:center}
.confirm-code{font-family:'Courier New',monospace;font-size:1.6rem;font-weight:700;letter-spacing:.2em;color:var(--gold);background:rgba(233,165,60,.1);border:1px solid rgba(233,165,60,.28);border-radius:12px;padding:8px 18px;margin-bottom:16px}
.tracker-wrap{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px}
.tracker-label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;margin-bottom:10px;text-align:center}
.tracker-steps{display:flex;justify-content:space-between;position:relative}
.tracker-line-bg{position:absolute;top:13px;left:12%;right:12%;height:2px;background:var(--line);border-radius:1px}
.tracker-line-fill{position:absolute;top:13px;left:12%;right:12%;height:2px;background:var(--gold);border-radius:1px;transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease)}
.tracker-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;z-index:2}
.tracker-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:.7rem;transition:.4s var(--ease)}
.tracker-dot.done{background:var(--gold);border-color:var(--gold);box-shadow:0 4px 14px -4px rgba(233,165,60,.7)}
.tracker-dot.active{border-color:var(--gold);background:rgba(233,165,60,.15);box-shadow:0 0 0 4px rgba(233,165,60,.15)}
.tracker-name{font-size:.52rem;color:var(--muted);text-align:center;line-height:1.2;letter-spacing:.02em;max-width:34px}
.tracker-name.active{color:var(--gold);font-weight:700}
.live-pill{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.62rem;color:var(--herb);font-weight:600}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--herb);animation:beat 1.6s infinite}


/* ---- bill "You" highlight ---- */
.bill-row.you-row{border-color:rgba(233,165,60,.5);background:rgba(233,165,60,.07)}
.scene{overflow:hidden}
.you-tag{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:#1a1109;padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:middle}

/* ---- restaurant view 4-column layout ---- */
.resto-view{display:none;grid-template-columns:1fr auto auto auto 1fr;gap:0 40px;align-items:center;justify-content:center}
.resto-view.show{display:grid}
.resto-points{display:flex;flex-direction:column;gap:22px;max-width:220px}
.resto-points > .rp-item{flex:1 1 0}
.resto-points-left{text-align:right;align-items:stretch;justify-self:start}
.resto-points-left .rp-item{flex-direction:row-reverse}
.resto-points-right{text-align:left;align-items:stretch;justify-self:end}
.rp-item{display:flex;align-items:flex-start;gap:12px;opacity:0;transform:translateX(-12px);transition:.5s var(--ease);padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.resto-points-right .rp-item{transform:translateX(12px)}
.rp-item.in{opacity:1;transform:none}
.rp-ic{font-size:1.1rem;flex:0 0 auto;margin-top:1px}
.rp-item strong{display:block;font-size:.82rem;color:var(--cream);font-weight:700;margin-bottom:3px}
.rp-item p{font-size:.72rem;color:var(--muted);line-height:1.45;margin:0}

@media(max-width:1100px){
  .resto-view.show{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:32px 24px;
  }
  /* child order: 1=left-points 2=kitchen-wrap 3=separator 4=admin-wrap 5=right-points */
  .resto-view > .resto-points-left{grid-column:1;grid-row:2;text-align:left;align-items:stretch;max-width:100%;justify-self:stretch}
  .resto-view > .resto-points-left .rp-item{flex-direction:row}
  .resto-view > .resto-points-right{grid-column:2;grid-row:2;max-width:100%;align-items:stretch;justify-self:stretch}
  .resto-view > .resto-phone-wrap:nth-child(2){grid-column:1;grid-row:1}
  .resto-view > .resto-phone-wrap:nth-child(4){grid-column:2;grid-row:1}
  .resto-separator{display:none}
  .rp-item{transform:none}
}

/* ---- sent + tracker combined scene ---- */
.sent-tracker-wrap{display:flex;flex-direction:column;padding:18px 14px;gap:14px;height:100%}
.st-confirm{display:flex;align-items:center;gap:11px;background:rgba(132,191,142,.1);border:1px solid rgba(132,191,142,.3);border-radius:14px;padding:12px 14px}
.st-check{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--herb),#a7c77f);display:grid;place-items:center;flex:0 0 36px;animation:popCheck .6s var(--ease)}
.st-check svg{width:18px;height:18px;color:#0e2a08}
.st-info{flex:1;min-width:0}
.st-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--cream)}
.st-sub{font-size:.68rem;color:var(--muted);margin-top:1px}
.st-code{font-family:'Courier New',monospace;font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--gold);background:rgba(233,165,60,.1);border:1px solid rgba(233,165,60,.25);border-radius:8px;padding:5px 9px;flex-shrink:0}
.st-divider{height:1px;background:var(--line);margin:0 4px}

/* ---- split bill toggle + evenly view ---- */
.split-toggle{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:40px;padding:3px;gap:3px;margin-bottom:10px}
.sp-btn{flex:1;font-family:'Hanken Grotesk',sans-serif;font-size:.7rem;font-weight:700;padding:6px 8px;border-radius:30px;border:0;cursor:pointer;transition:.28s var(--ease);color:var(--muted);background:transparent}
.sp-btn.active{background:var(--gold);color:#1a1109}
.even-total{font-size:.68rem;color:var(--muted);text-align:center;margin-bottom:4px}
.even-amount{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;color:var(--gold);text-align:center;line-height:1;margin-bottom:14px}
.even-amount span{font-family:'Hanken Grotesk',sans-serif;font-size:.8rem;color:var(--muted);font-weight:400;vertical-align:middle;margin-left:4px}
.even-rows{display:flex;flex-direction:column;gap:6px}
.even-row{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--muted);padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.even-row span{flex:1}
.even-row strong{color:var(--cream);font-family:'Fraunces',serif;font-size:.9rem}

/* ---- restaurant view: separator between phones ---- */
.resto-separator{width:1px;height:380px;background:linear-gradient(to bottom, transparent, rgba(255,255,255,.18) 20%, rgba(255,255,255,.18) 80%, transparent);align-self:center;flex-shrink:0}

/* ===================== WAITER VIEW ===================== */
.waiter-view{display:none}
.waiter-view.show{display:grid;grid-template-columns:1fr auto 1fr;gap:0 48px;align-items:stretch;justify-content:center}
.waiter-phone-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.waiter-phone-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dim);font-weight:700}
.demo-reset,.resto-phone-label .demo-reset{background:transparent;border:1px solid var(--line-2);color:var(--muted);font-size:.62rem;letter-spacing:0;text-transform:none;font-weight:700;font-family:'Hanken Grotesk',sans-serif;padding:5px 10px;border-radius:8px;cursor:pointer;transition:.25s var(--ease);min-height:32px}
.demo-reset:hover{border-color:var(--gold);color:var(--gold)}
.w-card.leaving{opacity:0;transform:scale(.94);margin-top:-100px;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.ix-toast{
  position:absolute;left:14px;right:14px;top:50px;z-index:6;
  display:flex;align-items:center;gap:9px;
  background:#132b1e;border:1px solid rgba(132,191,142,.5);
  border-radius:13px;padding:10px 13px;font-size:.76rem;color:var(--cream);line-height:1.35;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.6);
  transform:translateY(-18px);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.ix-toast.show{transform:translateY(0);opacity:1}
.ix-toast-av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:.64rem;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.waiter-phone{position:relative;width:260px;height:530px;border-radius:40px;background:linear-gradient(160deg,#1d2a44,#0e1626);border:1px solid var(--line-2);box-shadow:0 40px 80px -24px rgba(0,0,0,.8),inset 0 0 0 5px #0a1120;padding:12px;flex-shrink:0}
.waiter-phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:72px;height:19px;background:#0a1120;border-radius:0 0 13px 13px;z-index:5}
.waiter-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#0c1424}
/* waiter screen header */
.w-header{padding:14px 14px 10px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:8px}
.w-title{font-family:'Fraunces',serif;font-size:.9rem;font-weight:600;color:var(--cream)}
.w-sub{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim);margin-top:1px}
.w-name-badge{font-size:.62rem;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(233,165,60,.15);color:var(--gold);border:1px solid rgba(233,165,60,.3);flex-shrink:0}
/* order cards on waiter */
.w-section-head{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;padding:9px 12px 5px;display:flex;align-items:center;gap:6px}
.w-section-head .w-count{font-size:.62rem;background:rgba(240,174,67,.18);color:var(--gold);border-radius:99px;padding:1px 7px;font-weight:800;letter-spacing:0}
.w-card{margin:0 10px 8px;border-radius:12px;padding:10px 11px;border:1px solid;transition:.45s var(--ease)}
.w-card.pending{background:rgba(240,174,67,.08);border-color:rgba(240,174,67,.3)}
.w-card.in-kitchen{background:rgba(231,76,60,.06);border-color:rgba(231,76,60,.22)}
.w-card.ready-alert{background:rgba(132,191,142,.08);border-color:rgba(132,191,142,.35);animation:readyPulse 2s ease-in-out infinite}
@keyframes readyPulse{0%,100%{box-shadow:0 0 0 0 rgba(132,191,142,.25)}50%{box-shadow:0 0 0 6px rgba(132,191,142,.0)}}
.w-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:6px}
.w-card-info{flex:1;min-width:0}
.w-card-table{font-size:.74rem;font-weight:700;color:var(--cream)}
.w-card-meta{font-size:.6rem;color:var(--muted);margin-top:1px}
.w-status-chip{font-size:.55rem;font-weight:800;padding:3px 8px;border-radius:99px;flex-shrink:0;letter-spacing:.04em}
.w-status-chip.pending{background:rgba(240,174,67,.2);color:var(--gold)}
.w-status-chip.kitchen{background:rgba(231,76,60,.18);color:#E74C3C}
.w-status-chip.ready{background:rgba(132,191,142,.2);color:var(--herb)}
.w-card-people{display:flex;flex-direction:column;gap:3px;margin-bottom:7px}
.w-person-row{display:flex;align-items:center;gap:7px;font-size:.62rem;color:var(--muted)}
.w-person-row .av-sm{width:18px;height:18px;border-radius:50%;font-size:.52rem;font-weight:800;color:#1a1109;display:grid;place-items:center;flex:0 0 18px}
.w-person-dish{flex:1;color:var(--cream);font-weight:500}
.w-card-actions{display:flex;gap:6px;margin-top:2px}
.w-btn{flex:1;font-size:.62rem;font-weight:700;padding:6px 4px;border-radius:8px;border:0;cursor:pointer;transition:.25s var(--ease);text-align:center;font-family:'Hanken Grotesk',sans-serif}
.w-btn.confirm{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1109}
.w-btn.void{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line)}
.w-btn.serve{background:rgba(132,191,142,.2);color:var(--herb);border:1px solid rgba(132,191,142,.3);font-size:.6rem}

/* waiter points columns */
/* The columns either side of the phone are grid `align-items:stretch`, so they
   already end exactly where the phone ends. Centring the cards inside them
   left the leftover height split evenly top and bottom — 50px each on
   /waiters — which is why the last card floated above the phone's base.
   Letting the cards share the column's height instead lands the final card's
   bottom edge on the phone's. `flex:1` is inert once the columns stack on
   mobile, because a column with auto height has no free space to distribute. */
.waiter-points{display:flex;flex-direction:column;gap:22px;max-width:230px}
.waiter-points > .rp-item{flex:1 1 0}
.waiter-points-left{text-align:right;align-items:stretch;justify-self:start}
.waiter-points-left .rp-item{flex-direction:row-reverse}
.waiter-points-right{text-align:left;align-items:stretch;justify-self:end}
.waiter-points .rp-item{transform:translateX(-12px)}
.waiter-points-right .rp-item{transform:translateX(12px)}
.waiter-points .rp-item.in{opacity:1;transform:none}

/* flow arrow between waiter heading columns */
.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:.6s var(--ease)}
.flow-arrow.in{opacity:1}
.flow-arrow-line{width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.18) 30%,rgba(255,255,255,.18) 70%,transparent)}
.flow-arrow-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg)}

/* ─── 3-view flow diagram strip ─── */
.flow-strip{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 52px;max-width:640px;flex-wrap:nowrap}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.flow-node-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
.flow-node-ic.customer{background:rgba(233,165,60,.14);border:1px solid rgba(233,165,60,.3)}
.flow-node-ic.waiter{background:rgba(86,142,214,.14);border:1px solid rgba(86,142,214,.3)}
.flow-node-ic.kitchen{background:rgba(132,191,142,.14);border:1px solid rgba(132,191,142,.3)}
.flow-node-label{font-size:.72rem;font-weight:700;color:var(--cream);letter-spacing:.02em}
.flow-node-sub{font-size:.62rem;color:var(--muted);text-align:center;max-width:80px;line-height:1.35}
.flow-connector{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;padding:0 8px}
.flow-connector-line{width:40px;height:1px;background:linear-gradient(90deg,var(--line),var(--line-2),var(--line))}
.flow-connector-label{font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;white-space:nowrap}

/* ─── view toggle 3 buttons ─── */
.view-toggle button{flex:1}

/* ─── responsive waiter view ─── */
@media(max-width:960px){
  .waiter-view.show{grid-template-columns:1fr;gap:32px;justify-items:center}
  .waiter-points-left,.waiter-points-right{text-align:left;align-items:stretch;max-width:100%;justify-self:stretch}
  .waiter-points-left .rp-item{flex-direction:row}
  .waiter-points .rp-item{transform:none}
  .waiter-phone-wrap{order:-1}
  .flow-strip{gap:0;max-width:100%}
  .flow-connector-line{width:24px}
}
@media(max-width:640px){
  .waiter-view.show{display:flex;flex-direction:column;align-items:center;gap:28px}
  .waiter-phone{transform:scale(.86);margin:-44px auto}
  .flow-strip{flex-wrap:wrap;gap:16px;justify-content:center}
  .flow-connector{display:none}
  .flow-node{min-width:80px}
}

/* ===================== RESPONSIVE (all demo views) ===================== */
/* ===================== RESPONSIVE ===================== */

/* ── 960px: tablet landscape ─────────────────────────────────────────────── */
@media(max-width:960px){
  .how,.impact,.cta-band{grid-template-columns:1fr;gap:40px}
  .how-visual{position:relative;top:0;order:-1}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat.span2{grid-column:span 2;display:block;text-align:left}
  .stats-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .step{cursor:default}
  .step .desc,.step.active .desc{max-height:none;opacity:1;margin-top:14px}
}

/* ── 640px: mobile ───────────────────────────────────────────────────────── */
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .nav{padding:8px 14px 8px 14px}
  /* Hero */
  .floaters{display:none}
  /* The hero's top padding lives on --page-top in shared/style.css. This
     file loads after it, so a copy of the rule here silently beat the
     token — and only on the four pages that load this sheet, which is
     how /guests sat 68px under the nav on a phone while /faq sat 28px. */
  .hero{padding-bottom:52px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
  /* Features */
  .feat-grid{grid-template-columns:1fr}
  .feat.span2{grid-column:span 1;display:block;text-align:left}
  /* Impact */
  .impact-cards{grid-template-columns:1fr}
  /* CTA form */
  .cta-band{padding:28px}
  .row2{grid-template-columns:1fr}
  .form-actions .btn{min-width:100%}
  /* Section padding */
  /* ---- all section top/bottom padding (mobile) — edit here */
  .pad{padding:50px 0}
  /* Footer */
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Phone demo: scale to fit, reclaim dead space */
  .phone{transform:scale(.86);margin:-44px auto}
  /* Steps */
  .step{padding:22px}
  .step h3{font-size:1.2rem}
  .step .step-n{flex:0 0 40px;width:40px;height:40px}
  .step .desc{padding-left:56px}
  /* View toggle */
  .view-toggle{width:100%;border-radius:20px}
  .view-toggle button{padding:8px 12px;font-size:.78rem;flex:1 1 40%;border-radius:14px}
  /* Restaurant view: single column stack on mobile */
  .resto-view.show{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .resto-separator{display:none !important}
  .resto-points-left,.resto-points-right{
    max-width:100%;
    text-align:left;
    align-items:stretch;
    width:100%;
    order:0;
  }
  .resto-points-left .rp-item{flex-direction:row}
  /* show kitchen points right after kitchen phone, admin points after admin phone */
  .resto-view > .resto-phone-wrap:nth-child(2){order:1}
  .resto-view > .resto-points-left{order:2}
  .resto-view > .resto-phone-wrap:nth-child(4){order:3}
  .resto-view > .resto-points-right{order:4}
  .rp-item{transform:none;opacity:1}
  /* New scene: bill overflow on small screens */
  .scene[data-scene="5"]{overflow-y:auto}
  /* Stats */
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* ── 480px: small phones ─────────────────────────────────────────────────── */
@media(max-width:480px){
  .resto-phone{width:200px;height:408px}
  /* Stats: 1 column on very narrow */
  .stats-grid{grid-template-columns:1fr 1fr}
  /* Sent+tracker: tighten padding */
  .sent-tracker-wrap{padding:14px 10px;gap:10px}
  .st-confirm{padding:10px 10px;gap:8px}
  .st-code{font-size:.72rem;padding:4px 7px}
}

/* ── 360px: tiny phones ──────────────────────────────────────────────────── */
@media(max-width:360px){
  .phone{transform:scale(.74);margin:-80px auto}
  .step .desc{padding-left:0}
  .resto-phone{width:170px;height:348px}
  .sent-tracker-wrap{padding:10px 8px;gap:8px}
  .tracker-dot{width:22px;height:22px;font-size:.6rem}
}

/* ── "Live demo, not a video" tap hint ───────────────────────────────────── */
.tap-hint-host{position:relative}
.tap-hint{
  position:absolute;inset:0;z-index:30;border-radius:inherit;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;
  background:rgba(10,17,32,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
/* pointer-events stays NONE while shown. The hint reads "try it yourself", so
   the natural response is to tap a control in the mockup — and with
   pointer-events:auto that first tap landed on the overlay instead. The hint
   dismissed and the button the visitor aimed at never fired, so the demo felt
   dead on exactly the tap that was meant to prove it alive. They had to tap
   twice, and only somebody who tried twice ever found that out.

   With none, the tap reaches the real control, bubbles up to
   .tap-hint-target, and the dismiss handler there still fires — the hint goes
   away and the thing the visitor pressed also happens, on one tap. */
.tap-hint.show{opacity:1;pointer-events:none}
.tap-hint-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(233,165,60,.16);border:1px solid rgba(233,165,60,.45);
  border-radius:18px;padding:16px 22px;color:var(--cream);font-weight:700;font-size:.86rem;
  animation:tapHintPulse 1.8s ease-in-out infinite;
}
.tap-hint-ic{font-size:1.7rem;animation:tapHintTap 1.4s ease-in-out infinite}
@keyframes tapHintTap{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tapHintPulse{0%,100%{box-shadow:0 0 0 0 rgba(233,165,60,.28)}50%{box-shadow:0 0 0 12px rgba(233,165,60,0)}}
@media(max-width:480px){.tap-hint-badge{font-size:.78rem;padding:13px 18px}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}