* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background: #f7f5f0;

    color: #3A3A3A;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.card {

    width: min(
        680px,
        calc(100% - 32px)
    );

    margin: 60px auto;

    padding: 34px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.08);

}


.eyebrow {

    color: #BF994D;

    font-weight: 700;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: .08em;

}


h1 {

    font-size: 32px;

    line-height: 1.15;

    margin:
        8px 0
        14px;

}


.intro {

    line-height: 1.6;

    margin-bottom: 28px;

}


label {

    display: block;

    font-weight: 700;

    margin:
        20px 0
        8px;

}


input[type="text"],
input:not([type]),
select {

    width: 100%;

    padding: 13px 14px;

    border:
        1px solid #d7d2c9;

    border-radius: 8px;

    font-size: 16px;

    color: #3A3A3A;

    background: #ffffff;

}


.location-question {

    margin-bottom: 8px;

}


.location-row {

    display: grid;

    grid-template-columns:
        minmax(112px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 12px;

    align-items: end;

}


.location-field label {

    margin:
        0 0
        8px;

}


.location-field-country select {

    padding-left: 10px;

    padding-right: 10px;

}


.options {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}


.option {

    margin: 0 !important;

    border:
        1px solid #d7d2c9;

    border-radius: 8px;

    padding:
        10px 13px !important;

    font-weight:
        400 !important;

}


button {

    width: 100%;

    margin-top: 24px;

    padding: 14px 18px;

    border: 0;

    border-radius: 8px;

    background: #BF994D;

    color: #ffffff;

    font-weight: 700;

    font-size: 16px;

    cursor: pointer;

}


button:hover {

    filter:
        brightness(.95);

}


.status {

    margin-top: 18px;

    line-height: 1.5;

}


.status.error {

    color: #9b2c2c;

}


.status.success {

    color: #2e6b45;

}


@media (max-width: 480px) {

    .card {

        width:
            calc(100% - 24px);

        margin:
            24px auto;

        padding: 22px;

        border-radius: 12px;

    }


    h1 {

        font-size: 27px;

    }


    .intro {

        margin-bottom: 24px;

    }


    .location-row {

        grid-template-columns:
            minmax(112px, 0.9fr)
            minmax(0, 1.1fr);

        gap: 10px;

    }


    .location-field-country select {

        font-size: 15px;

        padding-left: 8px;

        padding-right: 8px;

    }

}