/* Introductory illustration; isolated from article and shared page styles. */
.route-flow {
    padding: 64px 0 72px;
    background: var(--bg-dark);
    scroll-margin-top: 100px;
}
.route-flow .section-header { margin-bottom: 24px; }
.route-flow .section-title { font-size: clamp(1.7rem, 3.5vw, 2.5rem); line-height: 1.5; }
.route-flow .section-title span { display: inline-block; }
.route-flow .section-header p { margin: 16px auto 0; max-width: 680px; color: var(--text-sub); }
.route-flow-figure { margin: 0; }
.route-flow-wide { width: 100%; height: auto; border-radius: 18px; }
.route-flow-mobile { display: none; }
.route-flow-figure figcaption { margin: 12px auto 0; color: var(--text-sub); font-size: 0.8rem; text-align: center; }
.route-flow-cta { margin-top: 28px; text-align: center; }
.route-flow-cta .btn { max-width: 100%; }
.route-flow-cta p { margin: 16px auto 12px; max-width: 660px; font-size: 0.8rem; color: var(--text-sub); }
.route-flow-detail { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 5px; font-size: 0.9rem; }
.route-flow a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

@media (max-width: 768px) {
    /* The flow takes priority over the tall home-screen image on mobile.
       Actual app screens remain in the feature and hourly-chart sections. */
    .has-route-flow .hero-device { display: none; }
    .has-route-flow .hero { min-height: 0 !important; }
    .has-route-flow .hero-content { padding-bottom: 32px; }
    .route-flow { padding: 40px 0 48px; }
    .route-flow .section-header { margin-bottom: 28px; }
    .route-flow-wide { display: none; }
    .route-flow-mobile { display: grid; gap: 12px; max-width: 480px; margin: 0 auto; }
    /* Reframe the two approved cards from the same image, without redrawing
       them or downloading multiple copies. The caution is accessible HTML. */
    .route-flow-panel { position: relative; overflow: hidden; aspect-ratio: 680 / 576; border-radius: 12px; }
    .route-flow-panel img { position: absolute; width: 245.882353%; max-width: none; height: auto; top: -20.138889%; }
    .route-flow-panel--input img { left: -16.470588%; }
    .route-flow-panel--result img { left: -129.705882%; }
    .route-flow-arrow { color: var(--gold); font-size: 1.8rem; line-height: 1; text-align: center; }
    .route-flow-caution { margin-top: 8px; padding: 20px; border: 1px solid var(--border-glass); border-radius: 12px; background: var(--bg-card); }
    .route-flow-caution h3 { font-size: 1.15rem; margin-bottom: 8px; }
    .route-flow-caution p { color: var(--text-sub); font-size: 0.9rem; }
    .route-flow-caution .route-flow-example-label { margin: 16px 0 8px; font-size: 0.75rem; }
    .route-flow-patterns { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; }
    .route-flow-patterns span { border: 1px solid currentColor; border-radius: 30px; padding: 5px 12px; }
    .route-flow-good { color: #b9d998; }
    .route-flow-bad { color: #f2948c; }
    .route-flow-cta .btn { width: 100%; padding: 16px 20px; }
}