/* Password gate page (Figma: Components, Password gate 301:3851; desktop, tablet, mobile,
   Light and Dark). No site nav or footer: just the heading, one field and two actions.
   Role tokens only, so Light and Dark come from tokens.css. */
.gate {
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--arche-space-base-64) var(--arche-page-pad) var(--arche-space-base-32);
}
.gate__content {
  display: flex;
  flex-direction: column;
  gap: var(--arche-space-base-32);
  max-width: 867px;
}
.gate__heading { margin: 0; color: var(--arche-text-neutral-primary); text-wrap: balance; }
.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--arche-space-base-24);
  width: 100%;
  max-width: 644px;
}
.gate__actions { display: flex; align-items: center; gap: var(--arche-space-base-24); }
@media (min-width: 768px) {
  .gate { padding-top: var(--arche-space-base-96); padding-bottom: var(--arche-space-base-48); }
  .gate__content { gap: var(--arche-space-base-40); }
  .gate__form { gap: var(--arche-space-base-32); max-width: 524px; }
}
@media (min-width: 1024px) {
  .gate { padding-top: var(--arche-space-base-128); padding-bottom: var(--arche-space-base-64); }
  .gate__content { gap: var(--arche-space-base-48); }
  .gate__form { max-width: 644px; }
}