/*********************************************************************
 * VARIABLES
*********************************************************************/

:root {
    --clr-white: #fff;
    --clr-black: #000;
    --clr-gray-300: #757575;
    --clr-gray-500: #222222;
    --clr-primary: #013DC4;
    --clr-primary-light: #5d78b7;
    --clr-error: red;

    --font-size-display1: 118.88px;
    --font-size-display2: 99.07px;
    --font-size-h1: 82.56px;
    --font-size-h2: 68.8px;
    --font-size-h3: 57.33px;
    --font-size-h4: 47.78px;
    --font-size-h5: 39.81px;
    --font-size-h6: 33.18px;
    --font-size-subtitle: 27.65px;
    --font-size-p-large: 23.04px;
    --font-size-p: 19.2px;
    --font-size-p-small: 16px;
}

@media screen and (max-width: 1000px) {
    :root {
        --font-size-display1: 58.45px;
        --font-size-display2: 51.96px;
        --font-size-h1: 46.18px;
        --font-size-h2: 41.05px;
        --font-size-h3: 36.49px;
        --font-size-h4: 32.44px;
        --font-size-h5: 28.83px;
        --font-size-h6: 25.63px;
        --font-size-subtitle: 22.78px;
        --font-size-p-large: 20.25px;
        --font-size-p: 18px;
        --font-size-p-small: 16px;
    }
}

/*********************************************************************
 * STYLE RESET
*********************************************************************/

html { 
    box-sizing: border-box;
    font-size: var(--font-size-p-small);
}

