/* The sign-in page uses the same quiet, collected visual language as Spatial. */
.welcome {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4rem;
  padding: 2rem 1.25rem;
  color: #354747;
  background:
    radial-gradient(ellipse 42rem 32rem at 80% 14%, #e3ecdf 0%, transparent 65%),
    radial-gradient(ellipse 32rem 25rem at 7% 88%, #f1dfcd 0%, transparent 70%),
    #f8f5eb;
}
.welcome-brand { max-width: 530px; text-align: center; }
.welcome-brand .eyebrow { display: block; margin-bottom: .65rem; }
.welcome-mark {
  display: grid;
  width: 74px;
  height: 74px;
  margin: 0 auto .9rem;
  place-items: center;
  border: 1px solid #b7b6a0;
  border-radius: 50%;
  color: #76806d;
  background: #faf6eb;
  box-shadow: inset 0 0 0 7px #fffdf7, inset 0 0 0 8px #d0cdbc;
  font: 2rem/1 Georgia, serif;
}
.welcome h1 { margin: 0; font: 400 clamp(3.1rem, 10vw, 4.8rem)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.07em; }
.welcome-brand p { margin: 1.15rem auto 0; color: #68736a; font-size: .92rem; line-height: 1.6; }
.people-picker { display: flex; justify-content: center; gap: clamp(2rem, 7vw, 6rem); }
.person { display: grid; justify-items: center; gap: .48rem; padding: 0; border: 0; color: #53645c; background: transparent; font-size: 1rem; font-weight: 700; }
.person:hover { color: #874230; background: transparent; box-shadow: none; transform: translateY(-3px); }
.person img { width: clamp(128px, 23vw, 205px); aspect-ratio: 1; border: 5px solid #fffdf7; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 26px #44382926; }
.person.chosen { color: #874230; font-size: 1.18rem; }
.person.chosen img { border-color: #b7c5b0; box-shadow: 0 16px 35px #435e5130; }
.person.dimmed { opacity: .48; filter: saturate(.6); }
.person small { color: #7b847b; font-size: .68rem; font-weight: 650; letter-spacing: .04em; }
.person small b { color: #ad553e; font-size: .88rem; }
.selected-welcome { gap: 1.7rem; padding-top: 3rem; padding-bottom: 3rem; }
.selected-welcome .welcome-mark { width: 76px; height: 76px; }
.selected-person { gap: clamp(2rem, 8vw, 5rem); }
.password-card { width: min(666px, 100%); display: grid; gap: 1rem; padding: 2.25rem; border: 1px solid #deded3; border-radius: 24px; background: #fffdf7; box-shadow: 0 20px 40px #44382918; }
.password-card h2 { margin: .42rem 0 .35rem; color: #354747; font: 400 clamp(1.7rem, 4vw, 2.25rem)/1 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.password-card p { margin: 0; color: #747b72; font-size: .85rem; line-height: 1.5; }
.password-card label { color: #53645c; font-size: 1rem; font-weight: 700; }
.password-card input { height: 60px; margin-top: .55rem; border: 1px solid #b7c5b0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px #f2f4ed; font-size: 1.2rem; }
.password-card button[type="submit"], .password-card button:not(.secondary) { min-height: 56px; border-color: #435e51; background: #435e51; font-size: 1.05rem; }
.password-card button[type="submit"]:hover { background: #354747; }
.password-card .change-person { justify-self: center; border: 0; color: #727b72; background: transparent; }
.password-card .change-person:hover { color: #874230; background: transparent; box-shadow: none; }
@media (max-width: 520px) { .welcome { gap: 2.4rem; } .people-picker { gap: 1.5rem; } .person img { width: min(39vw, 165px); } .selected-welcome .people-picker { gap: 1.4rem; } .password-card { padding: 1.3rem; border-radius: 20px; } }