/* App page: one real screen in the phone frame beside four short lines. Nothing repeated. */
.ph-f{position:relative;display:block;aspect-ratio:1182/2432}
.ph-f::after{content:'';position:absolute;inset:0;background:url(img/phone-frame.png) center/100% 100% no-repeat}
.ph-f img{position:absolute;left:4.3%;top:2.4%;width:91.4%;height:95.2%;object-fit:cover;border-radius:7.5% / 3.6%}
.apx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;padding-bottom:120px}
.ap .pg-title{font-size:clamp(48px,6vw,88px)}
.apx-list{display:grid;gap:18px;margin-top:36px}
.apx-list li{display:flex;gap:16px;align-items:flex-start}
.apx-list i{flex:none;font-size:22px;color:var(--emberText);background:var(--t-orange);border-radius:12px;padding:9px}
.apx-list b{display:block;font-weight:800;font-size:18px}
.apx-list span{color:var(--grey);font-size:16px}
.apx-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.apx-ios{color:var(--grey);font-weight:600}
.apx-try{text-align:center;color:var(--grey);font-weight:700;margin-top:14px}
@media (max-width:900px){.apx-hero{grid-template-columns:minmax(0,1fr)}.apx-phone .phone{width:min(300px,80vw)}}
.apx-side{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.apx-card{background:var(--card);border-radius:24px;padding:20px;box-shadow:inset 0 0 0 1.5px var(--line)}
.apx-card>b{display:block;font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--emberText)}
.apx-card>span{color:var(--grey);font-weight:600;font-size:15px}
.apx-card.dish{display:flex;gap:12px;align-items:center;padding:12px}
.apx-card.dish img{width:60px;height:80px;border-radius:16px;object-fit:cover}
.apx-card.dish small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--emberText)}
.apx-card.dish b{display:block;font-size:16px}.apx-card.dish em{font-style:normal;font-size:13px;color:var(--grey)}
@media (max-width:1100px){.apx-hero{grid-template-columns:minmax(0,1fr) minmax(0,320px)}.apx-side{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.apx-hero{grid-template-columns:minmax(0,1fr)}}