/* "Get the Mac app" (Nate, 2026-10-02, Mac-app-first): the homepage hero + final CTA, /download and the web's
   /signup. On a Mac the primary action is Download for Mac; on a phone, PC or Chromebook it is "Email me the download
   link" (site/get-app.js). <html data-device="mac|other"> is set in <head> by site/session-hint.js; with no script
   the Mac button shows. Tokens: home.css or auth.css (both define --surface, --line-2, --text, --muted, --faint,
   --blue, --blue-text) plus fonts.css (--sh-*). Meta blue only: no green, no orange, no purple. Mobile first. */
html[data-device="other"] .ga-mac, html:not([data-device="other"]) .ga-other { display: none !important; }

.ga { display: grid; gap: 12px; max-width: 540px; }
.ga-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; text-decoration: none; }
@media (min-width: 520px) { .ga-btn { width: auto; justify-self: start; } }
.ga-meta { color: var(--faint); font-size: 13px; }
.ga-lead { color: var(--muted); font-size: 15px; line-height: 1.5; }
.ga-label { display: block; font-weight: 700; font-size: 15px; color: var(--text); }
.ga-row { display: grid; gap: 10px; }
@media (min-width: 520px) { .ga-row { grid-template-columns: 1fr auto; } }
.ga-input {
  width: 100%; min-height: 52px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font: 500 16px/1.2 Figtree, system-ui, sans-serif; transition: border-color .2s, box-shadow .2s;
}
.ga-input::placeholder { color: var(--faint); }
.ga-input:focus { outline: none; border-color: var(--sh-blue, #1877F2); box-shadow: 0 0 0 3px rgba(24, 119, 242, .28); }
.ga-input[aria-invalid="true"] { border-color: var(--sh-red, #F02849); }
.ga-submit { width: 100%; min-height: 52px; }
@media (min-width: 520px) { .ga-submit { width: auto; } }
.ga-submit[disabled] { opacity: .7; cursor: progress; }
.ga-msg { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.ga-msg.err { color: var(--sh-red-text, #FF6B81); }
.ga-captcha:empty { display: none; }
.ga-done { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: rgba(24, 119, 242, .12); border: 1px solid rgba(24, 119, 242, .35); }
.ga-done:focus { outline: none; }
.ga-done[hidden] { display: none; }
.ga-done-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; }
.ga-done-title { font-weight: 700; font-size: 16px; color: var(--text); }
.ga-done-sub { margin-top: 4px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.ga-done-sub b { color: var(--text); font-weight: 600; }
.ga-alt { color: var(--muted); font-size: 14px; }
.ga-alt a { color: var(--blue-text); font-weight: 600; text-underline-offset: 3px; }
.ga.center { margin-inline: auto; justify-items: center; text-align: center; }
.ga.center .ga-btn, .ga.center .ga-form { justify-self: center; }
.ga.center .ga-form { width: 100%; text-align: left; }
.ga-form { display: grid; gap: 10px; }