/* ==========================================================================
   EQWeb / FACTUEXPRESS — PANTALLA 02 — RECUPERAR CONTRASEÑA
   Hand-drawn / Watercolor UI. Sin tienda, sin ilustración comercial --
   solo fondo watercolor + tarjeta + iconografía + contenido funcional.
   Todo scopeado bajo .eq-recovery-page.
   ========================================================================== */

@font-face {
  font-family: "Kalam";
  src: url("/public/fonts/redesign/login/Kalam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("/public/fonts/redesign/login/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/public/fonts/redesign/login/NunitoSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.eq-recovery-page {
  --paper: #F7F1E7;
  --card: #FBF7EF;
  --field: #FCF9F3;
  --teal: #0B7A82;
  --teal-dark: #075C63;
  --ink: #152C46;
  --secondary: #536579;
  --muted: #77818C;
  --success: #3C8D70;
  --error: #D65C50;
  --error-ink: #A84339;
  --warm: #EEB24F;

  --font-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --font-brand: 'Kalam', 'Segoe Print', cursive;
  --font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;

  font-synthesis: none;
}

.eq-recovery-page,
.eq-recovery-page *,
.eq-recovery-page *::before,
.eq-recovery-page *::after {
  box-sizing: border-box;
}

html, body.eq-recovery-page {
  margin: 0;
  padding: 0;
}

body.eq-recovery-page {
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* textura de papel MUY sutil */
body.eq-recovery-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    repeating-linear-gradient(0deg, rgba(44,70,85,.6) 0px, transparent 1px, transparent 2px, rgba(44,70,85,.6) 3px),
    repeating-linear-gradient(90deg, rgba(44,70,85,.6) 0px, transparent 1px, transparent 2px, rgba(44,70,85,.6) 3px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------- */
/* Manchas watercolor -- assets reales, nunca CSS puro                   */
/* -------------------------------------------------------------------- */
.eq-recovery-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.eq-recovery-blob {
  position: absolute;
  object-fit: contain;
}

.eq-recovery-blob-teal {
  top: 2%;
  left: -8%;
  width: min(38vw, 570px);
  opacity: 0.38;
  transform: rotate(-4deg) scale(.94);
  animation: eqRecBlobIn 650ms ease-out 40ms both, eqRecBlobBreathe 12s ease-in-out 1s infinite alternate;
}

.eq-recovery-blob-teal-alt {
  bottom: -6%;
  right: -6%;
  width: min(39vw, 585px);
  opacity: 0.34;
  transform: rotate(6deg) scaleX(-1) scale(.94);
  animation: eqRecBlobInAlt 680ms ease-out 130ms both, eqRecBlobBreatheAlt 14s ease-in-out 1.2s infinite alternate;
}

.eq-recovery-blob-orange {
  top: 5%;
  right: -9%;
  width: min(38vw, 570px);
  opacity: 0.32;
  transform: rotate(3deg) scale(.94);
  animation: eqRecBlobInOrange 660ms ease-out 90ms both, eqRecBlobBreatheOrange 13s ease-in-out 1.1s infinite alternate;
}

@keyframes eqRecBlobIn {
  from { opacity: 0; transform: rotate(-4deg) scale(.90); }
  to { opacity: .38; transform: rotate(-4deg) scale(1); }
}

@keyframes eqRecBlobInAlt {
  from { opacity: 0; transform: rotate(6deg) scaleX(-1) scale(.90); }
  to { opacity: .34; transform: rotate(6deg) scaleX(-1) scale(1); }
}

@keyframes eqRecBlobInOrange {
  from { opacity: 0; transform: rotate(3deg) scale(.90); }
  to { opacity: .32; transform: rotate(3deg) scale(1); }
}

@keyframes eqRecBlobBreathe {
  to { transform: rotate(-3deg) scale(1.025); }
}

@keyframes eqRecBlobBreatheAlt {
  to { transform: rotate(5deg) scaleX(-1) scale(1.02); }
}

@keyframes eqRecBlobBreatheOrange {
  to { transform: rotate(4deg) scale(1.025); }
}

/* -------------------------------------------------------------------- */
/* Contenedor + tarjeta principal                                        */
/* -------------------------------------------------------------------- */
.eq-recovery-container {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.eq-recovery-card {
  position: relative;
  width: clamp(660px, 43vw, 820px);
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 40px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--card);
  border: 1.5px solid rgba(44, 70, 85, .72);
  border-radius: 28px 30px 27px 31px;
  box-shadow: 0 24px 48px rgba(50, 45, 35, .11);
  padding: clamp(28px, 5vh, 54px) 62px clamp(22px, 4vh, 44px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation: eqRecCardIn 580ms cubic-bezier(.22,.8,.28,1) 130ms forwards;
}

/* Error: exactamente ~1 cm de aire vertical alrededor del contenido. */
.eq-recovery-page[data-state="error"] .eq-recovery-card {
  min-height: 0;
  padding-top: 38px;
  padding-bottom: 38px;
}

.eq-recovery-card::before {
  content: "";
  position: absolute;
  inset: 5px -4px -3px 4px;
  border: 1px solid rgba(44, 70, 85, .24);
  border-radius: 31px 27px 32px 28px;
  transform: rotate(-.10deg);
  pointer-events: none;
}

@keyframes eqRecCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -------------------------------------------------------------------- */
/* Estado: bloque compartido por INITIAL/SUCCESS/ERROR                   */
/* -------------------------------------------------------------------- */
.eq-recovery-state {
  text-align: center;
}

.eq-recovery-badge-wrap {
  position: relative;
  text-align: center;
  /* La llave queda deliberadamente próxima al título gráfico. */
  margin-bottom: -2px;
}

.eq-recovery-badge {
  /* El arte ocupa aproximadamente la mitad del lienzo transparente. */
  width: 260px;
  height: auto;
  opacity: 0;
  transform: scale(.94) rotate(-2deg);
  animation: eqRecBadgeIn 480ms ease-out 80ms forwards, eqRecBadgeSettle 450ms ease-out 480ms forwards;
}

@keyframes eqRecBadgeIn {
  to { opacity: 1; transform: scale(1) rotate(-2deg); }
}

@keyframes eqRecBadgeSettle {
  0%   { transform: scale(1) rotate(-2deg); }
  55%  { transform: scale(1.025) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.eq-recovery-title-img {
  display: block;
  width: clamp(390px, 33vw, 520px);
  /* El PNG aprobado tiene lienzo transparente alto: se recorta sólo su
     área vacía para mantener la llave y el título juntos. */
  height: 118px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: eqRecRevealUp 340ms ease-out 360ms forwards;
}

.eq-recovery-subtext {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--secondary);
  max-width: 560px;
  margin: 0 auto 30px;
  opacity: 0;
  transform: translateY(7px);
  animation: eqRecRevealUp 320ms ease-out 440ms forwards;
}

@keyframes eqRecRevealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------- */
/* Formulario                                                             */
/* -------------------------------------------------------------------- */
.eq-recovery-form {
  text-align: left;
}

.eq-recovery-form-group {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(7px);
  animation: eqRecRevealUp 300ms ease-out 510ms forwards;
}

.eq-recovery-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 9px;
  transition: transform 180ms ease;
}

.eq-recovery-label img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.eq-recovery-input-wrap {
  position: relative;
}

.eq-recovery-input-wrap img.eq-recovery-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: transform 200ms ease;
  pointer-events: none;
}

.eq-recovery-focus-accents {
  position: absolute;
  right: -25px;
  top: -13px;
  width: 58px;
  height: auto;
  opacity: 0;
  transform: rotate(-7deg) scale(.86);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.eq-recovery-input {
  width: 100%;
  height: 68px;
  border: 1.5px solid var(--teal);
  border-radius: 16px 18px 15px 17px;
  background: rgba(252, 249, 243, .97);
  padding: 0 20px 0 58px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.eq-recovery-input::placeholder {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 20px;
  color: #8B949D;
}

.eq-recovery-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow:
    0 0 0 4px rgba(11, 122, 130, .10),
    0 4px 18px rgba(11, 122, 130, .08);
  transform: translateY(-1px);
}

.eq-recovery-form-group.is-focused .eq-recovery-label {
  transform: translateY(-1px);
}

.eq-recovery-form-group.is-focused .eq-recovery-input-wrap img.eq-recovery-input-icon {
  transform: translateY(-50%) scale(1.05);
}

.eq-recovery-form-group.is-focused .eq-recovery-focus-accents {
  opacity: .78;
  transform: rotate(-7deg) scale(1);
}

/* -------------------------------------------------------------------- */
/* Botón Enviar Solicitud                                                 */
/* -------------------------------------------------------------------- */
.eq-recovery-btn {
  position: relative;
  width: 100%;
  height: 70px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--teal);
  border: 1.5px solid var(--teal-dark);
  border-radius: 17px 15px 18px 16px;
  color: #FFFFFF;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 170ms ease, transform 170ms ease, box-shadow 170ms ease;
  opacity: 0;
  animation: eqRecRevealUp 300ms ease-out 580ms forwards;
}

.eq-recovery-btn img.eq-recovery-plane {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 34px;
  height: auto;
  transform: translateY(-50%);
  transition: transform 240ms ease, opacity 240ms ease;
}

.eq-recovery-btn:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(7, 92, 99, .18);
}

.eq-recovery-btn:active {
  transform: translateY(0) scale(.995);
}

.eq-recovery-btn:disabled {
  opacity: .85;
  cursor: not-allowed;
  transform: none;
}

.eq-recovery-btn.is-sending img.eq-recovery-plane {
  transform: translateY(-50%) translate(8px, -6px) rotate(-5deg);
}

.eq-recovery-btn-spinner {
  display: none;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: rgba(255, 255, 255, .9);
  border-radius: 50%;
  animation: eqRecSpin 900ms linear infinite;
  margin-right: 10px;
}

.eq-recovery-btn.is-sending .eq-recovery-btn-spinner {
  display: inline-block;
}

.eq-recovery-btn.is-sending .eq-recovery-btn-label-default {
  display: none;
}

.eq-recovery-btn-label-sending {
  display: none;
}

.eq-recovery-btn.is-sending .eq-recovery-btn-label-sending {
  display: inline;
}

@keyframes eqRecSpin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------- */
/* Volver al login                                                        */
/* -------------------------------------------------------------------- */
.eq-recovery-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 54px;
  padding: 0 30px;
  margin: 18px auto 0;
  background: transparent;
  border: 1.5px solid var(--teal);
  border-radius: 14px 16px 13px 15px;
  color: var(--secondary);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 21px;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.eq-recovery-back img {
  width: 26px;
  height: auto;
}

.eq-recovery-back:hover {
  background: rgba(11, 122, 130, .06);
  transform: translateX(-2px);
}

.eq-recovery-back-wrap {
  text-align: center;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(6px);
  animation: eqRecRevealUp 280ms ease-out 640ms forwards;
}

/* -------------------------------------------------------------------- */
/* Separador + ayuda                                                      */
/* -------------------------------------------------------------------- */
.eq-recovery-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 16px;
  opacity: 0;
  animation: eqRecDividerIn 360ms ease-out 710ms forwards;
}

.eq-recovery-divider .line {
  flex: 1 1 auto;
  max-width: 140px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--warm) 0 6px, transparent 6px 11px);
  opacity: .7;
}

