.stoplight-hero {
    margin: calc(var(--padding)*1.5) 0 0 0
}

.stoplight-hero h1 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.25em;
    margin: 0 0 15px
}

a.hero-button {
    background: var(--blue);
    border-radius: 5px;
    color: var(--white);
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5em;
    margin: 30px 0 15px;
    padding: 11px 20px 10px
}

a.hero-button:hover {
    background: rgba(var(--blue-rgb), .8)
}

.stoplight-hero.subpage {
    margin: var(--padding) 0 calc((var(--padding)/2)*-1) 0
}

.stoplight-hero.subpage h1 {
    border-bottom: 1px solid var(--border);
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    padding-bottom: 30px
}

@media screen and (max-width:1080px) {
    .stoplight-hero h1 {
        font-size: 42px
    }
}

@media screen and (max-width:767px) {
    .stoplight-hero h1 {
        font-size: 36px
    }
}

@media screen and (max-width:550px) {
    .stoplight-hero h1 {
        font-size: 28px
    }
}

.stoplight-hero p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4em;
    margin: 0;
    opacity: .85
}