/* Background-running guide only. The desktop layout (up to six screenshot columns) is untouched. */
@media (max-width: 767px) {
    .background-running-page { background: #f5f5f5; }

    /* Keep navigation usable, including 320px phones. */
    .background-running-page #site-nav > div:first-child { padding-inline: 16px; }
    .background-running-page #header-logo { height: 20px; max-width: 86px; }
    .background-running-page #lang-toggle { padding-inline: 8px; gap: 0; }
    .background-running-page #lang-toggle svg { display: none; }
    .background-running-page #mobile-menu-btn { margin-left: 8px; }

    /* The title block sits on the page background instead of a second white band. */
    .background-running-page .background-running-hero { padding: 20px 16px 0; background: #f5f5f5; }
    .background-running-page .background-running-hero > div { max-width: 640px; padding: 0; }
    .background-running-page .background-running-hero h1 { font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: 0; color: #333; }
    .background-running-page .background-running-hero p { margin-top: 12px; max-width: none; font-size: 14px; line-height: 24px; color: #666; }

    /* Six screenshots read as one 2 x 3 overview instead of a 4000px scroll. */
    .background-running-page .background-running-main { padding: 20px 0 40px; background: #f5f5f5; }
    .background-running-page .background-running-main > div { max-width: 640px; padding: 0 16px; }
    /* 截图自带深色边框，和桌面版一样不再套第二层白卡片：
       行距（32px）+ 标题上方留白负责分组，标题与自己的截图保持 8px 间距。 */
    .background-running-page .background-running-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .background-running-page .background-running-steps > li {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        /* 标题轨可伸缩、截图轨自适应：多余空间全部留在标题上方，
           因此不论行内其它标题多长，标题总是贴着自己的截图。 */
        grid-template-rows: 1fr auto;
        /* 长单词（如德语 Hintergrundverhalten）不得撑宽本列，因此允许收缩。 */
        min-width: 0;
    }
    .background-running-page .background-running-steps > li > p {
        display: flex;
        gap: 4px;
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        color: #333;
        overflow-wrap: break-word;
    }
    .background-running-page .background-running-steps > li > p > span:first-child { flex: none; margin-right: 0; }
    .background-running-page .background-running-steps > li > p > span:last-child { min-width: 0; }
    .background-running-page .background-running-steps > li > img { border: 0; border-radius: 12px; }

    .background-running-page .background-running-note { margin-top: 16px; padding: 14px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; }
    .background-running-page .background-running-note p { font-size: 14px; line-height: 24px; color: #666; }

    /* Match the compact centered mobile footer used on the homepage. */
    .background-running-page footer { padding: 28px 0 32px; border: 0; }
    .background-running-page footer > div { padding: 0 16px; }
    .background-running-page .site-footer-main { gap: 24px; margin-bottom: 0; }
    .background-running-page #footer-logo { height: 30px; }
    .background-running-page .site-footer-links { gap: 16px 20px; font-size: 13px; line-height: 22px; }
    .background-running-page .site-footer-links a[href="shop.html"] { display: none; }
    .background-running-page .site-footer-links a[href="support.html"] { flex-basis: 100%; text-align: center; }
    .background-running-page .site-footer-social { width: 100%; padding-top: 20px; border-top: 1px solid #272727; justify-content: center; gap: 20px; }
    .background-running-page .site-footer-social > .group:first-child > .absolute { left: 0; }
    .background-running-page .site-footer-social > .group:last-child > .absolute { right: 0; }
    .background-running-page .site-footer-main + div { display: none; }
    .background-running-page .site-footer-legal { margin-top: 40px; font-size: 12px; line-height: 22px; text-align: center; }
    .background-running-page .site-footer-policy { flex-wrap: wrap; justify-content: center; gap: 24px 40px; margin-top: 20px; }
    .background-running-page .site-footer-policy > * { margin: 0; }
    .background-running-page .site-footer-policy > :not([hidden]) ~ :not([hidden]) { margin: 0; }
    .background-running-page #icp-info { flex-basis: 100%; }
}

@media (max-width: 359px) {
    .background-running-page .background-running-steps { gap: 28px 10px; }
    .background-running-page .background-running-steps > li > p { font-size: 13px; line-height: 18px; }
    .background-running-page .site-footer-links { gap: 16px 12px; }
    .background-running-page .site-footer-social { gap: 14px; }
}