:root {
    --sx-bg: #f4f6f3;
    --sx-surface: #ffffff;
    --sx-panel: #111111;
    --sx-panel-soft: #1f1f1d;
    --sx-text: #151515;
    --sx-muted: #566765;
    --sx-border: rgba(19, 35, 31, 0.14);
    --sx-border-strong: rgba(19, 35, 31, 0.24);
    --sx-primary: #111111;
    --sx-primary-hover: #050505;
    --sx-disabled: #7f8a85;
    --sx-focus: 0 0 0 4px rgba(17, 17, 17, 0.12);
}

* {
    box-sizing: border-box !important;
}

html,
body {
    min-height: 100%;
    margin: 0 !important;
    background: var(--sx-bg) !important;
    color: var(--sx-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body {
    display: grid !important;
    align-items: start !important;
    padding: 28px !important;
    overflow: auto !important;
}

a {
    color: var(--sx-primary) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

.form-wrapper {
    display: grid !important;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) !important;
    width: min(100%, 1060px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: 12px !important;
    background: var(--sx-surface) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
}

.form-wrapper::before {
    content: "STATICX Support\A\AInclude the site URL, workspace, exact error, and what you were trying to do.";
    white-space: pre-line !important;
    display: block !important;
    min-height: 100% !important;
    padding: 24px !important;
    background: linear-gradient(180deg, var(--sx-panel), var(--sx-panel-soft)) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

.form,
.acknowledge {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.form {
    display: grid !important;
    grid-column: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
    padding: 24px 24px 0 !important;
}

.form-field {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.form-field:nth-of-type(3),
.form-field.form-field--spaced {
    grid-column: 1 / -1 !important;
}

.form-field label {
    position: static !important;
    inset: auto !important;
    display: block !important;
    order: -1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--sx-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

.form-field input,
.form-field textarea,
.form-field select {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: 9px !important;
    background: #fbfcfa !important;
    color: var(--sx-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
    outline: none !important;
    padding: 11px 12px !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
    user-select: text !important;
}

.form-field input,
.form-field select {
    min-height: 46px !important;
}

.form-field textarea {
    min-height: 168px !important;
    max-height: 340px !important;
    resize: vertical !important;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #7e8b87 !important;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
    border-color: var(--sx-border-strong) !important;
    background: #ffffff !important;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: rgba(17, 17, 17, 0.42) !important;
    background: #ffffff !important;
    box-shadow: var(--sx-focus) !important;
}

.form legend {
    order: 1 !important;
    margin: 2px 0 0 !important;
    color: var(--sx-muted) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.form button,
.send-message.button {
    grid-column: 1 / -1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 2px 0 0 !important;
    border: 1px solid var(--sx-primary) !important;
    border-radius: 9px !important;
    background: var(--sx-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    padding: 12px 18px !important;
    transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease !important;
}

.form button:hover,
.form button:focus,
.send-message.button:hover,
.send-message.button:focus {
    border-color: var(--sx-primary-hover) !important;
    background: var(--sx-primary-hover) !important;
}

.form button:active,
.send-message.button:active {
    transform: none !important;
}

.form button:disabled,
.send-message.button:disabled {
    border-color: var(--sx-disabled) !important;
    background: var(--sx-disabled) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.branding,
.privacy {
    grid-column: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 13px 24px 0 !important;
    color: var(--sx-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

.privacy {
    padding-top: 3px !important;
    padding-bottom: 22px !important;
}

.branding a,
.privacy a {
    color: var(--sx-primary) !important;
}

.form-warning {
    border: 1px solid #efb1a8 !important;
    border-radius: 10px !important;
    background: #fff4f2 !important;
}

.form-warning h6 {
    color: #9f2f22 !important;
}

@media (max-width: 760px) {
    body {
        padding: 16px !important;
    }

    .form-wrapper {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .form-wrapper::before {
        min-height: auto !important;
        padding: 16px !important;
    }

    .form,
    .branding,
    .privacy {
        grid-column: 1 !important;
    }

    .form {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 16px 16px 0 !important;
    }

    .form-field:nth-of-type(3),
    .form-field.form-field--spaced,
    .form button,
    .send-message.button {
        grid-column: auto !important;
    }

    .form-field textarea {
        min-height: 150px !important;
    }

    .branding,
    .privacy {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .privacy {
        padding-bottom: 16px !important;
    }
}