/* Shared "Why an app" selling panel for all mockup templates. */
/* ---------- "Why an app" selling panel (outside the phone) ---------- */
.why { --bg:#f5f1eb; --ink:#1c2420; --ink-muted:#5c6862; --ink-faint:#8a948e; --surface:#ffffff; --line:#e6e0d6; box-sizing:border-box; width:min(720px, 100%); margin:22px auto 8px; padding:22px 22px 20px; border-radius:22px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 40px rgba(20,30,28,.12); color:var(--ink); text-align:left; }
.why-head { display:flex; justify-content:space-between; align-items:center; }
.why-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.why-close { display:none; border:0; background:none; font-size:26px; line-height:1; color:var(--ink-muted); cursor:pointer; padding:0 4px; }
.why h2 { font-size:24px; line-height:1.15; letter-spacing:-.02em; margin:8px 0 10px; text-wrap:balance; }
.why-pos { margin:0 0 16px; font-size:14.5px; line-height:1.5; color:var(--ink-muted); padding:12px 14px; border-radius:14px; background:var(--accent-soft); }
.why-pos b { color:var(--accent-deep); }
.why-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 8px; }
.why-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.why-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:11px 12px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); }
.why-list.money { counter-reset:w; }
.why-list.money li { counter-increment:w; grid-template-columns:26px minmax(0,1fr) auto; }
.why-list.money li::before { content:counter(w); width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--accent); margin-top:1px; }
.why-list strong { font-size:14px; }
.why-list p { margin:3px 0 0; font-size:12.8px; line-height:1.45; color:var(--ink-muted); }
.why-list a { font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; padding:4px 0; }
.why-list a:hover { text-decoration:underline; }
.why-list a:focus-visible, .why-cta:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.why-how { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.why-how li { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink-muted); }
.why-how li::before { content:"✓"; color:var(--accent); font-weight:800; }
.why-how b { color:var(--ink); }
.why-cta { margin-top:16px; }
.why-cta { display:block; text-align:center; text-decoration:none; font-weight:700; font-size:15px; color:#fff; background:var(--accent);
  padding:12px 16px; border-radius:14px; box-shadow:0 8px 18px rgba(var(--accent-rgb),.28); }
@media (min-width:681px) and (max-width:1319px) { .why-list.exp { grid-template-columns:1fr 1fr; } }

/* Wide screens: panel to the left of the phone */
@media (min-width:1320px) {
  .why { position:fixed; left:max(24px, calc(50% - 195px - 450px)); top:24px; bottom:24px; width:410px; margin:0; overflow:auto; z-index:5; }
}
/* Phones: the mockup fills the screen; the panel opens full-screen from the bottom bar */
@media (max-width:480px) {
  .why { display:none; position:fixed; inset:0; z-index:10000; margin:0; width:100%; border-radius:0; overflow:auto;
    background:var(--bg); padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(90px + env(safe-area-inset-bottom,0px)); }
  .why.open { display:block; }
  .why-close { display:block; }
}

/* Real phone: pin the app to the screen so the page itself never scrolls
   (only the app screens scroll), keeping the bottom menu in place. */
@media (max-width:480px) {
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
  .phone-shell { position:fixed !important; inset:0 !important; width:auto !important; height:auto !important; margin:0 !important; }
  .screen { overscroll-behavior:contain; }
}

/* Frame boxes clip instead of hide, so nothing can scroll them. */
.phone-screen, .screens { overflow: clip; }
@media (max-width:480px) {
  .mode-splash { padding-bottom: calc(var(--tab-h, 72px) + 84px + env(safe-area-inset-bottom, 0px)) !important; }
}