/* Landing pages of the app links (/j, /id, /c), shown when Siflo is not installed, and the download page (/get). */
:root { color-scheme: light dark; --fg: #1f1b18; --muted: #6a625c; --bg: #fffbf8; --line: #eee4dc; --card: #fff; --accent: #d95a00; }
@media (prefers-color-scheme: dark) { :root { --fg: #efe9e4; --muted: #a99f97; --bg: #17130f; --line: #2f2822; --card: #201a15; --accent: #ff8a3d; } }
* { box-sizing: border-box; }
body { font: 16px/1.6 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); margin: 0; }
main { max-width: 560px; margin: 0 auto; padding: 32px 20px 64px; }
header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
header img { width: 40px; height: 40px; border-radius: 10px; }
header a { color: inherit; text-decoration: none; font-weight: 600; font-size: 1.15em; }
h1 { font-size: 1.6em; line-height: 1.25; margin: 1.2em 0 .4em; }
a { color: var(--accent); }
.lead { font-size: 1.1em; color: var(--muted); }
ol { padding-left: 1.3em; }
li { margin: 1.2em 0; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .6em; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
a.store { color: inherit; text-decoration: none; }
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: .75em; color: var(--muted); line-height: 1.2; }
.store b { display: block; line-height: 1.2; }
.open { display: inline-block; margin-top: .6em; padding: 10px 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.note { font-size: .9em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 32px; }
[hidden] { display: none !important; }

/* /get: one screen, two store buttons. */
.get main { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 48px; }
.get .icon { width: 96px; height: 96px; border-radius: 24px; }
.get h1 { margin-top: .6em; }
.get .stores { flex-direction: column; align-items: stretch; gap: 14px; margin: 28px auto 0; max-width: 320px; }
.get .store { justify-content: center; padding: 14px 20px; border-radius: 16px; background: #000; border-color: rgba(255, 255, 255, .22); color: #fff; text-align: left; }
.get .store svg { width: 30px; height: 30px; }
.get .store small { color: rgba(255, 255, 255, .75); }
.get .store b { font-size: 1.25em; }
.get .store.pending { position: relative; background: #000a; }
.get .store.pending > * { opacity: .6; }
.get .store.pending::after { content: attr(data-badge); position: absolute; top: -9px; right: -9px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.get .note { border: 0; margin-top: 28px; }
.lang-switch { position: absolute; top: 16px; right: 16px; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang-switch button { background: none; border: 0; color: var(--muted); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }