/* Pet Rock theme (warm pebble cream) + hero/screens art. Layout lives in ../app-page.css. */
:root { --bg: #f6f0e4; --ink: #4b4037; --muted: #8b7d70; --accent: #d97706; --button-bg: #5b4636; --button-ink: #fff; --line: rgba(75,64,55,.2); --section-bg: #fffaf0; --section-ink: #4b4037; --section-muted: #8b7d70; --section-accent: #d97706; --card-bg: #fff; --card-line: rgba(75,64,55,.14); --closing-glow: #e9dcc4; }
.wordmark { font-size: 18px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; }
.wordmark img { width: 30px; height: 30px; border-radius: 9px; }
.store-link.is-pending { border-color: rgba(75,64,55,.35); }
.quiet-link { border-bottom-color: var(--muted); }

.phone-shot { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 24px 60px rgba(75,64,55,.22); }
.hero-art .phone-main { position: relative; width: min(100%, 300px); z-index: 2; transform: rotate(-2deg); }
.hero-art .phone-back { position: absolute; width: min(44%, 220px); right: 2%; top: 8%; transform: rotate(7deg); opacity: .96; z-index: 1; }

.screens { padding: 0 5vw 140px; background: var(--section-bg); color: var(--section-ink); }
.screens .section-intro { margin-bottom: 48px; }
.screen-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; }
.screen-row figure { margin: 0; }
.screen-row img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 14px 34px rgba(75,64,55,.16); }
.screen-row figcaption { margin-top: 14px; color: var(--section-muted); font-size: 13px; line-height: 1.6; text-align: center; word-break: keep-all; }

.closing-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.closing .closing-icon { width: 96px; height: 96px; margin-bottom: 26px; border-radius: 26px; box-shadow: 0 14px 34px rgba(75,64,55,.2); }

@media (max-width: 900px) {
  .hero-art .phone-back { width: min(40%, 190px); }
}
@media (max-width: 600px) {
  .screens { padding-left: 22px; padding-right: 22px; padding-bottom: 95px; }
  .screen-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-art .phone-main { width: min(78%, 270px); }
  .hero-art .phone-back { width: 36%; right: 0; }
}