/* ONTAK app additions on top of the shared demo styles */
.stars{display:flex;gap:4px}
.stars button{width:36px;height:36px;border-radius:10px;border:2px solid var(--line);background:#fff;font-size:18px;font-weight:800;color:#B9C0D4;padding:0}
.stars button[aria-pressed="true"]{border-color:var(--ink);background:var(--sticker);color:var(--ink)}
.ph{width:46px;height:46px;border-radius:999px;border:2.5px solid var(--ink);object-fit:cover;background:#fff;flex-shrink:0}
.cam{position:relative;flex:1;min-height:0;margin:12px 16px 0;border-radius:22px;overflow:hidden;background:#000}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card{background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.muted{color:var(--muted)}
.linkbtn{border:none;background:none;padding:0;font-weight:800;color:var(--court);text-decoration:underline;font-size:13px}
.danger{color:#B3261E}
.pickmap{height:240px;border-radius:16px;overflow:hidden;border:2.5px solid var(--ink);position:relative}
.momimg{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;display:block;background:#DCE1EC}
.empty{background:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.spin{width:28px;height:28px;border-radius:999px;border:4px solid #C9D2FF;border-top-color:var(--court);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.legal{max-width:720px;margin:0 auto;padding:32px 20px 64px;color:#fff;line-height:1.6}
.lpick{background:none;border:none}
.lpick span{position:absolute;left:3px;top:0;width:28px;height:28px;box-sizing:border-box;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sticker);border:3px solid var(--ink);box-shadow:0 0 0 2px #fff}
.lpick span::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:999px;background:var(--ink)}

/* Phones: pin the app to the visible screen so iOS toolbars never hide the bottom, and let only the inner list scroll */
.scroll{min-height:0;overscroll-behavior-y:contain;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
.scroll.nonav{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.nav{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@media (max-width:520px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .stage{position:fixed;inset:0;height:auto;min-height:0}
  .device{position:absolute;inset:0;width:auto;height:auto}
}
/* The card that overlaps the bottom of the home hero must sit above it */
.lift{position:relative;z-index:1}
/* iPhone zooms the page when a field under 16px gets focus; keep every field at 16px */
.input,.composer input,textarea,select,input[type="text"],input[type="date"],input[type="time"],input[type="number"]{font-size:16px}
.composer{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#ckcode::placeholder{letter-spacing:normal;font-weight:600}