/* Ode mne v3.1.16 — MOBILE-ONLY timeline correction.
   Desktop styles are intentionally untouched. */
@media (max-width: 820px) {
    .landing-steps-section,
    .landing-steps-section * {
        box-sizing: border-box;
        min-width: 0;
    }

    .landing-steps-section {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
        padding-right: 12px;
        overflow: hidden;
    }

    .landing-steps-heading {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 28px;
        padding: 0 6px;
        text-align: center;
    }

    .landing-steps-heading h2 {
        font-size: clamp(1.75rem, 8vw, 2.35rem);
        line-height: 1.05;
    }

    .landing-steps-heading p {
        max-width: 34rem;
        margin: 0 auto;
        font-size: .95rem;
        line-height: 1.5;
    }

    /* One fixed mobile geometry: line + nodes on the left, all cards to the right. */
    .landing-timeline {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 6px 0 0;
        overflow: visible;
    }

    .landing-timeline-spine {
        left: 26px !important;
        right: auto !important;
        top: 18px !important;
        bottom: clamp(155px, 42vw, 255px) !important;
        width: 8px !important;
        transform: none !important;
        z-index: 0;
    }

    /* Beginning and ending illustrations: large, but never outside the viewport. */
    .landing-timeline-story {
        position: relative;
        width: calc(100% - 64px) !important;
        max-width: 440px !important;
        margin: 0 0 24px 64px !important;
        padding: 10px !important;
        border-radius: 26px !important;
        overflow: hidden;
        text-align: center;
    }

    .landing-timeline-story::before {
        left: -46px !important;
        right: auto !important;
        top: 28px !important;
        width: 16px !important;
        height: 16px !important;
        transform: none !important;
    }

    .landing-timeline-story-media {
        display: block;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        border-radius: 21px !important;
        overflow: hidden;
    }

    .landing-timeline-story-media img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .landing-timeline-story-end {
        margin-bottom: 0 !important;
    }

    /* Reset all desktop grid positioning that could push alternating cards off-screen. */
    .landing-timeline-item,
    .landing-timeline-item.is-left,
    .landing-timeline-item.is-right {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    .landing-timeline-empty {
        display: none !important;
    }

    .landing-timeline-item .landing-timeline-node {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 50% !important;
        grid-column: auto !important;
        transform: translateY(-50%) !important;
        display: grid !important;
        place-items: center !important;
        width: 54px !important;
        z-index: 4;
    }

    .landing-timeline-node span {
        width: 52px !important;
        height: 52px !important;
        font-size: .9rem !important;
        border-width: 4px !important;
    }

    .landing-timeline-node::before,
    .landing-timeline-node::after {
        width: 16px !important;
        border-top-width: 4px !important;
    }

    .landing-timeline-item.is-right .landing-timeline-node::after,
    .landing-timeline-item.is-left .landing-timeline-node::before {
        left: 46px !important;
        right: auto !important;
    }

    .landing-timeline-item .landing-timeline-card,
    .landing-timeline-item.is-left .landing-timeline-card,
    .landing-timeline-item.is-right .landing-timeline-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-column: auto !important;
        align-content: start !important;
        justify-items: center !important;
        width: calc(100% - 64px) !important;
        max-width: 440px !important;
        min-height: 0 !important;
        margin: 0 0 0 64px !important;
        padding: 15px 15px 18px !important;
        gap: 14px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        transform: none !important;
        text-align: center !important;
    }

    .landing-timeline-card::before {
        inset: 8px !important;
        border-radius: 18px !important;
    }

    /* Images are deliberately prominent, but constrained by the card. */
    .landing-timeline-visual {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 8px !important;
        border-radius: 21px !important;
        overflow: hidden !important;
    }

    .landing-timeline-visual img {
        display: block !important;
        width: 100% !important;
        max-width: 324px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 17px !important;
    }

    .landing-timeline-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 6px !important;
    }

    .landing-timeline-card strong {
        display: block !important;
        width: 100% !important;
        max-width: 28ch !important;
        margin: 0 auto !important;
        font-size: clamp(.95rem, 4.4vw, 1.08rem) !important;
        line-height: 1.38 !important;
        overflow-wrap: anywhere;
    }
}

/* Extra narrow phones: preserve the same composition without horizontal scroll. */
@media (max-width: 420px) {
    .landing-steps-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    .landing-timeline-spine {
        left: 22px !important;
    }

    .landing-timeline-story,
    .landing-timeline-item .landing-timeline-card,
    .landing-timeline-item.is-left .landing-timeline-card,
    .landing-timeline-item.is-right .landing-timeline-card {
        width: calc(100% - 54px) !important;
        margin-left: 54px !important;
    }

    .landing-timeline-item .landing-timeline-node {
        width: 46px !important;
    }

    .landing-timeline-node span {
        width: 44px !important;
        height: 44px !important;
        font-size: .78rem !important;
    }

    .landing-timeline-item.is-right .landing-timeline-node::after,
    .landing-timeline-item.is-left .landing-timeline-node::before {
        left: 40px !important;
        width: 12px !important;
    }

    .landing-timeline-visual {
        max-width: 300px !important;
    }

    .landing-timeline-visual img {
        max-width: 284px !important;
    }
}


/* v3.1.18 — real colored mobile image backgrounds for steps 06/07 */
@media (max-width: 820px) {
    .landing-timeline-card.card-rose {
        background: linear-gradient(135deg,#ff719f 0%,#ff8db1 55%,#ffa8c4 100%) !important;
    }
    .landing-timeline-card.card-peach {
        background: linear-gradient(135deg,#a977ef 0%,#cd83e7 52%,#f39fc3 100%) !important;
    }
    .landing-timeline-card.card-rose strong,
    .landing-timeline-card.card-peach strong {
        color:#fff !important;
        text-shadow:0 2px 6px rgba(82,28,57,.22) !important;
    }
    .landing-timeline-visual picture {
        display:block !important;
        width:100% !important;
        max-width:324px !important;
        line-height:0 !important;
    }
    .landing-timeline-visual picture img {
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        aspect-ratio:1/1 !important;
        object-fit:cover !important;
        border-radius:17px !important;
    }
}