.account-page .hero { padding-bottom: 40px; }
.account-page .hero h1 { max-width: 15ch; }
.account-forms { align-items: start; }
.account-card { display: grid; gap: 4px; }
.account-card form { display: grid; gap: 4px; }
.account-card h2 { margin-bottom: 16px; font-size: clamp(1.7rem, 5vw, 2.25rem); }
.account-card .btn { margin-top: 4px; }
#reset-request-form { margin-top: 12px; }
.account-status { background: var(--ink-panel); color: var(--paper); border: 0; }
.account-status h2 { color: var(--paper); overflow-wrap: anywhere; }
.account-status .eyebrow { color: var(--accent); }
.account-status .muted { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.account-status .btn-ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.account-status .btn-ghost:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); border-color: var(--paper); }
#set-password-form { margin-top: 16px; }
.account-data { margin-top: 16px; }
.account-data .card { display: grid; align-content: start; gap: 8px; }
.account-data .btn { justify-self: start; }
.account-disclaimer { margin-top: 24px; }
.account-screen .tabbar { display: none; }

@media (max-width: 639px) {
  .account-page { padding-inline: 16px; }
  .account-page .hero { padding-top: 34px; }
  .account-data { grid-template-columns: 1fr; }
  main.page.account-page > .site-foot { width: calc(100% + 32px); margin-inline: -16px; }
}