/* WePlan theme (sage mint & peach, the app's default theme) + hero/screens art. Layout lives in ../app-page.css. */
:root { --bg: #fdfbf7; --ink: #1e293b; --muted: #64748b; --accent: #23785a; --button-bg: #1e293b; --button-ink: #fff; --line: rgba(30,41,59,.16); --section-bg: #f3faf6; --section-ink: #1e293b; --section-muted: #64748b; --section-accent: #23785a; --card-bg: #fff; --card-line: rgba(30,41,59,.1); --closing-glow: #ffd9d2; }
.wordmark { font-size: 18px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; }
.wordmark img { width: 30px; height: 30px; border-radius: 9px; }
.hero h1 em, .closing h2 em { color: #e8604d; }
.store-link.is-pending { border-color: rgba(30,41,59,.3); }
.quiet-link { border-bottom-color: var(--muted); }

.art-orbit-one { border-color: rgba(103,197,163,.35); }
.art-orbit-two { border-color: rgba(255,139,123,.3); }
.phone-shot { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 24px 60px rgba(30,41,59,.18); }
.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(4, minmax(0, 1fr)); gap: 22px; row-gap: 40px; }
.screen-row figure { margin: 0; }
.screen-row img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 14px 34px rgba(30,41,59,.12); }
.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(30,41,59,.16); }

@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; row-gap: 28px; }
  .hero-art .phone-main { width: min(78%, 270px); }
  .hero-art .phone-back { width: 36%; right: 0; }
}