.connect-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.legal-layout article a.connect-option { display: flex; flex-direction: column; gap: 13px; padding: 20px 16px; border: 1px solid var(--line); border-top: 3px solid var(--teal); background: #f7f9fa; color: var(--ink); text-decoration: none; }
.connect-option:hover { box-shadow: 0 4px 14px rgba(16,36,63,.1); }
.connect-option:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.connect-option-label { color: #41536a; font-size: .64rem; line-height: 1.5; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.connect-option strong { font: 500 1.35rem/1.2 Georgia, serif; }
.connect-option > span:not(.connect-option-label) { font-size: .8rem; line-height: 1.6; }
.connect-option-action { margin-top: auto; color: var(--blue); font-weight: 800; }
.connect-code { padding: 18px; margin: 22px 0; white-space: pre-wrap; overflow-wrap: anywhere; background: #f0f5f7; border: 1px solid var(--line); font-size: .8rem; line-height: 1.7; }
.legal-layout article p.connect-note { padding: 16px 18px; border-left: 3px solid var(--teal); background: #f0f5f7; }
.connect-reference { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.connect-reference summary { color: var(--blue); font-size: .8rem; font-weight: 750; cursor: pointer; }
.connect-reference p { margin-top: 15px; }
.legal-group { scroll-margin-top: 25px; }
@media (min-width: 821px) and (max-width: 1100px), (max-width: 600px) { .connect-options { grid-template-columns: 1fr; } }