:root{color-scheme:dark;--bg:#05070d;--fg:#d8e4f0;--dim:#7d8ea3;--accent:#4fe3ff;--gold:#ffd76a;--frame:#1a2533}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--accent)}
.dim{color:var(--dim)}

/* text pages: support, privacy */
main.page{max-width:640px;margin:0 auto;padding:40px 16px 64px}
h1{color:var(--accent);font-size:1.6rem;margin:0 0 4px;letter-spacing:1px}
h2{font-size:1.05rem;margin:28px 0 8px}

/* the landing: pitch beside a phone running the demo */
body.landing{height:100vh;height:100dvh;overflow:hidden}
.stage{height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding:24px}
.pitch{max-width:360px}
.pitch h1{font-size:2.2rem;text-shadow:0 0 22px #4fe3ff66}
.pitch .tag{font-size:1.1rem;margin:8px 0 16px}
.pitch ul{padding-left:18px;color:var(--dim);margin:0 0 24px}
.store{display:inline-block;line-height:0}
.store img{display:block;height:60px;width:auto}
.store:hover{filter:brightness(1.15)}
.pitch nav{margin-top:20px;font-size:.9rem}
.phone{height:min(900px,calc(100vh - 48px));height:min(900px,calc(100dvh - 48px));aspect-ratio:440/956;border:12px solid var(--frame);border-radius:48px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #2c3a4c,0 30px 80px #000c,0 0 60px #4fe3ff22}
.phone iframe{display:block;width:100%;height:100%;border:0}

/* a phone: the demo is the page */
@media (max-width:900px),(hover:none) and (pointer:coarse){
  .pitch{display:none}
  .stage{padding:0;gap:0}
  .phone{position:fixed;inset:0;height:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--bg)}
}