/* ===== password gate (Figma node 13298:14037) ===========================
   Modal overlay on top of the page (same pattern as the white-paper
   download gate in resources.css): dimmed backdrop, white card with title,
   password field + Continue on one row, Go back / Contact Us underneath.
   Buttons reuse .btn--primary / .btn--secondary from main.css. */

/* scroll lock while the gate is open (articles pages don't load resources.css,
   where the .is-gate-open rule normally lives) */
body.is-gate-open { overflow: hidden; }

.pw-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pw-gate[hidden] { display: none; }

.pw-gate__ovl { position: absolute; inset: 0; background: rgba(64,64,64,.4); }

.pw-gate__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 648px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 41px;
  background: #fff;
  border: 1px solid rgba(6, 3, 9, .15);
  border-radius: 8px;
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, .14);
}

.pw-gate__title {
  margin: 0;
  font-family: var(--f-alt);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.24px;
  color: #000;
  text-align: center;
}

.pw-gate__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pw-gate__field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pw-gate__field label {
  font-family: var(--f-alt);
  font-size: 16px;
  line-height: 1.2;
  color: #060309;
}
.pw-gate__field input {
  width: 100%;
  height: 40px;
  padding: 0 20px;
  font-family: var(--f-alt);
  font-size: 16px;
  color: #060309;
  background: #fff;
  border: 1px solid #d9d9da;
  border-radius: 8px;
}
.pw-gate__field input:focus {
  outline: none;
  border-color: #2da2db;
}

.pw-gate__form .btn { white-space: nowrap; }

/* Figma: buttons in the gate are 40px tall (same as the input), 8/20 padding,
   12px between label and icon — the global .btn is 44px with 10/24. */
.pw-gate .btn {
  height: 40px;
  padding: 8px 20px;
  gap: 12px;
}

.pw-gate__error {
  margin: -24px 0 0;
  font-family: var(--f-alt);
  font-size: 14px;
  line-height: 1.4;
  color: #d64545;
  text-align: center;
}

.pw-gate__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 560px) {
  .pw-gate__card { padding: 24px; gap: 32px; }
  .pw-gate__form { flex-direction: column; align-items: stretch; }
  .pw-gate__actions { flex-wrap: wrap; }
}