/* karla-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: "Karla";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/karla-v32-latin-regular.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("./assets/fonts/karla-v32-latin-regular.ttf")
            format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* karla-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: "Karla";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/karla-v32-latin-700.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("./assets/fonts/karla-v32-latin-700.ttf")
            format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
:root {
    --color-cyan-400: hsl(179, 47%, 52%);
    --color-cyan-500: hsl(179, 62%, 43%);
    --color-cyan-700: hsl(179, 62%, 33%);
    --color-cyan-900: hsl(179, 62%, 23%);
    --color-bright-yellow: hsl(71, 73%, 54%);
    --color-gray-100: hsl(204, 43%, 93%);
    --color-gray-200: hsl(218, 22%, 67%);
    --color-gray-400: hsl(218, 22%, 50%);
    --color-gray-600: hsl(218, 22%, 40%);
    --color-white: hsl(0, 0%, 100%);

    --font-main: "Karla", sans-serif;
    --font-normal: 400;
    --font-bold: 700;

    --base-unit: 0.125rem;

    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    --leading-none: 1;
    --leading-unit: calc(var(--base-unit) * 2);
    --leading-4: calc(var(--leading-unit) * 4);
    --leading-5: calc(var(--leading-unit) * 5);
    --leading-5-1: calc(var(--leading-5) + var(--base-unit));
    --leading-6: calc(var(--leading-unit) * 6);
    --leading-6-1: calc(var(--leading-6) + var(--base-unit));
    --leading-7: calc(var(--leading-unit) * 7);

    --tracking-tidy: -0.01em;

    --rounded-xs: 0.125rem;
    --rounded-sm: 0.25rem;
    --rounded-md: 0.5rem;

    --card-padding: clamp(1.5rem, 7.96vw - 0.366rem, 2.5rem);

    --focus-outline-offset: 3px;
    --focus-outline-width: 3px;
    --focus-outline-style: dashed;
    --focus-outline-color: var(--color-bright-yellow);

    --VERY-ODD-PIXEL: 1px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}
p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}
body {
    font-family: var(--font-main);
    line-height: var(--leading-none);
    -webkit-font-smoothing: antialiased;
}
main {
    background-color: var(--color-gray-100);
    min-height: 100vh;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card__wrapper {
    border-radius: var(--rounded-sm);
    max-width: 39.6875rem;
    box-shadow: 0px 16px 32px -12px rgba(149, 157, 165, 0.2);
    letter-spacing: var(--tracking-tidy);
}
.card__layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.intro__wrapper {
    grid-column: 1/-1;
    color: var(--color-gray-600);
    padding: var(--card-padding);
    background-color: var(--color-white);
}
.intro__headline {
    color: var(--color-cyan-700);
    font-size: clamp(var(--text-xl), 1.018vw + 1.011rem, var(--text-2xl));
    line-height: clamp(var(--leading-5-1) + var(--VERY-ODD-PIXEL), 1.272vw + 1.139rem, var(--leading-7));
    margin-bottom: 1.5rem;
}
.intro__sub {
    position: relative;
    width: fit-content;
    font-size: clamp(var(--text-sm) + var(--VERY-ODD-PIXEL), 1.018vw + 0.636rem, var(--text-lg));
    line-height: clamp(var(--leading-5), 0.509vw + 1.131rem, var(--leading-5-1));
    margin-bottom: 1rem;
    color: var(--color-cyan-900);
}
.intro__sub--text {
    position: relative;
    z-index: 2;
}
.intro__sub::before {
    position: absolute;
    background-color: var(--color-bright-yellow);
    z-index: 1;
    content: "";
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.25rem;
    top: -0.25rem;
    border-radius: var(--rounded-xs);
}
.intro__description {
    line-height: 1.625rem;
    font-size: clamp(var(--text-md), 0.509vw + 0.881rem, var(--text-lg));
}
.subscription__wrapper {
    color: var(--color-white);
    background-color: var(--color-cyan-700);
    padding: var(--card-padding);
}
.subscription__headline {
    line-height: calc(var(--leading-6) - var(--VERY-ODD-PIXEL));
    font-size: var(--text-lg);
    margin-bottom: 1.125rem;
}
.subscription__price {
    display: flex;
    align-items: center;
    margin-bottom: 0.4375rem;
}
.subscription__price--value {
    font-size: 2rem;
    font-weight: var(--font-bold);
    margin-right: 0.75rem;
}
.subscription__description {
    line-height: var(--leading-6-1);
    margin-bottom: 1.625rem;
}
.subscription__sign-up-btn {
    text-decoration: none;
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: var(--font-bold);
    font-size: 1rem;
    padding: 1.0625rem 0 0.9375rem 0;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 8px 0;
    background-color: var(--color-bright-yellow);
    color: var(--color-cyan-900);
    border-radius: 0.25rem;
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-property: color, background-color;
}
.feature__wrapper {
    background-color: var(--color-cyan-900);
    padding: var(--card-padding);
    color: var(--color-white);
}
.feature__title {
    line-height: calc(var(--leading-6) - var(--VERY-ODD-PIXEL));
    font-size: var(--text-lg);
    margin-bottom: 1rem;
}
.feature__list {
    line-height: var(--leading-5);
    list-style: none;
    padding-left: 0;
    font-size: var(--text-sm);
}
@media (prefers-reduced-motion: reduce) {
    .subscription__sign-up-btn {
        transition: none;
    }
}
@supports selector(:focus-visible) {
    .subscription__sign-up-btn:focus {
        outline: 0;
    }
    .subscription__sign-up-btn:focus-visible {
        outline-offset: var(--focus-outline-offset);
        outline-style: var(--focus-outline-style);
        outline-width: var(--focus-outline-width);
        outline-color: var(--focus-outline-color);
    }
}
@media (hover: hover) {
    .subscription__sign-up-btn:hover {
        background-color: var(--color-white);
    }
}