/**
 * Mislens Home
 *
 * 文件位置：
 * /wp-content/themes/mislens-theme-v2/modules/home/home.css
 *
 * 当前规则：
 * - PC 已冻结，不再调整。
 * - Desktop 使用 1920×650 完整 Banner。
 * - Mobile 使用 479×600 透明模特图。
 * - Mobile 参考旧站重新定位：
 *   Heading / Positioning / Lens / Manufacturing / CTA。
 */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

.mislens-home-page {
    --mislens-home-pink: #fa7598;
    --mislens-home-pink-dark: #ef648a;

    --mislens-home-heading: #29252c;
    --mislens-home-text: #686868;
    --mislens-home-border: #dddddd;

    --mislens-home-white: #ffffff;

    --mislens-home-container: 1200px;

    --mislens-home-font:
        "Montserrat",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ==========================================================================
   2. HOME
   ========================================================================== */

.mislens-home {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;

    color: var(--mislens-home-heading);

    font-family: var(--mislens-home-font);
}


/* ==========================================================================
   3. HERO
   ========================================================================== */

.mislens-home-hero {
    position: relative;

    width: 100%;

    aspect-ratio: 1920 / 650;

    overflow: hidden;

    background: #d8b0b9;
}


/* ==========================================================================
   4. DESKTOP BACKGROUND
   ========================================================================== */

.mislens-home-hero__desktop-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;
}

.mislens-home-hero__desktop-background-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* ==========================================================================
   5. MOBILE MODEL
   ========================================================================== */

.mislens-home-hero__mobile-model {
    display: none;
}


/* ==========================================================================
   6. HERO INNER
   ========================================================================== */

.mislens-home-hero__inner {
    position: relative;

    z-index: 2;

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    margin: 0;

    padding-left:
        max(
            24px,
            calc((100vw - var(--mislens-home-container)) / 2)
        );

    padding-right:
        max(
            24px,
            calc((100vw - var(--mislens-home-container)) / 2)
        );
}


/* ==========================================================================
   7. LEFT CONTENT
   ========================================================================== */

.mislens-home-hero__left {
    position: relative;

    width: 660px;
    max-width: 48%;

    padding-top: 7.5%;
}


/* ==========================================================================
   8. HEADING
   ========================================================================== */

.mislens-home-hero__heading {
    display: flex;
    align-items: flex-start;

    width: 520px;
    max-width: 100%;

    height: 88px;

    margin:
        0
        0
        25px;

    overflow: hidden;

    color: #6b2d3c;

    font-family: var(--mislens-home-font);

    font-size:
        clamp(
            36px,
            2.2vw,
            44px
        );

    line-height: 1;

    font-weight: 400;
    font-style: italic;

    letter-spacing: 0.01em;

    text-transform: uppercase;
}


/* ==========================================================================
   9. POSITIONING
   ========================================================================== */

.mislens-home-hero__positioning {
    display: inline-flex;
    align-items: stretch;

    min-height: 38px;

    margin:
        0
        0
        12px;

    overflow: hidden;

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.76
        );
}

.mislens-home-hero__positioning-primary,
.mislens-home-hero__positioning-secondary {
    display: inline-flex;
    align-items: center;

    white-space: nowrap;

    font-size:
        clamp(
            15px,
            1vw,
            18px
        );

    line-height: 1;

    font-weight: 400;
}

.mislens-home-hero__positioning-primary {
    gap: 8px;

    padding:
        8px
        20px;

    color:
        var(--mislens-home-pink-dark);
}

.mislens-home-hero__positioning-secondary {
    padding:
        8px
        18px;

    border-left:
        1px solid
        rgba(
            250,
            117,
            152,
            0.28
        );

    color:
        rgba(
            239,
            100,
            138,
            0.72
        );
}

.mislens-home-hero__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    border:
        2px solid
        currentColor;

    border-radius: 50%;

    font-size: 14px;
    line-height: 1;

    font-weight: 700;
}


/* ==========================================================================
   10. LENS STRIP
   ========================================================================== */

.mislens-home-hero__lenses {
    display: none;

    width:
        clamp(
            220px,
            15vw,
            285px
        );

    margin:
        0
        0
        5px
        74px;
}

.mislens-home-hero__lens-strip {
    display: block;

    width: 100%;
    height: auto;
}


/* ==========================================================================
   11. MANUFACTURING
   ========================================================================== */

.mislens-home-hero__manufacturing {
    width: 410px;
    max-width: 100%;

    margin:
        0
        0
        0
        32px;

    padding:
        6px
        10px;

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

    font-size:
        clamp(
            13px,
            0.85vw,
            15px
        );

    line-height: 1.3;

    text-align: center;
}


/* ==========================================================================
   12. CTA
   ========================================================================== */

.mislens-home-hero__actions {
    position: absolute;

    z-index: 4;

    right: 4.5vw;
    bottom: 13%;

    display: flex;
    align-items: center;

    gap: 12px;
}

.mislens-home-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        22px;

    border:
        1px solid
        transparent;

    border-radius: 4px;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.mislens-home-hero__button:hover,
.mislens-home-hero__button:focus {
    text-decoration: none;
}

.mislens-home-hero__button--primary {
    border-color:
        var(--mislens-home-pink);

    background:
        var(--mislens-home-pink);

    color: #ffffff;
}

.mislens-home-hero__button--primary:hover,
.mislens-home-hero__button--primary:focus {
    border-color:
        var(--mislens-home-pink-dark);

    background:
        var(--mislens-home-pink-dark);

    color: #ffffff;
}

.mislens-home-hero__button--secondary {
    border-color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    background:
        rgba(
            250,
            117,
            152,
            0.90
        );

    color: #ffffff;
}

