:root {
    --background-color: #fff;
    --background-color-dark: #292929;

    --primary-color: #ee9102;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/OpenSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/OpenSans-SemiBold.woff0') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/OpenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/OpenSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* Global Styles */

/* Typography */
.h1, .h2, .h3 {
    margin-top: 1em;
    margin-bottom: .3em;
}

.h1 {
    font-size: 1.72rem;
    line-height: 1.2;
    font-weight: 600;
}

.h2 {
    font-size: 1.44rem;
    line-height: 1.2;
    font-weight: 600;
}

.h3 {
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 600;
}

.content {
    margin-bottom: 3em;
}

a, a:focus, a:hover, a:visited {
    color: #fff;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul ul, ol ol, ol ul, ul ol {
  margin-left: 1.2em;
  padding-left: 1.2em;
}

.wrapper {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.row {
    display: flex;
    flex-direction: column;
}

body {
    background-color: var(--background-color);
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

strong {
    font-weight: 700;
}

dialog {
    background-color: #FFF;
    border: none;
    max-width: 400px;
    width: 100%;
    justify-self: center;
    align-self: center;
    color: #000;
    padding: 1.5rem;
}

.dialog__content {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.dialog__title {
    font-size: 1.8rem;
}

.dialog__text {
    font-size: 1rem;
}

.dialog__footer {
    color: #656565;
    align-self: flex-end;
    font-size: 0.8rem;
}

::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

.button {
    background-color: var(--primary-color);
    font-size: 1rem;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: 100px;
    font-weight: 700;
    align-self: center;
}

.button:link,
.button:visited {
    color: #fff;
    text-decoration: none;
}

.button:hover {
    cursor: pointer;
    background-color: #d87c02;
}

.pill {
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 4px;
    background-color: #fff;
    color: #323232;
    align-self: center;
    padding: 0.25rem 1.5rem;
    text-transform: uppercase;
}

.pill--dark {
    background-color: #323232;
    color: #fff;
}

/* Header Styles */
.header__container {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.header__logo {
    width: 150px;
    height: auto;
    /* margin: 1.5rem 0; */
}

/* Hero Section Styles */
.hero__section {
    color: #fff;
    background-color: var(--background-color-dark);
    padding: 3rem 2rem;
}

.hero__container {
    display: flex;
    max-width: 700px;
    flex-direction: column;
    row-gap: 1.5rem;
}

.hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

.hero__titlesub {
    font-size: 1.5rem;
    text-align: center;
}

.hero__subtitle {
    font-size: 1.2rem;
    line-height: 2.1rem;
    align-self: center;
}

.hero__footer {
    font-size: .9rem;
    color:#c0c0c0;
    max-width: 300px;
    text-align: center;
    line-height: 1.4rem;
    align-self: center;
}

.logo {
    width: 120px;
    height: 40px;
    background-color: gray;
    /* align-self: center; */
}

.nav {
    border: 2px solid green;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
}

.nav__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* align-self: center; */
}

.nav__item {
    border: 2px solid orange;
    list-style: none;
}

.nav__link {
    font-size: 1rem;
}

.section__title {
    line-height: 2.2rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.section__subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.8rem;
}

/* Problem section */
.problem__section,
.solution__section,
.app__section,
.targetaudience__section,
.authority__section,
.faq__section,
.cta__section {
    display: flex;
    flex-direction: column;
    row-gap: 1.8rem;
    padding: 4rem 2rem;
}

.problem__items {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1rem;
}

.problem__item, .solution__card {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
    padding: 1.4rem;
    background-color: #e9e9e9;
    border-radius: 8px;
    min-width: 200px;
}

.problem__item h3, .solution__card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.problem-item__image {
    width: 64px;
    height: 64px;
    background-color: lightgray;
}

.problem__text {
    font-size: 1.0.63rem;
    line-height: 1.6rem;
    text-align: center;
}

/* Solution section */
.solution__section {
    background-color: var(--background-color-dark);
    color: #fff;
}

.solution__items {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1rem;
    font-size: 1rem;
}

.solution__card {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    border-radius: 8px;
    padding: 1.5rem;
    color: #000;
    text-align: center;
}

.clear-path__card {
    background-color: #d2ffd5;
}

.clear-path__card h3 {
    color: #144917;
}

.feature-vs-tooling__card {
    background-color: #ffebd2;
}

.feature-vs-tooling__card h3 {
    color: #875313;
}

.one-codebase__card {
    background-color: #d2edff;
}

.one-codebase__card h3 {
    color: #244255;
}

.card__icon {
    font-size: 3rem;
}

/* App Section */
.app__section {
    display: flex;
    flex-direction: column;
}

.app__section h3 {
    font-size: .9rem;
    font-weight: 700;
    padding-bottom: .5rem;
}

.app-features__card {
    font-size: 1.1rem;
    padding: 2rem;
    border-radius: 8px;
    background-color: #e7e7e7;
}

.app-features__card li {
    padding-bottom: .75rem;
}

.app__screenshots {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
}

.app__section img {
    max-width: 250px;
    width: 100%;
}

.app__carousel {
    width: 200px;
    height: 400px;
    background-color: gray;
    border-radius: 16px;
    align-self: center;
}

/* Target Audience Section */

.targetaudience__section {
    background-color: var(--background-color-dark);
    color: #fff;
}

.targetaudience__container {
    color: #000;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1rem;
}

.targetaudience__card {
    padding: 2rem;
    padding-left: 3rem;
    border-radius: 8px;
    min-width: 200px;
}

.targetaudience__card li {
    padding-bottom: 1rem;
    padding-left: .5rem;
}

.targetaudience__card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.whoisitfor__container {
    background-color: #eeffec;
}

.whoisitnotfor__container {
    background-color: #fff3f3;
}

.whoisitfor__container .targetaudience__list-item::marker {
    content: "✅";
    margin-right: 4rem;
}

.whoisitnotfor__container .targetaudience__list-item::marker {
    content: "❌";
    margin-right: 4rem;
}

/* Authority Section */
.authority__photo {
    background-color: lightgray;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    align-self: center;
}

.authority__section {
    font-size: 1.15rem;
}

/* FAQ Section */
.faq__section {
    background-color: #fff8ef;
}

.faq__questions {
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
}

.faq__question {
    font-weight: 600;
    font-size: 1.25rem;
}

.faq__answer {
    font-size: 1rem;
}

/* CTA Section */
.cta__section {
    background-color: #f5f5f5;
}

.cta__section-title {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2.7rem;
}

.cta__section-subtitle {
    font-size: 1.1rem;
    color: #343434;
    line-height: 1.8rem;
}

.cta__disclaimer-text {
    font-size: 0.7rem;
    line-height: 1.4rem;
    color: #8f8f8f;
    margin-top: 1rem;
    text-align: end;
}

.waitlist-form {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
}

.waitlist-form button {
    width: 100%;
    max-width: 350px;
}

.waitlist-form input[type="email"] {
    color: black;
    background-color: #d3d3d3;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 100px;
    width: 100%;
    max-width: 350px;
}

.waitlist-form input[type="email"]:focus {
    background-color: #c7c7c7;
}


/* Footer Styles */
.footer {
    font-size: .9rem;
    color: #fff;
    display: flex;
    background-color: var(--background-color-dark);
}

.footer__container {
    padding: 3rem 2rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
}

footer ul {
    align-self: self-start;
    list-style-type: none;
}

footer li {
    padding-bottom: 1rem;
}

footer p {
    color: #6d6d6d;
}

/* Responsive Styles */
@media (min-width: 600px) {
    .row {
        flex-direction: row;
    }

    .nav__list {
        flex-direction: row;
        /* align-self: flex-end; */
    }
}