/* Dragon Raising theme (watercolor cream) + hero/screens art. Layout lives in ../app-page.css. */
:root { --bg: #f3ecdd; --ink: #4a3828; --muted: #8a7560; --accent: #b8703a; --button-bg: #6b4f36; --button-ink: #fff; --line: rgba(74,56,40,.2); --section-bg: #fffaf0; --section-ink: #4a3828; --section-muted: #8a7560; --section-accent: #b8703a; --card-bg: #fff; --card-line: rgba(74,56,40,.14); --closing-glow: #e6d6b8; }
.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(74,56,40,.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(74,56,40,.22); }
.hero-art .phone-main { position: relative; width: min(100%, 300px); z-index: 2; }
.hero-art .phone-back { position: absolute; width: min(44%, 220px); right: 2%; top: 8%; transform: rotate(7deg); opacity: .96; z-index: 1; }
.hero-art .phone-back.left { right: auto; left: 2%; top: auto; bottom: 6%; transform: rotate(-7deg); }
.hero-art .phone-main { transform: rotate(-2deg); }

.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(4, minmax(0, 1fr)); gap: 22px; }
.screen-row figure { margin: 0; }
.screen-row img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 14px 34px rgba(74,56,40,.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 .closing-icon { width: 96px; height: 96px; margin-bottom: 26px; border-radius: 26px; box-shadow: 0 14px 34px rgba(74,56,40,.2); }

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