/* /get-app join page (18 October 2026): Apple and Google sign-in first, email
   as the next option, and one tap to add the card once signed in. Only the
   join page loads this file; the shared look stays in support-pages.css. */

.join-hero-actions {
  margin-top: 1.35rem;
}

.join-hero-signin[hidden],
.join-hero-continue[hidden],
.join-email[hidden],
.join-email-toggle[hidden],
.join-profile-next[hidden],
.join-provider-button[hidden] {
  display: none;
}

.join-hero-signin__label {
  margin: 0 0 0.65rem;
  color: var(--rl-text-strong, #172E33);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Side by side only when both fit in full; otherwise one above the other.
   "Continue with Google" with its mark needs about 15.25rem in the site's
   font and up to 16rem where the system has none of the named fonts (Linux
   draws it in a wider sans-serif). A pair therefore needs 16.5rem a button:
   the account panel stacks in the narrow two-column layout (981 to 1059 px
   wide) and the hero keeps its pair on tablets. */
.join-provider-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.75rem;
  max-width: 34rem;
}

.wallet-provider-actions.join-provider-buttons {
  max-width: none;
}

/* Android shows Google only: the Android app has no Sign in with Apple. */
.join-provider-buttons--single {
  grid-template-columns: minmax(0, 1fr);
}

.join-hero-signin .join-provider-buttons--single {
  max-width: 22rem;
}

.join-provider-button {
  min-width: 0;
  min-height: 3.4rem;
  padding-inline: 0.75rem;
  font-size: 1rem;
  text-align: center;
}

.join-hero-signin__same {
  margin: 0.75rem 0 0;
  color: #334D53;
  font-size: 0.92rem;
  line-height: 1.45;
}

.join-hero-signin__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  margin: 0.6rem 0 0;
  color: #5C6C70;
}

.join-hero-signin__more .wallet-text-button {
  font-size: 0.95rem;
}

.join-hero-signin [data-hero-status] {
  margin: 0.9rem 0 0;
  max-width: 34rem;
}

.join-hero-continue__account {
  margin: 0;
  color: #334D53;
  overflow-wrap: anywhere;
}

.join-hero-continue .get-app-hero__actions {
  margin-top: 0.75rem;
}

.join-hero-continue > .wallet-text-button {
  margin-top: 0.55rem;
}

/* The shop's Wallet line and the age note sit under whichever state shows. */
.join-hero-actions + .shop-card-consent--hero,
.join-hero-actions + .form-note,
.join-hero-actions + .shop-card-consent--hero + .form-note {
  margin-top: 0.85rem;
}

/* Email is the next option: a plain link under Apple and Google, then the
   link for people who already have an account, each on its own line. */
.join-email-toggle,
.join-signin-link {
  display: block;
}

.wallet-panel > .join-email-toggle {
  margin-top: 1.1rem;
}

.wallet-panel > .join-signin-link {
  margin-top: 0.7rem;
}

.join-email[hidden] + .join-signin-link {
  margin-top: 0.45rem;
}

.join-email .wallet-divider {
  margin-top: 0.75rem;
}

.join-consent {
  margin: 0.15rem 0 0;
}

.join-consent a {
  color: #185E69;
  font-weight: 750;
}

.join-profile-next {
  margin: 0.6rem 0 0;
}

@media (max-width: 980px) {
  .wallet-step-list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The narrowest phones: a little less space around the mark keeps a wide
   fallback font's label on one line. */
@media (max-width: 359px) {
  .join-provider-button {
    gap: 0.5rem;
    padding-inline: 0.5rem;
  }
}

@media (max-width: 680px) {
  .join-provider-buttons,
  .join-hero-signin .join-provider-buttons--single {
    max-width: none;
  }

  .join-hero-continue .get-app-hero__actions > * {
    width: 100%;
  }
}