@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; }
}


  /* Product overview — AI food photography previews */
  .menu-admin .item-card { align-items: center; }
  .dish-photo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(31,59,31,0.10);
    background: var(--cream);
    box-shadow: 0 10px 20px -16px rgba(31,59,31,0.42);
  }
  .dish-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .po-web-img {
    position: relative;
    overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(14,27,14,0.04), rgba(14,27,14,0.22)),
      url("/landing/assets/product-website-ai-photo.png");
    background-size: cover;
    background-position: center;
  }
  .po-web-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -44px 52px -38px rgba(14,27,14,0.55);
  }
  .po-web-img .site-img-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 24px);
    min-height: 24px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Design Studio — generated post canvas (rebuilt from Studio mock) */
  .feat[id] { scroll-margin-top: 84px; }
  .po-canvas-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(31,59,31,0.12); background: #fff; box-shadow: 0 40px 90px -40px rgba(20,40,20,0.45), 0 10px 28px -18px rgba(20,40,20,0.28); }
  .po-canvas-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #EEF3EE; border-bottom: 1px solid var(--line); }
  .po-canvas-bar .d { width: 10px; height: 10px; border-radius: 50%; display: block; }
  .po-canvas-bar .d.r { background: #FF5F57; } .po-canvas-bar .d.y { background: #FFBD2E; } .po-canvas-bar .d.g { background: #28C940; }
  .po-canvas-ttl { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .po-canvas-frame img { width: 100%; height: auto; display: block; }
  .dsp-body { padding: 16px; }
  .dsp-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
  .dsp-tab { font-size: 11.5px; font-weight: 600; color: var(--sage-2); background: var(--mint-2); border: 1px solid var(--mint); border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
  .dsp-tab-spacer { flex: 1; }
  .dsp-ai { font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #C2522B, #A53F1C); border-radius: 99px; padding: 6px 12px; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(165,63,28,0.7); }

  .dsp-canvas { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #F5F0E3; container-type: inline-size; box-shadow: inset 0 0 0 1px rgba(31,59,31,0.06), 0 18px 40px -22px rgba(31,59,31,0.40); }
  .dsp-bg { position: absolute; left: 0.93%; top: -3.15%; width: 100%; height: 100%; border-radius: 50%; background: #004D3A; }
  .dsp-burst { position: absolute; border-radius: 50%; }
  .dsp-amber-lg { left: -16.7%; top: -16.7%; width: 57.4%; height: 57.4%; background: #F4A300; }
  .dsp-maroon { left: 70.4%; top: 66.6%; width: 44.4%; height: 44.4%; background: #8B0F22; }
  .dsp-pill { position: absolute; left: 5%; top: 6.3%; width: 61.1%; height: 6.66%; border-radius: 99px; background: #2B1810; display: flex; align-items: center; justify-content: center; font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: #F4A300; font-size: 3.8cqw; letter-spacing: 0.4px; }
  .dsp-headline { position: absolute; left: 6.2%; top: 19%; width: 70%; font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: #FDF6E3; font-size: 12cqw; line-height: 0.94; letter-spacing: -0.3px; }
  .dsp-subline { position: absolute; left: 7%; top: 51%; width: 32%; font-family: var(--sans); font-weight: 400; color: #FDF6E3; font-size: 2.05cqw; line-height: 1.4; }
  .dsp-photo { position: absolute; left: 45.1%; top: 48.2%; width: 49.8%; height: 48.4%; border-radius: 2.1cqw; overflow: hidden; background: radial-gradient(120% 90% at 32% 26%, #2B1810 0%, #C2522B 50%, #7A3F1E 105%); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.45); }
  .dsp-photo-tag { position: absolute; bottom: 6%; left: 6%; font-family: var(--mono); font-size: 1.5cqw; color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.34); padding: 0.4cqw 1.2cqw; border-radius: 99px; }
  .dsp-badge { position: absolute; left: 7.6%; top: 66.5%; width: 35.2%; height: 32.5%; border-radius: 50%; background: #F4A300; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -12px rgba(180,83,9,0.7); }
  .dsp-price { font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: #2B1810; font-size: 6.6cqw; }

  .dsp-templates { display: flex; gap: 8px; margin-top: 13px; }
  .dsp-tpl { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 9px 6px; }
  .dsp-tpl.on { background: var(--forest); color: #fff; border-color: var(--forest); }


  .final-cta { padding: 96px 0 112px; position: relative; overflow: hidden; background: var(--mint-2); }
  .final-cta-dots { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; background-image: radial-gradient(circle, rgba(58,110,58,0.18) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(closest-side at 100% 100%, black 0%, transparent 70%); mask-image: radial-gradient(closest-side at 100% 100%, black 0%, transparent 70%); }
  .cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
  .cta-trust { margin-top: 28px; font-size: 13px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }
  .cta-right { display: flex; justify-content: center; }
  .qr-mock { background: var(--paper); border-radius: 24px; padding: 28px; width: 320px; max-width: 100%; border: 1px solid var(--line); box-shadow: 0 28px 60px -28px rgba(31,59,31,0.30); }
  .qr-mock-code { width: 100%; aspect-ratio: 1/1; border-radius: 18px; margin-top: 14px; background: var(--forest); display: grid; place-items: center; overflow: hidden; }
  @media (max-width: 880px) { .cta-grid { grid-template-columns: 1fr; } .cta-right { order: -1; } }