@media (max-width: 560px) {
  html, body { overflow-x: clip; }
  .lp-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .fnav-inner { min-height: 64px !important; height: auto !important; padding: 10px 18px !important; gap: 10px !important; }
  .fnav-logo span { font-size: 16px !important; }
  .fnav-cta .lp-btn { padding: 11px 14px !important; font-size: 14px !important; }
  .lp-btn { white-space: normal !important; text-align: center; justify-content: center; line-height: 1.15; }
  .fp-hero { padding-top: 40px !important; padding-bottom: 52px !important; }
  .fp-hero-grid,
  .fp-feat-grid,
  .fp-spot-grid,
  .feat-grid,
  .cta-grid,
  .fp-hero-grid > *,
  .fp-feat-grid > *,
  .fp-spot-grid > *,
  .feat-grid > *,
  .cta-grid > *,
  .fp-hero-media,
  .fp-feat-media,
  .feat-text,
  .feat-media,
  .showcase,
  .frame,
  .app-frame,
  .po-card,
  .oo-fig { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
  .fp-hero-cta .lp-btn,
  .fp-final-cta .lp-btn { width: 100%; }
  .fp-stats { gap: 16px 22px !important; }
  .fp-eyebrow,
  .eyebrow,
  .tag { white-space: normal !important; }
  .we-caret { display: none !important; }
  .crmm-tracked { white-space: normal !important; max-width: 100%; }
}

@media (max-width: 600px) {
  .om-card { min-width: 0 !important; }
  .om-card-head { flex-direction: column !important; align-items: stretch !important; }
  .om-lane-label { align-self: flex-start; max-width: 100%; white-space: normal; }
  .om-foot { flex-wrap: wrap; align-items: flex-start !important; }
  .om-foot-actions { width: 100%; justify-content: flex-end; min-width: 0; }
  .om-btn-next { max-width: 100%; white-space: normal; }
  .om-life-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .dsh-export-flow { width: auto !important; max-width: calc(100vw - 56px) !important; transform: none !important; }
  .dsh-export-flow .ds-export { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .dsh-export-flow .dse-preview { min-height: 152px !important; padding: 12px !important; }
  .dsh-export-flow .dse-card { max-width: 138px !important; }
  .dsh-export-flow .dse-panel { padding: 12px !important; }
  .dsh-export-flow .dse-toggle,
  .dsh-export-flow .dse-row { min-width: 0 !important; }
  .dsh-export-flow .dse-pill { white-space: normal !important; text-align: right; }
}


  .mb-powers { padding: clamp(56px,7vw,88px) 0; background: var(--mint-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .powers-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
  .pwr { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px; text-align: center; transition: transform .15s, box-shadow .15s; }
  .pwr:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .pwr-ic { font-size: 26px; }
  .pwr-n { font-size: 14.5px; font-weight: 700; color: var(--forest); margin-top: 10px; }
  .pwr-m { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  @media (max-width: 820px) { .powers-grid { grid-template-columns: repeat(2,1fr); } }

  .mb-upload { background: linear-gradient(165deg,#EEF6F0,#E1EFE6); padding: 28px 30px; min-height: 432px; display:flex; flex-direction:column; justify-content:center; }
  .mbu-eyebrow { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--sage-2); }
  .mbu-title { font-size:25px; font-weight:800; color:var(--forest); letter-spacing:-0.02em; margin:8px 0 16px; }
  .mbu-drop { border:2px dashed #BDD3C2; border-radius:16px; background:rgba(255,255,255,0.72); padding:22px; text-align:center; }
  .mbu-drop .ic { width:46px; height:46px; border-radius:12px; background:var(--forest); color:#fff; display:grid; place-items:center; margin:0 auto 12px; }
  .mbu-drop .t1 { font-size:15px; font-weight:700; color:var(--ink); }
  .mbu-drop .t2 { font-size:12.5px; color:var(--ink-3); margin-top:3px; }
  .mbu-file { display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:12.5px; color:var(--ink-2); font-weight:600; }
  .mbu-file .dot { width:18px; height:18px; border-radius:5px; background:#D9EBDA; color:var(--sage-2); display:grid; place-items:center; font-size:10px; font-weight:800; }
  .mbu-desc { margin-top:14px; background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:13px 15px; }
  .mbu-desc label { display:block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:6px; }
  .mbu-desc p { font-size:14px; line-height:1.45; color:var(--ink); }
  .mbu-go { margin-top:16px; align-self:flex-start; background:var(--forest); color:#fff; border:none; border-radius:11px; padding:12px 20px; font-weight:700; font-size:14.5px; cursor:pointer; box-shadow:0 12px 26px -16px rgba(31,59,31,0.6); }

  /* ---- Menu served in a browser window, with corner sparkles ---- */
  /* ---- Menu served in a browser window, with corner sparkles (Step 2 "Poof") ---- */
  .mdb-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(31,59,31,0.14); background: #fff; box-shadow: 0 40px 90px -40px rgba(20,40,20,0.55), 0 12px 30px -18px rgba(20,40,20,0.30); }
  .mdb-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #EEF3EE; border-bottom: 1px solid var(--line); }
  .mdb-bar .d { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .mdb-bar .d.r { background: #FF5F57; } .mdb-bar .d.y { background: #FFBD2E; } .mdb-bar .d.g { background: #28C940; }
  .mdb-page { background: radial-gradient(120% 100% at 50% 0%, #F8F6F1 0%, #ECEAE2 100%); padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 50px); }
  .mdb-doc { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
  .mdb-doc img { width: 100%; height: auto; display: block; border-radius: 7px; box-shadow: 0 24px 50px -24px rgba(31,40,24,0.45), 0 6px 16px -10px rgba(31,40,24,0.30); }
  .mdb-spk { position: absolute; width: 24px; height: 24px; background: #E4B66E; clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%); filter: drop-shadow(0 0 6px rgba(228,182,110,0.7)); opacity: 0; transform: scale(0.3); animation: mdbTwinkle 2.8s ease-in-out infinite; }
  .mdb-spk.s1 { top: -11px; right: -12px; width: 28px; height: 28px; animation-delay: 0s; }
  .mdb-spk.s2 { bottom: 4px; left: -13px; width: 19px; height: 19px; animation-delay: 0.9s; }
  .mdb-spk.s3 { top: 26px; left: -9px; width: 15px; height: 15px; animation-delay: 1.7s; }
  .mdb-spk.s4 { bottom: -12px; right: 34px; width: 21px; height: 21px; animation-delay: 1.3s; }
  @keyframes mdbTwinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 42% { opacity: 1; transform: scale(1) rotate(18deg); } 68% { opacity: 0.25; transform: scale(0.65) rotate(28deg); } }
  @media (prefers-reduced-motion: reduce) { .mdb-spk { animation: none; opacity: 0.9; transform: scale(0.92); } }

  /* ---- "One menu in" — cluster of the four outputs on the dark spotlight ---- */
  .io-cluster { position: relative; width: 100%; max-width: 500px; height: 470px; margin: 0 auto; }
  .io-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(146,190,146,0.30), rgba(146,190,146,0) 66%); filter: blur(6px); pointer-events: none; }
  .io-card { position: absolute; margin: 0; }
  .io-card img { display: block; }
  .io-chip { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; background: #EAF4EC; color: var(--forest);
    padding: 5px 11px; border-radius: 99px; font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.6px; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.55); z-index: 9; }
  .io-chip.top { top: -12px; bottom: auto; }
  .io-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

  .io-print { width: 206px; left: 8px; top: 16px; z-index: 2; }
  .io-print img { width: 100%; height: auto; border-radius: 7px; border: 1px solid rgba(20,30,18,0.3);
    box-shadow: 0 30px 56px -26px rgba(0,0,0,0.6), 0 8px 20px -12px rgba(0,0,0,0.45); }
  .io-web { width: 236px; right: 8px; top: 16px; z-index: 3; }
  .io-phone { left: 36px; bottom: 6px; transform: scale(0.74); transform-origin: bottom left; z-index: 5; }
  .io-qr { right: 40px; bottom: 22px; transform: scale(0.9); transform-origin: bottom right; z-index: 4; }

  /* Website mockup */
  .io-website { width: 236px; border-radius: 11px; overflow: hidden; background: #F5F0E3; border: 1px solid rgba(20,30,18,0.25);
    box-shadow: 0 30px 56px -26px rgba(0,0,0,0.6), 0 8px 20px -12px rgba(0,0,0,0.45); }
  .iow-bar { height: 26px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid #ECE4D2; }
  .iow-logo { font-family: var(--serif); font-style: italic; font-size: 14px; color: #2A1810; }
  .iow-links { display: flex; gap: 5px; }
  .iow-links i { width: 15px; height: 3px; border-radius: 2px; background: #CBB79A; display: block; }
  .iow-hero { position: relative; height: 124px; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; color: #F5EFE0;
    background: linear-gradient(135deg, #3A2A1C 0%, #6B4423 60%, #8A5A2E 100%); }
  .iow-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 120%, rgba(0,0,0,0.35), transparent 60%); }
  .iow-kicker { position: relative; font-family: var(--mono); font-size: 7px; letter-spacing: 2.4px; color: #E9D9B8; z-index: 1; }
  .iow-title { position: relative; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.04; margin-top: 5px; z-index: 1; }
  .iow-btns { position: relative; margin-top: 11px; display: flex; gap: 6px; z-index: 1; }
  .iow-btn { background: #E9D9B8; color: #3A2A1C; font-size: 8px; font-weight: 700; padding: 5px 11px; border-radius: 99px; font-family: var(--mono); letter-spacing: 0.4px; }
  .iow-btn.ghost { background: transparent; color: #F5EFE0; border: 1px solid rgba(245,239,224,0.6); }
  .iow-strip { height: 30px; display: flex; gap: 6px; padding: 7px 11px; background: #fff; }
  .iow-strip span { flex: 1; border-radius: 4px; background: #EFE6D5; }

  @media (max-width: 1080px) { .io-cluster { transform: scale(0.9); } }
  @media (max-width: 920px) { .io-cluster { transform: none; margin-top: 8px; } }
  @media (max-width: 540px) { .io-cluster { transform: scale(0.78); transform-origin: top center; height: 380px; } }

  /* ============================================================
     HERO — menu transformation animation
     ============================================================ */
  .menu-morph { --mm: 13s; position: relative; width: 100%; max-width: 540px; margin: 0 auto; height: 480px; perspective: 1100px; }
  .mm-glow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(91,143,91,0.28), rgba(91,143,91,0) 68%); filter: blur(8px); opacity: 0; animation: mmGlow var(--mm) ease-in-out infinite; }

  /* Old handwritten menu — three.js paper crumple (desktop) + CSS shake fallback */
  .mm-ugly { position: absolute; left: 50%; top: 50%; margin: 0; width: 384px; height: 312px;
    transform: translate(-50%,-50%); transform-origin: 50% 50%; z-index: 4;
    opacity: 0; animation: mmUgly var(--mm) ease-out infinite; will-change: opacity; }
  .mm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
  .menu-morph.is-3d .mm-canvas { display: block; }
  .mm-fallback { position: absolute; left: 50%; top: 50%; width: 320px; height: auto; transform: translate(-50%,-50%) rotate(-2deg);
    border-radius: 4px; background: #F3F1EA; border: 1px solid #E4E0D4;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 44px -22px rgba(31,40,24,0.40), 0 4px 12px rgba(31,40,24,0.10);
    display: none; will-change: transform, opacity; }
  .menu-morph.is-fallback .mm-fallback { display: block; animation: mmShake var(--mm) ease-in-out infinite; }
  .mm-tag-old { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
    background: #FEE2E4; border: 1px solid #F8C5CC; color: var(--rose); padding: 5px 12px; border-radius: 99px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; font-weight: 600; text-transform: uppercase;
    box-shadow: 0 6px 16px -10px rgba(184,36,60,0.4); animation: mmTag var(--mm) ease-in-out infinite; }

  /* Outputs */
  .mm-out { position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0; will-change: transform, opacity; }
  .mm-out img { display: block; }
  .mm-print { width: 256px; z-index: 3; animation: mmPrint var(--mm) cubic-bezier(.34,1.4,.5,1) infinite; }
  .mm-print img { width: 100%; height: auto; border-radius: 7px; border: 1px solid rgba(31,40,24,0.10);
    box-shadow: 0 30px 56px -26px rgba(31,40,24,0.5), 0 8px 20px -12px rgba(31,40,24,0.3); }
  .mm-phone { width: 152px; z-index: 5; animation: mmPhone var(--mm) cubic-bezier(.34,1.4,.5,1) infinite; }
  .mm-qr { width: 158px; z-index: 4; animation: mmQr var(--mm) cubic-bezier(.34,1.4,.5,1) infinite; }
  .mm-chip { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; background: var(--forest); color: #EAF4EC;
    padding: 5px 11px; border-radius: 99px; font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.6px; box-shadow: 0 10px 22px -12px rgba(31,59,31,0.6); }
  .mm-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #8FD49B; }
  .mm-print .mm-chip { top: -13px; bottom: auto; }

  /* Phone (digital menu) */
  .mmph { width: 152px; background: #1A1A1A; border-radius: 26px; padding: 6px; box-shadow: 0 30px 60px -22px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset; }
  .mmph-screen { background: #F5F0E3; border-radius: 21px; padding: 12px 9px; position: relative; height: 300px; overflow: hidden; }
  .mmph-est { text-align: center; font-size: 6.5px; letter-spacing: 1.3px; color: #6B4423; font-family: var(--mono); font-weight: 600; }
  .mmph-name { text-align: center; font-style: italic; font-size: 21px; color: #2A1810; line-height: 1.05; margin-top: 2px; font-family: var(--serif); }
  .mmph-orn { text-align: center; font-size: 7px; color: #B8966B; margin: 2px 0 7px; }
  .mmph-tabs { display: flex; gap: 3px; margin-bottom: 7px; }
  .mmph-tab { background: transparent; color: #6B4423; border: 0.5px solid #6B4423; padding: 2.5px 6px; border-radius: 99px; font-size: 6px; font-family: var(--mono); font-weight: 600; }
  .mmph-tab.on { background: #6B4423; color: #F5F0E3; }
  .mmph-item { background: #fff; border-radius: 8px; padding: 6px 7px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 4px; }
  .mmph-item > div:first-child { flex: 1; min-width: 0; }
  .mmph-n { font-size: 8px; color: #2A1810; font-weight: 600; }
  .mmph-d { font-size: 6.5px; font-style: italic; color: #8B7355; margin-top: 1px; }
  .mmph-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
  .mmph-p { font-size: 8px; color: #2A1810; font-weight: 700; font-family: var(--mono); }
  .mmph-add { background: #6B4423; color: #F5F0E3; border-radius: 4px; padding: 2px 6px; font-size: 6px; font-weight: 700; font-family: var(--mono); letter-spacing: .3px; }
  .mmph-cart { position: absolute; bottom: 9px; right: 9px; width: 28px; height: 28px; border-radius: 9px; background: #6B4423; display: grid; place-items: center; font-size: 13px; box-shadow: 0 4px 10px rgba(107,68,35,0.4); }
  .mmph-badge { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: #C2522B; color: #fff; font-size: 8.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }

  /* QR card */
  .mmqr { width: 158px; background: #fff; border-radius: 16px; padding: 15px 15px 13px; border: 1px solid var(--line);
    box-shadow: 0 30px 56px -26px rgba(31,40,24,0.45), 0 8px 20px -12px rgba(31,40,24,0.28); text-align: center; }
  .mmqr-top { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--forest); }
  .mmqr-grid { width: 116px; height: 116px; margin: 11px auto 10px; }
  .mmqr-grid svg { width: 100%; height: 100%; display: block; }
  .mmqr-bot { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.4px; color: var(--ink-3); }

  /* ── Keyframes (one shared cycle) ── */
  @keyframes mmGlow { 0%,50% { opacity: 0; } 64% { opacity: 1; } 80% { opacity: 0.7; } 92% { opacity: 0.4; } 100% { opacity: 0; } }
  @keyframes mmTag { 0%,4% { opacity: 0; } 8%,16% { opacity: 1; } 21%,100% { opacity: 0; } }
  @keyframes mmUgly { 0% { opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
  /* Fallback: flat menu sits, shakes, then gets tossed away (mobile / no-WebGL / reduced motion) */
  @keyframes mmShake {
    0%   { opacity: 0; transform: translate(-50%,-50%) rotate(-2deg) scale(.9); }
    5%   { opacity: 1; transform: translate(-50%,-50%) rotate(-2deg) scale(1); }
    44%  { opacity: 1; transform: translate(-50%,-50%) rotate(-2deg) scale(1); }
    46%  { transform: translate(-51.5%,-50%) rotate(-4.5deg) scale(1); }
    48%  { transform: translate(-48.5%,-50.5%) rotate(0.5deg) scale(1.01); }
    50%  { transform: translate(-51.5%,-49.5%) rotate(-5deg) scale(1.01); }
    52%  { transform: translate(-48.5%,-50.5%) rotate(1.5deg) scale(1.02); }
    54%  { transform: translate(-51%,-50%) rotate(-3.5deg) scale(1.02); }
    56%  { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(.52); }
    61%  { opacity: 1; transform: translate(18%,-118%) rotate(34deg) scale(.46); }
    63%  { opacity: 0; transform: translate(154%,-68%) rotate(118deg) scale(.34); }
    100% { opacity: 0; transform: translate(154%,-68%) rotate(118deg) scale(.34); }
  }
  @keyframes mmPrint {
    0%,63% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.6); }
    71%    { opacity: 1; transform: translate(-50%,-50%) translate(-108px,-20px) rotate(-8deg) scale(1.02); }
    76%    { opacity: 1; transform: translate(-50%,-50%) translate(-102px,-22px) rotate(-7deg) scale(1); }
    91%    { opacity: 1; transform: translate(-50%,-50%) translate(-102px,-22px) rotate(-7deg) scale(1); }
    97%    { opacity: 0; transform: translate(-50%,-50%) translate(-102px,-30px) rotate(-7deg) scale(.96); }
    100%   { opacity: 0; }
  }
  @keyframes mmPhone {
    0%,66% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.6); }
    74%    { opacity: 1; transform: translate(-50%,-50%) translate(78px,-2px) rotate(4deg) scale(1.03); }
    79%    { opacity: 1; transform: translate(-50%,-50%) translate(72px,-4px) rotate(3deg) scale(1); }
    91%    { opacity: 1; transform: translate(-50%,-50%) translate(72px,-4px) rotate(3deg) scale(1); }
    97%    { opacity: 0; transform: translate(-50%,-50%) translate(72px,-12px) rotate(3deg) scale(.96); }
    100%   { opacity: 0; }
  }
  @keyframes mmQr {
    0%,69% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.6); }
    77%    { opacity: 1; transform: translate(-50%,-50%) translate(-52px,118px) rotate(-5deg) scale(1.03); }
    82%    { opacity: 1; transform: translate(-50%,-50%) translate(-58px,114px) rotate(-4deg) scale(1); }
    91%    { opacity: 1; transform: translate(-50%,-50%) translate(-58px,114px) rotate(-4deg) scale(1); }
    97%    { opacity: 0; transform: translate(-50%,-50%) translate(-58px,108px) rotate(-4deg) scale(.96); }
    100%   { opacity: 0; }
  }

  @media (max-width: 920px) { .menu-morph { transform: scale(0.96); } }
  @media (max-width: 460px) { .menu-morph { transform: scale(0.8); } }
  @media (prefers-reduced-motion: reduce) {
    .mm-ugly, .mm-glow, .mm-tag-old { animation: none; opacity: 0; }
    .mm-glow { opacity: .7; }
    .mm-out { animation: none; opacity: 1; }
    .mm-print { transform: translate(-50%,-50%) translate(-102px,-22px) rotate(-7deg); }
    .mm-phone { transform: translate(-50%,-50%) translate(72px,-4px) rotate(3deg); }
    .mm-qr { transform: translate(-50%,-50%) translate(-58px,114px) rotate(-4deg); }
  }