/* A focused sign-in surface; the landscape and app permissions stay unchanged. */
.gate { min-height: 100dvh; padding: 40px 24px; }
.gate-card {
  max-width: 510px;
  padding: 36px 38px 28px;
  text-align: left;
  border: 1px solid #65567d80;
  border-radius: 20px;
  background: linear-gradient(145deg, #171d31f5, #101827f7);
  box-shadow: 0 24px 80px #060a1940;
}
.gate-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 32px; color: #f0edfc; font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.gate-brand:hover { color: #fff; }
.gate-card .gate-brand .brand-mark { width: 39px; height: 39px; border-radius: 11px; margin: 0; font-size: 23px; }
.gate-brand > span:last-child > span { color: #b6abc9; font-weight: 400; }
.gate-card .eyebrow { color: #b5a0d7; font-size: 10px; letter-spacing: 1.6px; margin-bottom: 15px; }
.gate-card h1 { font-size: clamp(31px, 4vw, 39px); letter-spacing: -1.3px; line-height: 1.2; margin: 0 0 18px; }
.gate-card h1 span { color: #bba1f4; }
.gate-card #gate-message { margin: 0 0 26px; max-width: none; color: #b9c1d6; font-size: 14px; line-height: 1.75; }
.gate-actions { display: grid; gap: 10px; }
.gate-actions .button { width: 100%; min-height: 50px; font-size: 13px; }
.gate-login { justify-content: flex-start; gap: 12px; padding: 13px 17px; }
.gate-login svg { width: 21px; height: 21px; flex-shrink: 0; }
.gate-login > span:last-child { margin-left: auto; font-size: 19px; font-family: system-ui, sans-serif; opacity: .8; }
.gate-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; color: #a5a4bb; font-size: 11px; }
.gate-divider::before, .gate-divider::after { content: ""; height: 1px; flex: 1; background: #71618440; }
.gate-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gate-secondary .button { min-height: 67px; padding: 12px 8px; flex-direction: column; gap: 4px; }
.gate-secondary strong { font-size: 12px; font-weight: 600; }
.gate-secondary small { font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px; font-weight: 400; color: #acafc5; }
.gate-card .gate-privacy { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #71618430; font-size: 11px; line-height: 1.6; color: #b1adc4; }
.gate-privacy svg { width: 15px; height: 15px; flex-shrink: 0; color: #b29ace; }
@media(max-width:540px) {
  .gate { padding: 24px 16px; }
  .gate-card { padding: 28px 24px 23px; border-radius: 16px; }
  .gate-brand { margin-bottom: 26px; }
  .gate-card .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .gate-card h1 { font-size: 32px; letter-spacing: -1px; }
  .gate-card #gate-message { font-size: 13px; }
  .gate-actions .gate-login { gap: 10px; padding: 12px; font-size: 12px; }
  .gate-login > span:last-child { font-size: 18px; }
  .gate-secondary { gap: 10px; }
  .gate-secondary strong { font-size: 11px; }
  .gate-secondary small { font-size: 10px; }
  .gate-card .gate-privacy { font-size: 10px; }
}