:root{
  --bg: #ffffff;
  --pastel-blue: #cfeaf3;
  --pastel-green: #dff3d6;
  --pastel-yellow: #fff6d1;
  --muted: #5b6b6b;
  --accent: #7fb6d9;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0;background:var(--bg);color:var(--muted);-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:48px auto;padding:24px}
.hero{background:linear-gradient(135deg,var(--pastel-blue),var(--pastel-green));padding:28px;border-radius:12px;text-align:center;color:#163042}
.hero h1{margin:0;font-size:2.1rem}
.subtitle{margin:6px 0 0;font-size:0.95rem;opacity:0.9}
.card{background:linear-gradient(180deg,rgba(255,246,209,0.9),rgba(255,255,255,0.6));padding:22px;margin-top:18px;border-radius:10px;box-shadow:0 6px 18px rgba(22,48,66,0.06)}
.blurb{line-height:1.5;margin:0 0 18px}
.download-btn{display:inline-block;background:var(--accent);color:white;padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:0 8px 20px rgba(127,182,217,0.18);transition:transform .12s ease, box-shadow .12s ease}
.download-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(127,182,217,0.22)}
.notes{margin:14px 0 0;padding-left:18px}
.footer{margin-top:22px;text-align:center;font-size:0.9rem;color:#6b7b7b}

.preview{margin:16px 0;text-align:center}
.screenshot{max-width:80%;height:auto;border-radius:10px;box-shadow:0 10px 24px rgba(22,48,66,0.08);border:1px solid rgba(0,0,0,0.04);display:inline-block}
.display{display:flex;gap:20px;align-items:center;justify-content:center}
@media (max-width:480px){.wrap{margin:20px;padding:16px}.hero h1{font-size:1.6rem}}