.mislens-home-hero__button--secondary:hover,
.mislens-home-hero__button--secondary:focus {
    border-color:
        var(--mislens-home-pink-dark);

    background:
        var(--mislens-home-pink-dark);

    color: #ffffff;
}


/* ==========================================================================
   13. CERTIFICATION STRIP
   ========================================================================== */

.mislens-home-cert-strip {
    width: 100%;

    margin: 0;
    padding: 0;

    border-bottom:
        1px solid
        #eeeeee;

    background: #ffffff;
}

.mislens-home-cert-strip__inner {
    width: min(
        calc(100% - 48px),
        var(--mislens-home-container)
    );

    margin: 0 auto;

    padding:
        9px
        0;
}

.mislens-home-cert-strip__image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 52px;

    margin: 0 auto;

    object-fit: contain;
}


/* ==========================================================================
   14. SMALL DESKTOP / TABLET
   ========================================================================== */

@media (max-width: 1100px) and (min-width: 768px) {

    .mislens-home-hero__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mislens-home-hero__left {
        width: 56%;
        max-width: 56%;

        padding-top: 6.5%;
    }

    .mislens-home-hero__heading {
        width: 420px;

        height: 70px;

        margin-bottom: 20px;

        font-size:
            clamp(
                30px,
                3.4vw,
                35px
            );

        line-height: 1;
    }

    .mislens-home-hero__positioning-primary,
    .mislens-home-hero__positioning-secondary {
        font-size: 15px;
    }

    .mislens-home-hero__positioning-primary {
        padding:
            7px
            15px;
    }

    .mislens-home-hero__positioning-secondary {
        padding:
            7px
            14px;
    }

    .mislens-home-hero__lenses {
        width: 220px;

        margin-left: 42px;
    }

    .mislens-home-hero__manufacturing {
        width: 315px;

        margin-left: 4px;

        font-size: 13px;
    }

    .mislens-home-hero__actions {
        right: 22px;
        bottom: 10%;

        gap: 8px;
    }

    .mislens-home-hero__button {
        min-height: 40px;

        padding:
            0
            16px;

        font-size: 13px;
    }

}


/* ==========================================================================
   15. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    /* ----------------------------------------------------------------------
       Hero frame
       ---------------------------------------------------------------------- */

    .mislens-home-hero {
        aspect-ratio: auto;

        height:
            clamp(
                610px,
                132vw,
                700px
            );

        overflow: hidden;

        background: #d7aab4;
    }


    /* ----------------------------------------------------------------------
       Desktop banner disabled
       ---------------------------------------------------------------------- */

    .mislens-home-hero__desktop-background {
        display: none;
    }


    /* ----------------------------------------------------------------------
       Mobile model
       ---------------------------------------------------------------------- */

    /**
     * 479 × 600 transparent model.
     *
     * 用高度控制：
     * - 头顶必须贴住 Hero 顶部
     * - 人物必须延伸到底部
     * - 不再因为 width 百分比导致人物提前结束
     */

    .mislens-home-hero__mobile-model {
        position: absolute;

        z-index: 1;

        top: 0;
        right: -3%;
        bottom: 0;

        display: flex;
        align-items: stretch;
        justify-content: flex-end;

        width: auto;
        height: 100%;

        pointer-events: none;
    }

    .mislens-home-hero__mobile-model-image {
        display: block;

        width: auto;
        height: 100%;

        max-width: none;
        max-height: none;

        object-fit: contain;
        object-position: right top;
    }


    /* ----------------------------------------------------------------------
       Top blur / soft blend
       ---------------------------------------------------------------------- */

    /**
     * 只模糊 Hero 最顶部的一小条。
     * 人脸主体保持清晰。
     */

    .mislens-home-hero::after {
        content: "";

        position: absolute;

        top: 0;
        right: 0;
        left: 0;

        z-index: 2;

        height: 42px;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(215, 170, 180, 0.72) 0%,
                rgba(215, 170, 180, 0.34) 52%,
                rgba(215, 170, 180, 0) 100%
            );

        -webkit-backdrop-filter:
            blur(7px);

        backdrop-filter:
            blur(7px);

        -webkit-mask-image:
            linear-gradient(
                180deg,
                #000000 0%,
                rgba(0, 0, 0, 0.7) 60%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                180deg,
                #000000 0%,
                rgba(0, 0, 0, 0.7) 60%,
                transparent 100%
            );
    }


    /* ----------------------------------------------------------------------
       Inner
       ---------------------------------------------------------------------- */

    .mislens-home-hero__inner {
        position: relative;

        z-index: 3;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;
    }


    /* ----------------------------------------------------------------------
       Left content container
       ---------------------------------------------------------------------- */

    .mislens-home-hero__left {
        position: static;

        width: 100%;
        max-width: none;

        padding: 0;
    }


    /* ----------------------------------------------------------------------
       Heading
       ---------------------------------------------------------------------- */

    /**
     * 旧站参考：
     * 左上两行。
     */

    .mislens-home-hero__heading {
        position: absolute;

        z-index: 6;

        top:
            clamp(
                26px,
                6.5vw,
                36px
            );

        left: 28px;

        display: flex;
        align-items: flex-start;

        width: 445px;
        max-width:
            calc(100% - 56px);

        height: 96px;

        margin: 0;

        overflow: hidden;

        color: #ffffff;

        font-size:
            clamp(
                30px,
                7.8vw,
                40px
            );

        line-height: 1.14;

        font-weight: 400;
        font-style: normal;

        letter-spacing:
            -0.025em;
    }


    /* ----------------------------------------------------------------------
       Positioning bar
       ---------------------------------------------------------------------- */

    .mislens-home-hero__positioning {
    position: absolute;

    z-index: 7;

    top:
        clamp(
            132px,
            28vw,
            148px
        );

    left: 29px;

    display: inline-flex;
    align-items: stretch;

    width: auto;
    max-width:
        calc(100% - 58px);

    min-height: 34px;

    margin: 0;

    overflow: hidden;

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.76
        );
}

    .mislens-home-hero__positioning-primary,
    .mislens-home-hero__positioning-secondary {
        font-size:
            clamp(
                12px,
                3.1vw,
                14px
            );
    }

    .mislens-home-hero__positioning-primary {
    gap: 6px;

    padding:
        6px
        12px;
}

