.access-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at top, #efd7de 0, #f7f4ed 65%);
}

.access-card {
  width: min(100%, 410px);
  padding: clamp(24px, 7vw, 42px);
  background: #fffdf5;
  border: 1px solid #e9d9dc;
  border-radius: 24px;
  box-shadow: 0 20px 54px #73465915;
  text-align: center;
}

.access-card .eyebrow { justify-content: center; color: #734659; }
.access-card h1 { margin: 12px 0; font-size: clamp(26px, 7vw, 34px); line-height: 1.25; }
.access-card > p { margin: 0 0 24px; color: #615850; }
.access-card label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }

#access-pin {
  width: 100%;
  min-height: 54px;
  border: 1px solid #d5bcc4;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #fbf4f4;
  color: #493741;
  font-size: 24px;
  letter-spacing: .4em;
  text-align: center;
  text-indent: .4em;
}

#access-pin[aria-invalid="true"] { border-color: #a63b52; }
.access-card button { min-height: 44px; }
.access-card button:disabled { cursor: wait; opacity: .72; }
#access-feedback { min-height: 24px; margin: 12px 0 0; color: #734659; font-size: 14px; }