/* Apps page (Oct 28, 2026). Page-specific; shares guides.css for the shell. */
.ap-hero { max-width: 900px; margin: 0 auto; padding: 48px 24px 24px; text-align: center; }
.ap-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; letter-spacing: -.5px; margin: 10px 0 14px; color: var(--text-primary); }
.ap-hero > p { color: var(--text-secondary); font-size: 17px; line-height: 1.6; max-width: 640px; margin: 0 auto; }
.ap-stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 22px 0 8px; }
/* Official store badges (Apple and Google marketing guidelines: use the badge art as supplied). Google's image has built-in padding, so it's drawn larger to match. */
.ap-badge { display: inline-flex; line-height: 0; border-radius: 10px; }
.ap-badge img { height: auto; max-width: 100%; }
.ap-badge-gp { margin: -8px -6px; }
.ap-qr { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; color: var(--text-muted); font-size: 13.5px; text-align: left; max-width: 360px; }
.ap-qr img { border-radius: 10px; background: #fff; padding: 6px; flex: none; }
@media (max-width: 768px), (pointer: coarse) { .ap-qr { display: none; } }
.ap-gallery { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 24px 22px; max-width: 1200px; margin: 0 auto; }
.ap-gallery figure { flex: 0 0 210px; scroll-snap-align: center; margin: 0; text-align: center; }
.ap-gallery img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.4); background: var(--bg-card); }
.ap-gallery figcaption { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }
@media (min-width: 1100px) { .ap-gallery { justify-content: center; } }
.ap-feats { max-width: 900px; margin: 18px auto 8px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.ap-feats > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.ap-feats h2 { font-size: 15px; margin: 0 0 6px; color: var(--text-primary); }
.ap-feats p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.ap-faq { margin-top: 26px; }
.ap-faq details { border-top: 1px solid var(--border); padding: 12px 0; }
.ap-faq summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
.ap-faq details p { margin-top: 8px; }
.ap-stores-end { margin: 8px 0 48px; padding: 0 16px; } /* Oct 31 QC: the badge row ran 4px past a 375px screen */