.mislens-home-hero__positioning-secondary {
    padding:
        6px
        12px;
}

    .mislens-home-hero__check {
        width: 18px;
        height: 18px;

        flex-basis: 18px;

        font-size: 11px;
    }


    /* ----------------------------------------------------------------------
       Lens strip
       ---------------------------------------------------------------------- */

    /**
     * 旧站：
     * Lens Strip 位于 Hero 右下。
     * 与左侧 CTA 形成一组。
     */

    .mislens-home-hero__lenses {
    display: block;

    position: absolute;

    z-index: 9;

    right: 5%;
    bottom: 47px;

    width: 47%;

    margin: 0;
}

    .mislens-home-hero__lens-strip {
        width: 100%;
        height: auto;
    }


    /* ----------------------------------------------------------------------
       Manufacturing
       ---------------------------------------------------------------------- */

    .mislens-home-hero__manufacturing {
        position: absolute;

        z-index: 10;

        right: 2%;
        bottom: 12px;

        width: 59%;
        max-width: none;

        margin: 0;
        padding: 0;

        color: #ffffff;

        font-size:
            clamp(
                11px,
                2.9vw,
                13px
            );

        line-height: 1.2;

        text-align: center;

        white-space: nowrap;
    }


    /* ----------------------------------------------------------------------
       CTA
       ---------------------------------------------------------------------- */

    /**
     * 旧站：
     * 两个 CTA 左下纵向排列。
     * 与右侧 Lens Strip 同处 Hero 下部。
     */

    .mislens-home-hero__actions {
        position: absolute;

        z-index: 11;

        right: auto;
        bottom: 16px;
        left: 5px;

        display: flex;
        flex-direction: column;

        align-items: flex-start;

        width: auto;

        gap: 8px;
    }

    .mislens-home-hero__button {
        flex: none;

        width: auto;
        min-width: 132px;

        min-height: 44px;

        padding:
            0
            13px;

        font-size: 14px;
    }


    /* ----------------------------------------------------------------------
       Certification strip
       ---------------------------------------------------------------------- */

    .mislens-home-cert-strip__inner {
        width: 100%;

        margin: 0;

        padding:
            8px
            10px;

        overflow: hidden;
    }

    .mislens-home-cert-strip__image {
        display: block;

        width: 100%;
        max-width: 100%;

        height: auto;
        max-height: none;

        margin: 0 auto;

        object-fit: contain;
    }

}


/* ==========================================================================
   16. SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .mislens-home-hero {
        height: 610px;
    }

    .mislens-home-hero__mobile-model {
        right: -9%;
    }

    .mislens-home-hero__heading {
        top: 40px;
        left: 24px;

        max-width:
            calc(100% - 48px);

        height: 100px;

        font-size:
            clamp(
                28px,
                8.2vw,
                34px
            );

        line-height: 1.08;
    }

    .mislens-home-hero__positioning {
        top: 154px;
        left: 25px;

        max-width:
            calc(100% - 50px);
    }

    .mislens-home-hero__positioning-primary,
    .mislens-home-hero__positioning-secondary {
        font-size: 12px;
    }

    .mislens-home-hero__positioning-primary {
        padding:
            7px
            10px;
    }

    .mislens-home-hero__positioning-secondary {
        padding:
            7px
            10px;
    }

    .mislens-home-hero__lenses {
        right: 3%;
        bottom: 45px;

        width: 50%;
    }

    .mislens-home-hero__manufacturing {
        right: 1%;
        bottom: 12px;

        width: 62%;

        font-size: 11px;
    }

    .mislens-home-hero__actions {
        left: 4px;
        bottom: 14px;
    }

    .mislens-home-hero__button {
        min-width: 124px;
        min-height: 42px;

        padding:
            0
            11px;

        font-size: 13px;
    }

}


/* ==========================================================================
   Part 2 COMPANY SCALE
   ========================================================================== */

.mislens-home-company-scale {
    width: 100%;

    padding:
        58px
        24px
        64px;

    background: #ffffff;
}

.mislens-home-company-scale__inner {
    width: min(
        100%,
        var(--mislens-home-container)
    );

    margin: 0 auto;
}

.mislens-home-company-scale__heading {
    margin:
        0
        0
        26px;

    color: #242126;

    font-family:
        var(--mislens-home-font);

    font-size: 30px;
    line-height: 1.2;

    font-weight: 500;

    text-align: center;
}

.mislens-home-company-scale__grid {
    display: grid;

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

    gap: 18px;
}

.mislens-home-company-scale__item {
    box-sizing: border-box;

    min-height: 136px;

    padding:
        21px
        18px
        19px;

    background: #f8f8f8;

    text-align: center;
}


/* ==========================================================================
   COMPANY SCALE ICONS
   ========================================================================== */

.mislens-home-company-scale__icon {
    position: relative;

    width: 28px;
    height: 28px;

    margin:
        0
        auto
        14px;

    color:
        var(--mislens-home-pink);

    border:
        2px solid
        currentColor;

    box-sizing: border-box;
}


/* Item 1: package */

.mislens-home-company-scale__icon--1 {
    width: 25px;
    height: 28px;

    border: 0;

    transform: none;
}

.mislens-home-company-scale__icon--1::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 3px;

    width: 17px;
    height: 17px;

    border:
        2px solid
        currentColor;

    transform:
        skewY(30deg);

    border-radius: 1px;
}

