/* 5 · Projects + iOS */
.projects {
    padding: 120px 24px;
    background: var(--bg-canvas);
}

.projects .section-inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* The stage is a composition: shots and the notification are placed by share of its 1120x780 box
   and sized with container units, so all of it scales together. */
.stage {
    position: relative;
    aspect-ratio: 1120 / 780;
    container-type: inline-size;
}

.stage > img,
.stage > div > img,
.stage-overview,
.stage-ios {
    position: absolute;
}

.stage-overview {
    top: 0;
    left: 0;
    width: 83.929%;
}

.stage-ios {
    top: 19.231%;
    left: 74.018%;
    width: 25.982%;
    z-index: 2;
}

.stage-overview img,
.stage-ios img {
    width: 100%;
}

/* The exports are opaque: cut the corners with the Figma radii (14 px on 940x588, 44 px on 291x630). */
.stage-overview img {
    border-radius: 1.489% / 2.381%;
}

.stage-ios img {
    border-radius: 15.12% / 6.98%;
}

.push {
    position: absolute;
    top: 31.026%;
    left: 60.625%;
    z-index: 3;
    display: flex;
    gap: 1.071cqw;
    width: 31.964%;
    padding: 1.161cqw 1.25cqw 1.25cqw 1.429cqw;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 1.786cqw;
}

.push-icon {
    flex: none;
    width: 2.143cqw;
    height: 3.393cqw;
    overflow: hidden;
    background: var(--mark-unlit);
    border-radius: 0.804cqw;
}

.push-icon svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0.625cqw;
}

.push-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.179cqw;
}

.push-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.536cqw;
    font-size: 1.25cqw;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

.push-top span {
    font-size: 1.161cqw;
    font-weight: 400;
    color: var(--text-secondary);
}

.push-body {
    font-size: 1.25cqw;
    line-height: 1.3;
    color: var(--text-secondary);
}

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fact h3 {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

.fact p {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* The official Apple badge, unmodified: black in light mode, white in dark mode (Apple's SVGs, 119.66 x 40). */
.app-store-badge {
    align-self: flex-start;
    margin-top: 10px;
    line-height: 0;
}

.app-store-badge img {
    width: auto;
    height: 40px;
}

@media (max-width: 960px) {
    .facts {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .projects {
        padding: 66px 20px;
    }

    .projects .section-inner {
        gap: 36px;
    }

    .fact h3 {
        font-size: 1.0625rem;
    }
}