/* =========================================================
   MYMOBI SALES PAGE
   /mycard/
========================================================= */

:root {

    --blue: #0F62FE;
    --blue-dark: #0846b5;
    --green: #20c75a;
    --green-dark: #149343;
    --red: #d93636;

    --text: #111827;
    --muted: #667085;

    --border: #e5e7eb;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;

    --shadow:
        0 20px 50px
        rgba(15, 23, 42, 0.10);

    --radius: 24px;

    --max-width: 1220px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #ffffff;

    color:
        var(--text);

    line-height:
        1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.sales-container {

    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        0 auto;
}


.sales-section {

    padding:
        90px 0;
}


.section-heading {

    width:
        min(
            100%,
            760px
        );

    margin:
        0 auto 55px;

    text-align:
        center;
}


.section-heading h2,
.hours-copy h2,
.final-cta h2 {

    margin:
        12px 0 18px;

    font-size:
        clamp(
            34px,
            5vw,
            54px
        );

    line-height:
        1.08;

    letter-spacing:
        -1.5px;
}


.section-heading h2 span,
.hours-copy h2 span,
.hero-copy h1 span {

    color:
        var(--blue);
}


.section-heading p {

    margin:
        0 auto;

    color:
        var(--muted);

    font-size:
        18px;

    max-width:
        680px;
}


.eyebrow {

    display:
        inline-block;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    color:
        var(--blue);

    text-transform:
        uppercase;
}


/* =========================================================
   HEADER
========================================================= */

.sales-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid
        rgba(
            17,
            24,
            39,
            0.08
        );
}


.sales-nav {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.sales-brand {

    display:
        inline-flex;

    align-items:
        center;
}


.sales-brand img {

    width:
        190px;

    max-height:
        48px;

    object-fit:
        contain;
}


.sales-header-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0 22px;

    border-radius:
        999px;

    background:
        var(--blue);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.6px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.sales-header-cta:hover {

    background:
        var(--blue-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   BUTTONS
========================================================= */

.sales-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        52px;

    padding:
        0 26px;

    border-radius:
        14px;

    font-weight:
        800;

    font-size:
        14px;

    letter-spacing:
        0.25px;

    text-align:
        center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.sales-btn:hover {

    transform:
        translateY(-2px);
}


.sales-btn.primary {

    background:
        var(--blue);

    color:
        #ffffff;

    box-shadow:
        0 12px 25px
        rgba(
            15,
            98,
            254,
            0.24
        );
}


.sales-btn.primary:hover {

    background:
        var(--blue-dark);
}


.sales-btn.outline {

    border:
        2px solid
        var(--blue);

    color:
        var(--blue);

    background:
        #ffffff;
}


.sales-btn.white {

    background:
        #ffffff;

    color:
        var(--blue);
}


.sales-btn.large {

    min-height:
        58px;

    padding:
        0 32px;

    font-size:
        15px;
}


/* =========================================================
   HERO
========================================================= */

.sales-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        80px 0 95px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}


.sales-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        560px;

    height:
        560px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                15,
                98,
                254,
                0.14
            ) 0%,
            rgba(
                15,
                98,
                254,
                0
            ) 70%
        );
}


.hero-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            360px,
            0.95fr
        );

    gap:
        70px;

    align-items:
        center;
}


.hero-copy h1 {

    margin:
        16px 0 22px;

    font-size:
        clamp(
            44px,
            6vw,
            64px
        );

    line-height:
        1.02;

    letter-spacing:
        -2.5px;
        
    text-align:
        center;
}


.hero-copy p {

    color:
        var(--muted);

    font-size:
        17px;

    max-width:
        650px;
}


.hero-copy .hero-lead {

    color:
        var(--text);

    font-size:
        21px;

    font-weight:
        700;
}


.hero-checks {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px 20px;

    margin:
        30px 0;
}


.hero-checks div {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    font-size:
        15px;

    font-weight:
        600;
}


.hero-checks i {

    margin-top:
        3px;

    color:
        var(--green);
}


