* {
    box-sizing: border-box;
}
html {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";;
}
body {
    margin: 0;
    background-color: rgba(249,250,251,1);
}
a {
    text-decoration: none;
}
h1, h2, p, ul, ol {
    margin: 0;
    padding: 0;
}

nav {
    background-color: rgba(49,46,129,1);
    color: rgba(255,255,255,1);
}
nav div {
    padding: 0 1rem;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 4rem;
}
nav div h1 {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-transform: uppercase;
}

main {
    padding: 2rem 1rem;
    max-width: 80rem;
    margin: 0 auto;
}
article {
    max-width: 56rem;
    margin: 0 auto;
}
.image-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}
.image-holder img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
article h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}
article .intro {
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
    color: rgba(55,65,81,1);
}

.key-takeaways {
    padding: 1.5rem;
    background-color: rgba(224,231,255,1);
    border-radius: .5rem;
    margin-bottom: 2rem;
}
.key-takeaways h2 {
    color: rgba(55,48,163,1);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}
.key-takeaways ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.key-takeaways ul li {
    display: flex;
    align-items: flex-start;
}
.key-takeaways ul li:not(:first-child) {
    margin-top: calc(.75rem * calc(1 - 0));
    margin-bottom: calc(.75rem * calc(0));
}
.key-takeaways ul li svg {
    width: 1.5rem;
    color: rgba(79,70,229,1);
    margin-right: .5rem;
}

.content {
    max-width: none;
}
.content h2 {
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 2.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(229,231,235,1);
    margin-bottom: 1.5rem;
}
.card {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    background-color: rgba(255,255,255,1);
    border-radius: .5rem;
    margin-bottom: 2rem;
}
.not-list {
    list-style: none;
    margin-bottom: 2rem;
}
.not-list li {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .scenarios{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
.scenarios {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.scenarios .card {
    margin: 0;
}

.card-container {
    display: flex;
    align-items: center;
}
.card-container:not(:last-child) {
    margin-bottom: 1rem;
}
.card-list-image {
    padding: .5rem;
    background-color: rgba(224,231,255,1);
    border-radius: 100%;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-list-image svg {
    width: 1.5rem;
    color: rgba(79,70,229,1);
}
.card-container h3 {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0;
}

footer {
    color: rgba(255,255,255,1);
    background-color: rgba(31,41,55,1);
    margin-top: 3rem;
}
.footer-container {
    padding: 3rem 1rem;
    max-width: 80rem;
    margin: 0 auto;
}
.footer-links {
    text-align: center;
}
.footer-links a {
    color: rgba(209,213,219,1);
    text-decoration: inherit;
}
.footer-links a:hover {
    color: white;
}
.footer-links span {
    margin: 0 .5rem;
    color: rgba(209,213,219,1);
}