.mislens-home-company-scale__icon--1::after {
    content: "";

    position: absolute;

    top: 1px;
    left: 8px;

    width: 16px;
    height: 17px;

    border:
        2px solid
        currentColor;

    transform:
        skewY(-30deg);

    border-radius: 1px;
}


/* Item 2: location */

.mislens-home-company-scale__icon--2 {
    width: 25px;
    height: 31px;

    border-radius:
        50%
        50%
        50%
        0;

    transform:
        rotate(-45deg);
}

.mislens-home-company-scale__icon--2::after {
    content: "";

    position: absolute;

    top: 7px;
    left: 7px;

    width: 7px;
    height: 7px;

    border:
        2px solid
        currentColor;

    border-radius: 50%;
}


/* Item 3 / 4: partner / team style */

.mislens-home-company-scale__icon--3,
.mislens-home-company-scale__icon--4 {
    width: 26px;
    height: 25px;

    border-radius: 3px;
}

.mislens-home-company-scale__icon--3::before,
.mislens-home-company-scale__icon--4::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 6px;

    width: 10px;
    height: 2px;

    background:
        currentColor;

    box-shadow:
        0 5px 0 currentColor;
}

.mislens-home-company-scale__icon--3::after,
.mislens-home-company-scale__icon--4::after {
    content: "";

    position: absolute;

    right: -6px;
    bottom: -6px;

    width: 11px;
    height: 11px;

    border:
        2px solid
        currentColor;

    border-radius: 50%;

    background: #f8f8f8;
}


/* ==========================================================================
   COMPANY SCALE TEXT
   ========================================================================== */

.mislens-home-company-scale__value {
    margin-bottom: 7px;

    color: #111111;

    font-family:
        var(--mislens-home-font);

    font-size: 17px;
    line-height: 1.2;

    font-weight: 700;
}

.mislens-home-company-scale__label {
    color: #333333;

    font-family:
        var(--mislens-home-font);

    font-size: 13px;
    line-height: 1.45;

    font-weight: 400;
}


/* ==========================================================================
   COMPANY SCALE MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .mislens-home-company-scale {
        padding:
            42px
            16px
            46px;
    }

    .mislens-home-company-scale__heading {
        margin-bottom: 25px;

        font-size: 25px;
    }

    .mislens-home-company-scale__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .mislens-home-company-scale__item {
        min-height: 135px;

        padding:
            22px
            10px
            18px;
    }

    .mislens-home-company-scale__value {
        font-size: 16px;
    }

    .mislens-home-company-scale__label {
        font-size: 12px;
    }

}

.mislens-home-company-scale__icon--package {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin:
        0
        auto
        10px;

    border: 0;

    color:
        var(--mislens-home-pink);
}

.mislens-home-company-scale__icon--package svg {
    display: block;

    width: 32px;
    height: 32px;
}


/* ==========================================================================
   03 BRAND
   ========================================================================== */

.mislens-home-brand {
    width: 100%;

    padding:
        58px
        24px;

    background:
        #e987a5;
}

.mislens-home-brand__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: center;

    gap:
        clamp(
            40px,
            5vw,
            78px
        );

    width: min(
        100%,
        var(--mislens-home-container)
    );

    margin: 0 auto;
}


/* ==========================================================================
   BRAND MEDIA
   ========================================================================== */

