/* How It Works screen */

.how-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* visible viewport on mobile */
  max-height: 100dvh;
  background: #101c22;
  color: #ffffff;
}

/* Header – logo top-left (same style as other screens) */

.how-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #1f2933;
}

.how-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.how-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #13a4ec;
}

.how-logo-text {
  font-size: 20px;
  font-weight: 600;
}

/* Main content */

.how-main {
  flex: 1;
  padding: 24px 24px 0;
}

.how-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.how-step {
  display: flex;
  align-items: center; /* center text vertically next to circle */
  gap: 16px;
}

.how-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(19, 164, 236, 0.2);
  color: #13a4ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.how-step-text {
  font-size: 16px;
  line-height: 1.4;
}

/* Footer button */

.how-footer {
  padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #101c22;
}

.how-footer .btn-primary {
  width: 100%;
}