/* Extra styles for the download page. Builds on legal.css (colors, nav, footer, page header). */
.narrow-wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 24px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 22px; }
.panel h2 { font-size: 1.25rem; margin: 0 0 10px; }
.panel p { color: #c9d6cf; margin: 0 0 12px; }
.panel[hidden] { display: none; }

.btn { display: inline-block; background: var(--green); color: var(--ink); font: inherit; font-weight: 700; border: 0; border-radius: 999px;
    padding: 11px 22px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #3fe083; }
.btn.quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.quiet:hover { border-color: var(--green); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-soon, .btn-soon:hover { background: #2a3530; color: #9fb3a9; cursor: default; }

.steps { counter-reset: s; list-style: none; margin: 14px 0 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 12px 44px; color: #c9d6cf; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--green); color: var(--ink); font-weight: 800; display: grid; place-items: center; }

.small { color: var(--muted); font-size: .88rem; }

/* Download button: Android phones and tablets (touch is the main pointer) get the real link; a computer gets a button that opens a popup. No script needed. */
.dl-mobile { display: none; }
.dl-desktop { display: inline-block; }
@media (pointer: coarse) { .dl-mobile { display: inline-block; } .dl-desktop { display: none; } }
.modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .72); align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal:target { display: flex; }
.modal .box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; max-width: 420px; text-align: center; }
.modal .box h2 { margin: 0 0 10px; font-size: 1.25rem; }
.modal .box img { background: #fff; border-radius: 12px; width: 200px; height: 200px; margin: 6px auto 14px; display: block; }

/* The "scan this code" panel is for people on a computer: a phone is already where the code leads, so touch devices do not show it. */
@media (pointer: coarse) { .scan-panel { display: none; } }

/* Printing the page: no download buttons and no popup (a printed page cannot be clicked); the QR code panel stays. */
@media print { .dl-mobile, .dl-desktop, .modal { display: none !important; } }