/* Lepomo marketing page. Colours are the app's Still Water theme; motion is light and stops with Reduce Motion. */
body.marketing { font-size: 18px; }
body.marketing main { max-width: 1040px; padding: 0 20px 80px; }
.hero { position: relative; overflow: hidden; height: min(92vh, 940px); min-height: 640px; background: #5b7fb5; color: #fbf3e0; }
.scene, .smoke-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { object-fit: cover; object-position: 50% 100%; }
.hero nav { position: relative; text-align: center; padding-top: 22px; margin: 0; }
.hero nav a { color: #fbf3e0; opacity: 0.92; text-shadow: 0 1px 8px rgba(11,27,43,0.5); }
.hero nav a + a::before { color: #fbf3e0; opacity: 0.6; }
.hero-words { position: relative; text-align: center; padding: 34px 20px 0; text-shadow: 0 2px 14px rgba(11,27,43,0.45); }
.hero .icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 10px 28px rgba(11,27,43,0.35); }
.hero h1 { color: #fbf3e0; font-size: 2.4rem; margin: 12px 0 0; }
.hero .tagline { color: #fbf3e0; font-size: 1.45rem; font-weight: 500; margin: 2px 0 10px; }
.hero .lede { color: #fbf3e0; max-width: 560px; margin: 0 auto; font-size: 1.05rem; }
.hero-cta { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; }
.hero .note { color: #fbf3e0; opacity: 0.9; font-size: 0.95rem; margin: 12px 0 0; text-shadow: 0 1px 8px rgba(11,27,43,0.5); }
.cta { display: inline-block; background: rgba(255,255,255,0.92); color: #22303c; font-weight: 600; padding: 14px 28px; border-radius: 999px; box-shadow: 0 12px 28px rgba(11,27,43,0.28); }
.cta:hover { text-decoration: none; transform: translateY(-1px); }
.cta.soon { background: rgba(255,255,255,0.28); color: #fbf3e0; border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: default; }
main .cta { background: var(--primary); color: #fff; }
main .cta.soon { background: var(--surface); color: var(--muted); border: 1px solid var(--border); backdrop-filter: none; }
.smoke circle { opacity: 0; animation: puff 9s ease-out infinite; }
.smoke .p2 { animation-delay: 3s; } .smoke .p3 { animation-delay: 6s; }
@keyframes puff { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 0.5; } 100% { transform: translate(28px,-90px) scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .smoke circle { animation: none; opacity: 0.3; } }
.closing { text-align: center; padding: 72px 0 0; }
.closing .note { color: var(--muted); margin-top: 12px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 72px 0; border-bottom: 1px solid var(--border); }
.feature.reverse .shot { order: 2; }
.feature.wide, .feature.plain { grid-template-columns: 1fr; text-align: center; }
.feature.plain { border-bottom: 0; }
.kicker { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin: 0 0 6px; }
.feature h2 { font-size: 1.9rem; margin: 0 0 12px; letter-spacing: -0.01em; }
.feature p { color: var(--muted); font-size: 1.05rem; }
.copy.centered { max-width: 640px; margin: 0 auto; }
.shot img { display: block; width: 100%; height: auto; }
.shot.phone { max-width: 300px; margin: 0 auto; border-radius: 40px; padding: 10px; background: #1a1f24; box-shadow: 0 30px 60px rgba(11,27,43,0.28); }
.shot.phone img { border-radius: 32px; }
.shot.window { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(11,27,43,0.22); background: var(--surface); }
.gallery { display: grid; grid-template-columns: 1.4fr 0.9fr 1fr; gap: 28px; align-items: end; margin-top: 40px; }
.shot.small { max-width: 240px; margin: 0 auto; }
footer { text-align: center; }
@media (max-width: 800px) {
  .feature, .gallery { grid-template-columns: 1fr; }
  .feature.reverse .shot { order: 0; }
  .feature { padding: 48px 0; gap: 28px; text-align: center; }
  .hero { height: auto; min-height: 720px; }
  .hero .lede { font-size: 1rem; }
  .hero h1 { font-size: 2.2rem; }
}