@media (max-width: 850px) {

    .hero {
        grid-template-columns: 1fr;
        gap: 55px;
        min-height: auto;
        padding-top: 50px;
        padding-bottom: 75px;
    }

    .hero-visual {
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
    }

    .brand-principles {
        grid-template-columns: 1fr;
    }

    .principle {
        min-height: auto;
    }

    .principle + .principle {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .section-dark,
    .product-truth,
    .pain-points,
    .contact {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-social {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        text-align: center;
    }

    .contact-social-copy h3 {
        white-space: normal;
    }

    .contact-social-copy h3 em {
        display: block;
    }

    .social-cta-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-dark {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .system-cards {
        grid-template-columns: 1fr 1fr;
    }

    .system-card:nth-child(n) {
        transform: none;
    }

    .system-card:nth-child(even) {
        transform: translateY(16px);
    }

    .system-principle {
        margin-top: 70px;
    }
}

@media (max-width: 560px) {

    .product-truth,
    .pain-points,
    .system {
        width: 100%;
        padding-inline: 14px;
    }

    .hero-actions {
        align-items: flex-start;
        gap: 8px;
    }

    .hero-visual {
        min-height: 390px;
        padding: 26px;
    }

    .visual-note {
        font-size: 1.45rem;
    }

    .visual-note strong {
        font-size: 2.2rem;
    }

    .plan-grid {
        gap: 9px;
        margin-top: 16px;
    }

    .plan-tile {
        min-height: 95px;
        padding: 12px;
        font-size: .7rem;
        gap: 10px;
    }

    .plan-letter {
        font-size: 1.25rem;
    }

    .system-cards {
        grid-template-columns: 1fr;
    }

    .system-card:nth-child(n) {
        transform: none;
    }

    .contact {
        gap: 32px;
    }

    .contact-social {
        padding-top: 22px;
    }

    .launch-signup {
        padding: 24px;
    }
}

@media (min-width: 851px) and (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {

    .hero {
        grid-template-columns: 1fr;
        gap: 55px;
        min-height: auto;
        padding-top: 50px;
        padding-bottom: 75px;
    }

    .hero-visual {
        width: 100vw;
        max-width: none;
        min-height: 390px;
        margin-inline: calc(50% - 50vw);
        padding: 26px;
    }
}