/* MenuDig — Demo page (B language) — device mockups in B brand */

/* Hero fills the viewport like the homepage; nav overlays it. */
.dm-hero-b{min-height:100vh;padding-bottom:80px;}
@media(max-width:760px){.dm-hero-b{min-height:100vh;}}

/* Each "acte" section — editorial split-grid */
.dm-acte{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;}
.dm-acte.rev{grid-template-columns:1.05fr 1fr;}
.dm-acte-copy h2{margin:0 0 22px;}
.dm-acte-copy p{margin:0 0 18px;color:#7d6f60;line-height:1.7;font-size:14px;}
.dm-acte-copy .dm-lead{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:20px;line-height:1.5;color:#5f5650;margin:0 0 22px;}
.dm-bullets{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.dm-bullets li{font-size:13px;color:#5f5650;line-height:1.5;display:flex;gap:10px;align-items:flex-start;}
.dm-bullets li::before{content:"";flex:none;width:6px;height:6px;background:#c0563a;transform:rotate(45deg);margin-top:6px;}
.dm-acte-mock{display:flex;justify-content:center;align-items:center;position:relative;}
@media(max-width:900px){
  .dm-acte,.dm-acte.rev{grid-template-columns:1fr;gap:48px;}
  .dm-acte.rev .dm-acte-mock{order:-1;}
  .dm-bullets{grid-template-columns:1fr;}
}

/* ============================================================
   Device — PHONE (Acte I menu + Acte III pay)
   ============================================================ */
.dm-phone{
  position:relative;width:280px;background:#261d17;border-radius:36px;padding:11px;
  box-shadow:0 40px 70px -28px rgba(38,29,23,.55),0 0 0 1px rgba(232,199,137,.18) inset;
}
.dm-phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:90px;height:18px;border-radius:99px;background:#1c1411;z-index:2;}
.dm-phone-screen{background:#fbf6ec;border-radius:26px;overflow:hidden;padding:36px 14px 16px;min-height:540px;}

/* Menu mockup */
.dm-pm-head{text-align:center;padding-bottom:14px;border-bottom:1px solid #efe7d8;}
.dm-pm-sur{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.22em;color:#c0563a;margin-bottom:4px;}
.dm-pm-title{font-family:'DM Serif Display',Georgia,serif;font-size:19px;color:#261d17;line-height:1.15;margin-bottom:11px;}
.dm-pm-langs{display:flex;justify-content:center;gap:5px;}
.dm-pm-langs span{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10px;font-weight:600;color:#7d6f60;padding:3px 8px;border-radius:99px;background:#fff;border:1px solid #ece3d2;}
.dm-pm-langs span.on{background:#c0563a;color:#fdf7ee;border-color:#c0563a;}
.dm-pm-cat{font-family:'DM Serif Display',Georgia,serif;font-size:15px;color:#261d17;margin:14px 0 10px;}
.dm-pm-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #efe7d8;}
.dm-pm-thumb{flex:none;width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#cd6a45,#7a3d22);}
.dm-pm-thumb.t1{background:linear-gradient(135deg,#cd6a45,#7e361f);}
.dm-pm-thumb.t2{background:linear-gradient(135deg,#e8c789,#c89c5e);}
.dm-pm-thumb.t3{background:linear-gradient(135deg,#9c6633,#5b3a1d);}
.dm-pm-body{flex:1;min-width:0;}
.dm-pm-nm{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:600;font-size:11.5px;color:#261d17;}
.dm-pm-ds{font-size:10.5px;color:#7d6f60;line-height:1.45;margin-top:2px;}
.dm-pm-pr{font-family:'DM Serif Display',Georgia,serif;font-size:14px;color:#c0563a;flex:none;padding-inline-start:8px;}
.dm-pm-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:10px 12px;background:#c0563a;color:#fdf7ee;border-radius:11px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11px;font-weight:600;}
.dm-pm-bar .b{font-weight:700;}

/* Pay mockup (Acte III) */
.dm-pay-screen{padding:32px 14px 16px;}
.dm-pay-head{text-align:center;padding-bottom:12px;border-bottom:1px solid #efe7d8;margin-bottom:10px;}
.dm-pay-bill{margin-bottom:14px;}
.dm-pay-row{display:flex;justify-content:space-between;font-size:11.5px;color:#5f5650;padding:5px 0;}
.dm-pay-row b{color:#261d17;font-weight:600;font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.dm-pay-sub{display:flex;justify-content:space-between;font-size:10.5px;color:#7d6f60;padding:3px 0;border-top:1px dashed #d8cdba;margin-top:6px;}
.dm-pay-sub:first-of-type{border-top:0;margin-top:8px;}
.dm-pay-sub b{font-weight:500;font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.dm-pay-tot{display:flex;justify-content:space-between;font-family:'DM Serif Display',Georgia,serif;font-size:16px;color:#261d17;margin-top:10px;padding-top:8px;border-top:1px solid #ece3d2;}
.dm-pay-tot b{color:#c0563a;}
.dm-pay-tip{margin:12px 0;}
.dm-pay-lbl{font-size:10.5px;color:#7d6f60;margin:0 0 6px;font-weight:500;}
.dm-pay-tips{display:flex;gap:5px;}
.dm-pay-tips span{flex:1;text-align:center;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11px;font-weight:600;padding:7px 0;border-radius:8px;border:1px solid #ece3d2;background:#fff;color:#261d17;}
.dm-pay-tips span.on{background:#c0563a;color:#fdf7ee;border-color:#c0563a;}
.dm-pay-actions{display:flex;gap:6px;margin-top:6px;}
.dm-pay-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 0;background:#fff;color:#261d17;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:600;border:1px solid #ece3d2;border-radius:11px;}
.dm-pay-btn .ic{color:#c0563a;font-size:14px;line-height:1;}

/* ============================================================
   Device — TABLET (Acte II — KDS)
   ============================================================ */
.dm-mock-tablet{padding:0 12px;}
.dm-tablet{
  width:100%;max-width:560px;background:#261d17;border-radius:18px;padding:14px;
  box-shadow:0 40px 70px -28px rgba(38,29,23,.55),0 0 0 1px rgba(232,199,137,.18) inset;
}
.dm-tablet-screen{background:#1c1411;border-radius:8px;overflow:hidden;color:#fdf7ee;padding:14px;}
.dm-kds-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(232,199,137,.18);}
.dm-kds-label{font-family:'DM Serif Display',Georgia,serif;font-size:14px;color:#fdf7ee;}
.dm-kds-conn{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;color:#1f8a5b;text-transform:uppercase;}
.dm-kds-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px;}
.dm-kds-col h5{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,247,238,.78);margin:0 0 8px;display:flex;align-items:center;gap:6px;}
.dm-kds-col h5 .dm-kdot{width:7px;height:7px;border-radius:50%;background:#e08a2b;}
.dm-kds-col h5 .dm-kdot.ready{background:#1f8a5b;}
.dm-kds-col h5 .dm-kn{margin-inline-start:auto;background:rgba(232,199,137,.14);color:#e8c789;padding:1px 7px;border-radius:99px;font-size:9px;letter-spacing:0;}
.dm-kds-card{background:rgba(253,247,238,.06);border:1px solid rgba(232,199,137,.18);border-radius:8px;padding:8px;margin-bottom:8px;border-left:3px solid #e08a2b;}
.dm-kds-card.on{border-left-color:#e08a2b;background:rgba(224,138,43,.06);}
.dm-kds-card.done{border-left-color:#1f8a5b;background:rgba(31,138,91,.06);}
.dm-kds-cardh{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;margin-bottom:5px;}
.dm-kds-cardh b{font-weight:600;color:#fdf7ee;}
.dm-kds-cardh span{font-size:9.5px;color:rgba(253,247,238,.55);}
.dm-kds-card .li{font-size:10.5px;color:rgba(253,247,238,.78);line-height:1.5;}

/* ============================================================
   Device — LAPTOP (Acte IV — dashboard)
   ============================================================ */
.dm-mock-laptop{padding:0 12px;}
.dm-laptop{position:relative;width:100%;max-width:600px;}
.dm-laptop-screen{
  background:#261d17;border-radius:14px 14px 4px 4px;padding:10px;
  box-shadow:0 40px 70px -28px rgba(38,29,23,.55),0 0 0 1px rgba(232,199,137,.18) inset;
}
.dm-laptop-base{height:16px;background:linear-gradient(180deg,#d8cdba,#9a8d7d);border-radius:0 0 18px 18px;width:115%;margin-left:-7.5%;position:relative;}
.dm-laptop-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:18%;height:5px;background:#7d6f60;border-radius:0 0 8px 8px;}
.dm-laptop-screen{background:#fbf6ec;border-radius:8px;overflow:hidden;padding:14px;}
.dm-dash-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #efe7d8;}
.dm-dash-brand{font-family:'DM Serif Display',Georgia,serif;font-size:13px;color:#261d17;}
.dm-dash-user{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10px;color:#7d6f60;font-weight:500;}
.dm-dash-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;}
.dm-dash-card{background:#fff;border:1px solid #ece3d2;border-radius:11px;padding:11px;}
.dm-dash-lbl{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;color:#7d6f60;text-transform:uppercase;margin:0 0 6px;}
.dm-dash-big{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:#261d17;margin:0;line-height:1;}
.dm-dash-big small{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;color:#7d6f60;font-weight:500;margin-inline-start:3px;letter-spacing:.06em;text-transform:uppercase;}
.dm-dash-delta{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9.5px;color:#1f8a5b;font-weight:600;margin-top:4px;display:inline-block;}
.dm-dash-chart{background:#fff;border:1px solid #ece3d2;border-radius:11px;padding:12px;margin-top:8px;}
.dm-bars{display:flex;align-items:flex-end;gap:8px;height:80px;margin-top:8px;}
.dm-bars span{flex:1;background:linear-gradient(180deg,#cd6a45,#7e361f);border-radius:3px 3px 0 0;opacity:.6;}
.dm-bars span.on{opacity:1;}
.dm-bars-x{display:flex;gap:8px;margin-top:6px;}
.dm-bars-x span{flex:1;text-align:center;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;color:#7d6f60;font-weight:600;}

/* ============================================================
   Closing strip
   ============================================================ */
.dm-close{padding:96px 0;background:#1c1411;color:#fdf7ee;text-align:center;position:relative;overflow:hidden;}
.dm-close::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 50%,rgba(192,86,58,.16),transparent 65%);}
.dm-close .B-wrap{position:relative;max-width:780px;}
.dm-close h2{color:#fdf7ee;font-size:32px;margin:0 0 16px;font-weight:400;letter-spacing:-.1px;}
.dm-close p{color:rgba(253,247,238,.72);font-size:15px;line-height:1.7;margin:0 0 32px;}
.dm-close .B-eyebrow{display:inline-block;margin-bottom:18px;}
.dm-close-ctas{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;align-items:center;}
.dm-close-ctas .B-btn-light{color:#fdf7ee;border-color:#fdf7ee;}
.dm-close-ctas .B-btn-light:hover{background:rgba(253,247,238,.08);color:#fdf7ee;}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — demo page device mockups must fit any phone width
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Phone mock: shrink from 280 so it never touches screen edges */
  .dm-phone { width: 100%; max-width: 280px; }
  .dm-phone-screen { min-height: 480px; }

  /* Tablet + laptop mocks already use max-width + 100%; just guarantee padding */
  .dm-mock-tablet, .dm-mock-laptop { padding-inline: 4px; }

  /* KDS 3-col is too tight on a phone-width tablet mock → 1 col stack */
  .dm-kds-cols { grid-template-columns: 1fr; gap: 8px; }

  /* Dashboard 3-col stat grid → 1 col on phone for readability */
  .dm-dash-grid { grid-template-columns: 1fr; }

  /* Closing CTA buttons stack full width */
  .dm-close-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .dm-close-ctas .B-btn-fill,
  .dm-close-ctas .B-btn-light { width: 100%; justify-content: center; text-align: center; }
  .dm-close h2 { font-size: 26px; }
}

@media (max-width: 420px) {
  /* On the smallest phones, drop KDS to a tighter single column with smaller text */
  .dm-kds-col h5 { font-size: 9px; }
}