section.pro-report-form {
    background-color: var(--neutral-300);
    padding: clamp(3rem, 6vw, 5.5rem) 0;

    .container {
        max-width: 81rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* align-items: center; */
        align-items: start;
        column-gap: clamp(2rem, 5vw, 7rem);
        row-gap: 2rem;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        @media (max-width: 1280px) {
            padding-left: 1.125rem;
            padding-right: 1.125rem;
        }

        h4 {
            color: var(--neutral-1000);
            font-size: var(--size-font-display-md);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tighter);
            margin: 0 0 1rem;
        }

        .wysiwyg {
            p,
            a,
            li,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: var(--size-font-body-md);
                color: var(--neutral-1000);
                line-height: var(--line-height-body);
            }

            p {
                margin: 0;
            }

            p:not(:last-child) {
                margin-bottom: 0.75rem;
            }

            a {
                text-decoration: underline;

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
    
    #marketo-form {
        width: 100%;
        margin: 0;
        align-self: stretch;
        background-color: var(--neutral-0);
        border: 1px solid var(--neutral-400);
        border-radius: 1rem;
        padding: clamp(1.75rem, 4vw, 1.5rem);
        box-sizing: border-box;
        @media (max-width: 767px) {
            max-width: none;
        }

        [id^='mktoConfirm'] {
            margin: 0;

            p {
                font-size: var(--size-font-body-md);
                color: var(--neutral-1000);
                line-height: var(--line-height-body);
                margin: 0;
            }
        }
        
        .mktoForm {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            row-gap: 1.25rem;
            column-gap: 0;
            width: 100% !important;
            padding: 0 !important;
            margin: 0;
        }

        .mktoForm .mktoFormRow {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
        }

        .mktoForm .mktoFormRow:has(> input[type='hidden']) {
            display: none !important;
        }

        .mktoForm .mktoFieldWrap:has(> input.mktoField:not([type='checkbox']):not([type='radio'])),
        .mktoForm .mktoFieldWrap:has(> textarea.mktoField) {
            position: relative;
        }

        .mktoForm .mktoFieldWrap:has(> input.mktoField:not([type='checkbox']):not([type='radio'])) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> textarea.mktoField) > .mktoLabel {
            position: absolute;
            top: 50%;
            left: 1.125rem;
            transform: translateY(-50%);
            margin: 0;
            max-width: calc(100% - 2.25rem);
            font-size: var(--size-font-body-md);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-body);
            color: var(--neutral-700);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: top 0.2s ease, left 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
            z-index: 2;
        }

        .mktoForm .mktoFieldWrap:has(> select.mktoField) > .mktoLabel {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .mktoForm .mktoFormRow input:not([type='checkbox']):not([type='radio']),
        .mktoForm .mktoFormRow textarea,
        .mktoForm .mktoFormRow select.mktoField {
            box-sizing: border-box;
            width: 100% !important;
            margin: 0 !important;
            padding: 1rem 1.125rem;
            min-height: 3.25rem;
            font-size: var(--size-font-body-md);
            line-height: var(--line-height-body);
            color: var(--neutral-1000);
            background-color: var(--neutral-0);
            border: 1px solid var(--neutral-400);
            border-radius: 0.75rem;
            transition: border-color 0.2s ease;
        }

        .mktoForm .mktoFormRow input:not([type='checkbox']):not([type='radio']),
        .mktoForm .mktoFormRow textarea {
            padding-top: 1.45rem;
            padding-bottom: 0.55rem;
        }

        .mktoForm .mktoFormRow input:not([type='checkbox']):not([type='radio'])::placeholder,
        .mktoForm .mktoFormRow textarea::placeholder {
            color: transparent;
        }

        .mktoForm .mktoFieldWrap:has(> input.mktoField:not([type='checkbox']):not([type='radio']):focus) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> textarea.mktoField:focus) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> input.mktoField:not([type='checkbox']):not([type='radio']):not(:placeholder-shown)) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> textarea.mktoField:not(:placeholder-shown)) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> input.mktoField:not([type='checkbox']):not([type='radio']):-webkit-autofill) > .mktoLabel,
        .mktoForm .mktoFieldWrap:has(> textarea.mktoField:-webkit-autofill) > .mktoLabel {
            top: 0.4rem;
            left: 18px;
            transform: none;
            font-size: var(--size-font-body-xs);
            color: var(--neutral-700);
        }

        .mktoForm .mktoFormRow input:not([type='checkbox']):not([type='radio']):focus,
        .mktoForm .mktoFormRow textarea:focus,
        .mktoForm .mktoFormRow select.mktoField:focus {
            outline: none;
            border-color: var(--neutral-700);
            border-width: 1px;
        }

        .mktoForm .mktoFieldWrap:has(.mktoCheckboxList),
        .mktoForm .mktoFormRow.type-checkbox .mktoFieldWrap {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 0.75rem;
        }

        .mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoLabel,
        .mktoForm .mktoFormRow.type-checkbox .mktoFieldWrap > .mktoLabel {
            position: static;
            width: auto !important;
            height: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
            white-space: normal;
            border: 0;
            order: 2;
            padding-left: 0 !important;
            font-size: var(--size-font-body-sm);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-body);
            color: var(--neutral-1000);
            a {
                text-decoration: underline;
                &:hover {
                    text-decoration: none;
                }
            }
        }

        .mktoForm .mktoFieldWrap:has(.mktoCheckboxList) .mktoCheckboxList,
        .mktoForm .mktoFormRow.type-checkbox .mktoFieldWrap .mktoCheckboxList {
            order: 1;
            flex-shrink: 0;
            width: auto !important;
            margin-top: 0.125rem;
        }

        .mktoForm .mktoFormRow.type-checkbox {
            flex: 0 0 auto !important;
        }

        .mktoForm .mktoCheckboxList input[type='checkbox'] {
            -webkit-appearance: none;
            appearance: none;
            margin: 0 !important;
            width: 1.125rem !important;
            height: 1.125rem !important;
            border-radius: 0.25rem;
            border: 1.5px solid var(--neutral-500);
            background-color: var(--neutral-0);
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .mktoForm .mktoCheckboxList input[type='checkbox']::before {
            content: '';
            width: 0.5rem;
            height: 0.3125rem;
            border-left: 2px solid var(--neutral-0);
            border-bottom: 2px solid var(--neutral-0);
            transform: rotate(-45deg) scale(0);
            transform-origin: center;
            transition: transform 0.15s ease;
        }

        .mktoForm .mktoCheckboxList input[type='checkbox']:hover {
            border-color: var(--green-900);
            box-shadow: 0 0 0 9px var(--green-100);
        }

        .mktoForm .mktoCheckboxList input[type='checkbox']:focus-visible {
            outline: 2px solid var(--green-900);
            outline-offset: 2px;
            border-color: var(--green-900);
        }

        .mktoForm .mktoCheckboxList input[type='checkbox']:checked {
            border-color: var(--green-600);
            background-color: var(--green-600);
        }

        .mktoForm .mktoCheckboxList input[type='checkbox']:checked::before {
            transform: rotate(-45deg) scale(1);
        }
        
        .mktoForm .mktoButtonRow {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            padding-top: 0 !important;
            margin: 0 !important;
            order: 10 !important;
        }

        .mktoForm .mktoButtonRow .mktoButtonWrap {
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
        }

        .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton {
            box-sizing: border-box;
            width: 100% !important;
            margin: 0 !important;
            padding: 0.875rem 1.5rem !important;
            font-size: var(--size-font-body-md) !important;
            font-weight: var(--font-weight-bold) !important;
            line-height: var(--line-height-heading) !important;
            color: var(--green-300) !important;
            background-color: var(--green-900) !important;
            background-image: none !important;
            border: none !important;
            border-radius: 9999px;
            box-shadow: none !important;
            cursor: pointer;
            transition-property: background-color, color;
            transition-duration: 500ms;
            transition-timing-function: cubic-bezier(0.17, 0.66, 0.34, 0.98);
        }

        .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:hover {
            background-color: var(--brand-800) !important;            
            --tw-translate-x: 0 !important;
            --tw-translate-y: 0 !important;
            translate: 0 0 !important;
            transform: none !important;
        }
        
        .mktoForm .mktoFormRow.html-wrap {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            order: 20 !important;
            color: var(--neutral-1000);
            font-size: var(--size-font-body-sm);
            line-height: var(--line-height-body);
        }

        .mktoForm .mktoFormRow:has(.mktoHtmlText) {
            order: 20 !important;
            flex: 0 0 auto !important;
        }

        .mktoForm .mktoFormRow.html-wrap a {
            font-size: inherit !important;
            color: inherit !important;
            text-decoration: underline;
            font-weight: var(--font-weight-regular) !important;

            &:hover {
                text-decoration: none;
            }
        }

        .mktoForm .mktoFormRow .mktoHtmlText {
            font-size: var(--size-font-body-sm) !important;
            line-height: var(--line-height-body);
            a {
                text-decoration: underline;
                &:hover {
                    text-decoration: none;
                }
            }
        }

        .mktoForm .mktoOffset,
        .mktoForm .mktoGutter.mktoHasWidth {
            display: none !important;
        }

        .mktoForm .mktoFormRow .mktoFieldWrap,
        .mktoForm .mktoFormRow .mktoFormCol {
            width: 100% !important;
            margin: 0 !important;
            float: none;
        }

        .mktoForm .mktoFormRow:first-of-type .mktoFieldDescriptor:nth-of-type(2) > .mktoFieldWrap {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
        p.marketo-success-message {
            color: var(--neutral-1000);
            font-size: var(--size-font-display-sm);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);            
            text-align: center;
            @media (max-width: 767px) {                
                text-align: left;
            }
        }
        p.marketo-success-body {
            color: var(--neutral-1000);
            margin-top: 1rem;
            text-align: center;
            font-size: var(--size-font-body-md);
            @media (max-width: 767px) {                
                text-align: left;
            }
        }
    }
}