/* Sign-in: the scenic masthead, three small feature cards and the phone / code form (LoginScreen.kt) */

.login{display:flex;flex-direction:column}

/* the city and the taxi under the logo, fading into the pale page */
.hero{position:relative;height:36rem;flex:none;overflow:hidden}
.hero .photo{position:absolute;inset:0;background:url('../../images/hero/city-taxi.jpg') center/cover no-repeat}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.24) 0,transparent 42%,rgba(243,248,244,.1) 68%,var(--bg) 100%)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0,rgba(243,248,244,.97) 56%,rgba(243,248,244,.25) 78%,transparent 100%)}
.hero .top{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--safe-top) + .8rem)}
.hero .lang{align-self:flex-end;padding:0 1.8rem}
.hero .brand{margin-top:.2rem;animation:sg-appear .5s var(--ease) both}
.hero .brand img{width:19.6rem;height:auto}
.hero .tagline{margin-top:.4rem;font-size:1.4rem;line-height:2rem;color:var(--text-mid)}

.features{display:flex;gap:.8rem;padding:0 1.8rem;margin-top:-1.8rem;position:relative;z-index:1}
.features .card{flex:1;padding:1.2rem .5rem;text-align:center;animation:sg-appear .45s var(--ease) both}
.features .card .mi{font-size:2.6rem}
.features .card span.lbl{display:block;margin-top:.7rem;font-size:1.1rem;font-weight:500;letter-spacing:.03rem}

.form-card{margin:1.2rem 1.8rem 0;padding:1.8rem;border-radius:2.6rem;animation:sg-appear .5s var(--ease) .2s both;overflow:hidden}
.step{animation:sg-slide-in .35s var(--ease) both}
.step.back{animation-name:sg-slide-out}
.step h2{font-weight:700;font-size:2rem;line-height:2.6rem}
.step .hint{margin-top:.5rem;font-size:1.2rem;line-height:1.6rem;color:var(--text-mid)}
.step .gap{height:1.4rem}
.step .gap.l{height:1.8rem}
.step .gap.xl{height:2rem}
.phone-input{font-size:1.7rem;font-weight:600;letter-spacing:.1rem}
.step .links{display:flex;align-items:center}
.step .links button{padding:.6rem;border-radius:.8rem;font-size:1.2rem;font-weight:500;letter-spacing:.02rem;color:var(--text-mid)}
.step .links button.primary{color:var(--taxi);font-weight:700}
.step .links .timer{font-size:1.2rem;font-weight:500;color:var(--text-lo)}
.secure{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.4rem;font-size:1.1rem;color:var(--text-lo)}
.secure .mi{font-size:1.3rem}
.terms{margin:2.2rem 2.4rem 2.4rem;text-align:center;font-size:1.2rem;line-height:1.6rem;color:var(--text-lo)}
.shake{animation:sg-shake .4s}
@keyframes sg-shake{0%,100%{transform:none}20%{transform:translateX(-.8rem)}40%{transform:translateX(.8rem)}60%{transform:translateX(-.5rem)}80%{transform:translateX(.5rem)}}