.preview-expiry {

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        13px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.hero-preview {

    display:
        flex;

    justify-content:
        center;
}


.hero-preview img {

    width:
        min(
            100%,
            460px
        );

    border-radius:
        30px;

    box-shadow:
        0 30px 70px
        rgba(
            15,
            23,
            42,
            0.22
        );
}


.preview-missing {

    width:
        min(
            100%,
            420px
        );

    min-height:
        620px;

    border-radius:
        30px;

    border:
        2px dashed
        var(--border);

    background:
        #ffffff;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        var(--muted);

    text-align:
        center;
}


.preview-missing i {

    font-size:
        48px;

    color:
        var(--blue);
}


/* =========================================================
   EXPLODED FEATURE SECTION
========================================================= */

.feature-guide {

    background:
        var(--surface-soft);
}


.exploded-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            320px,
            420px
        )
        minmax(
            0,
            1fr
        );

    gap:
        34px;

    align-items:
        center;
}


.exploded-side {

    display:
        flex;

    flex-direction:
        column;

    gap:
        28px;
}


.exploded-phone {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        sticky;

    top:
        110px;
}


.exploded-phone img {

    width:
        100%;

    max-width:
        390px;

    border-radius:
        26px;

    box-shadow:
        var(--shadow);
}


.exploded-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        54px
        1fr;

    gap:
        18px;

    padding:
        24px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 10px 28px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


.exploded-card h3 {

    margin:
        4px 0 8px;

    font-size:
        21px;

    line-height:
        1.2;
}


.exploded-card p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        15px;
}


.exploded-card ul {

    margin:
        14px 0 0;

    padding-left:
        19px;

    color:
        var(--muted);

    font-size:
        14px;
}


.exploded-icon {

    width:
        54px;

    height:
        54px;

    border-radius:
        16px;

    background:
        rgba(
            15,
            98,
            254,
            0.10
        );

    color:
        var(--blue);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        22px;
}


.feature-label {

    display:
        block;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    color:
        var(--blue);

    text-transform:
        uppercase;
}


.feature-benefit {

    display:
        block;

    margin-top:
        12px;

    color:
        var(--text);

    font-size:
        14px;
}


.exploded-card.highlight {

    border:
        2px solid
        rgba(
            15,
            98,
            254,
            0.22
        );
}


.exploded-card.whatsapp
.exploded-icon {

    color:
        #22c55e;

    background:
        rgba(
            34,
            197,
            94,
            0.12
        );
}


.action-path {

    margin-top:
        18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;
}


.action-path span,
.action-path strong {

    display:
        block;
}


.action-path i {

    color:
        var(--blue);
}


.action-path .or {

    font-size:
        12px;

    font-weight:
        800;

    color:
        var(--muted);
}


/* =========================================================
   CONNECTING LINES - DESKTOP
========================================================= */

.exploded-side.left
.exploded-card::after {

    content:
        "";

    position:
        absolute;

    right:
        -34px;

    top:
        50%;

    width:
        34px;

    height:
        2px;

    background:
        rgba(
            15,
            98,
            254,
            0.25
        );
}


.exploded-side.right
.exploded-card::before {

    content:
        "";

    position:
        absolute;

    left:
        -34px;

    top:
        50%;

    width:
        34px;

    height:
        2px;

    background:
        rgba(
            15,
            98,
            254,
            0.25
        );
}


/* =========================================================
   HOURS
========================================================= */

.hours-section {

    background:
        #ffffff;
}


.hours-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            320px,
            500px
        );

    gap:
        80px;

    align-items:
        center;
}


.hours-copy p {

    color:
        var(--muted);

    font-size:
        17px;
}


.status-example {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        18px;

    padding:
        16px 18px;

    border-radius:
        16px;

    border:
        1px solid
        var(--border);
}


.status-example div {

    display:
        flex;

    flex-direction:
        column;
}


.status-example span {

    color:
        var(--muted);

    font-size:
        14px;
}


.status-dot {

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    flex:
        0 0 auto;
}


.status-example.open
.status-dot {

    background:
        var(--green);

    box-shadow:
        0 0 0 7px
        rgba(
            32,
            199,
            90,
            0.13
        );
}


.status-example.closed
.status-dot {

    background:
        var(--red);

    box-shadow:
        0 0 0 7px
        rgba(
            217,
            54,
            54,
            0.12
        );
}


