/* A distinct, spacious destination for the tools visitors already recognize. */
.connections-section {
    padding: 128px 0;
    background: var(--background-bright);
    scroll-margin-top: 96px;
}
.connections-panel {
    width: var(--page-content-width);
    max-width: 1400px;
    margin-inline: auto;
    padding: 64px 44px 56px;
    border: 1px solid #2e475b;
    border-radius: 28px;
    background: #122b3e;
    color: #f7f8f5;
    box-sizing: border-box;
}
.connections-section .connections-header { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.connections-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #ebcd91;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.connections-eyebrow::before,
.connections-eyebrow::after { content: ''; width: 24px; height: 1px; background: #ebcd91; opacity: .65; }
.connections-section .connections-header .a-title {
    width: 100%;
    max-width: 24ch;
    margin: 0 auto;
    font-size: clamp(34px, 3.5vw, 50px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
    color: #f7f8f5;
}
.connections-section .connections-desc { max-width: 66ch; margin: 22px auto 0; font-size: 20px; line-height: 1.6; color: #c4d1db; opacity: 1; }
.connections-desc strong { color: #e9eff2; font-weight: 500; }
.connections-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.connections-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 80px;
    gap: 12px;
    padding: 18px 12px;
    border: 1px solid #dce3e5;
    border-radius: 12px;
    background: #fafbf8;
    box-sizing: border-box;
}
.connections-brand :is(img, svg) { display: block; width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.connections-brand span { min-width: 0; color: #173448; font-size: 17px; line-height: 1.25; font-weight: 600; }
.connections-section .connections-footer { margin-top: 36px; text-align: center; }
.connections-section .connections-footer__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 50px;
    padding: 13px 23px;
    box-sizing: border-box;
    border: 1px solid #ebcd91;
    border-radius: 10px;
    background: #ebcd91;
    color: #142d40;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.connections-section .connections-footer__link:hover { background: #f4dfb5; border-color: #f4dfb5; opacity: 1; }
.connections-section .connections-footer__link:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.connections-footer__link svg { flex-shrink: 0; }
@media (max-width: 1199px) and (min-width: 700px) {
    .connections-panel { padding: 52px 32px 44px; }
    .connections-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .connections-brand { min-height: 76px; }
}
@media (min-width: 700px) and (max-width: 899px) {
    .connections-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .connections-brand { gap: 10px; }
    .connections-brand :is(img, svg) { width: 28px; height: 28px; flex-basis: 28px; }
    .connections-brand span { font-size: 16px; }
}
@media (max-width: 699px) {
    .connections-panel { padding: 36px 20px 32px; border-radius: 20px; }
    .connections-section .connections-header { margin-bottom: 28px; }
    .connections-eyebrow { font-size: 11px; margin-bottom: 16px; gap: 8px; }
    .connections-eyebrow::before, .connections-eyebrow::after { width: 16px; }
    .connections-section .connections-header .a-title { font-size: clamp(29px, 7.2vw, 38px); line-height: 1.15; }
    .connections-section .connections-desc { margin-top: 18px; font-size: 16px; line-height: 1.55; }
    .connections-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .connections-brand { justify-content: flex-start; min-height: 64px; padding: 13px 10px; gap: 9px; border-radius: 9px; }
    .connections-brand :is(img, svg) { width: 24px; height: 24px; flex-basis: 24px; }
    .connections-brand span { font-size: 15px; }
    .connections-section .connections-footer { margin-top: 28px; }
    .connections-section .connections-footer__link { width: 100%; gap: 12px; padding-inline: 12px; font-size: 16px; }
}
@media (max-width: 380px) {
    .connections-panel { padding-inline: 16px; }
    .connections-brand { flex-direction: column; justify-content: center; gap: 9px; padding: 12px 7px; min-height: 88px; text-align: center; }
    .connections-brand span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .connections-section .connections-footer__link { transition: none; }
}
