/*  "Continue with Google" (site-js/google-signin.js) and the /signing-in page it ends on.
 *
 *  The button keeps Google's light button inside (white fill, #1f1f1f Roboto Medium, the
 *  four-colour G) but floats like the code boxes instead of Google's grey outline (Amit,
 *  27 Oct: "floating clean, not framed in a box"). Roboto is loaded only for the glyphs of
 *  its label. Everything around the button follows the page.
 */
.gsi { display: grid; gap: 12px; margin: 0 0 22px; }
.gsi[hidden] { display: none; }

.gsi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 16px 30px -16px rgba(18, 26, 43, .45), 0 1px 3px rgba(18, 26, 43, .08);
  color: #1f1f1f;
  font-family: Roboto, var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: box-shadow .2s ease;
  animation: gsi-float 3.2s ease-in-out infinite alternate;
}
.gsi-btn:hover { box-shadow: 0 22px 34px -16px rgba(18, 26, 43, .55), 0 1px 3px rgba(18, 26, 43, .08); }
.gsi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes gsi-float { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .gsi-btn { animation: none; } }
.gsi-mark { flex: none; width: 20px; height: 20px; }

/*  The email form asks for an explicit tick; this path has no checkbox, so it says what
    pressing the button agrees to, right under it. */
.gsi-terms { margin: 0; color: var(--ink-mut); font-size: 13px; line-height: 1.5; text-align: center; }
.gsi-terms a { color: var(--accent-ink); }

.gsi-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  color: var(--ink-mut);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gsi-or::before, .gsi-or::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* /activate puts its two forms side by side; the button sits above them, not across both. */
.activate-card .gsi { max-width: 420px; margin-bottom: 28px; }
.activate-card .gsi-terms { text-align: left; }

.gr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gr-actions[hidden] { display: none; }

/* The free-trial card (site-js/phone-download.js): under its green button, with a plain
   "or" above. Gone while the card is on its code, password or done step. */
.pd-card .gsi { gap: 10px; margin: 14px 0 0; }
.pd-compact .gsi { grid-column: 1 / -1; margin: 0; }
.pd-compact .gsi-or, .pd-compact .gsi-terms { color: var(--sky-ink-2); }
.pd-card .gsi-or { margin: 0; }
.pd-card .gsi-terms { font-size: 12px; }
.pd-card.is-code .gsi, .pd-card.is-sent .gsi, .pd-card.is-done .gsi { display: none; }