.access-page { min-height: 100svh; display: flex; flex-direction: column; padding: clamp(24px, 6vw, 72px); }
.access-content { width: min(100%, 400px); margin: auto; padding-block: 36px 64px; }
.access-content .brand { margin-bottom: 64px; }
.access-eyebrow { font-size: .75rem; letter-spacing: .09em; color: var(--m7-muted); margin: 0 0 16px; }
.access-content h1 { font: 400 clamp(2.1rem, 7vw, 2.75rem)/1.12 var(--m7-font-heading); letter-spacing: -.035em; margin: 0 0 24px; }
.access-description { color: var(--m7-muted); font-size: .875rem; line-height: 1.7; margin-bottom: 32px; }
.access-modes { display: flex; gap: 24px; border-bottom: 1px solid var(--m7-line); margin-bottom: 24px; }
.access-modes .m7-button { padding-inline: 0; border-radius: 0; color: var(--m7-muted); font-size: .875rem; }
.access-modes .m7-button[aria-pressed="true"] { color: var(--m7-text); background: transparent; border-color: transparent; box-shadow: inset 0 -1px var(--m7-text); }
.access-content label { display: block; margin: 16px 0 8px; font-size: .8125rem; }
.access-content input { width: 100%; border-radius: 0; font-size: 1rem; }
.access-content form > button { width: 100%; margin-top: 24px; border-radius: 0; }
.access-content [hidden] { display: none; }
#access-error, #access-status { font-size: .8125rem; line-height: 1.5; margin: 16px 0 0; }
#access-error:empty, #access-status:empty { display: none; }
#access-status { color: var(--m7-muted); }
.access-page footer { display: flex; justify-content: space-between; gap: 20px; color: var(--m7-muted); font-size: .6875rem; }
@media (max-height: 740px) { .access-content .brand { margin-bottom: 36px; } .access-content { padding-top: 12px; } }