.mislens-home-brand__media {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.mislens-home-brand__image {
    display: block;

    width: 100%;
    max-width: 620px;
    height: auto;

    object-fit: contain;
}


/* ==========================================================================
   BRAND CONTENT
   ========================================================================== */

.mislens-home-brand__content {
    max-width: 500px;
}

.mislens-home-brand__eyebrow {
    margin:
        0
        0
        10px;

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

    font-family:
        var(--mislens-home-font);

    font-size: 13px;
    line-height: 1.3;

    font-weight: 600;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.mislens-home-brand__heading {
    margin:
        0
        0
        18px;

    color: #ffffff;

    font-family:
        var(--mislens-home-font);

    font-size:
        clamp(
            30px,
            3vw,
            46px
        );

    line-height: 1.08;

    font-weight: 500;

    letter-spacing:
        -0.02em;
}

.mislens-home-brand__body {
    max-width: 470px;

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

    font-family:
        var(--mislens-home-font);

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}

.mislens-home-brand__body p {
    margin:
        0
        0
        13px;
}

.mislens-home-brand__body p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   BRAND CTA
   ========================================================================== */

.mislens-home-brand__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    margin-top: 25px;

    padding:
        0
        22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.82
        );

    border-radius: 4px;

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

    color: #ffffff;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.mislens-home-brand__button:hover,
.mislens-home-brand__button:focus {
    border-color: #ffffff;

    background: #ffffff;

    color:
        var(--mislens-home-pink-dark);

    text-decoration: none;
}


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

@media (max-width: 980px) {

    .mislens-home-brand__inner {
        gap: 34px;
    }

    .mislens-home-brand__heading {
        font-size:
            clamp(
                28px,
                4vw,
                38px
            );
    }

    .mislens-home-brand__body {
        font-size: 14px;
    }

}


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

@media (max-width: 767px) {

    .mislens-home-brand {
        padding:
            42px
            18px
            46px;
    }

    .mislens-home-brand__inner {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .mislens-home-brand__media {
        width: 100%;
    }

    .mislens-home-brand__image {
        width: 100%;
        max-width: 520px;

        margin: 0 auto;
    }

    .mislens-home-brand__content {
        width: 100%;
        max-width: none;
    }

    .mislens-home-brand__eyebrow {
        margin-bottom: 8px;

        font-size: 12px;
    }

    .mislens-home-brand__heading {
        margin-bottom: 15px;

        font-size:
            clamp(
                27px,
                7.5vw,
                34px
            );
    }

    .mislens-home-brand__body {
        max-width: none;

        font-size: 14px;
        line-height: 1.65;
    }

    .mislens-home-brand__button {
        min-height: 43px;

        margin-top: 21px;

        padding:
            0
            18px;

        font-size: 13px;
    }

}


/* ==========================================================================
   04 MANUFACTURING
   ========================================================================== */

.mislens-home-manufacturing {
    width: 100%;

    padding:
        68px
        24px;

    background: #ffffff;
}

.mislens-home-manufacturing__inner {
    display: grid;

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

    align-items: center;

    gap:
        clamp(
            48px,
            6vw,
            86px
        );

    width: min(
        100%,
        var(--mislens-home-container)
    );

    margin: 0 auto;
}


/* ==========================================================================
   MANUFACTURING MEDIA
   ========================================================================== */

.mislens-home-manufacturing__media {
    min-width: 0;
}

.mislens-home-manufacturing__image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 390px;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   MANUFACTURING CONTENT
   ========================================================================== */

.mislens-home-manufacturing__content {
    width: 100%;
    max-width: 500px;
}

.mislens-home-manufacturing__eyebrow {
    margin:
        0
        0
        10px;

    color:
        var(--mislens-home-pink-dark);

    font-family:
        var(--mislens-home-font);

    font-size: 12px;
    line-height: 1.3;

    font-weight: 600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.mislens-home-manufacturing__heading {
    margin:
        0
        0
        18px;

    color: #262229;

    font-family:
        var(--mislens-home-font);

    font-size:
    clamp(
        29px,
        2.4vw,
        38px
    );

    line-height: 1.12;

    font-weight: 500;

    letter-spacing:
        -0.02em;
}

.mislens-home-manufacturing__body {
    max-width: 470px;

    margin:
        0
        0
        25px;

    color: #646067;

    font-family:
        var(--mislens-home-font);

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================================================
   MANUFACTURING CAPABILITIES
   ========================================================================== */

.mislens-home-manufacturing__capabilities {
    display: flex;
    flex-wrap: wrap;

    gap:
        10px
        12px;

    margin:
        0
        0
        27px;
}

.mislens-home-manufacturing__capability {
    display: inline-flex;
    align-items: center;

    min-height: 36px;

    padding:
        0
        14px;

    border:
        1px solid
        #eadde1;

    background:
        #faf7f8;

    color: #433e43;

    font-family:
        var(--mislens-home-font);

    font-size: 13px;
    line-height: 1.2;

    font-weight: 500;
}


/* ==========================================================================
   MANUFACTURING CTA
   ========================================================================== */

.mislens-home-manufacturing__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        22px;

    border:
        1px solid
        var(--mislens-home-pink);

    border-radius: 4px;

    background:
        var(--mislens-home-pink);

    color: #ffffff;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.mislens-home-manufacturing__button:hover,
.mislens-home-manufacturing__button:focus {
    border-color:
        var(--mislens-home-pink-dark);

    background:
        var(--mislens-home-pink-dark);

    color: #ffffff;

    text-decoration: none;
}


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

@media (max-width: 980px) {

    .mislens-home-manufacturing {
        padding:
            56px
            22px;
    }

    .mislens-home-manufacturing__inner {
        gap: 36px;
    }

    .mislens-home-manufacturing__heading {
        font-size:
            clamp(
                27px,
                4vw,
                36px
            );
    }

    .mislens-home-manufacturing__body {
        font-size: 14px;
    }

}


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

@media (max-width: 767px) {

    .mislens-home-manufacturing {
        padding:
            44px
            18px
            48px;
    }

    .mislens-home-manufacturing__inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .mislens-home-manufacturing__media {
        width: 100%;
    }

    .mislens-home-manufacturing__image {
        width: 100%;
        max-height: none;
    }

    .mislens-home-manufacturing__content {
        max-width: none;
    }

    .mislens-home-manufacturing__eyebrow {
        margin-bottom: 8px;

        font-size: 11px;
    }

    .mislens-home-manufacturing__heading {
        margin-bottom: 15px;

        font-size:
            clamp(
                26px,
                7vw,
                32px
            );
    }

    .mislens-home-manufacturing__body {
        max-width: none;

        margin-bottom: 21px;

        font-size: 14px;
        line-height: 1.65;
    }

    .mislens-home-manufacturing__capabilities {
        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 23px;
    }

    .mislens-home-manufacturing__capability {
        width: 100%;

        min-height: 38px;

        box-sizing: border-box;

        padding:
            0
            13px;

        font-size: 13px;
    }

    .mislens-home-manufacturing__button {
        min-height: 43px;

        padding:
            0
            18px;

        font-size: 13px;
    }

}

/* ==========================================================================
   05 FAQ
   ========================================================================== */

.mislens-home-faq {
    width: 100%;

    padding:
        72px
        24px;

    background: #ffffff;
}

.mislens-home-faq__inner {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.34fr)
        minmax(0, 0.66fr);

    align-items: start;

    gap:
        clamp(
            54px,
            7vw,
            100px
        );

    width: min(
        100%,
        var(--mislens-home-container)
    );

    margin: 0 auto;
}


/* ==========================================================================
   FAQ INTRO
   ========================================================================== */

.mislens-home-faq__intro {
    position: sticky;

    top: 110px;
}

.mislens-home-faq__eyebrow {
    margin:
        0
        0
        10px;

    color:
        var(--mislens-home-pink-dark);

    font-family:
        var(--mislens-home-font);

    font-size: 12px;
    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.mislens-home-faq__heading {
    max-width: 390px;

    margin:
        0
        0
        18px;

    color: #262229;

    font-family:
        var(--mislens-home-font);

    font-size:
        clamp(
            30px,
            2.7vw,
            40px
        );

    line-height: 1.12;

    font-weight: 500;

    letter-spacing: -0.02em;
}

.mislens-home-faq__description {
    max-width: 390px;

    margin:
        0;

    color: #646067;

    font-family:
        var(--mislens-home-font);

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================================================
   FAQ BUTTON
   ========================================================================== */

.mislens-home-faq__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    margin-top: 25px;

    padding:
        0
        21px;

    border:
        1px solid
        var(--mislens-home-pink);

    border-radius: 4px;

    background:
        var(--mislens-home-pink);

    color: #ffffff;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.mislens-home-faq__button:hover,
.mislens-home-faq__button:focus {
    border-color:
        var(--mislens-home-pink-dark);

    background:
        var(--mislens-home-pink-dark);

    color: #ffffff;

    text-decoration: none;
}


/* ==========================================================================
   FAQ LIST
   ========================================================================== */

.mislens-home-faq__list {
    width: 100%;

    border-top:
        1px solid
        #ded9dc;
}

.mislens-home-faq__item {
    margin: 0;

    border-bottom:
        1px solid
        #ded9dc;

    background: transparent;
}


/* ==========================================================================
   FAQ QUESTION
   ========================================================================== */

.mislens-home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    min-height: 74px;

    padding:
        19px
        4px;

    color: #29252c;

    font-family:
        var(--mislens-home-font);

    font-size: 16px;
    line-height: 1.45;

    font-weight: 500;

    cursor: pointer;

    list-style: none;
}

.mislens-home-faq__question::-webkit-details-marker {
    display: none;
}

.mislens-home-faq__question::marker {
    display: none;
}


/* ==========================================================================
   FAQ PLUS / MINUS
   ========================================================================== */

.mislens-home-faq__toggle {
    position: relative;

    flex:
        0
        0
        22px;

    width: 22px;
    height: 22px;
}

.mislens-home-faq__toggle::before,
.mislens-home-faq__toggle::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 14px;
    height: 1.5px;

    background: #302c31;

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        transform 150ms ease,
        opacity 150ms ease;
}

.mislens-home-faq__toggle::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(90deg);
}

.mislens-home-faq__item[open]
.mislens-home-faq__toggle::after {
    opacity: 0;
}


/* ==========================================================================
   FAQ ANSWER
   ========================================================================== */

.mislens-home-faq__answer {
    max-width: 760px;

    padding:
        0
        48px
        23px
        4px;

    color: #666168;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1.7;

    font-weight: 400;
}

.mislens-home-faq__answer p {
    margin:
        0
        0
        10px;
}

.mislens-home-faq__answer p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   FAQ INTERACTION
   ========================================================================== */

.mislens-home-faq__question:hover {
    color:
        var(--mislens-home-pink-dark);
}

.mislens-home-faq__question:focus-visible {
    outline:
        2px solid
        var(--mislens-home-pink);

    outline-offset: 4px;
}


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

@media (max-width: 980px) {

    .mislens-home-faq {
        padding:
            58px
            22px;
    }

    .mislens-home-faq__inner {
        grid-template-columns:
            minmax(220px, 0.36fr)
            minmax(0, 0.64fr);

        gap: 38px;
    }

    .mislens-home-faq__heading {
        font-size:
            clamp(
                28px,
                4vw,
                35px
            );
    }

    .mislens-home-faq__description {
        font-size: 14px;
    }

    .mislens-home-faq__question {
        min-height: 68px;

        font-size: 15px;
    }

}


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

@media (max-width: 767px) {

    .mislens-home-faq {
        padding:
            46px
            18px
            50px;
    }

    .mislens-home-faq__inner {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .mislens-home-faq__intro {
        position: static;
    }

    .mislens-home-faq__eyebrow {
        margin-bottom: 8px;

        font-size: 11px;
    }

    .mislens-home-faq__heading {
        max-width: none;

        margin-bottom: 14px;

        font-size:
            clamp(
                26px,
                7vw,
                32px
            );
    }

    .mislens-home-faq__description {
        max-width: none;

        font-size: 14px;
        line-height: 1.65;
    }

    .mislens-home-faq__button {
        min-height: 43px;

        margin-top: 20px;

        padding:
            0
            18px;

        font-size: 13px;
    }

    .mislens-home-faq__question {
        min-height: 64px;

        gap: 16px;

        padding:
            17px
            2px;

        font-size: 14px;
        line-height: 1.45;
    }

    .mislens-home-faq__answer {
        max-width: none;

        padding:
            0
            34px
            20px
            2px;

        font-size: 13px;
        line-height: 1.65;
    }

    .mislens-home-faq__toggle {
        flex-basis: 20px;

        width: 20px;
        height: 20px;
    }

}

/* ==========================================================================
   06 CONTACT
   ========================================================================== */

.mislens-home-contact {
    width: 100%;

    padding:
        72px
        24px
        78px;

    background: #ffffff;
}

.mislens-home-contact__inner {
    width: min(
        100%,
        980px
    );

    margin: 0 auto;
}


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

.mislens-home-contact__header {
    max-width: 760px;

    margin:
        0
        auto
        34px;

    text-align: center;
}

.mislens-home-contact__heading {
    margin:
        0
        0
        14px;

    color: #262229;

    font-family:
        var(--mislens-home-font);

    font-size:
        clamp(
            30px,
            2.6vw,
            40px
        );

    line-height: 1.12;

    font-weight: 500;

    letter-spacing: -0.02em;
}

.mislens-home-contact__intro {
    max-width: 680px;

    margin: 0 auto;

    color: #646067;

    font-family:
        var(--mislens-home-font);

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.mislens-home-contact__form {
    width: 100%;

    margin: 0 auto;
}


/* Fluent Forms root */
.mislens-home-contact__form .fluentform {
    width: 100%;
}


/* Form labels */
.mislens-home-contact__form .ff-el-input--label label {
    color: #302c31;

    font-family:
        var(--mislens-home-font);

    font-size: 13px;
    line-height: 1.4;

    font-weight: 500;
}


/* Inputs */
.mislens-home-contact__form
.ff-el-form-control {
    min-height: 46px;

    border:
        1px solid
        #ddd7da;

    border-radius: 3px;

    background: #ffffff;

    color: #2e2a2f;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;

    box-shadow: none;
}


/* Textarea */
.mislens-home-contact__form
textarea.ff-el-form-control {
    min-height: 130px;

    resize: vertical;
}


/* Focus */
.mislens-home-contact__form
.ff-el-form-control:focus {
    border-color:
        var(--mislens-home-pink);

    box-shadow:
        0 0 0 1px
        var(--mislens-home-pink);

    outline: none;
}


/* ==========================================================================
   CONTACT SUBMIT
   ========================================================================== */

.mislens-home-contact__form
.ff-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        0
        24px;

    border:
        1px solid
        var(--mislens-home-pink);

    border-radius: 4px;

    background:
        var(--mislens-home-pink);

    color: #ffffff;

    font-family:
        var(--mislens-home-font);

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    box-shadow: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.mislens-home-contact__form
.ff-btn-submit:hover,
.mislens-home-contact__form
.ff-btn-submit:focus {
    border-color:
        var(--mislens-home-pink-dark);

    background:
        var(--mislens-home-pink-dark);

    color: #ffffff;
}


/* ==========================================================================
   CONTACT SPACING
   ========================================================================== */

.mislens-home-contact__form
.ff-el-group {
    margin-bottom: 18px;
}

.mislens-home-contact__form
.ff-el-input--content {
    margin-top: 6px;
}


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

@media (max-width: 767px) {

    .mislens-home-contact {
        padding:
            48px
            18px
            54px;
    }

    .mislens-home-contact__header {
        margin-bottom: 28px;

        text-align: left;
    }

    .mislens-home-contact__heading {
        margin-bottom: 12px;

        font-size:
            clamp(
                26px,
                7vw,
                32px
            );
    }

    .mislens-home-contact__intro {
        max-width: none;

        font-size: 14px;
        line-height: 1.65;
    }

    .mislens-home-contact__form
    .ff-el-form-control {
        min-height: 44px;

        font-size: 14px;
    }

    .mislens-home-contact__form
    textarea.ff-el-form-control {
        min-height: 120px;
    }

    .mislens-home-contact__form
    .ff-btn-submit {
        width: 100%;

        min-height: 45px;
    }

}

/* ==========================================================================
   06 CONTACT - FLUENT FORMS SUBMIT BUTTON FIX
   ========================================================================== */

.mislens-home-contact__form
button[type="submit"],
.mislens-home-contact__form
input[type="submit"],
.mislens-home-contact__form
.ff-btn-submit,
.mislens-home-contact__form
.ff-btn.ff-btn-submit {
    border: 1px solid var(--mislens-home-pink) !important;
    background: var(--mislens-home-pink) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.mislens-home-contact__form
button[type="submit"]:hover,
.mislens-home-contact__form
button[type="submit"]:focus,
.mislens-home-contact__form
input[type="submit"]:hover,
.mislens-home-contact__form
input[type="submit"]:focus,
.mislens-home-contact__form
.ff-btn-submit:hover,
.mislens-home-contact__form
.ff-btn-submit:focus {
    border-color: var(--mislens-home-pink-dark) !important;
    background: var(--mislens-home-pink-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   HERO BUTTON VISUAL ENHANCEMENT
   ========================================================================== */

.mislens-home-hero__button {
    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(90, 45, 58, 0.16);

    transform:
        translateY(0);

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* ==========================================================================
   PRIMARY CTA
   ========================================================================== */

.mislens-home-hero__button--primary {
    box-shadow:
        0 5px 14px
        rgba(239, 100, 138, 0.28);
}

.mislens-home-hero__button--primary:hover,
.mislens-home-hero__button--primary:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(239, 100, 138, 0.34);
}


/* ==========================================================================
   SECONDARY CTA
   ========================================================================== */

.mislens-home-hero__button--secondary {
    position: relative;

    border-color:
        rgba(
            255,
            255,
            255,
            0.92
        );

    background:
        rgba(
            250,
            117,
            152,
            0.88
        );

    box-shadow:
        0 4px 12px
        rgba(90, 45, 58, 0.14),
        0 0 0 0
        rgba(255, 255, 255, 0.36);

    animation:
        mislens-hero-inquiry-pulse
        3.8s
        ease-out
        infinite;
}

.mislens-home-hero__button--secondary:hover,
.mislens-home-hero__button--secondary:focus-visible {
    transform:
        translateY(-2px);

    border-color: #ffffff;

    background:
        var(--mislens-home-pink-dark);

    box-shadow:
        0 8px 18px
        rgba(90, 45, 58, 0.24);

    animation: none;
}


/* ==========================================================================
   SUBTLE INQUIRY PULSE
   ========================================================================== */

@keyframes mislens-hero-inquiry-pulse {

    0% {
        box-shadow:
            0 4px 12px
            rgba(90, 45, 58, 0.14),
            0 0 0 0
            rgba(255, 255, 255, 0.34);
    }

    55% {
        box-shadow:
            0 4px 12px
            rgba(90, 45, 58, 0.14),
            0 0 0 7px
            rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow:
            0 4px 12px
            rgba(90, 45, 58, 0.14),
            0 0 0 7px
            rgba(255, 255, 255, 0);
    }

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mislens-home-hero__button {
        transition: none;
    }

    .mislens-home-hero__button--secondary {
        animation: none;
    }

}

/* ==========================================================================
   MISLENS HOME - RTL / ARABIC LAYOUT CONTROL
   --------------------------------------------------------------------------
   原则：
   - 文字保持 RTL
   - 已冻结的模块物理布局保持和英文一致
   - 不允许 direction: rtl 自动翻转 Grid / Flex 的左右结构
   ========================================================================== */


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

/*
 * Hero 整体物理布局保持 LTR：
 * 左侧标题区仍在左边，
 * CTA 仍在右边，
 * 背景构图不镜像。
 */
html[dir="rtl"] .mislens-home-hero__inner {
    direction: ltr;
}


/*
 * 左侧阿拉伯语文字自身使用 RTL。
 */
html[dir="rtl"] .mislens-home-hero__left {
    direction: rtl;
    text-align: right;
}


/*
 * Positioning 保持原有物理排列，
 * 但每段文字本身按 RTL 显示。
 */
html[dir="rtl"] .mislens-home-hero__positioning {
    direction: ltr;
}

html[dir="rtl"] .mislens-home-hero__positioning-primary,
html[dir="rtl"] .mislens-home-hero__positioning-secondary {
    direction: rtl;
}


/*
 * Hero CTA 继续保持英文版物理顺序：
 * Explore Products → Inquire Now
 */
html[dir="rtl"] .mislens-home-hero__actions {
    direction: ltr;
}

html[dir="rtl"] .mislens-home-hero__button {
    direction: rtl;
}


/* ==========================================================================
   02 COMPANY SCALE
   ========================================================================== */

/*
 * 防止 4 张数据卡片顺序被 RTL 整体反排。
 */
html[dir="rtl"] .mislens-home-company-scale__grid {
    direction: ltr;
}


/*
 * 卡片内部文字仍按阿拉伯语阅读。
 */
html[dir="rtl"] .mislens-home-company-scale__item {
    direction: rtl;
    text-align: center;
}


/* ==========================================================================
   03 BRAND
   ========================================================================== */

/*
 * 冻结结构：
 *
 * 左 = Product Image
 * 右 = Brand Content
 *
 * RTL 不改变两列位置。
 */
html[dir="rtl"] .mislens-home-brand__inner {
    direction: ltr;
}


/*
 * 右侧阿拉伯语内容使用 RTL。
 */
html[dir="rtl"] .mislens-home-brand__content {
    direction: rtl;
    text-align: right;
}


/*
 * CTA 文本本身使用 RTL。
 */
html[dir="rtl"] .mislens-home-brand__button {
    direction: rtl;
}


/* ==========================================================================
   04 MANUFACTURING
   ========================================================================== */

/*
 * 冻结结构：
 *
 * 左 = Manufacturing Image
 * 右 = Content
 */
html[dir="rtl"] .mislens-home-manufacturing__inner {
    direction: ltr;
}


/*
 * 右侧内容 RTL。
 */
html[dir="rtl"] .mislens-home-manufacturing__content {
    direction: rtl;
    text-align: right;
}


/*
 * 能力标签文字 RTL，
 * 但标签区域自身不镜像整个模块。
 */
html[dir="rtl"] .mislens-home-manufacturing__capabilities {
    direction: rtl;
}

html[dir="rtl"] .mislens-home-manufacturing__capability {
    direction: rtl;
    text-align: right;
}


/*
 * CTA RTL。
 */
html[dir="rtl"] .mislens-home-manufacturing__button {
    direction: rtl;
}


/* ==========================================================================
   05 FAQ
   ========================================================================== */

/*
 * 冻结 PC 结构：
 *
 * 左 = FAQ Intro
 * 右 = Accordion
 */
html[dir="rtl"] .mislens-home-faq__inner {
    direction: ltr;
}


/*
 * 两侧内容各自恢复 Arabic RTL。
 */
html[dir="rtl"] .mislens-home-faq__intro,
html[dir="rtl"] .mislens-home-faq__list {
    direction: rtl;
    text-align: right;
}


/*
 * FAQ 问题文字 RTL，
 * + / - 仍保持在视觉末端。
 */
html[dir="rtl"] .mislens-home-faq__question {
    direction: rtl;
    text-align: right;
}


/*
 * Answer RTL。
 */
html[dir="rtl"] .mislens-home-faq__answer {
    direction: rtl;
    text-align: right;
}


/*
 * FAQ CTA RTL。
 */
html[dir="rtl"] .mislens-home-faq__button {
    direction: rtl;
}


/* ==========================================================================
   06 CONTACT
   ========================================================================== */

html[dir="rtl"] .mislens-home-contact {
    direction: rtl;
}


/*
 * Contact 标题 / Intro。
 */
html[dir="rtl"] .mislens-home-contact__header {
    direction: rtl;
}


/*
 * PC 原本标题居中，所以继续居中。
 */
html[dir="rtl"] .mislens-home-contact__heading,
html[dir="rtl"] .mislens-home-contact__intro {
    direction: rtl;
}


/*
 * 表单文字、Label、输入内容 RTL。
 */
html[dir="rtl"] .mislens-home-contact__form {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .mislens-home-contact__form .ff-el-input--label {
    text-align: right;
}

html[dir="rtl"] .mislens-home-contact__form .ff-el-form-control {
    direction: rtl;
    text-align: right;
}


/*
 * Email / Phone 这类用户可能输入拉丁字符或数字的字段，
 * 浏览器继续依据实际输入内容自动处理。
 */
html[dir="rtl"] .mislens-home-contact__form input[type="email"],
html[dir="rtl"] .mislens-home-contact__form input[type="tel"] {
    unicode-bidi: plaintext;
}


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

@media (max-width: 767px) {

    /*
     * Mobile 本来就是单列，
     * 不需要镜像结构，只处理文字阅读方向。
     */

    html[dir="rtl"] .mislens-home-contact__header {
        text-align: right;
    }

    html[dir="rtl"] .mislens-home-manufacturing__capability {
        text-align: right;
    }

    html[dir="rtl"] .mislens-home-faq__question,
    html[dir="rtl"] .mislens-home-faq__answer {
        text-align: right;
    }

}