/* App promotion and /apps: real store imagery, with no fixed-height crops. */
.app-promo {
    margin: 0;
    background: #fff0f5;
    color: #261820;
    scroll-margin-top: 90px;
}

.app-promo-inner, .apps-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px) 28px;
}

.app-promo-copy, .apps-intro > div, .app-preview-pair, .app-platform-card {
    min-width: 0;
}

.app-eyebrow {
    color: #9d174d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.7;
}

.app-promo h2, .apps-page h1, .apps-page h2, .apps-page h3 {
    font-family: var(--font-display);
    line-height: 1.06;
    margin: 12px 0 22px;
}

.app-promo h2 {
    font-size: clamp(34px, 4.3vw, 54px);
}

.app-promo h2 em, .apps-page h1 em {
    color: #a91451;
    font-style: normal;
}

.app-promo-copy > p:not(.app-eyebrow), .app-lead {
    max-width: 540px;
    line-height: 1.8;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

.app-downloads a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 72px;
    padding: 12px 20px;
    border: 1px solid #32242b;
    border-radius: 9px;
    background: #171115;
    color: white;
    line-height: 1.45;
    transition: background .15s;
}

.app-downloads a:hover {
    background: #6d133c;
}

.app-downloads a > span {
    font-size: 11px;
}

.app-downloads strong {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    font-size: 19px;
}

.app-text-link {
    display: inline-block;
    padding: 10px 0;
    color: #8d1047;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.app-preview-pair, .app-platform-screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
}

.app-preview-pair {
    width: 100%;
    max-width: 370px;
    justify-self: center;
    padding-bottom: 20px;
}

.app-preview-pair figure, .app-platform-screens figure {
    min-width: 0;
    margin: 0;
}

.app-preview-pair figure:nth-child(2) {
    margin-top: 28px;
}

.app-preview-pair img, .app-platform-screens img {
    display: block;
    width: 100%;
    height: auto;
    border: 5px solid #241b21;
    border-radius: 20px;
    background: white;
    box-shadow: 0 14px 28px #52233b18;
}

.app-preview-pair figcaption, .app-platform-screens figcaption {
    margin-top: 12px;
    color: #59424e;
    font-size: 11px;
    line-height: 1.65;
    text-align: center;
}

.apps-page {
    max-width: 1240px;
    margin: auto;
    padding: 0 28px 64px;
    color: #261820;
}

.apps-intro {
    max-width: none;
    padding: 60px 0;
    border-bottom: 1px solid #ead9df;
}

.apps-page h1 {
    font-size: clamp(42px, 6vw, 76px);
}

.apps-page h2 {
    font-size: clamp(32px, 4vw, 48px);
}

.apps-page h3 {
    font-size: 28px;
}

.app-small {
    max-width: 620px;
    color: #65505c;
    font-size: 12px;
    line-height: 1.8;
}

.apps-benefits, .apps-platforms {
    padding: 40px 0;
}

.app-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 30px;
}

.app-benefit-grid article {
    padding: 24px;
    border-radius: 12px;
    background: #fff0f5;
}

.app-benefit-grid article > span {
    color: #a91451;
    font-size: 12px;
    font-weight: 800;
}

.app-benefit-grid p, .app-platform-card > p, .apps-help p {
    font-size: 14px;
    line-height: 1.8;
}

.app-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 30px 0 24px;
}

.app-platform-card {
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid #e1cdd7;
    border-radius: 14px;
    background: #fffafc;
}

.app-platform-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-platform-heading > img {
    width: 64px;
    height: 64px;
    flex: none;
    border: 1px solid #e1cdd7;
    border-radius: 15px;
}

.app-platform-heading h3, .app-platform-heading p {
    margin: 3px 0;
}

.app-platform-screens {
    max-width: 360px;
    margin: 26px auto 12px;
}

.apps-help {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 36px;
    margin-top: 25px;
    padding-top: 35px;
    border-top: 1px solid #ead9df;
}

.apps-help details {
    padding: 18px 0;
    border-bottom: 1px solid #ead9df;
}

.apps-help summary {
    padding: 5px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.apps-help p a {
    color: #8d1047;
    text-decoration: underline;
}

.apps-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .app-promo-inner, .apps-intro, .apps-help {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-promo-copy {
        max-width: 540px;
        margin: auto;
    }

    .app-preview-pair {
        max-width: 330px;
    }

    .apps-intro {
        padding: 36px 0;
    }

    .app-benefit-grid, .app-platform-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .apps-help {
        gap: 8px;
    }
}

@media (max-width: 420px) {
    .app-promo-inner {
        padding: 32px 20px;
    }

    .apps-page {
        padding: 0 20px 40px;
    }

    .app-downloads a {
        flex: 1 1 145px;
        padding: 12px 16px;
    }

    .app-preview-pair figure:nth-child(2) {
        margin-top: 16px;
    }


}