:root {
    --jay-blue: #00549a;
    --mp-fuchsia: #d61c5b;
    --mp-tang: #f9763d;
    --mp-light-blue: #dee5f0;
}

/* page styles */
h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
}

h3 {
    font-size: 2rem;
    font-weight: bold;
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.font-3 {
    font-size: 2.75rem;
    line-height: 1.5rem;
}

p, .body-list {
    font-size: 1rem;
}

.body-list {
    padding: 0;
    margin-left: 1rem;
    list-style-image: url('/assets/images/marketing/pwyc/Arrow-Fuchsia.png');
}

.body-list-item {
    margin-bottom: 1rem;
}

.callout {
    font-size: 1.25rem;
    font-weight: bold;
    font-style: italic;
}

.text-blue {
    color: var(--jay-blue);
}

.note {
    font-weight: bold;
    font-size: 1rem;
}

.disclaimer {
    font-size: 0.75rem;
}

/* hero section styles */
#hero {
    height: 60vh;
    background: linear-gradient(180deg, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0.75) 70%, rgba(255,255,255, 0) 75% ), url('/assets/images/marketing/pwyc/hero-image-mobile.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    color: var(--jay-blue);
}

#hero p {
    font-size: 1.35rem;
    font-weight: bold;
}

/* pwyc styles */
#pwyc {
    background: var(--mp-light-blue);
}

/* survey styles */
#survey .font-3 {
    font-size: 3rem;
}

/* burned-out styles */
#burned-out {
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/assets/images/marketing/pwyc/burned-out-desktop.jpg');
    background-size: cover;
    background-position: bottom right 10%;
}

/* banner styles */
#banner {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('/assets/images/marketing/pwyc/arrows-desktop.jpg');
    background-size: cover;
    background-position: center 20%;
}

/* report styles */
#report {
    background: linear-gradient(180deg, transparent 0%, transparent 12%, var(--mp-light-blue) 12%, var(--mp-light-blue) 100%);
}

@media screen and (min-width: 768px) {
    #hero {
        background-size: cover;
        background-position: bottom;
        color: var(--jay-blue);
    }
}

@media  screen and (min-width: 1024px) {
    #hero {
        height: 50vh;
        background: linear-gradient(180deg, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 20%, rgba(255,255,255, 0.75) 50%, rgba(255,255,255, 0) 65% ), url('/assets/images/marketing/pwyc/hero-image-desktop.jpg');
        background-size: 65%;
        background-repeat: no-repeat;
        background-position: right;
    }

    #banner {
        background-image: url('/assets/images/marketing/pwyc/arrows-desktop.jpg');
    }

    #report {
        background: linear-gradient(180deg, transparent 0%, transparent 10%, var(--mp-light-blue) 10%, var(--mp-light-blue) 89%, transparent 89%, transparent 100%);
    }  
}

@media screen and (min-width:1025px) {
    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    h4 {
        font-size: 2rem;
    }
    
    p, .body-list {
        font-size: 1.5rem;
    }
    
    .font-3 {
        font-size: 4rem;
        line-height: 2.5rem;
    }

    .callout {
        font-size: 1.5rem;
    }

    #hero p {
        font-size: 2rem;
    }

    #burned-out {
        background-position: bottom;
    }

    #why-pro .body-list {
        columns: 2;
        column-gap: 3rem;
    }
    
    #why-pro .body-list-item {
        margin-bottom: 1.25rem;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    } 

    #report h3 {
        font-size: 1.75rem;
    }
}

@media screen and (min-width: 1280px) {
    #report {
        background: var(--mp-light-blue)
    }  
}

@media screen and (min-width: 1366px) {
    #banner {
        height: 300px;
    }
    
    #report {
        background: linear-gradient(180deg, transparent 0%, transparent 8%, var(--mp-light-blue) 8%, var(--mp-light-blue) 92%, transparent 92%, transparent 100%);
    }
}