/* the sign-in / sign-up / password pages (layouts/auth): a slim navy brand side, one compact card */
.sa-su { margin: 0; min-height: 100vh; background: var(--sa-bg, #f0f2f8); font-family: var(--sa-font, "Geist", system-ui, sans-serif); color: var(--sa-text, #0b1220); }
.sa-su__shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 100vh; }

.sa-su__side { display: flex; flex-direction: column; padding: 28px 32px; color: #fff;
  background: radial-gradient(120% 60% at 0% 0%, #1b2a47 0%, rgba(27, 42, 71, 0) 60%), linear-gradient(180deg, #0b1220 0%, #111a2e 100%); }
.sa-su__brand { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none !important; font-family: var(--sa-font-display, sans-serif); font-weight: 700; font-size: 19px; }
.sa-su__pitch { margin-top: auto; margin-bottom: auto; }
.sa-su__pitch-title { font-family: var(--sa-font-display, sans-serif); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 18px; }
.sa-su__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #c4cbe0; font-size: 14px; }
.sa-su__points i { color: var(--sa-accent, #ff6a13); width: 18px; }
.sa-su__side-foot { margin: 0; color: #5b6478; font-size: 12px; }

.sa-su__main { display: flex; align-items: center; justify-content: center; padding: 16px 20px; }
.sa-su__card { width: 100%; max-width: 680px; background: var(--sa-surface, #fff); border: 1px solid var(--sa-border, #e3e7f0); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 12px 32px rgba(11, 18, 32, .07); padding: 22px 32px 16px; }
.sa-su__mark { display: inline-block; margin-bottom: 10px; }
.sa-su__title { font-family: var(--sa-font-display, sans-serif); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.sa-su__sub { margin: 2px 0 12px; color: var(--sa-muted, #5b6478); font-size: 14px; }

.sa-su__form { display: grid; gap: 12px; }
.sa-su__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sa-text-2, #2b3448); margin-bottom: 5px; }
.sa-su__hint { font-weight: 400; color: var(--sa-muted, #5b6478); font-size: 12px; }
.sa-su__error { color: var(--sa-red, #b42318); font-size: 12px; margin-top: 4px; }

.sa-su__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sa-su__chip { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--sa-border, #e3e7f0); border-radius: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--sa-text-2, #2b3448) !important; text-decoration: none !important; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background .15s; }
.sa-su__chip i { color: var(--sa-accent, #ff6a13); width: 15px; text-align: center; flex: 0 0 auto; }
.sa-su__chip:hover { border-color: var(--sa-accent, #ff6a13); }
.sa-su__chip.is-active { border-color: var(--sa-accent, #ff6a13); background: var(--sa-accent-50, #fff3eb); color: var(--sa-text, #0b1220) !important; box-shadow: 0 0 0 3px rgba(255, 106, 19, .15); }
.sa-su__sector-select { display: none; }

.sa-su__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sa-su__field.is-wide { grid-column: 1 / -1; }
.sa-su__input { position: relative; }
.sa-su .form-control, .sa-su .form-select { height: 40px; font-size: 14px; border-radius: 9px; border-color: var(--sa-border, #e3e7f0); }
.sa-su .form-select-sm { height: 34px; font-size: 13px; }
.sa-su .form-control:focus, .sa-su .form-select:focus { border-color: var(--sa-accent, #ff6a13); box-shadow: 0 0 0 3px rgba(255, 106, 19, .18); }
.sa-su .form-control::placeholder { color: #9aa3b5; font-size: 13px; }
.sa-su__input .form-control[type=password], .sa-su__input .form-control[data-eye] { padding-right: 40px; }
.sa-su__eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--sa-muted, #5b6478); width: 34px; height: 32px; border-radius: 7px; }
.sa-su__eye:hover { color: var(--sa-text, #0b1220); background: var(--sa-bg, #f0f2f8); }

.sa-su__note { margin: 0; font-size: 12.5px; color: var(--sa-muted, #5b6478); }
.sa-su__note i { color: var(--sa-accent, #ff6a13); }
.sa-su__note a, .sa-su__foot a, .sa-su__check a { color: var(--sa-accent-600, #c2500a); font-weight: 600; text-decoration: none; }
.sa-su__note a:hover, .sa-su__foot a:hover, .sa-su__check a:hover { text-decoration: underline; }
.sa-su__checks { display: grid; gap: 6px; }
.sa-su__check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 12.5px; color: var(--sa-text-2, #2b3448); margin: 0; cursor: pointer; }
.sa-su__check input { margin-top: 2px; accent-color: var(--sa-accent, #ff6a13); }
.sa-su__submit { width: 100%; height: 44px; font-weight: 600; font-size: 15px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sa-su__foot { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--sa-muted, #5b6478); }
.sa-su__total { margin: 8px 0 0; font-size: 13px; }
.sa-su__total b { font-family: var(--sa-font-display, sans-serif); font-size: 17px; margin: 0 4px; }
.sa-su .sa-signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (min-width: 992px) { .sa-su__mark { display: none; } }
@media (max-width: 991.98px) {
  .sa-su__shell { grid-template-columns: minmax(0, 1fr); }
  .sa-su__side { display: none; }
  .sa-su__main { align-items: flex-start; padding: 16px 12px 28px; }
}
@media (max-width: 575.98px) {
  .sa-su__card { padding: 20px 16px 16px; border-radius: 14px; }
  .sa-su__chips { display: none; }
  .sa-su__sector-select { display: block; }
  .sa-su__grid { grid-template-columns: minmax(0, 1fr); }
  .sa-su .form-control, .sa-su .form-select { height: 44px; font-size: 16px; }
}

/* flashes and small notices inside the card */
.sa-su__alert { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; font-size: 13px; margin: 0 0 14px; }
.sa-su__alert i { margin-top: 2px; }
.sa-su__alert.is-ok { background: var(--sa-green-bg, #e7f7ee); color: var(--sa-green, #16a34a); }
.sa-su__alert.is-warn { background: var(--sa-amber-bg, #fffaeb); color: var(--sa-amber, #b54708); }
.sa-su__alert.is-error { background: var(--sa-red-bg, #fef3f2); color: var(--sa-red, #b42318); }
.sa-su__alert a { color: inherit; font-weight: 600; }
.sa-su__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.sa-su__row a { color: var(--sa-accent-600, #c2500a); font-weight: 600; text-decoration: none; }
.sa-su__card.is-narrow { max-width: 460px; }
.sa-su__firms { display: grid; gap: 8px; }
.sa-su__firm { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--sa-border, #e3e7f0); border-radius: 10px; background: #fff; font-weight: 600; color: var(--sa-text, #0b1220); text-align: left; }
.sa-su__firm i { color: var(--sa-accent, #ff6a13); }
.sa-su__firm:hover { border-color: var(--sa-accent, #ff6a13); background: var(--sa-accent-50, #fff3eb); }
.sa-su__firm .fa-arrow-right { margin-left: auto; color: var(--sa-muted, #5b6478); }