/* Match the compact demo windows: 16px minimum gutters, growing symmetrically
 * once content reaches 26rem. Desktop widths and grids are deliberately unchanged. */
@media (max-width: 767px) {
    .home-page-slideshow {
        --home-mobile-content-width: min(26rem, calc(100vw - 2rem));
        --home-mobile-card-gap: 1rem;
        /* The stage's side padding (voice-caption.css; index.html below 640px). */
        --home-stage-gutter: 1rem;
    }

    /* Slides scroll, so they clip at their own edge. Inside the stage padding that
     * edge cut the card shadows into a faint line, and the launch demo's focus ring
     * overhung it by a fraction of a pixel, which showed a horizontal scrollbar.
     * Stretch each slide over the gutter and pad it back: the layout is unchanged,
     * but the clip edge is now the screen edge. */
    .home-page-slideshow .home-slideshow-content > .absolute.inset-0 {
        inset-inline: calc(-1 * var(--home-stage-gutter));
        padding-inline: var(--home-stage-gutter);
    }

    .home-page-slideshow .home-hero-slide-content .hero-copy-column,
    .home-page-slideshow .home-compact-info-slide > .home-story-panel,
    .home-page-slideshow .home-app-slide-wrapper,
    .home-page-slideshow .home-beginning-content {
        width: var(--home-mobile-content-width);
        max-width: var(--home-mobile-content-width);
        margin-inline: auto;
        padding-inline: 0 !important;
        flex-shrink: 0;
    }

    .home-page-slideshow .hero-entry-actions,
    .home-page-slideshow .home-pro-story-panel > .flex {
        flex-direction: column;
    }

    .home-page-slideshow .home-compact-info-slide,
    .home-page-slideshow .home-beginning-slide {
        overflow-y: auto;
        align-items: safe center;
    }

    .home-page-slideshow .home-compact-info-slide > .home-story-panel,
    .home-page-slideshow .home-beginning-content {
        max-height: none;
        margin-block: auto;
        padding-block: 0.75rem;
    }

    .home-page-slideshow .home-how-it-works-steps,
    .home-page-slideshow .home-modes-story-panel .home-mode-card-grid,
    .home-page-slideshow .home-privacy-story-panel .home-story-spaced-grid {
        gap: var(--home-mobile-card-gap) !important;
    }

    .home-page-slideshow .home-input-options-panel .home-mode-card-grid > :last-child {
        grid-column: 1 / -1;
        width: calc((100% - var(--home-mobile-card-gap)) / 2);
        justify-self: center;
    }

    /* Fractional translate/scale settling can make text twitch by a pixel.
     * Preserve the entry fades, but keep mobile text on its final coordinates. */
    .home-page-slideshow .home-hero-slide-content :is(.hero-entry-headline, .hero-entry-description, .hero-entry-actions) {
        transform: none !important;
    }

    .home-page-slideshow .hero-load-gate-ready :is(.hero-entry-headline, .hero-entry-description, .hero-entry-actions) {
        animation-name: homeMobileFade;
    }

    .home-page-slideshow .home-how-step {
        transform: none !important;
        transition-property: opacity !important;
        display: grid;
        /* Rows hug their content so the circle→icon and icon→heading gaps match
         * and the leftover height splits evenly above the circle and below the text. */
        grid-template-rows: 1.25rem 1.75rem auto auto;
        row-gap: 0.25rem;
        align-content: center;
        justify-content: stretch;
        justify-items: center;
        align-items: center;
        min-height: 9rem;
        padding: 0.75rem !important;
    }

    .home-page-slideshow .home-how-step-number,
    .home-page-slideshow .home-how-step > div {
        margin: 0 !important;
    }

    .home-page-slideshow .home-how-step-number {
        width: 1.25rem;
        height: 1.25rem;
        margin-bottom: 0.2rem !important;
    }

    .home-page-slideshow .home-how-step > div { height: 1.75rem !important; }
    .home-page-slideshow .home-how-step img { width: 1.55rem !important; height: 1.55rem !important; }
    .home-page-slideshow .home-how-step > div > i { font-size: 1.55rem; }
    .home-page-slideshow .home-how-step h3 { margin: 0 !important; font-size: 0.92rem; line-height: 1rem; }
    .home-page-slideshow .home-how-step p { margin: 0.6rem 0 0 !important; font-size: 0.66rem !important; line-height: 1.2; }

    /* Mode and input cards: the heading kept its desktop bottom margin and line
     * leading, which left more space under the title than above the icon. Trimming
     * the bottom padding nudges the content down so the gap under the title's
     * baseline matches the gap above the icon. */
    .home-page-slideshow :is(.home-voice-modes-panel .home-story-compact-card, .home-input-options-panel .home-story-flat-card) {
        padding-bottom: 0.45rem !important;
    }

    .home-page-slideshow :is(.home-voice-modes-panel .home-story-compact-card, .home-input-options-panel .home-story-flat-card) h3 {
        margin: 0 !important;
        line-height: 1.1;
    }

    /* The logos component has its own page gutters; remove that nested inset
     * only inside the slideshow so its outer edges match the other panels. */
    .home-page-slideshow .home-app-slide-wrapper > section > .relative.max-w-7xl {
        padding-inline: 0 !important;
    }

    .home-page-slideshow .home-app-slide-wrapper .logo-grid {
        padding: 0 !important;
    }
}

@media (max-width: 639px) {
    .home-page-slideshow {
        --home-stage-gutter: 0.75rem;
    }
}

@keyframes homeMobileFade {
    from { opacity: 0; }
    to { opacity: 1; }
}