.full-height { min-height: 100vh; }

.brand-side {
  background-color: var(--k-primary);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,107,92,.22) 0, transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(255,184,77,.18) 0, transparent 42%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #fff;
}

.brand-logo { width: 190px; height: auto; }

.brand-name {
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -1px;
  margin-top: 1.2rem;
  line-height: 1;
}
.brand-name span { color: var(--k-warm); }

.brand-claim {
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  margin-top: .6rem;
}

.login-card {
  border: none;
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-lg);
  max-width: 420px;
  width: 100%;
}

.login-title { font-weight: 600; color: var(--k-primary); }

.card-click {
  transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
  cursor: pointer;
}
.card-click:hover {
  box-shadow: var(--k-shadow-lg);
  transform: translateY(-1px);
  border-color: var(--k-primary) !important;
}

.install-icon { width: 38px; height: 38px; }
@media (min-width: 992px) { .install-icon { width: 44px; height: 44px; } }

.ios-steps li { display: flex; align-items: flex-start; margin-bottom: .5rem; }
.ios-steps .step-ico { width: 28px; height: 28px; margin-right: .5rem; flex: 0 0 28px; color: var(--k-primary); }
.ios-steps .step-ico svg { width: 28px; height: 28px; display: block; }

@media (max-width: 767.98px) {
  .brand-side { min-height: auto; padding: 2.5rem 1.5rem; }
  .brand-logo { width: 110px; }
  .brand-name { font-size: 2.2rem; }
  .brand-claim { font-size: .95rem; }
}

.brand-name .k-ini,
.brand-name span { color: var(--k-warm); }