/* Phone layout polish (loaded last so it wins over style/wow/experience rules).
   Goals: identical card frames, quieter backgrounds, even vertical rhythm, wider cards. */
@media (max-width: 768px) {
    /* Identical frames: the rotating border light freezes at a different angle on each card on
       touch screens, so one card looked selected. Use one calm brand-tinted border instead. */
    .baby-card::before { display: none; }
    #gerber-side .cards-side > .baby-card,
    #cerelac-side .cards-side > .baby-card {
        border: 1px solid color-mix(in srgb, var(--accent) 24%, white);
        box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 45%, transparent),
                    inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    /* Quieter background: the drifting bubble rings landed behind the logos and cards; the soft
       brand gradient of each section stays. */
    .brand-section::before,
    .brand-section::after { display: none; }

    /* Header: less empty space, rotating word in deeper colors so it never looks washed out. */
    .hero-header { margin: 14px auto 14px !important; }
    .hero-sub { margin-bottom: 10px; }
    .hero-title { line-height: 1.25; }
    .hero-header .hero-title .hero-title-changing span {
        background-image: linear-gradient(90deg, #c2185b, #7c3aed, #0b6fb3, #c2185b);
    }

    /* Even rhythm inside each brand: logo, 12px, age notice, 16px, cards. */
    .brand-section { padding: 18px 16px 22px; min-height: 0; }
    .logo-box { height: 80px; }
    .brand-header { margin-bottom: 10px; }
    .age-badge--section { margin: 0 auto 16px; }

    /* Wider cards with a consistent 12px gap; cap so they stay balanced on larger phones. */
    .cards-side { gap: 12px; }
    .baby-card {
        width: min(calc((100vw - 44px) / 2), 180px);
        padding: 8px;
        border-radius: 20px;
    }
    .baby-card .image-frame { border-radius: 14px; }
    .card-label { margin-top: 8px; padding: 7px 10px; }
}