:root { --grass:#8fc94a; --path:#EDE8D9; --ink:#2e3a47; --sky:#9ed9f2; --berry:#e8616b; --sun:#ffd140; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,'SF Pro Rounded','Segoe UI',system-ui,sans-serif; background:linear-gradient(#f8f6ef,#EDE8D9); color:var(--ink); line-height:1.6; }
/* the app's hub treatment: garden art ghosted over the cream gradient */
body::before { content:""; position:fixed; inset:0; z-index:-1; background:url(bg.jpg) center/cover no-repeat; opacity:.25; }
.wrap { max-width:1100px; margin:0 auto; padding:32px 24px 64px; }
header { text-align:center; padding:36px 0 16px; }
header img { max-width:280px; filter:drop-shadow(0 6px 12px rgba(46,58,71,.25)); }
h1 { font-size:2.4rem; margin:12px 0 4px; }
.tagline { color:#6b7683; margin-bottom:12px; font-size:1.1rem; }
nav { margin:6px 0 14px; } nav a { margin:0 10px; }

/* alternating screenshot + explanation rows — open on the garden, no cards */
.row { display:flex; align-items:center; gap:44px; padding:34px 8px; margin:10px 0; }
.row.flip { flex-direction:row-reverse; }
.row .media { flex:0 0 38%; display:flex; gap:14px; justify-content:center; }
.row .media img, .row .media video { width:100%; max-width:250px; border-radius:22px; border:1px solid rgba(46,58,71,.12); box-shadow:0 12px 30px rgba(46,58,71,.2); }
.row .media.duo img { max-width:48%; }
.row .copy { flex:1; }
.row h2 { font-size:1.45rem; margin-bottom:10px; }
.row p { margin:8px 0; }

.card { padding:30px 38px; margin:26px 0; }
.card.center { text-align:center; }
.card h2 { font-size:1.45rem; margin-bottom:10px; }
ul { padding-left:22px; }
ul.plain { list-style:none; padding:0; }
ul.plain li { margin:4px 0; }
li { margin:6px 0; }
a { color:#2f7fb6; }
.pill { display:inline-block; background:var(--grass); color:#fff; font-weight:700; padding:12px 26px; border-radius:999px; text-decoration:none; margin-top:12px; box-shadow:0 6px 16px rgba(143,201,74,.45); }
.trailer { display:inline-block; background:#e2544a; color:#fff; font-weight:700; padding:10px 22px; border-radius:999px; text-decoration:none; margin-top:4px; box-shadow:0 6px 16px rgba(226,84,74,.4); }
footer { text-align:center; color:#8b95a1; font-size:.85rem; margin-top:40px; }

@media (max-width:760px) {
  .row, .row.flip { flex-direction:column; padding:24px 20px; gap:20px; }
  .row .media { flex:none; width:100%; }
  .row .media img, .row .media video { max-width:230px; }
  h1 { font-size:1.9rem; }
}