<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
    --primary-color: #7E00FD;
}

html {font-size: 62.5%;}

p, a {font-size: 1.8rem;}
a {text-decoration: none;}
ul {list-style-type:none;margin:0;padding:0;}
.header-cta, .arrow {display: none;}

.wrapper { 
    margin: 2.6em; 
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
a.logo {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2.8rem;

}
header ul {
    display: flex;
    gap: 2.2em;
    
}
header ul li a {
    color: black;
}

a.active {
    text-decoration: underline;
}
/* Hero Section */

section.hero {
    text-align: center;
}

h1 {
    font-size: 3.2rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

p.subhead {
    font-size: 2rem;

}

.cta-btns {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-top: 3em;
}

.phone {
    width: 90%;
    margin-top: 5em;
    position: relative;
    z-index: 2;
}

/* Features section: tilt effect via TRANSFORMS */
section.features {
    background: var(--primary-color);
    color: white;
    /* this addes the background with a slant */
    transform: skewY(12deg) translateY(-8em);
}

section.features .wrapper {
    /* now we have to correct all the objects being 'skewed' */
    transform: skewY(-12deg)
}

section.features .wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 3em;
    padding: 5em 0 10em;
}

section.features svg {
    width: 3.5rem;
    margin-left: -.15em;
}

section.features strong {
    display: flex;
    flex-direction: column;
    font-size: 2.6rem;
    gap: 0.2em;
}
/* Testimonials Section */
h2 {
    font-size: 2.8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 300;
}
.testimonial-quote p {
    margin-bottom: 2em;
}

.author-pic {
    /* images will appear too large b/c the width is not 100%
    based on container; 
    width: 100% makes the img 'FLUID' based on container */
    width: 100%;
    border-radius: 1.2em;
    height: 17.7em;
    /* adding height introduces 'distortion' 
    object-fit: cover FIXES it*/
    object-fit: cover;
    margin-bottom: 2em;
}

.author strong {
    font-size: 2rem;
    display: block;
}

.author a {
    color: black;
}

ul.social-nav {
    display: flex;
    gap: 1em;
    margin-top: 2em;


}

ul.social-nav svg {
    width: 3rem;
}

/* Footer Section */

footer {
    background: #ededed; 
    padding: 1.6em 0;
    margin-top: 5em;
}

.footer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer a {
    color: black;

}

nav.footer-nav ul, nav.secondary-nav ul {
    display: flex;
    gap: 2em;
}

nav.footer-nav ul {
    justify-content: right;
}
nav.secondary-nav ul {
    margin-top: 4em;
}

nav.secondary-nav ul li a {
    color: #363636;
    /* color: red; */
    text-decoration: underline;
    font-size: 1.4rem;
}
/* Media Queries Tablet */
@media only screen and (min-width: 700px) {

    .header-cta {
        /* note: for mobile, we set the display: none; on the 
        CTA button; now we want it to display but also to inherit the 
        settings from it's parent container; then we need to style it */
        display: inherit;
        color:white;
        font-size: 1.6rem;
        font-weight: bold;
        background-color: var(--primary-color);
        padding: .5em .7em;
        border-radius: .3em;
    }

    .hero .wrapper {
        display: flex;
        justify-content: space-between;
        gap: 3em;
    }
    section.hero {
        text-align: left;

    }

    h1 {
        font-size: 5.1rem;
        line-height: 105%;
    }

    .hero .right-col {
        /* this is trickster code: we want the phone image to show
        up in the right col, but it's size is quite large compared to 
        the mobile view and we don't want it to display off screen; 
        we use position:relative in the 'Parent Container' to absolutely position the image following; setting a width on the image gives it the size we want and 'OVERFLOW:hidden' keeps it from creating scroll bars on the tablet and makes it look great */
        position: relative;
        width: 500px;
        height: 600px;
        overflow: hidden;
    }

    .phone {
        position: absolute;
        left: 0;
        width: 440px;
    }

    .cta-btns {
        justify-content: left;
    }

    /* Features Section: note the skew */

    section.features {
        transform: skewY(7deg) translateY(-8em);
    }
    section.features .wrapper {
        transform: skewY(-7deg);
    }

    section.features:before {
        content: "";
        position: absolute;
        background: url('../assets/graphic.svg') no-repeat;
        /* at this point we don't see it b/c it has to have W x H */
        width: 205px;
        height: 80px;
        bottom: -30px;
        left: 10%;
    }

    section.features .wrapper ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        padding: 7em 0 12em;

    }
    /* this targets the last list item in the container that has the grid specified and establishes that the col will span from 
    1 - 3: note this type of style was also achieved with flex box and a complicated flex: 1 and flex-basis setting, but this seems easier */
    section.features .wrapper ul li:last-of-type {
        grid-column: 1 / 3;
    }

    /* Testimonials Section */

    .testimonial-info {
        display: flex;
        gap: 2em;
    }
    /* now that this container is set to flex
    we need to set each col to same size */
    .author-pic, .author {
        flex: 1;

    }

    .author-pic {
        margin: 0;
    }

    .author {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    

}
    /* Media query for Desktop */
@media only screen and (min-width:950px) {
    .wrapper {
        max-width: 1000px;
        margin: 2em auto;
    }
    .phone {
        /* position: absolute; */
        width: 500px;
        left: -100px;
    }
    .hero .right-col {
        width: 500px;
        height: 600px;
        /* need to reset the overflow here */
        overflow: inherit;
    }

    /* Feature Section */
    section.features .wrapper ul {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        height: 300px;

    }
    section.features .wrapper ul li:last-of-type {
        /* here we reset the col in the grid so it 
        stops spanning from col 1 / 3 */
        grid-column: auto;
        align-self: end;
    }
    section.features .wrapper ul li:nth-of-type(2) {
        /* here we select the 2nd 'card' which is a UL-&gt;LI
        and align it to the center */
        align-self: center;
    }

    section.features:before {
        left: 20%;
        /* this positions the graphic more 
        to the right in this query */
    }

    /* Testimonials Section */

    .testimonial {
        display: flex;
        gap: 4em;
        margin: 12em 0;

    }
    /* this code could be combined as .testimonial-quote, .testimonial-info {flex: 1;} 
    but I wanted to see that this setting has an effect on both so each element/child in the flexbox has 'equal' sizing */
    .testimonial-quote {
        flex: 1;
    }
    .testimonial-info {
        flex: 1;
    }

    .testimonial h2 {
        margin-top: 0;
        text-align: right;
    }
    .testimonial p {
        margin-top: 0;
        text-align: right;
    }

}

/* Animations; for all device size */
/* steps to animate: 
1- choose the class to target; use keyword 'animation:' with nameofAnimation
2- pass the animation cmd parameters you want such as
'alternate-reverse', infinite and ease-in-out.
3- use the @keyframes command passing it the name of the animation you are keying.
4- pass the @keyframes cmd from{} and to{}
5- use the transform command inside each of the from and to */

.flare {
    animation: subtleMove2 2s alternate-reverse infinite ease-in-out
}


.phone {
    animation: subtleMove 2s alternate-reverse infinite ease-in-out

}

@keyframes subtleMove {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(15px)
    }
}

.flare, .flare2, .recording  {
    animation: subtleMove2 2s alternate-reverse infinite ease-in-out
}
@keyframes subtleMove2 {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(15px)
    }
}

.features .wrapper ul li, h1, .subhead, .cta-btns {
    animation: fadeInUp 1s forwards;
    opacity: 0;
}

/* we add delays here */
.subhead {animation-delay: .5s; }
h1 {animation-delay: .3s; }
.cta-btns {animation-delay: .8s; }

.features .wrapper ul li:nth-of-type(1) {
    animation-delay: 1s; 
}
.features .wrapper ul li:nth-of-type(2) {
    animation-delay: 1.2s; 
}
.features .wrapper ul li:nth-of-type(3) {
    animation-delay: 1.4s; 
}



@keyframes fadeInUp {
    from {
        transform: translateY(30px)
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</pre></body></html>