.desktop-connect-page { padding-top: .5rem; }
.desktop-connect-heading { max-width: 43rem; }
.desktop-connect-panel { max-width: 43rem; margin-inline: auto; }
.desktop-connect-state, .desktop-device-preview { display: flex; align-items: flex-start; gap: 1rem; }
.desktop-connect-state { padding: .5rem 0; }
.desktop-connect-state h2, .desktop-connect-state p, .desktop-device-preview h2, .desktop-device-preview p { margin-bottom: .3rem; }
.desktop-device-icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 1.5rem; font-weight: 800; }
.desktop-device-icon .tik-icon { width: 1.65rem; height: 1.65rem; }
.desktop-device-icon.success { background: var(--success-soft); color: var(--success); }
.desktop-device-icon.error { background: var(--danger-soft); color: var(--danger); }
.desktop-device-preview { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.desktop-connect-explanation { margin: 1.25rem 0; }
.desktop-connect-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.desktop-connect-actions .button { width: 100%; }
.desktop-connect-privacy { max-width: 43rem; margin-inline: auto; }

@media (min-width: 36rem) {
  .desktop-connect-actions { flex-direction: row; justify-content: flex-end; }
  .desktop-connect-actions .button { width: auto; min-width: 9rem; }
}

@media (max-width: 24.375rem) {
  .desktop-connect-panel { padding: 1rem; }
  .desktop-connect-state, .desktop-device-preview { gap: .75rem; }
  .desktop-device-icon { width: 2.75rem; height: 2.75rem; }
}