.hours-note {

    margin-top:
        24px;

    font-weight:
        700;
}


.hours-note i {

    color:
        var(--blue);

    margin-right:
        8px;
}


.hours-demo {

    border-radius:
        24px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    background:
        #ffffff;
}


.hours-demo-title {

    padding:
        22px 24px;

    background:
        var(--blue);

    color:
        #ffffff;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-align:
        center;
}


.hours-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        17px 22px;

    border-bottom:
        1px solid
        var(--border);
}


.hours-row:last-child {

    border-bottom:
        none;
}


.hours-row span {

    color:
        var(--muted);
}


.hours-row strong {

    color:
        var(--green-dark);
}


.hours-row.closed strong {

    color:
        var(--red);
}


/* =========================================================
   PLANS
========================================================= */

.plans-section {

    background:
        var(--surface-soft);
}


.sales-plans {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        30px;

    align-items:
        stretch;

    max-width:
        1050px;

    margin:
        0 auto;
}


.sales-plan {

    padding:
        38px;

    border:
        1px solid
        var(--border);

    border-radius:
        26px;

    background:
        #ffffff;

    box-shadow:
        0 14px 35px
        rgba(
            15,
            23,
            42,
            0.06
        );

    display:
        flex;

    flex-direction:
        column;
}


.sales-plan.paid {

    background:
        linear-gradient(
            145deg,
            #0F62FE 0%,
            #073c9c 100%
        );

    color:
        #ffffff;

    transform:
        translateY(-10px);

    box-shadow:
        0 28px 55px
        rgba(
            15,
            98,
            254,
            0.25
        );
}


.plan-badge {

    display:
        inline-flex;

    width:
        fit-content;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(
            15,
            98,
            254,
            0.10
        );

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.1px;
}


.sales-plan.paid
.plan-badge {

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    color:
        #ffffff;
}


.sales-plan h3 {

    margin:
        18px 0 10px;

    font-size:
        30px;

    line-height:
        1.15;
}


.sales-plan p {

    margin:
        0;

    color:
        var(--muted);
}


.sales-plan.paid p {

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );
}


.sales-plan ul {

    list-style:
        none;

    margin:
        28px 0 32px;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.sales-plan li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;
}


.sales-plan li i {

    margin-top:
        5px;

    color:
        var(--green);
}


.sales-plan.paid li i {

    color:
        #ffffff;
}


.sales-plan .sales-btn {

    margin-top:
        auto;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey-section {

    background:
        #ffffff;
}


.journey-levels {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        35px;
}


.journey-level {

    min-width:
        130px;

    padding:
        18px 20px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    text-align:
        center;

    background:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(
            15,
            23,
            42,
            0.05
        );
}


.journey-level strong {

    display:
        block;

    font-size:
        16px;
}


.journey-level span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        12px;
}


.journey-levels > i {

    color:
        var(--blue);
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding:
        80px 0;

    background:
        linear-gradient(
            135deg,
            #0F62FE,
            #083f9e
        );

    color:
        #ffffff;
}


.final-cta-inner {

    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;
}


.final-cta
.eyebrow {

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}


.final-cta h2 {

    margin:
        10px 0 16px;

    color:
        #ffffff;
}


.final-cta p {

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );

    font-size:
        18px;

    margin:
        0 auto 28px;

    max-width:
        650px;
}


/* =========================================================
   EXPIRED PAGE
========================================================= */

.expired-section {

    min-height:
        calc(
            100vh - 170px
        );

    display:
        flex;

    align-items:
        center;

    padding:
        80px 0;

    background:
        var(--surface-soft);
}


.expired-card {

    max-width:
        700px;

    margin:
        0 auto;

    padding:
        55px 45px;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow);

    text-align:
        center;
}


.expired-icon {

    width:
        80px;

    height:
        80px;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            15,
            98,
            254,
            0.10
        );

    color:
        var(--blue);

    font-size:
        34px;
}


.expired-card h1 {

    margin:
        12px 0 18px;

    font-size:
        clamp(
            38px,
            6vw,
            56px
        );

    line-height:
        1.06;
}


.expired-card p {

    color:
        var(--muted);

    font-size:
        17px;
}


