.useful-links { margin: 0 15px 56px; scroll-margin-top: 130px; }
.useful-links-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.useful-links-eyebrow { display: flex; align-items: center; gap: 10px; color: #62758a; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; }
.useful-links-eyebrow::before { content: ''; width: 22px; height: 2px; background: #df911e; }
.useful-links h2 { margin: 8px 0 0; color: #003a70; font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
.useful-links-all { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: #003a70; font-size: 13px; font-weight: 600; }
.useful-links-all > span { color: #a46a1d; font-size: 22px; }
.useful-links-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.useful-links-list > li { display: flex; min-width: 0; margin: 0; padding: 0; }
.useful-link { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 112px; padding: 20px; border: 1px solid #dfe7ef; border-radius: 9px; background: #fff; color: #003a70; transition: border-color 180ms ease, background-color 180ms ease; scroll-margin-top: 130px; }
.useful-link-logo { position: relative; display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 64px; }
.useful-link-placeholder { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #f0f4f8; color: #738ba2; }
.useful-link-placeholder svg { width: 26px; height: 26px; }
.useful-link-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.useful-link-logo img[hidden] { display: none; }
.useful-link-copy { flex: 1; min-width: 0; }
.useful-link-name { display: block; color: #244361; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.useful-link-host { display: block; margin-top: 6px; color: #62758a; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.useful-link-arrow { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; color: #a46a1d; font-size: 19px; line-height: 1.3; }
.useful-link:focus-visible, .useful-links-all:focus-visible { outline: 3px solid #c7801e; outline-offset: 3px; }
.useful-link:active { background: #eaf1f7; }
.useful-links-empty { padding: 28px; border-radius: 12px; background: #fff; color: #62758a; font-size: 14px; }
@media (hover: hover) {
  .useful-link:hover { border-color: #9fb5ca; background: #f8fafc; }
  .useful-link:hover .useful-link-name, .useful-links-all:hover { color: #003a70; }
  .useful-link:hover .useful-link-arrow { color: #003a70; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .useful-links-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 576px) and (max-width: 991.98px) { .useful-links-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .useful-links { margin-bottom: 40px; }
  .useful-links-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; }
  .useful-links h2 { font-size: 27px; }
  .useful-links-all { gap: 8px; font-size: 12px; }
  .useful-link { padding: 18px; gap: 14px; }
}
@media (max-width: 575.98px) {
  .useful-links-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .useful-link { min-height: 94px; padding: 16px 18px; }
  .useful-link-logo { flex-basis: 48px; width: 48px; height: 56px; }
  .useful-link-name { font-size: 15px; }
  .useful-link-arrow { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .useful-link { transition: none; } }