/* apps — כללי CSS ייחודיים לעמוד. הבסיס המשותף נמצא ב-assets/css/site.css */
.pg /* ===== page-specific: branded-apps hero (phones + push) ===== */
  .phones{position:relative; height:560px; display:flex; justify-content:center; align-items:center; perspective:1400px}
.pg .phone{position:absolute; width:236px; height:492px; border-radius:40px; padding:11px; background:linear-gradient(160deg,#20264d,#0a0e26); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -30px rgba(2,4,20,.9), inset 0 1px 0 rgba(255,255,255,.08)}
.pg .phone .screen{position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; background:linear-gradient(180deg,#0b1029,#141a3d)}
.pg .phone .notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:78px; height:20px; border-radius:12px; background:#05070f; z-index:6}
.pg .phone.back{transform:translateX(66px) rotateY(16deg) rotateZ(4deg) scale(.9); opacity:.72; filter:saturate(.85)}
.pg .phone.front{transform:translateX(-42px) rotateY(-13deg) rotateZ(-3deg); z-index:4}
.pg .appbar{padding:26px 16px 12px; display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(99,102,241,.35),rgba(168,85,247,.22)); border-bottom:1px solid var(--line)}
.pg .applogo{width:34px; height:34px; border-radius:11px; background:var(--grad-cta); display:grid; place-items:center; font-size:17px; flex-shrink:0; box-shadow:0 6px 16px -6px rgba(139,92,246,.8)}
.pg .appname{font-weight:700; font-size:14.5px; letter-spacing:-.01em}
.pg .appname small{display:block; font-weight:500; font-size:10px; color:var(--muted); letter-spacing:.02em}
.pg .apphero{margin:12px 12px 0; height:82px; border-radius:16px; background: radial-gradient(120% 120% at 15% 0%, rgba(244,114,182,.4), transparent 60%), linear-gradient(135deg,#8b5cf6,#6366f1); display:flex; align-items:flex-end; padding:12px; position:relative; overflow:hidden}
.pg .apphero b{font-size:15px; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.4)}
.pg .apphero .pz{position:absolute; top:8px; left:10px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.35); backdrop-filter:blur(4px)}
.pg .cats{display:flex; gap:7px; padding:12px 12px 8px; overflow:hidden}
.pg .cats span{font-size:10.5px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.pg .cats span.on{background:var(--grad-cta); color:#fff; border-color:transparent; font-weight:700}
.pg .items{padding:2px 12px 12px; display:flex; flex-direction:column; gap:9px}
.pg .item{display:flex; align-items:center; gap:10px; padding:9px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line)}
.pg .item .thumb{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:21px; background:rgba(139,92,246,.14); flex-shrink:0}
.pg .item .meta{flex:1; min-width:0}
.pg .item .t{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pg .item .d{font-size:10px; color:var(--faint); margin-top:1px}
.pg .item .pr{font-size:12.5px; font-weight:700; color:#c7d2fe; white-space:nowrap}
.pg .item .plus{width:26px; height:26px; border-radius:9px; background:var(--grad-cta); display:grid; place-items:center; font-size:16px; font-weight:700; flex-shrink:0; box-shadow:0 4px 12px -4px rgba(139,92,246,.8)}
.pg .appcart{position:absolute; bottom:12px; left:12px; right:12px; padding:12px 16px; border-radius:16px; background:var(--grad-cta); display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:13.5px; box-shadow:0 12px 26px -10px rgba(139,92,246,.9)}
.pg .appcart .cnt{background:rgba(255,255,255,.22); border-radius:8px; padding:2px 8px; font-size:12px}
.pg /* back phone = loyalty screen */
  .loyalty{padding:34px 16px 16px; text-align:center}
.pg .loyalty .ring{width:120px; height:120px; margin:6px auto 0; border-radius:50%; background:conic-gradient(var(--pink) 0 72%, rgba(255,255,255,.08) 72% 100%); display:grid; place-items:center; position:relative}
.pg .loyalty .ring::after{content:""; position:absolute; inset:11px; border-radius:50%; background:#0e1330}
.pg .loyalty .ring .v{position:relative; z-index:1}
.pg .loyalty .ring .v b{font-size:26px; font-weight:700; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.pg .loyalty .ring .v small{display:block; font-size:9.5px; color:var(--muted)}
.pg .loyalty h4{margin:16px 0 4px; font-size:14px}
.pg .loyalty .sub{font-size:11px; color:var(--faint)}
.pg .reward{margin:12px 8px 0; padding:11px 12px; border-radius:14px; background:rgba(244,114,182,.1); border:1px solid rgba(244,114,182,.25); font-size:11.5px; display:flex; align-items:center; gap:8px; text-align:right}
.pg .reward .rg{font-size:18px}
.pg /* push notification */
  .push{position:absolute; top:16px; left:50%; transform:translateX(-50%); width:290px; max-width:88%; z-index:20; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:20px; background:rgba(20,20,34,.82); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 50px -18px rgba(2,4,20,.9); opacity:0; pointer-events:none}
.pg .push.show{animation:pushIn 4.6s ease forwards}
@keyframes pushIn{    0%{opacity:0; transform:translateX(-50%) translateY(-46px) scale(.94)}
    9%,80%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
    100%{opacity:0; transform:translateX(-50%) translateY(-40px) scale(.97)}}
.pg .push .pic{width:38px; height:38px; border-radius:11px; background:var(--grad-cta); display:grid; place-items:center; font-size:19px; flex-shrink:0}
.pg .push .pt{flex:1; min-width:0}
.pg .push .pt .h{display:flex; align-items:baseline; gap:8px}
.pg .push .pt .h b{font-size:12.5px; font-weight:700}
.pg .push .pt .h .ago{margin-inline-start:auto; font-size:10px; color:var(--faint)}
.pg .push .pt .msg{font-size:12.5px; color:#e6e7f5; margin-top:3px; line-height:1.4}
.pg .storebadges{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.pg .storebadge{display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); font-size:12px; color:var(--muted)}
.pg .storebadge .g{font-size:22px; line-height:1}
.pg .storebadge b{color:var(--text); font-size:14px; display:block; font-weight:700}
@media (max-width:900px){
  .pg .phones{height:520px; transform:scale(.92)}
}
.pg /* match homepage header exactly (eliminate jump between pages) */
  nav{position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:1px solid transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.pg /* nav links = plain text like the homepage (no pill padding -> no width/position jump) */
  .nav-links a{padding:0 !important; border-radius:0 !important; background:none !important; font-size:.9rem; font-weight:500; color:var(--muted); transition:color .15s}
.pg /* real app screenshots showcase */
  .showcase{display:grid; grid-template-columns:repeat(4,minmax(0,180px)); gap:18px; justify-content:center}
.pg .shot{width:100%; border-radius:30px; padding:8px; background:linear-gradient(160deg,#181330,#0c0920); border:1px solid rgba(255,255,255,.10); box-shadow:var(--glass-shadow)}
.pg .shot video{display:block; width:100%; aspect-ratio:384/848; object-fit:cover; border-radius:23px; background:#0c0920}
.pg .shot .cap-l{text-align:center; font-size:12.5px; color:var(--muted); padding:10px 0 3px}
@media(max-width:860px){
  .pg .showcase{grid-template-columns:repeat(3,minmax(0,160px))}
}
@media(max-width:560px){
  .pg .showcase{grid-template-columns:repeat(2,minmax(0,150px)); gap:12px}
}