:root {
  color: #18212b;
  background: #f4f6f8;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
a { color: #1267a5; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  min-height: 72px;
  padding: 14px clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce2e8;
  background: #ffffff;
}

.brand { display: flex; align-items: center; gap: 11px; color: #17212b; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #ffffff; background: #d44c2d; border-radius: 6px; font-weight: 750;
}
.brand strong, .brand small { display: block; letter-spacing: 0; }
.brand strong { font-size: 17px; line-height: 1.2; }
.brand small { margin-top: 2px; color: #697581; font-size: 12px; }
.support-link { font-size: 14px; font-weight: 600; }

main { display: grid; place-items: center; padding: 40px 20px; }
.account-shell, .legal-copy { width: min(100%, 600px); }
.account-shell { padding: 36px; border: 1px solid #d7dee5; border-radius: 8px; background: #ffffff; box-shadow: 0 14px 38px rgba(21, 34, 46, .08); }
.eyebrow { margin: 0 0 10px; color: #b33a22; font-size: 13px; font-weight: 750; text-transform: uppercase; }
h1 { margin: 0; font-size: 30px; line-height: 1.22; letter-spacing: 0; overflow-wrap: anywhere; }
.lede { margin: 14px 0 28px; color: #52606c; font-size: 16px; line-height: 1.65; }

.invite-details { margin: 0; border-block: 1px solid #e1e6eb; }
.invite-details div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 15px 0; }
.invite-details div + div { border-top: 1px solid #edf0f3; }
.invite-details dt { color: #697581; }
.invite-details dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.actions { display: grid; gap: 12px; margin-top: 26px; }
form { margin: 0; }
.button { min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; }
.button:hover { text-decoration: none; }
.button.primary { width: 100%; color: #ffffff; background: #1267a5; }
.button.primary:hover { background: #0e578c; }
.button.secondary { color: #17212b; border-color: #bdc7d0; background: #ffffff; }
.text-button { width: 100%; padding: 8px; border: 0; color: #52606c; background: transparent; cursor: pointer; font: inherit; }
.password-link { margin-top: 20px; display: block; text-align: center; font-size: 14px; }
.signed-in { padding: 13px 15px; display: grid; gap: 3px; border-left: 3px solid #1267a5; background: #f1f6fa; }
.signed-in span { color: #697581; font-size: 12px; }
.signed-in strong { overflow-wrap: anywhere; }
.organization-list { padding: 14px 0; display: grid; gap: 4px; border-block: 1px solid #e1e6eb; }
.organization-list span { color: #697581; font-size: 12px; }
.organization-list strong { overflow-wrap: anywhere; }
.result { padding: 14px 15px; display: grid; gap: 4px; border-left: 3px solid; line-height: 1.45; }
.result span { color: #52606c; }
.result.success { border-color: #248158; background: #edf8f2; }
.result.warning { border-color: #b97818; background: #fff7e8; }
.result.error { border-color: #bd3c32; background: #fff0ee; }

.legal-copy { line-height: 1.8; }
.legal-copy h1 { margin-bottom: 24px; }
footer { min-height: 64px; padding: 20px clamp(20px, 5vw, 72px); display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #dce2e8; color: #697581; background: #ffffff; font-size: 13px; }
footer nav { display: flex; gap: 20px; }

@media (max-width: 560px) {
  .site-header { min-height: 64px; padding: 12px 16px; }
  .brand small { display: none; }
  main { place-items: start center; padding: 24px 14px; }
  .account-shell { padding: 24px 20px; }
  h1 { font-size: 25px; }
  .invite-details div { grid-template-columns: 1fr; gap: 5px; }
  .invite-details dd { text-align: left; }
  footer { padding: 18px 16px; flex-direction: column; gap: 12px; }
}