/* FLOWPESA — Verify Email (scoped) */
.email-screen{
  --page-max: 520px;
  --pad-x: 16px;
  --pad-t: 72px;
  --btn-h: 56px;
  background:#111; color:#f8f9fa;
  min-height:100dvh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:calc(var(--pad-t) + 10px) var(--pad-x) calc(24px + env(safe-area-inset-bottom));
}

/* top bar */
.email-screen .top-bar{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:10;
  display:flex; align-items:center; background:transparent;
}
.email-screen .top{
  width:100%; max-width:var(--page-max);
  margin:0 auto; padding:0 var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
}
.email-screen .back-btn{
  width:40px; height:40px; border:0; border-radius:999px;
  background:#202124; color:#f8f9fa; display:grid; place-items:center;
}

/* layout */
.email-screen .content{ width:100%; max-width:var(--page-max); margin:0 auto; }
.email-screen .title{ font:700 clamp(22px,6vw,34px)/1.25 Inter,system-ui,sans-serif; margin:0 0 6px; }
.email-screen .subtitle{ color:#c9c9c9; font:400 clamp(13px,3.8vw,16px)/1.45 Inter,system-ui,sans-serif; margin:0 0 12px; }

.email-screen .label{ display:block; color:#c9c9c9; font:500 12px/1 Inter,system-ui,sans-serif; margin:6px 2px 6px; }

.email-screen .pill{
  display:flex; align-items:center; gap:8px;
  height:clamp(48px,11.5vw,56px);
  border-radius:16px; background:#17181b; padding:0 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.email-screen .pill:focus-within{ box-shadow:inset 0 0 0 1px rgba(22,130,249,.36); }

.email-screen .pill input{
  background:transparent; border:0; outline:0; color:#f8f9fa;
  width:100%; height:100%; font:600 16px/20px Inter,system-ui,sans-serif;
}
.email-screen .pill input::placeholder{ color:#b7b7b7; font-weight:500; }

.email-screen .clear-btn{
  border:0; background:#2a2b2f; color:#d9d9d9;
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
}

/* button */
.email-screen .cta{
  width:100%; height:var(--btn-h);
  margin-top:22px; border:0; border-radius:16px;
  background:#b7d8fd; color:#2b2b2b;
  font:600 16px/20px Inter,system-ui,sans-serif;
  cursor:not-allowed; transition:transform .1s ease, background .15s ease;
}
.email-screen .cta.is-active,
.email-screen .cta:not([disabled]){ background:#1682f9; color:#fff; cursor:pointer; }
.email-screen .cta:active{ transform:scale(.98); }

/* error text */
.email-screen .error{ color:#ff6b6b; margin:8px 2px 0; font:400 13px/1.3 Inter,system-ui,sans-serif; }

/* responsive */
@media (min-width:1024px){
  .email-screen{ --page-max:640px; }
}
