/* The section paints edge to edge. --app-gutter is the track's side padding
   (and where the first and last cards rest): 48px of peek on wider screens,
   the shared --page-gutter on phones, always clear of a landscape notch. The
   card fills whatever the two gutters leave, capped at 1008px. */
.home-apps {
    --app-gutter: max(48px, calc((100vw - 1008px) / 2), env(safe-area-inset-left), env(safe-area-inset-right));
    --app-card-width: min(1008px, calc(100vw - 2 * var(--app-gutter)));
    padding: 88px 0 42px;
    overflow: hidden;
    background: #1d1d1f;
    color: #f5f5f7;
}
.home-apps-heading {
    max-width: 1008px;
    margin: 0 auto 42px;
    padding: 0;
}
.home-apps-heading h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.035em;
}
.home-apps-heading > p { margin: 0; color: #a1a1a6; font-size: 18px; }
.home-apps-track {
    position: relative;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    margin: 0;
    padding: 0 var(--app-gutter) 12px;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.home-apps-track::-webkit-scrollbar { display: none; }
.home-apps-track:focus-visible { outline: 2px solid #2997ff; outline-offset: -4px; }
.home-app-slide {
    flex: 0 0 var(--app-card-width);
    min-width: 0;
    scroll-snap-align: center;
}
.home-app-card {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    background: #000;
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    column-gap: 32px;
    padding-inline: 56px;
    align-items: center;
}
/* A native link covers the card; the App Store badge stays independently clickable. */
.home-app-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.home-app-card-link:focus-visible { outline: 2px solid #2997ff; outline-offset: -4px; }
.home-app-copy { position: relative; min-width: 0; padding-block: 54px; }
.home-app-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.home-app-icon { display: block; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #333336; border-radius: 10px; object-fit: cover; }
.home-app-identity h3 { margin: 0; color: #f5f5f7; font-size: 17px; line-height: 1.3; font-weight: 600; }
.home-app-headline { margin: 0 0 18px; color: #f5f5f7; font-size: 34px; line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.home-app-description { max-width: 34ch; margin: 0; color: #a1a1a6; font-size: 16px; line-height: 1.5; }
.home-app-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 24px; }
.home-app-links a { color: #2997ff; font-size: 16px; line-height: 1.5; text-decoration: none; }
.home-app-links a:hover { text-decoration: underline; }
.home-app-links a:focus-visible { outline: 2px solid #2997ff; outline-offset: 5px; border-radius: 2px; }
.home-app-links .home-app-store-badge { position: relative; z-index: 3; display: inline-block; color: inherit; line-height: 0; text-decoration: none; }
.home-app-store-badge img { display: block; width: 120px; height: 40px; margin-top: 14px; }
.home-app-store-badge:hover { opacity: .85; }
.home-app-links span { display: inline-block; margin-left: 3px; }
.home-app-visual { position: relative; align-self: stretch; min-width: 0; display: flex; justify-content: center; pointer-events: none; }
/* Keep the cropped phone from determining the desktop card's height. */
.home-app-visual picture { position: absolute; top: 44px; display: block; width: min(360px, 85%); }
.home-app-phone { display: block; width: 100%; height: auto; }
.home-apps-controls { max-width: 1008px; margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.home-apps-controls[hidden] { display: none; }
.home-apps-indicators { order: 0; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #272729; }
.home-apps-indicator { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: width .2s ease; }
.home-apps-indicator[aria-current="true"] { width: 56px; }
.home-apps-dot { position: relative; display: block; width: 7px; height: 7px; overflow: hidden; border-radius: 999px; background: #a1a1a6; transition: width .2s ease, background .2s ease; }
.home-apps-indicator[aria-current="true"] .home-apps-dot { width: 40px; background: #737377; }
.home-apps-progress { position: absolute; inset: 0; border-radius: inherit; background: #f5f5f7; transform: scaleX(0); transform-origin: left; }
.home-apps-indicator[aria-current="true"] .home-apps-progress { transform: scaleX(var(--app-progress, 0)); }
.home-apps-indicator:hover .home-apps-dot { background: #d2d2d7; }
.home-apps-playback { order: 1; flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #272729; color: #f5f5f7; cursor: pointer; transition: background .15s; }
.home-apps-playback:hover { background: #3a3a3c; }
.home-apps-play-icon, .home-apps-playback[data-paused] .home-apps-pause-icon { display: none; }
.home-apps-playback[data-paused] .home-apps-play-icon { display: block; }
.home-apps-indicator:focus-visible, .home-apps-playback:focus-visible { outline: 2px solid #2997ff; outline-offset: 3px; }
.home-apps-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Silver phones sit on a soft studio halo drawn entirely in CSS. The shared
   gallery rules below keep the three extra tools aligned with the six apps. */
.home-apps--more-tools .home-app-card {
    background: radial-gradient(ellipse at 73% 42%, #d1d1d1 0%, #bdbdbd 28%, #a5a5a5 62%, #909090 100%);
}
.home-apps--more-tools .home-app-identity h3,
.home-apps--more-tools .home-app-headline { color: #161617; }
.home-apps--more-tools .home-app-icon { border-color: #747474; }
@media (max-width: 1104px) {
    .home-apps-heading, .home-apps-controls {
        margin-left: max(48px, env(safe-area-inset-left));
        margin-right: max(48px, env(safe-area-inset-right));
    }
    .home-app-card { padding-inline: 40px; }
    .home-app-headline { font-size: 30px; }
}
@media (max-width: 767px) {
    .home-apps { --app-gutter: max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right)); padding-top: 58px; padding-bottom: 28px; }
    .home-apps-heading {
        margin-bottom: 30px;
        margin-left: max(var(--page-gutter), env(safe-area-inset-left));
        margin-right: max(var(--page-gutter), env(safe-area-inset-right));
    }
    .home-apps-heading h2 { max-width: 16ch; }
    .home-apps-heading > p { font-size: 16px; }
    .home-apps-track { gap: 16px; }
    .home-app-card { display: flex; height: 640px; min-height: 0; padding-inline: 0; flex-direction: column; align-items: flex-start; border-radius: 22px; }
    .home-app-copy { flex-shrink: 0; width: 100%; padding: 30px 28px 0; }
    .home-app-identity { gap: 10px; margin-bottom: 22px; }
    .home-app-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 9px; }
    .home-app-identity h3 { font-size: 15px; }
    .home-app-headline { max-width: 22ch; margin-bottom: 12px; font-size: 28px; }
    .home-app-description { max-width: 34ch; font-size: 15px; }
    .home-app-links { margin-top: 18px; gap: 12px 24px; }
    .home-app-links a { font-size: 15px; }
    /* Follow the copy so wrapped text cannot collide with the larger phone. */
    .home-app-visual { position: relative; inset: auto; flex-shrink: 0; width: 100%; }
    .home-app-visual picture { position: static; width: 84%; max-width: none; }
    .home-apps-controls {
        margin-top: 16px;
        margin-left: max(var(--page-gutter), env(safe-area-inset-left));
        margin-right: max(var(--page-gutter), env(safe-area-inset-right));
    }
}
@media (max-width: 359px) {
    .home-apps-controls { gap: 8px; }
    .home-apps-indicators { padding: 0 8px; }
    .home-apps-indicator { width: 28px; height: 44px; }
    .home-apps-indicator[aria-current="true"] { width: 56px; }
    .home-apps-playback { width: 44px; height: 44px; }
    .home-app-copy { padding-left: 22px; padding-right: 22px; }
    .home-app-headline { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-apps-indicator, .home-apps-dot, .home-apps-playback { transition: none; }
}