[hidden] {
    display: none !important;
}
/* ======================================================================
   CONTACT PAGE
   01 — HERO
   DESKTOP
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .contact-page .contact-hero {
        position: relative;
        overflow: hidden;

        min-height: 660px;

        background:
            radial-gradient(
                circle at 88% 82%,
                rgba(82, 28, 255, .95) 0%,
                rgba(66, 24, 212, .65) 18%,
                rgba(37, 21, 105, .22) 37%,
                rgba(7, 11, 21, 0) 58%
            ),
            radial-gradient(
                circle at 78% 12%,
                rgba(82, 29, 240, .30) 0%,
                rgba(17, 16, 53, .10) 33%,
                rgba(5, 9, 17, 0) 60%
            ),
            linear-gradient(
                105deg,
                #070b12 0%,
                #080c16 47%,
                #10102b 73%,
                #1f0d68 100%
            );

        color: #ffffff;
    }


    .contact-page .contact-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.16),
                transparent 50%
            );
    }



    /* ==================================================================
       CONTAINER
       ================================================================== */

    .contact-page .contact-hero__inner {
        position: relative;
        z-index: 2;

        display: grid;

        grid-template-columns:
            minmax(0, .95fr)
            minmax(520px, 1.05fr);

        align-items: center;

        gap: 75px;

        min-height: 660px;

        padding-top: 85px;
        padding-bottom: 72px;
    }



    /* ==================================================================
       LEFT COPY
       ================================================================== */

    .contact-page .contact-hero__copy {
        width: 100%;
        max-width: 610px;
    }



    /* eyebrow */

    .contact-page
    .contact-hero
    .contact-section-label {
        display: flex;
        align-items: center;

        gap: 13px;

        margin-bottom: 18px;
    }


    .contact-page
    .contact-hero
    .contact-section-label > span {
        display: none;
    }


    .contact-page
    .contact-hero
    .contact-section-label small {
        color: rgba(255,255,255,.78);

        font-size: 12px;
        line-height: 1;

        font-weight: 700;

        letter-spacing: .23em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .contact-page .contact-hero__copy h1 {
        margin: 0;

        max-width: 610px;

        color: #ffffff;

        font-size: clamp(
            64px,
            5.1vw,
            86px
        );

        line-height: .90;

        font-weight: 900;

        letter-spacing: -.065em;
    }


    .contact-page .contact-hero__copy h1 span {
        display: block;

        margin-top: 4px;

        color: #5721f2;
    }



    /* ==================================================================
       INTRO
       ================================================================== */

    .contact-page .contact-hero__copy > p {
        max-width: 475px;

        margin:
            23px 0
            0;

        color: rgba(255,255,255,.85);

        font-size: 20px;
        line-height: 1.32;

        font-weight: 400;

        letter-spacing: -.015em;
    }



    /* ==================================================================
       CTA
       ================================================================== */

    .contact-page
    .contact-hero
    .contact-primary-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 28px;

        min-width: 315px;
        min-height: 62px;

        margin-top: 30px;

        padding:
            17px 27px;

        border: 0;
        border-radius: 7px;

        background:
            linear-gradient(
                100deg,
                #ffc94d 0%,
                #ffc03d 100%
            );

        box-shadow:
            0 10px 30px
            rgba(255, 185, 55, .12);

        color: #101011;

        cursor: pointer;

        font: inherit;

        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }


    .contact-page
    .contact-hero
    .contact-primary-button:hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 13px 34px
            rgba(255, 185, 55, .20);
    }


    .contact-page
    .contact-hero
    .contact-primary-button span {
        font-size: 18px;
        line-height: 1;

        font-weight: 800;

        white-space: nowrap;
    }


    .contact-page
    .contact-hero
    .contact-primary-button svg {
        width: 23px;
        height: 23px;

        flex: 0 0 auto;
    }



    /* ==================================================================
       RIGHT VISUAL
       ================================================================== */

    .contact-page .contact-hero-visual {
        position: relative;

        width: 100%;
        max-width: 590px;
        height: 350px;

        margin-left: auto;
    }



    /* ==================================================================
       VISUAL ITEMS
       ================================================================== */

    .contact-page
    .contact-hero-visual__item {
        position: absolute;
        z-index: 3;

        display: grid;

        grid-template-columns:
            57px
            auto;

        align-items: center;

        gap: 17px;

        min-width: 215px;

        color: #ffffff;
    }


    .contact-page
    .contact-hero-visual__item svg {
        display: block;

        width: 57px;
        height: 57px;

        padding: 16px;

        border:
            1px solid
            rgba(130, 80, 255, .18);

        border-radius: 12px;

        background:
            linear-gradient(
                145deg,
                rgba(56,42,111,.55),
                rgba(25,25,67,.75)
            );

        color: #792fff;

        box-shadow:
            inset 0 0 25px
            rgba(96,53,255,.10);
    }


    .contact-page
    .contact-hero-visual__item span {
        color: rgba(255,255,255,.93);

        font-size: 14px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .075em;

        white-space: nowrap;
    }



    /* positions */

    .contact-page
    .contact-hero-visual__item--build {
        left: 0;
        top: 37px;
    }


    .contact-page
    .contact-hero-visual__item--ai {
        left: 0;
        top: 145px;
    }


    .contact-page
    .contact-hero-visual__item--other {
        left: 0;
        top: 253px;
    }



    /* ==================================================================
       CONNECTING LINES
       ================================================================== */

    .contact-page
    .contact-hero-visual__item::after {
        content: "";

        position: absolute;

        z-index: -1;

        left: 215px;

        width: 178px;

        pointer-events: none;
    }



    /* top curved line */

    .contact-page
    .contact-hero-visual__item--build::after {
        top: 29px;

        height: 91px;

        border-top:
            3px solid
            #6829f6;

        border-right:
            3px solid
            #6829f6;

        border-radius:
            0 90px 0 0;

        transform:
            skewX(16deg);
    }



    /* middle line */

    .contact-page
    .contact-hero-visual__item--ai::after {
        top: 28px;

        height: 2px;

        background:
            linear-gradient(
                90deg,
                #6728f5,
                #6d2cff
            );
    }



    /* bottom curved line */

    .contact-page
    .contact-hero-visual__item--other::after {
        bottom: 28px;

        height: 91px;

        border-bottom:
            3px solid
            #6829f6;

        border-right:
            3px solid
            #6829f6;

        border-radius:
            0 0 90px 0;

        transform:
            skewX(-16deg);
    }



    /* ==================================================================
       CENTRAL GLOW
       ================================================================== */

    .contact-page
    .contact-hero-visual__center {
        position: absolute;

        z-index: 8;

        right: 0;
        top: 50%;

        display: flex;
        align-items: center;

        transform:
            translateY(-50%);
    }


    .contact-page
    .contact-hero-visual__center::before {
        content: "";

        display: block;

        width: 37px;
        height: 37px;

        margin-right: 35px;

        border:
            8px solid
            rgba(115, 59, 255, .62);

        border-radius: 50%;

        background: #fff;

        box-shadow:
            0 0 8px
                #ffffff,
            0 0 20px
                rgba(113,51,255,.95),
            0 0 38px
                rgba(92,36,255,.90),
            0 0 65px
                rgba(84,32,244,.58);
    }


    .contact-page
    .contact-hero-visual__center span {
        color: rgba(255,255,255,.94);

        font-size: 15px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .22em;

        white-space: nowrap;
    }



    /* ==================================================================
       EXTRA PURPLE LIGHT
       ================================================================== */

    .contact-page
    .contact-hero-visual::after {
        content: "";

        position: absolute;

        z-index: 0;

        right: -160px;
        bottom: -235px;

        width: 570px;
        height: 440px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(87,29,255,.56) 0%,
                rgba(72,24,230,.28) 37%,
                rgba(50,22,150,.06) 66%,
                rgba(0,0,0,0) 76%
            );

        filter:
            blur(10px);

        pointer-events: none;
    }



    /* ==================================================================
       HIDE OTHER CONTACT SCREENS
       ==================================================================
       Your JS already uses the hidden attribute,
       but this makes it impossible for CSS elsewhere to accidentally
       show another form screen.
       ================================================================== */

    .contact-page
    .contact-screen[hidden] {
        display: none !important;
    }


}
/* ======================================================================
   CONTACT PAGE
   DESKTOP — SCREENS 02–06
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SHARED LIGHT SCREEN
       ================================================================== */

    .contact-page .contact-paths,
    .contact-page .contact-form-screen,
    .contact-page .contact-success {
        position: relative;
        overflow: hidden;

        min-height: 690px;

        background:
            radial-gradient(
                circle at -2% 5%,
                rgba(108, 40, 255, .18) 0%,
                rgba(108, 40, 255, .08) 16%,
                rgba(108, 40, 255, 0) 35%
            ),
            radial-gradient(
                circle at 102% 7%,
                rgba(108, 40, 255, .18) 0%,
                rgba(108, 40, 255, .08) 16%,
                rgba(108, 40, 255, 0) 35%
            ),
            radial-gradient(
                circle at 100% 100%,
                rgba(108, 40, 255, .16) 0%,
                rgba(108, 40, 255, .06) 18%,
                transparent 38%
            ),
            #ffffff;

        color: #090b13;
    }


    .contact-page .contact-paths::before,
    .contact-page .contact-form-screen::before,
    .contact-page .contact-success::before {
        content: "";

        position: absolute;
        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                145deg,
                rgba(247,244,255,.66),
                transparent 29%,
                transparent 72%,
                rgba(245,241,255,.46)
            );
    }


    .contact-page .contact-paths__inner,
    .contact-page .contact-form-shell,
    .contact-page .contact-success__inner {
        position: relative;
        z-index: 2;
    }


    /* ==================================================================
       SHARED PRIMARY BUTTON
       ================================================================== */

    .contact-page .contact-form-screen .contact-primary-button,
    .contact-page .contact-success .contact-primary-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 20px;

        min-width: 200px;
        min-height: 54px;

        padding: 14px 25px;

        border: 0;
        border-radius: 10px;

        background:
            linear-gradient(
                105deg,
                #4414e8 0%,
                #6421ff 100%
            );

        box-shadow:
            0 9px 25px
            rgba(76,30,235,.18);

        color: #ffffff;

        font: inherit;

        font-size: 15px;
        font-weight: 700;

        text-decoration: none;

        cursor: pointer;

        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }


    .contact-page .contact-form-screen .contact-primary-button:hover,
    .contact-page .contact-success .contact-primary-button:hover {
        transform: translateY(-2px);

        box-shadow:
            0 13px 30px
            rgba(76,30,235,.25);
    }


    .contact-page .contact-primary-button svg {
        width: 21px;
        height: 21px;
    }


    /* ==================================================================
       SHARED SECONDARY BUTTON
       ================================================================== */

    .contact-page .contact-secondary-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 12px;

        min-width: 130px;
        min-height: 52px;

        padding: 13px 22px;

        border: 0;
        border-radius: 9px;

        background: #f2f3f6;

        color: #171922;

        font: inherit;
        font-size: 14px;
        font-weight: 650;

        cursor: pointer;
    }



    /* ======================================================================
       02 — CHOOSE YOUR PATH
       ====================================================================== */

    .contact-page .contact-paths {
        display: flex;
        align-items: center;
    }


    .contact-page .contact-paths__inner {
        width: min(1160px, calc(100% - 96px));

        margin: 0 auto;

        padding:
            68px 0
            74px;
    }


    /* heading */

    .contact-page .contact-paths .contact-screen-heading {
        max-width: 850px;

        margin:
            0 auto
            44px;

        text-align: center;
    }


    .contact-page .contact-paths .contact-section-label {
        display: flex;

        align-items: center;
        justify-content: center;

        margin-bottom: 22px;
    }


    .contact-page .contact-paths .contact-section-label > span {
        display: none;
    }


    .contact-page .contact-paths .contact-section-label small {
        color: #70798e;

        font-size: 12px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .27em;

        text-transform: uppercase;
    }


    .contact-page .contact-screen-heading h2 {
        margin: 0;

        color: #070912;

        font-size: clamp(52px, 4.5vw, 68px);

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.06em;
    }


    .contact-page .contact-screen-heading h2 span {
        display: block;

        color: #5320ef;
    }


    .contact-page .contact-screen-heading > p {
        max-width: 780px;

        margin:
            20px auto
            0;

        color: #64708a;

        font-size: 18px;
        line-height: 1.35;
    }



    /* cards */

    .contact-page .contact-path-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap: 24px;

        width: min(1040px, 100%);

        margin: 0 auto;
    }


    .contact-page .contact-path-card {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-height: 290px;

        padding:
            31px 32px
            28px;

        border:
            1px solid
            #dfe1e8;

        border-radius: 11px;

        background:
            rgba(255,255,255,.82);

        color: #090b13;

        text-align: left;

        font: inherit;

        cursor: pointer;

        transition:
            border-color .2s ease,
            transform .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }


    .contact-page .contact-path-card:hover,
    .contact-page .contact-path-card.is-selected {
        transform:
            translateY(-3px);

        border-color:
            #8c55ff;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f7f3ff
            );

        box-shadow:
            0 14px 35px
            rgba(79,35,183,.08);
    }


    /* first card highlighted like reference */

    .contact-page .contact-path-card:first-child {
        border-color:
            #9b63ff;

        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #f7f2ff 100%
            );
    }


    .contact-page .contact-path-card__icon {
        display: grid;

        place-items: center;

        width: 70px;
        height: 70px;

        margin-bottom: 20px;

        border-radius: 10px;

        background:
            linear-gradient(
                145deg,
                #f2edff,
                #faf8ff
            );

        color: #5720ef;
    }


    .contact-page .contact-path-card__icon svg {
        width: 38px;
        height: 38px;
    }


    .contact-page .contact-path-card h3 {
        margin: 0;

        font-size: 27px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.035em;
    }


    .contact-page .contact-path-card p {
        max-width: 270px;

        margin:
            11px 0
            0;

        color: #667089;

        font-size: 17px;
        line-height: 1.28;
    }


    .contact-page .contact-path-card__arrow {
        display: grid;

        place-items: center;

        width: 58px;
        height: 58px;

        margin-top: auto;

        border-radius: 50%;

        background: #f0f1f4;

        color: #141720;
    }


    .contact-page
    .contact-path-card:first-child
    .contact-path-card__arrow,
    .contact-page
    .contact-path-card:hover
    .contact-path-card__arrow {
        background:
            linear-gradient(
                145deg,
                #4311e4,
                #6720ff
            );

        color: #ffffff;
    }


    .contact-page .contact-path-card__arrow svg {
        width: 27px;
        height: 27px;
    }


    .contact-page .contact-paths .contact-back-link {
        display: block;

        margin:
            25px auto
            0;

        border: 0;
        background: transparent;

        color: #646d82;

        font: inherit;
        font-weight: 700;

        cursor: pointer;
    }



    /* ======================================================================
       SHARED FORM SCREEN
       ====================================================================== */

    .contact-page .contact-form-screen {
        min-height: 690px;
    }


    .contact-page .contact-form-shell {
        width: min(1030px, calc(100% - 96px));

        margin: 0 auto;

        padding:
            36px 0
            58px;
    }


    /* progress */

    .contact-page .contact-progress {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        margin-bottom: 27px;
    }


    .contact-page .contact-progress::before {
        content: "";
    }


    .contact-page .contact-progress span {
        display: block;

        width: 34px;
        height: 4px;

        border-radius: 999px;

        background: #dfe1e7;
    }


    .contact-page .contact-progress span.is-active,
    .contact-page .contact-progress span.is-done {
        background: #5420ee;
    }



    /* form heading */

    .contact-page .contact-form-heading {
        margin:
            0 auto
            30px;

        text-align: center;
    }


    .contact-page .contact-form-heading > small {
        display: block;

        margin-bottom: -19px;

        transform:
            translateY(-31px)
            translateX(-95px);

        color: #727b91;

        font-size: 9px;

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }


    .contact-page .contact-form-heading h2 {
        margin: 0;

        color: #070912;

        font-size: 48px;

        line-height: .93;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .contact-page .contact-form-heading h2 span {
        display: block;

        color: #5420ed;
    }


    .contact-page .contact-form-heading > p {
        margin:
            11px 0
            0;

        color: #69738c;

        font-size: 15px;
    }



    /* fieldsets */

    .contact-page .contact-fieldset {
        min-width: 0;

        margin: 0;
        padding: 0;

        border: 0;
    }


    .contact-page .contact-fieldset legend,
    .contact-page .contact-field > label {
        display: block;

        margin-bottom: 8px;

        color: #13151d;

        font-size: 13px;

        font-weight: 800;
    }


    .contact-page .contact-field-help {
        margin:
            -5px 0
            9px;

        color: #747e94;

        font-size: 11px;
    }


    .contact-page .contact-field-error {
        min-height: 16px;

        margin-top: 5px;

        color: #d42b43;

        font-size: 11px;
    }



    /* ======================================================================
       STEP 1
       ====================================================================== */

    .contact-page [data-contact-screen="step1"] .contact-form-shell {
        display: grid;

        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);

        column-gap: 34px;
    }


    .contact-page [data-contact-screen="step1"] .contact-progress,
    .contact-page [data-contact-screen="step1"] .contact-form-heading,
    .contact-page [data-contact-screen="step1"] .contact-form-actions {
        grid-column: 1 / -1;
    }


    .contact-page [data-contact-screen="step1"]
    .contact-fieldset:first-of-type {
        grid-column: 1;
    }


    .contact-page [data-contact-screen="step1"]
    .contact-field {
        grid-column: 1;
    }


    .contact-page [data-contact-screen="step1"]
    .contact-fieldset:nth-of-type(2) {
        grid-column: 2;
        grid-row: 3 / span 2;
    }


    .contact-page [data-contact-screen="step1"]
    .contact-selected-path {
        grid-column: 2;
    }



    /* business option grid */

    .contact-page .contact-option-grid--business {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 10px;
    }


    .contact-page .contact-option-card {
        display: flex;

        align-items: center;

        gap: 14px;

        min-height: 57px;

        padding: 12px 16px;

        border:
            1px solid
            #d9dce4;

        border-radius: 8px;

        background: #ffffff;

        color: #161821;

        text-align: left;

        font: inherit;

        cursor: pointer;
    }


    .contact-page .contact-option-card svg {
        width: 24px;
        height: 24px;
    }


    .contact-page .contact-option-card span {
        font-size: 13px;
        font-weight: 650;
    }


    .contact-page .contact-option-card:hover,
    .contact-page .contact-option-card.is-selected {
        border-color:
            #8b55fa;

        background:
            #faf7ff;

        color:
            #5420ed;
    }



    /* website */

    .contact-page .contact-field {
        margin-top: 22px;
    }


    .contact-page .contact-field input {
        display: block;

        width: 100%;
        height: 52px;

        padding:
            0 15px;

        border:
            1px solid
            #dcdfe6;

        border-radius: 8px;

        outline: none;

        background: #ffffff;

        color: #11141c;

        font: inherit;

        font-size: 14px;

        transition:
            border-color .18s ease,
            box-shadow .18s ease;
    }


    .contact-page .contact-field input:focus {
        border-color:
            #6c2bf4;

        box-shadow:
            0 0 0 3px
            rgba(84,32,237,.08);
    }


    .contact-page .contact-field input::placeholder {
        color: #8b93a5;
    }



    /* stages */

    .contact-page .contact-stage-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap: 10px;
    }


    .contact-page .contact-stage-card {
        display: flex;

        flex-direction: column;
        justify-content: center;

        min-height: 58px;

        padding:
            10px 12px;

        border:
            1px solid
            #daddE5;

        border-radius: 8px;

        background: #ffffff;

        color: #151821;

        text-align: center;

        font: inherit;

        cursor: pointer;
    }


    .contact-page .contact-stage-card strong {
        font-size: 12px;
        line-height: 1.15;
    }


    .contact-page .contact-stage-card span {
        margin-top: 2px;

        color: #7a8499;

        font-size: 9px;
    }


    .contact-page .contact-stage-card:hover,
    .contact-page .contact-stage-card.is-selected {
        border-color:
            #8b55fa;

        background: #faf7ff;

        color: #5420ed;
    }


    .contact-page .contact-stage-card.is-selected span {
        color: #5420ed;
    }



    /* selected path */

    .contact-page .contact-selected-path {
        position: relative;

        display: grid;

        grid-template-columns:
            1fr auto;

        align-items: center;

        min-height: 73px;

        margin-top: 21px;

        padding:
            13px 18px;

        border-radius: 8px;

        background:
            #f8f5ff;
    }


    .contact-page .contact-selected-path small {
        grid-column: 1 / -1;

        margin-bottom: 2px;

        color: #6e7790;

        font-size: 10px;
    }


    .contact-page .contact-selected-path strong {
        color: #12141b;

        font-size: 14px;
    }


    .contact-page .contact-selected-path button {
        grid-column: 2;
        grid-row: 1 / span 2;

        align-self: center;

        border: 0;

        background: transparent;

        color: #5520ed;

        font: inherit;

        font-size: 12px;
        font-weight: 700;

        text-decoration: underline;

        cursor: pointer;
    }



    /* actions */

    .contact-page .contact-form-actions {
        display: flex;

        align-items: center;
        justify-content: space-between;

        margin-top: 32px;
    }



    /* ======================================================================
       STEP 2
       ====================================================================== */

    .contact-page [data-contact-screen="step2"] .contact-form-shell {
        width: min(1040px, calc(100% - 96px));
    }


    .contact-page [data-contact-screen="step2"] .contact-form-heading {
        margin-bottom: 20px;
    }


    .contact-page .contact-step2-path {
        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:
            18px 28px;
    }


    .contact-page .contact-step2-path[hidden] {
        display: none !important;
    }


    /* top banner */

    .contact-page .contact-step2-banner {
        grid-column: 1 / -1;

        display: flex;

        align-items: center;

        gap: 18px;

        min-height: 57px;

        padding:
            11px 20px;

        border-radius: 8px;

        background:
            linear-gradient(
                90deg,
                #f3efff,
                #f9f7ff
            );
    }


    .contact-page .contact-step2-banner::before {
        content: "↗";

        display: grid;

        place-items: center;

        flex: 0 0 auto;

        width: 34px;
        height: 34px;

        border-radius: 50%;

        color: #5520ed;

        font-size: 23px;
        font-weight: 700;
    }


    .contact-page .contact-step2-banner strong {
        display: block;

        font-size: 13px;
        line-height: 1.1;
    }


    .contact-page .contact-step2-banner p {
        margin: 2px 0 0;

        color: #717b92;

        font-size: 10px;
    }



    /* answer options */

    .contact-page .contact-answer-grid {
        display: grid;

        gap: 8px;
    }


    .contact-page .contact-answer-card {
        position: relative;

        display: flex;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        min-height: 53px;

        padding:
            8px 15px
            8px 55px;

        border:
            1px solid
            #dcdee6;

        border-radius: 8px;

        background: #ffffff;

        text-align: left;

        color: #13151d;

        font: inherit;

        cursor: pointer;
    }


    .contact-page .contact-answer-card::before {
        content: "";

        position: absolute;

        left: 15px;
        top: 50%;

        width: 15px;
        height: 15px;

        transform:
            translateY(-50%);

        border:
            1.5px solid
            #c5c9d3;

        border-radius: 50%;

        background: #ffffff;
    }


    .contact-page .contact-answer-card::after {
        content: "";

        position: absolute;

        left: 19px;
        top: 50%;

        width: 7px;
        height: 7px;

        transform:
            translateY(-50%);

        border-radius: 50%;

        background: transparent;
    }


    .contact-page .contact-answer-card strong {
        font-size: 12px;
        line-height: 1.1;
    }


    .contact-page .contact-answer-card span {
        margin-top: 2px;

        color: #778197;

        font-size: 9px;
        line-height: 1.2;
    }


    .contact-page .contact-answer-card:hover,
    .contact-page .contact-answer-card.is-selected {
        border-color:
            #8b55fa;

        background: #faf8ff;
    }


    .contact-page .contact-answer-card.is-selected::before {
        border-color:
            #5520ed;
    }


    .contact-page .contact-answer-card.is-selected::after {
        background:
            #5520ed;
    }



    /* step 2 side summary */

    .contact-page .contact-step-summary {
        display: grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 12px;

        width: 280px;

        margin:
            19px 0
            -65px
            auto;

        padding: 16px;

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                #f8f5ff,
                #f4efff
            );
    }


    .contact-page .contact-step-summary > div {
        padding: 5px;
    }


    .contact-page .contact-step-summary small {
        display: block;

        margin-bottom: 5px;

        color: #727c93;

        font-size: 10px;
    }


    .contact-page .contact-step-summary strong {
        display: block;

        color: #12141d;

        font-size: 13px;
    }



    /* ======================================================================
       STEP 3
       ====================================================================== */

    .contact-page [data-contact-screen="step3"] .contact-form-shell {
        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            245px;

        column-gap: 28px;

        width: min(1040px, calc(100% - 96px));
    }


    .contact-page [data-contact-screen="step3"] .contact-progress,
    .contact-page [data-contact-screen="step3"] .contact-form-heading {
        grid-column: 1 / -1;
    }


    .contact-page [data-contact-screen="step3"] .contact-fields-grid {
        grid-column: 1;
    }


    .contact-page [data-contact-screen="step3"] .contact-final-summary {
        grid-column: 2;

        grid-row: 3;

        align-self: start;
    }


    .contact-page [data-contact-screen="step3"] .contact-form-actions {
        grid-column: 1 / -1;
    }


    .contact-page [data-contact-screen="step3"] .contact-form-meta {
        grid-column: 2;

        justify-self: end;
    }



    /* fields */

    .contact-page .contact-fields-grid {
        display: grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            20px 24px;
    }


    .contact-page .contact-fields-grid .contact-field {
        margin: 0;
    }



    /* right summary */

    .contact-page .contact-final-summary {
        position: relative;

        min-height: 180px;

        padding:
            18px 20px;

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                #f8f5ff,
                #f1ecff
            );
    }


    .contact-page .contact-final-summary small {
        display: block;

        margin-bottom: 20px;

        color: #11131b;

        font-size: 12px;

        font-weight: 800;
    }


    .contact-page .contact-final-summary strong {
        display: block;

        color: #161821;

        font-size: 15px;
        font-weight: 750;
    }


    .contact-page .contact-final-summary button {
        position: absolute;

        right: 17px;
        top: 18px;

        border: 0;

        background: transparent;

        color: #5620ed;

        font: inherit;

        font-size: 11px;

        font-weight: 700;

        text-decoration: underline;

        cursor: pointer;
    }



    /* Step 3 actions */

    .contact-page [data-contact-screen="step3"] .contact-form-actions {
        margin-top: 70px;
    }


    .contact-page [data-contact-screen="step3"]
    .contact-form-actions
    .contact-primary-button {
        margin-left: auto;
    }


    .contact-page .contact-form-meta {
        display: grid;

        gap: 7px;

        margin-top: -57px;

        color: #7a8498;

        font-size: 9px;
    }


    .contact-page .contact-form-meta span {
        display: flex;

        align-items: center;

        gap: 7px;
    }


    .contact-page .contact-form-meta svg {
        width: 12px;
        height: 12px;
    }



    /* ======================================================================
       SUCCESS SCREEN
       ====================================================================== */

    .contact-page .contact-success {
        display: flex;

        align-items: center;

        min-height: 650px;
    }


    .contact-page .contact-success__inner {
        width: min(970px, calc(100% - 96px));

        margin: 0 auto;

        padding:
            55px 0;

        text-align: center;
    }


    /* check */

    .contact-page .contact-success__icon {
        display: grid;

        place-items: center;

        width: 73px;
        height: 73px;

        margin:
            0 auto
            26px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                #ffffff 40%,
                #f0eaff 100%
            );

        color: #5520ed;

        box-shadow:
            0 0 0 12px
            rgba(91,39,239,.035),
            0 0 0 23px
            rgba(91,39,239,.025);
    }


    .contact-page .contact-success__icon svg {
        width: 37px;
        height: 37px;
    }



    /* title */

    .contact-page .contact-success__inner > h2 {
        margin: 0;

        color: #080a12;

        font-size: 48px;

        line-height: .92;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .contact-page .contact-success__inner > h2 span {
        display: block;

        color: #5420ed;
    }


    .contact-page .contact-success__inner > p {
        margin:
            15px 0
            30px;

        color: #66718a;

        font-size: 17px;
    }



    /* cards */

    .contact-page .contact-success-grid {
        display: grid;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap: 20px;

        margin-bottom: 30px;
    }


    .contact-page .contact-success-card {
        min-height: 145px;

        padding:
            20px 24px;

        border-radius: 9px;

        background:
            linear-gradient(
                145deg,
                #fbfaff,
                #f6f3ff
            );
    }


    .contact-page .contact-success-card > strong {
        display: grid;

        place-items: center;

        width: 43px;
        height: 43px;

        margin:
            0 auto
            15px;

        border-radius: 50%;

        background: #eee8ff;

        color: #5520ed;

        font-size: 12px;
        font-weight: 900;
    }


    .contact-page .contact-success-card h3 {
        margin: 0;

        color: #11131b;

        font-size: 16px;

        font-weight: 900;
    }


    .contact-page .contact-success-card p {
        max-width: 220px;

        margin:
            7px auto
            0;

        color: #68738d;

        font-size: 13px;

        line-height: 1.25;
    }



    /* back home */

    .contact-page .contact-success > .home-shell,
    .contact-page .contact-success__inner {
        text-align: center;
    }


    .contact-page .contact-success .contact-primary-button {
        min-width: 240px;

        margin:
            0 auto;

        justify-content: center;
    }



    /* brand bottom */

    .contact-page .contact-success__brand {
        position: relative;

        width: 210px;

        margin:
            30px auto
            0;

        padding-top: 18px;
    }


    .contact-page .contact-success__brand::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        top: 5px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #dcdde4 25%,
                #dcdde4 75%,
                transparent
            );
    }


    .contact-page .contact-success__brand strong {
        display: block;

        color: #15171f;

        font-size: 14px;

        font-weight: 900;
    }


    .contact-page .contact-success__brand span {
        display: block;

        margin-top: 6px;

        color: #778197;

        font-size: 9px;
    }



    /* ==================================================================
       SAFETY
       ================================================================== */

    .contact-page .contact-screen[hidden],
    .contact-page .contact-step2-path[hidden] {
        display: none !important;
    }

}
.contact-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    margin: -1px !important;
    padding: 0 !important;

    border: 0 !important;
}