/* company.css - page-specific styling for /trust/, /partners/, /contact/ and 404 (R4766 company board).
   Uses only the shared class vocabulary from site.css plus element and data-attribute selectors. */

[data-skip] {
  position: absolute;
  left: -9999px;
  top: 0;
}
[data-skip]:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #0a1224;
  border-radius: 0.5rem;
}

main ol {
  padding-left: 1.25rem;
}
main ol li {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

main .card .pill {
  display: inline-block;
  margin-bottom: 0.75rem;
}

[data-contact-methods] .card h3 a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
[data-contact-methods] .card h3 a:hover,
[data-contact-methods] .card h3 a:focus-visible {
  text-decoration: underline;
}

main a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}
main a.card:hover,
main a.card:focus-visible {
  outline: 2px solid #2f7bff;
  outline-offset: 2px;
}

main .faq details {
  border-bottom: 1px solid rgba(10, 18, 36, 0.12);
  padding: 1rem 0;
}
main .faq summary {
  cursor: pointer;
  font-weight: 600;
}
main .faq details p {
  margin: 0.75rem 0 0;
}

main .callout {
  text-align: center;
}
main .callout p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  main .btn {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem;
    text-align: center;
  }
}

/* /partners/login/: the partner portal sign-in card (inactive: every attempt shows the contact message) */
.login-grid { position: relative; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .login-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; } }
.login-intro .check-list li { color: var(--on-dark); }
.login-intro .lead { margin-bottom: 22px; }
.login-card {
  width: 100%; max-width: 440px; justify-self: center; background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 32px); box-shadow: var(--shadow-lg);
}
.section--dark .login-card h2.login-card__title { color: var(--ink); font-size: 1.5rem; margin: 0 0 6px; }
.section--dark .login-card p { color: var(--ink-2); }
.login-card__sub { font-size: .95rem; margin: 0 0 20px; }
.login-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.login-label-row label { margin: 0; }
.login-forgot {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: .88rem; font-weight: 700; color: var(--blue-600);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.login-forgot:hover { color: var(--blue); }
.login-submit { margin-top: 6px; }
.login-submit[disabled] { opacity: .8; cursor: progress; transform: none; }
.login-spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff; animation: login-spin .7s linear infinite;
}
.login-submit.is-busy .login-spinner { display: inline-block; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-alert {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid #fecaca; background: #fef2f2; outline: none;
}
.section--dark .login-card .login-alert p { margin: 0; color: #b91c1c; font-size: .95rem; font-weight: 600; line-height: 1.45; }
.section--dark .login-card .login-alert p.login-alert__more { margin-top: 8px; font-weight: 500; }
.login-alert a { color: var(--blue-600); font-weight: 700; display: inline-block; padding-block: 9px; }
.login-alert[hidden] { display: none; }
.section--dark .login-card p.login-card__foot { margin: 18px 0 0; font-size: .92rem; text-align: center; color: var(--ink-3); }
.login-help { margin: 28px 0 0; color: var(--ink-2); }
@media (max-width: 640px) { main .login-card .btn { margin: 6px 0 0; } }
/* Narrow screens: keep the sign-in fields on the first screen (the checklist repeats the card's purpose) */
@media (max-width: 899px) {
  .login-hero { padding-top: 32px; }
  .login-grid { gap: 22px; }
  .login-intro .check-list { display: none; }
  .login-intro h1 { margin-bottom: 10px; }
  .login-intro .lead { margin-bottom: 0; }
}