/* 1 · Hero */
.hero {
    padding: 96px 24px 0;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 64px;
}

.hero h1 {
    font-size: 4.5rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-primary);
}

.hero-sub {
    max-width: 640px;
    font-size: 1.3125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.hero-cta {
    width: 100%;
    max-width: 440px;
}

.hero-shot {
    max-width: 1120px;
    margin: 0 auto;
}

.hero-shot img {
    width: 100%;
}

/* The exports are opaque (their corners carry the colour behind them in Figma), so the shapes are
   cut with the Figma radii as a share of the image: 14 px on 1122x702, 44 px on 291x630. */
.hero-shot-wide img {
    border-radius: 1.248% / 1.994%;
}

.hero-shot-phone img {
    border-radius: 15.12% / 6.98%;
}

/* Desktop shows the web inbox, mobile the iOS inbox */
.hero-shot-phone {
    display: none;
}

@media (max-width: 768px) {
    .hero {
        padding: 53px 20px 0;
    }

    .hero h1 {
        font-size: 2.625rem;
    }

    .hero-sub {
        font-size: 1.0625rem;
    }

    .hero-shot-wide {
        display: none;
    }

    .hero-shot-phone {
        display: block;
        width: 283px;
        max-width: 100%;
        margin: 0 auto;
    }
}