/* One stylesheet for every page and every language, so a new app page
   or a new language is content only. */
:root { --ink:#15181d; --muted:#5d6672; --accent:#1f6f43; --bg:#f6f7f9;
        --card:#fff; --line:#e2e6ec; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e9edf2; --muted:#9aa5b2; --accent:#43b37a; --bg:#101317;
          --card:#181c22; --line:#272d36; }
}
* { box-sizing: border-box }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       padding:28px 16px 64px }
.wrap { max-width:680px; margin:0 auto }
h1 { font-size:2rem; margin:0 0 6px; letter-spacing:-.02em }
.sub { color:var(--muted); margin:0 0 28px; font-size:1.05rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:20px; margin-bottom:16px }
a.card { display:block; text-decoration:none; color:inherit }
a.card:hover { border-color:var(--accent) }
h2 { font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
     color:var(--muted); margin:0 0 12px }
h3 { margin:0 0 4px; font-size:1.2rem }
ul { margin:0; padding-left:20px } li { margin-bottom:8px }
.get { display:block; text-align:center; background:var(--accent); color:#fff;
       text-decoration:none; font-weight:600; padding:15px; border-radius:11px; margin-top:4px }
.meta { color:var(--muted); font-size:.9rem; margin:14px 0 0 }
.back { display:inline-block; color:var(--muted); text-decoration:none; margin-bottom:18px }
footer { color:var(--muted); font-size:.85rem; text-align:center; margin-top:28px }
a { color:var(--accent) }

/* Wraps on a narrow screen rather than scrolling sideways: six language
   names do not fit across a phone. */
.langs { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 22px;
         font-size:.85rem }
.langs a { color:var(--muted); text-decoration:none }
.langs a:hover { color:var(--accent); text-decoration:underline }
.langs .here { color:var(--ink); font-weight:600 }

.buy { display:flex; gap:12px; flex-wrap:wrap }
.buy form { flex:1 1 220px; margin:0 }
.buy button { width:100%; font:inherit; font-weight:600; cursor:pointer;
              border:1px solid var(--accent); background:var(--accent); color:#fff;
              padding:15px; border-radius:11px }
.buy form.alt button { background:transparent; color:var(--accent) }
.price { display:block; font-weight:400; font-size:.85rem; opacity:.85 }