.bye { max-width: 640px; }
.bye h1 { margin-bottom: 14px; }
.bye-note { margin: 0 0 28px; text-wrap: pretty; color: var(--muted); font-size: 1.15rem; font-style: italic; }
.bye-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
/* Reinstall and email are the quieter ways out: a ruled line of links under the review buttons. */
.bye-again, .bye-mail { margin: 0; padding: 12px 0; border-top: 1px solid var(--rule); }
.bye-mail { border-bottom: 1px solid var(--rule); }
.bye-again a + a::before { content: "·"; display: inline-block; margin: 0 0.5em; color: var(--muted); }
/* The reinstall links are store buttons to the site-link sync (so they keep "Reinstall on <Browser>"), drawn as plain links. */
.bye-again .btn, .bye-again .btn:hover { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--link); font-size: inherit; font-weight: inherit; text-decoration: underline; }
.bye-again .btn:hover { color: var(--ink); }
@media (max-width: 640px) {
  .bye-links .btn { flex: 1 1 100%; }
  .bye-again { display: flex; flex-direction: column; gap: 0; }
  .bye-again a + a::before { content: none; }
  .bye-again .btn, .bye-mail a { display: inline-flex; align-self: flex-start; align-items: center; min-height: 36px; }
}