/* Tablet and phone use the app directly; large desktop screens retain the device-demo frame. */
@media(max-width:1180px){
  body{background:var(--cream);overflow:hidden}
  .demo-shell{display:block;min-height:100dvh;padding:0}
  .demo-notes{position:fixed;z-index:30;top:0;left:0;right:0;max-width:none;height:64px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid var(--line)}
  .demo-notes .brand{font-size:1.35rem}
  .demo-notes .kicker,.demo-notes h1,.demo-notes .intro,.demo-notes .privacy-note,.demo-hint{display:none}
  .role-switch{margin:0}
  .role{padding:8px 18px}
  .phone-stage{padding:0}
  .phone{position:fixed;inset:64px 0 0;width:100%;height:auto;border:0;border-radius:0;background:var(--cream);box-shadow:none;overflow:visible}
  .phone:before,.status{display:none}
  .screen{position:absolute;top:0;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;width:min(100%,780px);height:auto;transform:translateX(-50%);overflow-y:auto;padding:14px 24px 30px;scrollbar-width:none}
  .bottom-nav{position:fixed;z-index:40;bottom:0;left:50%;right:auto;width:min(100%,780px);height:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:8px 16px calc(13px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(76,31,49,.08)}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media(min-width:700px) and (max-width:1180px){
  .app-head{padding-top:18px}
  .quick-grid{gap:14px}
  .quick{min-height:86px}
  .market-grid{grid-template-columns:repeat(3,1fr)}
  .product-art{height:150px}
  .photo{height:260px}
  .card,.hero-card{padding:20px}
  .form-card{max-width:680px;margin-left:auto;margin-right:auto}
}
@media(max-width:540px){
  .demo-notes{height:62px;padding:10px 14px}
  .phone{top:62px}
  .screen{padding:8px 17px 24px}
  .role{padding:8px 13px}
}