*, *:before, *:after { 
    box-sizing: inherit;
    background: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul { 
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol, ul { 
    list-style: none;
}

img { 
    max-width: 100%;
    height: auto;
}

button, input[type="submit"] {
    outline: none;
    border: none;
}

/*********************************************************************
 * GENERAL
*********************************************************************/

body {
    font-family: "Roboto", sans-serif;
}

header {
    width: 1400px !important;
    max-width: 95% !important;
}

header, .content {
    max-width: 1400px;
    padding: 0 70px;
    margin: 0 auto;
}

section {
    width: 100%;
    max-width: 950px;
    margin: 60px auto 0;
}

section:first-child {
    margin-top: 40px;
}

.splitter {
    width: 150px;
    max-width: 100%;
    height: 1px;
    margin-top: 60px;
    background: var(--clr-black);
}

.section-title {
    font-size: var(--font-size-h4);
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    section {
        max-width: 90%;
    }

    section:first-child {
        margin-top: 20px;
    }

    .content {
        padding: 0;
    }
}

/*********************************************************************
 * HEADER
*********************************************************************/

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    max-width: 950px;
    padding: 20px 70px;
}

.header__logo {
    width: 300px;
}

.header__nav {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.header__nav__item a {
    color: var(--clr-black);
}

.header__nav__item:not(:last-child) {
    margin-right: 10px;
}

@media screen and (max-width: 1000px) {
    .header {
        justify-content: center;
        margin-top: 40px;
        padding: 0;
    }

    .header__logo {
        height: 50px;
    }

    .header__nav {
        display: none;
    }
}

/*********************************************************************
 * HERO SECTION
*********************************************************************/

.hero {
    text-align: center;
}

.hero > *:not(:first-child) {
    margin-top: 30px;
}

.hero__title {
    font-size: var(--font-size-h2);
    font-weight: bold;
}

.hero__subtitle {
    font-size: var(--font-size-h6);
    line-height: 125%;
}

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

.hero__signup__email {
    padding: 10px 20px;
    flex: 1;
    font-size: var(--font-size-p);
    border: solid var(--clr-gray-300) 1px;
    border-radius: 10px 0 0 10px;
}

.hero__signup__email:focus {
    outline: none;
}

.hero__signup__submit {
    padding: 20px;
    color: var(--clr-white);
    font-size: var(--font-size-p);
    font-weight: bold;
    background: var(--clr-primary);
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.hero__signup__submit:disabled {
    background: var(--clr-primary-light);
    cursor: not-allowed;
}

.hero__error {
    display: none;
    margin-top: 10px !important;
    color: var(--clr-error);
    font-size: var(--font-size-p-small);
    text-align: left;
}

.hero__error--visible {
    display: block;
}

.hero__quick-info {
    color: var(--clr-gray-300);
}

@media screen and (max-width: 1000px) {
    .hero__signup {
        flex-direction: column;
    }

    .hero__signup__email {
        margin-bottom: 10px;
        padding: 20px;
        font-size: var(--font-size-p-large);
        border-radius: 5px;
    }

    .hero__signup__submit {
        font-size: var(--font-size-subtitle);
        border-radius: 5px;
    }

    .hero__error {
        text-align: center;
    }
}

/*********************************************************************
 * PLATFORMS SECTION
*********************************************************************/

.platforms__info {
    margin-bottom: 15px;
    color: var(--clr-gray-500);
    font-size: var(--font-size-p-small);
    line-height: 150%;
    text-align: center;
}

.platforms__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.platforms__list__item img {
    max-width: 200px;
}

@media screen and (max-width: 1000px) {
    .platforms__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 25px;
        margin-top: 40px;
        text-align: center;
    }

    .platforms__list__item img {
        max-width: 95%;
    }
}

/*********************************************************************
 * DEMO SECTION
*********************************************************************/

.demo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo__info {
    margin-bottom: 20px;
    font-size: var(--font-size-subtitle);
    line-height: 150%;
    text-align: center;
}

/*********************************************************************
 * BENEFITS SECTION
*********************************************************************/

.benefits__list {
    margin-top: 40px;
}

.benefits__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.benefits__list__item img {
    margin-right: 10px;
    height: 40px;
}

.benefits__list__item p {
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

.benefits__list__item:not(:last-child) {
    margin-bottom: 25px;
}

/*********************************************************************
 * TESTIMONIALS SECTION
*********************************************************************/

.testimonials__list {
    margin-top: 40px;
}

.testimonials__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.testimonials__list__item:not(:last-child) {
    margin-bottom: 50px;
}

.testimonials__list__item__reviewer {
    width: 180px;
    margin-right: 30px;
}

.testimonials__list__item__content > *:not(:last-child) {
    display: block;
    margin-bottom: 10px;
}

.testimonials__list__item__content__statement {
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

.testimonials__list__item__content__reviewer {
    font-size: var(--font-size-p);
    font-weight: bold;
    line-height: 150%;
}

.testimonials__list__item__content img {
    width: 150px;
}

@media screen and (max-width: 1000px) {
    .testimonials__list__item {
        flex-direction: column;
        text-align: center;
    }

    .testimonials__list__item:not(:last-child) {
        margin-bottom: 70px;
    }

    .testimonials__list__item__reviewer {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/*********************************************************************
 * SETUP SECTION
*********************************************************************/

.setup__content {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
}

.setup__content__list {
    margin-right: 20px;
}

.setup__content__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.setup__content__list__item:not(:last-child) {
    margin-bottom: 20px;
}

.setup__content__list__item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    margin-right: 10px;
}

.setup__content__list__item__icon img {
    height: 40px;
}

.setup__content__list__item p {
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

@media screen and (max-width: 1000px) {
    .setup__content__list {
        margin-right: 0;
    }

    .setup__image {
        display: none;
    }
}

/*********************************************************************
 * PRICING SECTION
*********************************************************************/

.pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing__tiers {
    display: flex;
    flex-direction: row;
    margin: 40px auto 0;
}

.pricing__tiers__tier {
    max-width: 500px;
    padding: 25px;
    text-align: center;
    border: 1px solid #8E8E8E;
    border-radius: 10px;
}

.pricing__tiers__tier:first-child {
    margin-right: 20px;
}

.pricing__tiers__tier__plan {
    display: block;
    font-size: var(--font-size-subtitle);
    margin-bottom: 10px;
}

.pricing__tiers__tier__price {
    margin-bottom: 10px;
}

.pricing__tiers__tier__price__dollars {
    font-size: var(--font-size-display1);
}

.pricing__tiers__tier__price__cents {
    font-size: var(--font-size-h5);
}

.pricing__tiers__tier__benefits {
    margin-top: 30px;
    text-align: left;
}

.pricing__tiers__tier__benefits__benefit {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-size-p);
}

.pricing__tiers__tier__benefits__benefit:not(:last-child) {
    margin-bottom: 20px;
}

.pricing__tiers__tier__benefits__benefit img {
    width: 30px;
    margin-right: 10px;
}

.pricing__tiers__tier__cta {
    display: block;
    padding: 20px;
    margin-top: 20px;
    width: 100%;

    color: var(--clr-white);
    font-size: var(--font-size-p);
    font-weight: bold;

    background: var(--clr-primary);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}

.pricing__info {
    width: 100%;
    margin-top: 30px;
    text-align: left;
}

.pricing__info p {
    margin-top: 20px;
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

@media screen and (max-width: 1000px) {
    .pricing__tiers {
        flex-direction: column;
    }

    .pricing__tiers__tier {
        max-width: 100%;
    }

    .pricing__tiers__tier:first-child {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .pricing__tiers__tier__benefits__benefit {
        font-size: var(--font-size-p-large);
    }
}

/*********************************************************************
 * GUARANTEE SECTION
*********************************************************************/

.guarantee__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
}

.guarantee__content img {
    height: 200px;
    margin-right: 25px;
}

.guarantee__content__info p {
    margin-top: 20px;
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

@media screen and (max-width: 1000px) {
    .guarantee__content {
        flex-direction: column;
    }
    
    .guarantee__content img {
        display: none;
    }
}

/*********************************************************************
 * HELP SECTION
*********************************************************************/

.help__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
}

.help__content__info p {
    margin-top: 20px;
    margin-right: 25px;
    font-size: var(--font-size-p-large);
    line-height: 150%;
}

.help__content img {
    height: 200px;
}

@media screen and (max-width: 1000px) {
    .help__content {
        flex-direction: column-reverse;
    }

    .help__content__info {
        margin-right: 0;
    }
}

/*********************************************************************
 * FOOTER
*********************************************************************/

footer {
    margin-top: 60px;
    padding: 50px 0;
    color: var(--clr-white);
    background: var(--clr-primary);
}

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 950px;
    max-width: 95%;
    margin: 0 auto;
}

.footer__logo {
    max-width: 300px;
}

.footer__info {
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-p);
}

.footer__info h5 {
    font-size: var(--font-size-p);
    font-weight: bold;
    margin-bottom: 15px;
}

.footer__info__links {
    margin-right: 50px;
}

.footer__info__company-info span {
    display: block;
}

.footer__info__company-info span,
.footer__info__links__list__item {
    margin-top: 5px;
}

.footer__info a {
    color: var(--clr-white);
}

@media screen and (max-width: 1000px) {
    .footer {
        flex-direction: column;
    }

    .footer img {
        margin-bottom: 40px;
    }

    .footer__info {
        flex-direction: column;
        font-size: var(--font-size-p-large);
        text-align: center;
    }

    .footer__info h5 {
        font-size: var(--font-size-subtitle);
    }

    .footer__info__links {
        margin-right: 0;
        margin-bottom: 50px;
    }
}

/*********************************************************************
 * POLICY PAGES
*********************************************************************/

.policy-page-title {
    margin-top: 40px;
    font-size: var(--font-size-h4);
    font-weight: bold;
    text-align: center;
}

.policy-title {
    font-size: var(--font-size-h6);
    font-weight: bold;
}

.policy-subtitle {
    margin-top: 20px;
    font-size: var(--font-size-p);
    font-weight: bold;
}

.policy-info, 
.policy-list {
    margin-top: 20px;
    font-size: var(--font-size-p);
    line-height: 150%;
}

.policy-list {
    list-style: numbered;
}

.policy-list li {
    margin-top: 20px;
}

.contact-info {
    margin-top: 20px;
}

.contact-info > * {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-size-p);
}

@media screen and (max-width: 1000px) {
    .policy-page-title {
        margin-top: 20px;
    }
}

/*********************************************************************
 * THANK YOU PAGE
*********************************************************************/

.thank-you {
    text-align: center;
}

.thank-you img {
    max-width: 95%;
    margin-top: 20px;
    margin-bottom: 6vh;
}

.thank-you p {
    margin-top: 30px;
    font-size: var(--font-size-p);
    line-height: 150%;
}

@media screen and (max-width: 1000px) {
    .thank-you img {
        margin-bottom: 0;
    }
}