/* phone-demo stage module: 280 × 572 phone, radius 46, centred in the stage.
   The screen is coded UI built from client tokens (--ph-* are set per theme from tokens). */
.phone{ position:absolute; top:118px; left:var(--px); width:280px; height:572px; margin-left:-140px; border-radius:46px;
  background:#0d0d0f; padding:10px; transition:left .7s var(--ease);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden; background:var(--ph-bg); color:var(--ph-fg);
  font-family:var(--c-display); transition:background-color .45s var(--ease), color .45s var(--ease); }
.phone .notch{ position:absolute; top:9px; left:50%; width:84px; height:24px; margin-left:-42px; border-radius:20px; background:#0d0d0f; z-index:2; }
.phone .status{ display:flex; justify-content:space-between; padding:14px 24px 0; font-size:11px; font-weight:700; font-family:var(--c-body); }
.phone .app{ padding:26px 18px 0; }
.phone .hello{ font-size:12px; opacity:.6; margin:0 0 3px; font-family:var(--c-body); }
.phone h5{ margin:0 0 16px; font-size:23px; line-height:1.05; letter-spacing:-.03em; font-weight:800; }
.phone .card{ border-radius:20px; padding:16px; background:var(--ph-card); color:var(--ph-card-fg); transition:background-color .45s var(--ease), color .45s; }
.phone .card small{ display:block; font-size:10.5px; opacity:.75; font-family:var(--c-body); margin-bottom:28px; }
.phone .card strong{ display:block; font-size:19px; line-height:1.1; letter-spacing:-.02em; font-weight:800; }
.phone .card span{ display:block; margin-top:6px; font-size:11px; opacity:.8; font-family:var(--c-body); }
.phone .card .cta{ margin-top:14px; display:inline-block; font-family:var(--c-body); font-size:11px; font-weight:600; padding:7px 12px; border-radius:99px; background:var(--ph-card-fg); color:var(--ph-card); transition:background-color .45s, color .45s; }
.phone .quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 16px; }
.phone .quick div{ border-radius:14px; padding:10px 10px 12px; background:var(--ph-soft); font-family:var(--c-body); font-size:10.5px; font-weight:600; transition:background-color .45s; }
.phone .quick i{ display:block; width:16px; height:16px; border-radius:50%; margin-bottom:14px; background:var(--ph-accent); }
.phone .list h6{ margin:0 0 6px; font-size:11px; font-family:var(--c-body); font-weight:600; opacity:.6; }
.phone .list div{ display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--ph-line); font-family:var(--c-body); font-size:11.5px; transition:border-color .45s; }
.phone .list div em{ font-style:normal; opacity:.55; }
.phone .tabbar{ position:absolute; left:0; right:0; bottom:0; height:62px; display:flex; justify-content:space-around; align-items:flex-start; padding-top:12px;
  border-top:1px solid var(--ph-line); background:var(--ph-bg); transition:background-color .45s, border-color .45s; }
.phone .tabbar b{ width:22px; height:3px; border-radius:2px; background:currentColor; opacity:.25; }
.phone .tabbar b.on{ opacity:1; }