.eq-recovery-divider img {
  width: 20px;
  height: auto;
}

.eq-recovery-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--secondary);
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  animation: eqRecRevealUp 260ms ease-out 760ms forwards;
}

@keyframes eqRecDividerIn {
  from { opacity: 0; transform: scaleX(.65); }
  to { opacity: 1; transform: scaleX(1); }
}

/* -------------------------------------------------------------------- */
/* Mensaje de error inline (validación de campo vacío)                   */
/* -------------------------------------------------------------------- */
.eq-recovery-field-error {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(214, 92, 80, .075);
  border: 1.5px solid var(--error);
  color: var(--error-ink);
  padding: 11px 15px;
  border-radius: 13px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.eq-recovery-field-error.is-visible {
  display: flex;
}

.eq-recovery-card.is-shaking {
  animation: eqRecShake 240ms ease-in-out;
}

@keyframes eqRecShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* -------------------------------------------------------------------- */
/* Estados SUCCESS / ERROR -- ocultos hasta respuesta real (§84)         */
/* -------------------------------------------------------------------- */
.eq-recovery-form-state {
  transition: opacity 220ms ease, transform 260ms ease, filter 200ms ease;
}

.eq-recovery-form-state.is-hiding {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  pointer-events: none;
}

.eq-recovery-result {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.eq-recovery-result.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.eq-recovery-result.is-visible .eq-recovery-result-title,
.eq-recovery-result.is-visible .eq-recovery-result-message,
.eq-recovery-result.is-visible .eq-recovery-result-actions,
.eq-recovery-result.is-visible .eq-recovery-result-divider,
.eq-recovery-result.is-visible .eq-recovery-result-help {
  animation: eqRecRevealUp 340ms ease-out both;
}

.eq-recovery-result.is-visible .eq-recovery-result-title { animation-delay: 150ms; }
.eq-recovery-result.is-visible .eq-recovery-result-message { animation-delay: 230ms; }
.eq-recovery-result.is-visible .eq-recovery-result-actions { animation-delay: 310ms; }
.eq-recovery-result.is-visible .eq-recovery-result-divider { animation-delay: 360ms; }
.eq-recovery-result.is-visible .eq-recovery-result-help { animation-delay: 410ms; }

.eq-recovery-result-icon-wrap {
  position: relative;
  margin-bottom: 6px;
}

.eq-recovery-result-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  transform: scale(.7);
  transition: opacity 450ms ease, transform 450ms ease;
}

.eq-recovery-result.is-visible.is-success .eq-recovery-result-icon-wrap::before {
  background: radial-gradient(circle, rgba(60,141,112,.10), transparent 70%);
  opacity: 1;
  transform: scale(1.2);
}

.eq-recovery-result.is-visible.is-error .eq-recovery-result-icon-wrap::before {
  background: rgba(214, 92, 80, .08);
  opacity: 1;
  transform: scale(1.1);
}

.eq-recovery-result-icon {
  position: relative;
  z-index: 1;
  width: 136px;
  height: auto;
  opacity: 0;
  transform: scale(.75);
}

.eq-recovery-result.is-visible .eq-recovery-result-icon {
  animation: eqRecResultIconIn 430ms ease-out forwards;
}

.eq-recovery-result.is-error .eq-recovery-result-icon {
  /* El asset incluye la mancha coral y los acentos; limitarlo evita que
     domine el mensaje y mantiene el estado de error tan compacto como el
     de éxito. */
  width: 176px;
  animation-name: eqRecErrorIconIn;
  animation-duration: 380ms;
}

@keyframes eqRecResultIconIn {
  0%   { opacity: 0; transform: scale(.70); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes eqRecErrorIconIn {
  0%   { opacity: 0; transform: scale(.86) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.eq-recovery-result-title {
  display: block;
  width: clamp(360px, 30vw, 480px);
  /* Los títulos aprobados contienen lienzo transparente vertical. */
  height: 110px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto 12px;
}

.eq-recovery-result-message {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--secondary);
  max-width: 520px;
  margin: 0 auto 26px;
}

.eq-recovery-result.is-error .eq-recovery-result-message {
  font-size: 16px;
}

.eq-recovery-result-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.eq-recovery-result-divider {
  width: 100%;
  margin: 28px 0 16px;
}

.eq-recovery-result-help {
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* Cursores / accesibilidad básica                                       */
/* -------------------------------------------------------------------- */
.eq-recovery-page button,
.eq-recovery-page a {
  cursor: pointer;
}

.eq-recovery-page input {
  cursor: text;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eq-recovery-card,
  .eq-recovery-badge,
  .eq-recovery-form-state,
  .eq-recovery-result,
  .eq-recovery-result-icon,
  .eq-recovery-card.is-shaking,
  .eq-recovery-btn img.eq-recovery-plane {
    animation: none !important;
    transition: opacity 150ms ease !important;
    transform: none !important;
    opacity: 1;
  }

  .eq-recovery-blob,
  .eq-recovery-title-img,
  .eq-recovery-subtext,
  .eq-recovery-form-group,
  .eq-recovery-btn,
  .eq-recovery-back-wrap,
  .eq-recovery-divider,
  .eq-recovery-help {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------- */
/* Tablet 768-1199                                                        */
/* -------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 768px) {
  .eq-recovery-card {
    width: clamp(600px, 60vw, 680px);
    padding: 44px 48px 34px;
  }
}

/* En escritorio la vista es una pantalla completa, nunca un documento
   desplazable. El contenido se compacta en el bloque de altura baja. */
@media (min-width: 768px) {
  html:has(body.eq-recovery-page),
  body.eq-recovery-page {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .eq-recovery-container {
    height: 100dvh;
    min-height: 0;
  }
}

/* Mantiene INITIAL, SUCCESS y ERROR completos sin scroll en monitores
   bajos: se reduce el aire decorativo antes que los controles reales. */
@media (max-height: 900px) and (min-width: 768px) {
  .eq-recovery-card {
    height: auto;
    max-height: calc(100vh - 28px);
    padding: 24px 48px 18px;
  }
  .eq-recovery-badge {
    width: 190px;
  }
  .eq-recovery-badge-wrap {
    margin-bottom: -8px;
  }
  .eq-recovery-title-img {
    height: 92px;
    margin-bottom: 6px;
  }
  .eq-recovery-subtext {
    margin-bottom: 18px;
  }
  .eq-recovery-form-group {
    margin-bottom: 16px;
  }
  .eq-recovery-input {
    height: 60px;
  }
  .eq-recovery-btn {
    height: 60px;
  }
  .eq-recovery-back {
    height: 48px;
    margin-top: 12px;
  }
  .eq-recovery-divider {
    margin: 18px 0 10px;
  }
  .eq-recovery-result-icon {
    width: 120px;
  }
  .eq-recovery-result.is-error .eq-recovery-result-icon {
    width: 132px;
  }
  .eq-recovery-result-message {
    margin-bottom: 16px;
  }
}

/* -------------------------------------------------------------------- */
/* Mobile < 768                                                           */
/* -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .eq-recovery-container {
    padding: 14px;
  }
  .eq-recovery-card {
    width: calc(100% - 28px);
    min-height: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 30px 22px;
    border-radius: 24px;
  }
  .eq-recovery-badge {
    width: 180px;
  }
  .eq-recovery-title-img {
    width: 90%;
    max-width: 330px;
    height: 78px;
    margin-bottom: 8px;
  }
  .eq-recovery-subtext {
    font-size: 16px;
  }
  .eq-recovery-input {
    height: 60px;
  }
  .eq-recovery-btn {
    height: 60px;
    font-size: 21px;
  }
  .eq-recovery-result-icon {
    width: 128px;
  }
  .eq-recovery-result.is-error .eq-recovery-result-icon {
    width: 140px;
  }
  .eq-recovery-result-title {
    width: 88%;
    max-width: 320px;
    height: 78px;
  }
  .eq-recovery-result-message {
    font-size: 16px;
  }
  .eq-recovery-focus-accents {
    right: -16px;
    width: 46px;
  }
  .eq-recovery-blob-teal,
  .eq-recovery-blob-teal-alt,
  .eq-recovery-blob-orange {
    width: 70vw;
    opacity: 0.22;
  }
}