/* Drive To App pages: additions to ../css/style.css
   Copy. The master is in the DriveToApp repo, outputs/app_assets/website/: edit it there and run
   outputs/app_assets/sync-website.sh. */

.page-header {
    padding: 140px 0 70px;
}

.page-header .app-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 1.5rem;
}

.policy,
.prose {
    max-width: 800px;
    color: #333;
    line-height: 1.7;
}

.policy h3,
.prose h3 {
    font-size: 24px;
    margin: 2.5rem 0 1rem;
}

.policy li,
.prose li {
    margin-bottom: 0.5rem;
}

.policy code,
.prose code {
    color: #633991;
}

.summary {
    background-color: #faf6fb;
    border-left: 4px solid #633991;
    padding: 1.25rem 1.5rem 0.5rem;
    margin: 2rem 0;
}

.step-number {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: #633991;
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}

@media (max-width:767px) {
    .page-header {
        padding: 110px 0 50px;
    }
}

/* The site's grey body text and pink lead are too faint for a policy */
.policy p,
.prose p,
.policy li,
.prose li {
    color: #555;
}

.policy p.lead {
    color: #633991;
    font-size: 1.2rem;
}

.feature-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.phone-shot {
    max-height: 560px;
}

.phone-shot-small {
    max-height: 380px;
}

.store-soon {
    opacity: 0.85;
}

.section-title small {
    letter-spacing: 1px;
}

.prose h4 {
    color: #633991;
    font-size: 19px;
    margin-top: 1.75rem;
}