/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/poppins-v23-latin-regular.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url("./assets/fonts/poppins-v23-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("./assets/fonts/poppins-v23-latin-500.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("./assets/fonts/poppins-v23-latin-500.ttf")
            format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("./assets/fonts/poppins-v23-latin-600.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("./assets/fonts/poppins-v23-latin-600.ttf")
            format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/poppins-v23-latin-700.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("./assets/fonts/poppins-v23-latin-700.ttf")
            format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
:root {
    --clr-white: hsl(0, 0%, 100%);
    --clr-red-500: hsl(0, 100%, 74%);
    --clr-red-700: hsl(0, 80%, 54%);
    --clr-green-500: hsl(154, 59%, 51%);
    --clr-green-700: hsl(153, 59%, 40%);

    --clr-gray-300: hsl(0, 0%, 87%);
    --clr-gray-500: hsl(0, 0%, 60%);
    --clr-gray-700: hsl(0, 0%, 42%);

    --clr-blue-100: hsl(246, 25%, 77%);
    --clr-blue-500: hsl(248, 32%, 49%);
    --clr-blue-700: hsl(249, 10%, 26%);

    --font-main: "Poppins", sans-serif;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --base-unit: 0.125rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-xl: 1.75rem;
    --text-2xl: 3.125rem;

    --VERY_ODD_PIXEL: 1px;

    --space-unit: calc(var(--base-unit) * 2);
    --space-1: calc(var(--space-unit) * 1);
    --space-1-5: calc(var(--space-1) + var(--base-unit));
    --space-2: calc(var(--space-unit) * 2);
    --space-2-5: calc(var(--space-2) + var(--base-unit));
    --space-3: calc(var(--space-unit) * 3);
    --space-3-5: calc(var(--space-3) + var(--base-unit));
    --space-4: calc(var(--space-unit) * 4);
    --space-4-5: calc(var(--space-4) + var(--base-unit));
    --space-5: calc(var(--space-unit) * 5);
    --space-5-5: calc(var(--space-5) + var(--base-unit));
    --space-6: calc(var(--space-unit) * 6);
    --space-7: calc(var(--space-unit) * 7);
    --space-7-5: calc(var(--space-7) + var(--base-unit));
    --space-8: calc(var(--space-unit) * 8);
    --space-10: calc(var(--space-unit) * 10);
    --space-16: calc(var(--space-unit) * 16);

    --leading-none: 1;
    --leading-5: calc(var(--space-unit) * 5);
    --leading-5-5: calc(var(--leading-5) + var(--base-unit));
    --leading-6: calc(var(--space-unit) * 6);
    --leading-6-5: calc(var(--leading-6) + var(--base-unit));
    --leading-9: calc(var(--space-unit) * 9);
    --leading-9-5: calc(var(--leading-9) + var(--base-unit));
    --leading-12: calc(var(--space-unit) * 12);
    --leading-12-5: calc(var(--leading-12) + var(--base-unit));
    --leading-13: calc(var(--space-unit) * 13);
    --leading-13-5: calc(var(--leading-13) + var(--base-unit));
    --leading-14: calc(var(--space-unit) * 14);
    --leading-14-5: calc(var(--leading-14) + var(--base-unit));

    --tracking-tight: 0.01em;
    --tracking-none: 0em;
    --tracking-loose: 0.02em;

    --rounded-full: 9999px;
    --rounded-sm: 0.375rem;
    --rounded-base: 0.675rem;

    --block-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2);

    --focus-outline-style: dashed;
    --focus-outline-width: 3px;
    --focus-outline-offset: 3px;
    --focus-outline-color: var(--clr-green-500);

    --container-max-width: 69.375rem;
    --block-padding: clamp(var(--space-6), 4.071vw + 0.546rem, var(--space-10));
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}
body {
    line-height: var(--leading-none);
    -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
input,
button,
textarea,
select {
    font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    text-wrap: pretty;
}
.sr-only {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.main__container {
    position: relative;
    min-height: 100vh;
    font-family: var(--font-main);
    background-color: var(--clr-red-500);
    padding: var(--space-16) var(--space-5);
    background-image: url("./assets/images/bg-intro-mobile.png");
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main__layout {
    --grid-column-width: 33.75rem;
    max-width: var(--container-max-width);
    width: 100%;
    justify-content: center;
    display: grid;
    grid-template-columns: min(var(--grid-column-width), 100%);
    gap: var(--space-16) var(--space-7-5);
}
.intro__wrapper {
    z-index: 1;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.intro__headline {
    color: var(--clr-white);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(var(--text-xl), 0.438rem + 5.598vw, var(--text-2xl));
    line-height: clamp(var(--leading-9), 1.1169rem + 4.8346vw, var(--leading-13-5) + var(--VERY_ODD_PIXEL));
    margin-bottom: clamp(var(--space-5-5), 1.0172rem + 1.5267vw, var(--space-7));
}
.intro__description {
    color: var(--clr-white);
    line-height: var(--leading-6-5);
    max-width: 54ch;
}
.signup__wrapper {
    z-index: 1;
    position: relative;
    text-align: center;
}
.signup__title {
    background-color: var(--clr-blue-500);
    padding-inline: var(--block-padding);
    padding-block: var(--space-4-5) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
    box-shadow: var(--block-shadow);
    font-weight: var(--font-normal);
    color: var(--clr-white);
    border-radius: var(--rounded-base);
    line-height: var(--leading-6-5);
}
.signup__title--bold {
    font-weight: var(--font-semibold);
}
.signup__form {
    position: relative;
    border-radius: var(--rounded-base);
    background-color: var(--clr-white);
    box-shadow: var(--block-shadow);
    padding: var(--block-padding);
}
.textbox {
    --textbox-padding-x: clamp(var(--space-4), 4.071vw + 0.046rem, var(--space-8));

    --textbox-border: transparent;
    --textbox-border-focus: var(--clr-blue-500);
    --textbox-border-error: var(--clr-red-700);

    --textbox-label: var(--clr-gray-700);
    --textbox-label-focus: var(--clr-blue-500);
    --textbox-label-error: var(--clr-red-700);
    --textbox-label-animation-duration: 200ms;
    --textbox-label-animation-delay: 100ms;

    --textbox-input-height: 3.5rem;

    --textbox-overlay-animation-duration: 200ms;

    --textbox-button-animation-duration: 200ms;

    position: relative;
    border-radius: var(--rounded-sm);
    font-size: var(--text-sm);
    margin-bottom: clamp(var(--space-4), 1.018vw + 0.761rem, var(--space-5));
}
.textbox__box {
    display: block;
    position: relative;
    border-radius: inherit;
}
.textbox__overlay {
    pointer-events: none;
    position: absolute;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: end;
    border: 2px solid transparent;
    transition-property: border-color;
    transition-duration: var(--textbox-overlay-animation-duration);
    transition-timing-function: ease;
    padding-right: calc(var(--textbox-padding-x) - var(--VERY_ODD_PIXEL));
    inset: 0;
}
.textbox__input {
    height: var(--textbox-input-height);
    background-color: var(--clr-white);
    border-radius: inherit;
    border: 1px solid var(--clr-gray-300);
    padding-inline: var(--textbox-padding-x);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    padding-block: var(--space-5) var(--space-4-5);
    width: 100%;
}
.textbox__label {
    z-index: 3;
    display: block;
    pointer-events: none;
    position: absolute;
    font-weight: var(--font-semibold);
    color: var(--clr-gray-500);
    letter-spacing: var(--tracking-loose);
    left: calc(var(--textbox-padding-x) + var(--VERY_ODD_PIXEL));
    top: var(--space-5-5);
    transition-property: top;
    transition-timing-function: ease;
    transition-duration: var(--textbox-label-animation-duration);
    background-color: var(--clr-white);
}
.textbox__label::after,
.textbox__label::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: var(--clr-white);
    transition-property: width;
    transition-timing-function: ease;
    transition-duration: var(--textbox-label-animation-duration);
    transition-delay: var(--textbox-label-animation-delay);
}
.textbox__label::after {
    left: 100%;
}
.textbox__label::before {
    right: 100%;
}
.textbox__hint {
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-2-5);
    font-size: clamp(var(--text-xs), 0.6307rem + 0.5089vw, var(--text-sm));
    color: var(--clr-red-700);
    text-align: end;
}
.textbox__input[aria-invalid="true"] + .textbox__label {
    color: var(--textbox-label-error);
}
.textbox__input[aria-invalid="true"] ~ .textbox__overlay {
    border-color: var(--textbox-border-error);
}
.textbox__input[aria-invalid="true"] ~ .textbox__overlay::after {
    content: url("./assets/images/icon-error.svg");
    height: var(--space-6);
}
.textbox__input:not(:placeholder-shown) + .textbox__label,
.textbox__input:focus + .textbox__label {
    top: -0.4375rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.textbox__input:focus + .textbox__label {
    color: var(--textbox-label-focus);
}
.textbox__input:not(:placeholder-shown) + .textbox__label::before,
.textbox__input:not(:placeholder-shown) + .textbox__label::after,
.textbox__input:focus + .textbox__label::before,
.textbox__input:focus + .textbox__label::after {
    width: var(--space-2);
}
.textbox__input:focus ~ .textbox__overlay {
    border-color: var(--textbox-border-focus);
}
.textbox__show-password-btn {
    position: absolute;
    top: calc(var(--space-4) + var(--VERY_ODD_PIXEL));
    right: calc(var(--textbox-padding-x) + var(--VERY_ODD_PIXEL));
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: transparent;
}
.textbox__show-password-btn:active {
    transform: scale(0.95);
}
.textbox__show-password-btn--icon {
    stroke: var(--clr-gray-500);
    transition: stroke var(--textbox-button-animatino-duration) ease;
}
.textbox__show-password-btn[aria-pressed="false"] > svg:first-child {
    display: none;
}
.textbox__show-password-btn[aria-pressed="true"] > svg:last-child {
    display: none;
}
.textbox--password .textbox__overlay::after {
    padding-right: var(--space-8);
}
.signup__submit-btn {
    --btn-surface-gap: var(--space-1);
    --btn-surface-gap-active: calc(var(--btn-surface-gap) / 2);
    --btn-animation-duration: 150ms;

    width: 100%;
    border: none;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    background-color: transparent;
    color: var(--clr-white);
    border-radius: var(--rounded-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-loose);
    padding-top: calc(var(--space-5) + var(--VERY_ODD_PIXEL));
    padding-bottom: calc(var(--space-5) - var(--VERY_ODD_PIXEL));
    margin-bottom: var(--space-3);
    transition-property: opacity;
    transition-duration: var(--btn-animation-duration);
    transition-timing-function: ease;
}
.signup__submit-btn--text {
    z-index: 999;
    display: block;
    position: relative;
    transition-property: transform;
    transition-duration: var(--btn-animation-duration);
    transition-timing-function: ease;
}
.signup__submit-btn::before,
.signup__submit-btn::after {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    border-radius: inherit;
    transition-property: top, left, right, bottom;
    transition-duration: var(--btn-animation-duration);
    transition-timing-function: ease;
}
.signup__submit-btn::before {
    background-color: var(--clr-green-700);
}
.signup__submit-btn::after {
    bottom: var(--btn-surface-gap);
    background-color: var(--clr-green-500);
}
.signup__submit-btn:active::before {
    top: var(--btn-surface-gap-active);
}
.signup__submit-btn:active::after {
    top: var(--btn-surface-gap-active);
    bottom: var(--btn-surface-gap-active);
}
.signup__submit-btn:active .signup__submit-btn--text {
    transform: translateY(var(--btn-surface-gap-active));
}
.signup__terms {
    font-size: var(--text-xs);
    line-height: calc(var(--leading-5) + var(--VERY_ODD_PIXEL));
    font-weight: var(--font-medium);
    color: var(--clr-gray-700);
    padding-inline: var(--space-4);
}
.signup__terms--link {
    color: var(--clr-red-700);
    font-weight: var(--font-bold);
    text-decoration: none;
}
@supports selector(:focus-visible) {
    input:focus,
    button:focus,
    a:focus {
        outline: 0;
    }
    input:focus-visible,
    button:focus-visible,
    a:focus-visible {
        outline-width: var(--outline-width, var(--focus-outline-width));
        outline-style: var(--outline-style, var(--focus-outline-style));
        outline-color: var(--outline-color, var(--focus-outline-color));
        outline-offset: var(--outline-offset, var(--focus-outline-offset));
    }
    .textbox__input:focus-visible {
        --outline-color: var(--clr-blue-100);
        --outline-width: 4px;
        --outline-offset: 0;
        --outline-style: solid;
    }
}
@media (hover: hover) {
    .textbox__input:hover + .textbox__label {
        color: var(--textbox-label-focus);
    }
    .textbox__input:hover ~ .textbox__overlay {
        border-color: var(--textbox-border-focus);
    }
    .signup__submit-btn:hover {
        opacity: 0.75;
    }
    .textbox__show-password-btn:hover svg {
        stroke: var(--clr-blue-500);
    }
}
@media (prefers-reduced-motion: reduce) {
    .signup__submit-btn {
        --btn-animation-duration: 0;
    }
    .textbox {
        --textbox-label-animation-duration: 0;
        --textbox-label-animation-delay: 0;
        --textbox-overlay-animation-duration: 0;
        --textbox-button-animation-duration: 0;
    }
}
@media (min-width: 64em) {
    .main__container {
        background-image: url("./assets/images/bg-intro-desktop.png");
    }
    .main__layout {
        grid-template-columns: 1fr 1fr;
    }
    .intro__wrapper {
        text-align: start;
        align-self: center;
        align-items: normal;
    }
}