body[data-sb-page="support"] .support-contact { max-width: 90rem; margin: 6rem auto 0; scroll-margin-top: 110px; }
.support-contact h2 { font-size: clamp(3rem, 4vw, 4.8rem); line-height: 1.1; margin: 0 0 2rem; }
.support-contact p { font-size: 1.8rem; line-height: 1.6; color: #625d72; }
.support-contact-form { display: grid; gap: 1.2rem; margin-top: 3rem; }
.support-contact-form label { font-size: 1.6rem; font-weight: 700; margin-top: 1rem; }
.support-contact-form :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #9b8bb6; border-radius: 1.2rem; padding: 1.5rem; background: #fff; color: #181239; font: inherit; font-size: 16px; }
.support-contact-form textarea { resize: vertical; min-height: 16rem; }
.support-contact-form :is(input, select, textarea):focus-visible { outline: 2px solid #6c43e6; outline-offset: 2px; }
.support-contact-form .field-help { font-size: 1.4rem; margin: 0 0 1rem; }
.support-contact a { color: #5b32c4; text-decoration: underline; }
.support-contact-form button { justify-self: start; cursor: pointer; margin-top: 1rem; }
.support-contact-form button:disabled { opacity: .65; cursor: wait; }
.support-contact-form .contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-status { margin: 0; min-height: 2.8rem; }
.contact-status[data-state="error"] { color: #a21b34; }
.contact-status[data-state="success"] { color: #276137; }
.support-contact .contact-app-option { padding-top: 2.4rem; border-top: 1px solid #d9d0e8; margin-top: 3rem; }

.support-contact[hidden], .support-contact-form[hidden] { display: none !important; }
.contact-heading { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
#contact-close, .verification-retry { background: none; border: 0; color: #542bb6; font: inherit; font-size: 1.6rem; text-decoration: underline; cursor: pointer; padding: 1rem 0; }
#contact-close:focus-visible, .verification-retry:focus-visible { outline: 2px solid #542bb6; outline-offset: 3px; }
.contact-device-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-device-fields label { display: block; margin-bottom: 1.2rem; }
.contact-verification { width: 100%; min-width: 0; }
@media (max-width: 600px) { .contact-device-fields { grid-template-columns: 1fr; gap: 1rem; } }

.screenshot-list { display: grid; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.screenshot-list li { display: flex; align-items: center; gap: 1.2rem; min-width: 0; padding: 1rem 0; }
.screenshot-list img { width: 64px; height: 80px; object-fit: contain; flex-shrink: 0; }
.screenshot-list span { min-width: 0; overflow-wrap: anywhere; font-size: 1.4rem; }
.screenshot-list button { flex-shrink: 0; margin-left: auto; padding: 8px; border: 0; background: none; color: #542bb6; text-decoration: underline; font: inherit; font-size: 1.4rem; }
.screenshot-list button:focus-visible { outline: 2px solid #542bb6; outline-offset: 2px; }
#bug-screenshot-status[data-error="true"] { color: #a21b34; }
