/* "Move one brand first", with the ribbon of the account's mail under it, and
   the row of providers PostLever sends through after it. */

/* ---- switching ---- */

/* On a wide screen the words keep to a column on the left, leaving the right
   of the section for the ribbon to rise into. */
.switching-words {
  position: relative;
  z-index: 1;
}
@media (min-width: 1080px) {
  .switching-words { max-width: 35rem; }
}

/* A text link, stood on its own line under the words. */
.switching-cta { margin-top: var(--space-4); position: relative; z-index: 1; }

/* The ribbon runs out to the band's edges rather than stopping at the
   content's, as Stripe lays its ribbons, and on a wide screen rises up
   beside the words. It never takes the pointer from the button. Its foot runs
   into the band's own space below, which the drawing leaves clear under it. */
.switching-ribbon {
  pointer-events: none;
}
@media (min-width: 1080px) {
  .switching-ribbon {
    margin-top: -23.5rem;
    margin-bottom: -6rem;
  }
}
/* Narrower, the ribbon is drawn at a laptop's width and scaled down whole (switching.js sets
   --ribbon-scale), and pulled up under the button, past the empty top of its drawing, with its
   foot close above the providers. */
@media (max-width: 1079px) {
  .switching-ribbon {
    margin-top: calc(-170px * var(--ribbon-scale, 0.6));
    margin-bottom: calc(-40px * var(--ribbon-scale, 0.6));
  }
}

.move-frame {
  position: relative;
  height: calc(600px * var(--ribbon-scale, 1));
  overflow: hidden;
}
.move-frame canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ribbon-width, 100%);
  max-width: none;
  height: 600px;
  transform-origin: 0 0;
  transform: scale(var(--ribbon-scale, 1));
}

/* ---- providers ---- */

/* A grey band after a grey band has no top of its own. On a wide screen the ribbon's foot runs
   into the band above, so this one keeps a top: the same distance from the ribbon's box to these
   words as the in-app page leaves. Narrower, the ribbon ends just above the switching band's own
   foot, which is room enough. */
@media (min-width: 1080px) {
  #providers.band { padding-top: 4rem; }
}

/* Straight onto the section's band. A tray around logos that already sit on a
   ground of their own would be one more box saying nothing.

   Eight across once they fit; before that, four to a row, so they wrap as two
   even rows. */
.esp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 16px;
  row-gap: var(--space-6);
  max-width: calc(4 * 112px + 3 * 16px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.esp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 calc(25% - 12px);
}
@media (min-width: 1080px) {
  .esp-row { max-width: none; column-gap: var(--space-6); }
  .esp { flex: 0 0 112px; }
}
/* Every provider is shown by its square mark, so the eight sit at one size in
   the same box. */
.esp-logo {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
/* KumoMTA's mark is the left of its wordmark: the square in front of the name,
   framed as the in-app page frames it. */
.esp-logo-crop {
  overflow: hidden;
}
.esp-logo-crop img {
  display: block;
  max-width: none;
  height: 44.8px;
  width: auto;
  margin-top: 1.6px;
}
.esp-name {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.33;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  text-align: center;
}