/* =========================================================
   FOOTER
========================================================= */

.sales-footer {

    padding:
        38px 0;

    border-top:
        1px solid
        var(--border);

    background:
        #ffffff;

    text-align:
        center;
}


.sales-footer img {

    width:
        150px;

    margin:
        0 auto 10px;
}


.sales-footer p {

    margin:
        0;

    font-weight:
        700;
}


.sales-footer span {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        12px;
}


/* =========================================================
   TABLET
========================================================= */

@media
(
    max-width: 1080px
) {

    .hero-grid {

        grid-template-columns:
            1fr 420px;

        gap:
            40px;
    }


    .exploded-layout {

        grid-template-columns:
            1fr 340px 1fr;

        gap:
            20px;
    }


    .exploded-card {

        grid-template-columns:
            46px 1fr;

        padding:
            20px;
    }


    .exploded-icon {

        width:
            46px;

        height:
            46px;

        border-radius:
            14px;

        font-size:
            19px;
    }


    .exploded-side.left
    .exploded-card::after {

        right:
            -20px;

        width:
            20px;
    }


    .exploded-side.right
    .exploded-card::before {

        left:
            -20px;

        width:
            20px;
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media
(
    max-width: 860px
) {

    .sales-section {

        padding:
            65px 0;
    }


    .sales-header {

        position:
            relative;
    }


    .sales-nav {

        min-height:
            68px;
    }


    .sales-brand img {

        width:
            155px;
    }


    .sales-header-cta {

        min-height:
            40px;

        padding:
            0 16px;

        font-size:
            12px;
    }


    .sales-hero {

        padding:
            55px 0 70px;
    }


    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .hero-copy {

        text-align:
            center;
    }


    .hero-copy p {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-checks {

        max-width:
            640px;

        margin:
            28px auto;

        text-align:
            left;
    }


    .preview-expiry {

        justify-content:
            center;
    }


    .hero-preview img {

        max-width:
            410px;
    }


    .exploded-layout {

        display:
            flex;

        flex-direction:
            column;
    }


    .exploded-phone {

        position:
            relative;

        top:
            auto;

        order:
            1;

        margin-bottom:
            20px;
    }


    .exploded-side.left {

        order:
            2;
    }


    .exploded-side.right {

        order:
            3;
    }


    .exploded-side {

        width:
            100%;

        max-width:
            720px;

        margin:
            0 auto;
    }


    .exploded-side.left
    .exploded-card::after,
    .exploded-side.right
    .exploded-card::before {

        display:
            none;
    }


    .exploded-card {

        grid-template-columns:
            54px 1fr;
    }


    .hours-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .hours-copy {

        text-align:
            center;
    }


    .status-example {

        max-width:
            520px;

        margin-left:
            auto;

        margin-right:
            auto;

        text-align:
            left;
    }


    .sales-plans {

        grid-template-columns:
            1fr;

        max-width:
            650px;
    }


    .sales-plan.paid {

        transform:
            none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(
    max-width: 600px
) {

    .sales-container {

        width:
            min(
                calc(
                    100% - 28px
                ),
                var(--max-width)
            );
    }


    .sales-section {

        padding:
            52px 0;
    }


    .section-heading {

        margin-bottom:
            38px;
    }


    .section-heading h2,
    .hours-copy h2,
    .final-cta h2 {

        font-size:
            34px;

        letter-spacing:
            -1px;
    }


    .section-heading p {

        font-size:
            16px;
    }


    .sales-nav {

        gap:
            12px;
    }


    .sales-brand img {

        width:
            135px;
    }


    .sales-header-cta {

        padding:
            0 13px;

        font-size:
            11px;
    }


    .hero-copy h1 {

        font-size:
            42px;

        letter-spacing:
            -1.5px;
    }


    .hero-copy .hero-lead {

        font-size:
            18px;
    }


    .hero-copy p {

        font-size:
            16px;
    }


    .hero-checks {

        grid-template-columns:
            1fr;

        gap:
            11px;

        max-width:
            400px;
    }


    .hero-preview img {

        max-width:
            330px;

        border-radius:
            22px;
    }


    .sales-btn {

        width:
            100%;
    }


    .preview-expiry {

        align-items:
            flex-start;
    }


    .exploded-phone img {

        max-width:
            320px;
    }


    .exploded-card {

        grid-template-columns:
            46px 1fr;

        gap:
            14px;

        padding:
            18px;

        border-radius:
            18px;
    }


    .exploded-icon {

        width:
            46px;

        height:
            46px;
    }


    .exploded-card h3 {

        font-size:
            19px;
    }


    .hours-demo {

        border-radius:
            18px;
    }


    .hours-row {

        padding:
            15px 16px;

        font-size:
            14px;
    }


    .sales-plan {

        padding:
            28px 22px;

        border-radius:
            22px;
    }


    .sales-plan h3 {

        font-size:
            26px;
    }


    .journey-levels {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        width:
            100%;
    }


    .journey-levels > i {

        display:
            none;
    }


    .journey-level {

        min-width:
            0;
    }


    .final-cta {

        padding:
            60px 0;
    }


    .expired-card {

        padding:
            40px 24px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media
(
    max-width: 390px
) {

    .sales-brand img {

        width:
            118px;
    }


    .sales-header-cta {

        padding:
            0 11px;

        font-size:
            10px;
    }


    .hero-copy h1 {

        font-size:
            36px;
    }


    .journey-levels {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   MEMBERSHIP STATUS JOURNEY
========================================================= */

.status-journey {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 20px;

    margin: 35px auto 0;
}


.status-card {
    position: relative;

    width: 100%;

    aspect-ratio: 942 / 1670;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);
}


.status-info {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 14px;

    padding: 10px 6px;

    background:
        rgba(0, 0, 0, 0.65);

    border-radius: 10px;

    text-align: center;

    color: #ffffff;
}


.status-info strong {
    display: block;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1px;
}


.status-info span {
    display: block;

    margin-top: 3px;

    font-size: 12px;
}


/* =========================================================
   MEMBERSHIP JOURNEY - MOBILE
========================================================= */

@media (max-width: 700px) {

    .status-journey {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 24px;

        align-items: center;
    }


    .status-card {
        display: block;

        width: 75%;
        max-width: 280px;

        flex: none;

        margin: 0 auto;
    }

}

/* MyMobi shared eight-card feature guide. Append to /mycard/style.css */
.mm8-guide {background:#f3f6fc;}
.mm8-guide .section-heading {margin-bottom:28px;}
.mm8-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,245px) minmax(0,1fr);grid-template-areas:'. top .' 'left phone right' '. bottom .';gap:14px;align-items:center;max-width:980px;margin:0 auto;}
.mm8-top {grid-area:top;} .mm8-left {grid-area:left;} .mm8-phone {grid-area:phone;} .mm8-right {grid-area:right;} .mm8-bottom {grid-area:bottom;}
.mm8-left,.mm8-right {display:flex;flex-direction:column;gap:12px;}
.mm8-card {background:#fff;border:1px solid #dbe4f3;border-radius:12px;padding:15px;box-shadow:0 4px 14px rgba(15,23,42,.04);min-width:0;}
.mm8-card .mm8-label {font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.25px;color:#0f62fe;text-transform:uppercase;}
.mm8-card h3 {font-size:16px;line-height:1.25;margin:8px 0; color:#0c2346;}
.mm8-card p {font-size:12px;line-height:1.6;color:#53627c;margin:0;}
.mm8-phone img {display:block;width:100%;height:auto;border:4px solid #222;border-radius:22px;box-shadow:0 12px 25px rgba(15,23,42,.15);}
.mm8-missing {padding:60px 12px;text-align:center;background:white;border:1px dashed #aab6cb;border-radius:20px;color:#53627c;}
@media(max-width:760px){.mm8-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'top top' 'phone phone' 'left right' 'bottom bottom';max-width:600px;align-items:start}.mm8-phone{max-width:280px;width:100%;margin:0 auto}.mm8-card{padding:12px}.mm8-card h3{font-size:15px}.mm8-left,.mm8-right{gap:10px}}
@media(max-width:460px){.mm8-layout{grid-template-columns:1fr;grid-template-areas:'top' 'phone' 'left' 'right' 'bottom'}.mm8-phone{max-width:245px}.mm8-card{padding:14px}}