/*==========================================
            MILIA — HERO SECTION
==========================================*/

.milia-hero{

    position:relative;

    padding:80px 6% 30px;

    background:linear-gradient(
        135deg,
        #fff8fc 0%,
        #ffffff 55%,
        #fff7fb 100%
    );

    overflow:hidden;

}

.mh-wrap{

    max-width:1300px;

    margin:auto;

    min-height:620px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.mh-content{

    max-width:620px;

}

.mh-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:22px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f2d8e6;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    letter-spacing:.04em;

}

.mh-title{

    margin:0 0 24px;

    font-family:var(--ff-heading);

    font-size:clamp(3.5rem,5vw,5.5rem);

    font-weight:300;

    line-height:1.05;

    color:var(--clr-heading);

}

.mh-description{

    max-width:590px;

    margin:0 0 15px;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}

.mh-actions{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:32px;

}

.mh-button{

        display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-family: var(--ff-paragraph);
    padding: 16px 34px;
    border-radius: 999px;
    background: var(--clr-primary);
    text-decoration: none;
    transition: 0.35s
}

.mh-button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(207,103,157,.22);

}

.mh-note{

    font-family:var(--ff-paragraph);

    font-size:.78rem;

    color:#9c8490;

}


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

.mh-visual{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.mh-visual::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;

    background:#fde8f2;

    opacity:.55;

    filter:blur(2px);

}

.mh-image-wrap{

    position:relative;

    z-index:1;

    width:100%;

    max-width:540px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.mh-image{

    display:block;

    width:130%;

    max-width:650px;

    height:auto;

    object-fit:contain;

    transition:transform .45s ease;

}

.mh-image:hover{

    transform:translateY(-8px);

}


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

@media(max-width:1050px){

    .mh-wrap{

        grid-template-columns:1fr  .9fr;

        gap:40px;

    }

    .mh-title{

        font-size:4.2rem;

    }

    .mh-visual::before{

        width:350px;

        height:350px;

    }

}


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

@media(max-width:800px){

    .milia-hero{

        padding:80px 6% 70px;

    }

    .mh-wrap{

        grid-template-columns:1fr;

        gap:45px;

        min-height:auto;

        text-align:center;

    }

    .mh-content{

        max-width:700px;

        margin:auto;

    }

    .mh-description{

        margin-left:auto;

        margin-right:auto;

    }

    .mh-actions{

        justify-content:center;

    }

    .mh-visual{

        min-height:420px;

        order:-1;

    }

    .mh-image-wrap{

        max-width:430px;

    }

}


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

@media(max-width:520px){

    .milia-hero{

        padding:65px 6% 60px;

    }

    .mh-pill{

        margin-bottom:17px;

        font-size:.78rem;

    }

    .mh-title{

        font-size:3.2rem;

        margin-bottom:20px;

    }

    .mh-description{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mh-actions{

        flex-direction:column;

        gap:13px;

        margin-top:27px;

    }

    .mh-button{

        width:100%;

        max-width:260px;

    }

    .mh-note{

        font-size:.90rem;

    }

    .mh-visual{

        min-height:320px;

    }

    .mh-visual::before{

        width:270px;

        height:270px;

    }

    .mh-image-wrap{

        max-width:320px;

    }

}

/*==========================================
        SECTION 1 — WHAT ARE MILIA?
==========================================*/

.milia-intro{

    padding:95px 6%;

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

}

.mi-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mi-head{

    text-align:center;

    max-width:850px;

    margin:0 auto 65px;

}

.mi-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mi-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mi-sub{

    max-width:760px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size: 1.05rem;

   
    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            MAIN CONTENT
==========================================*/

.mi-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:75px;

}


/*==========================================
            IMAGE
==========================================*/

.mi-image{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:450px;

}

.mi-image img{

    display:block;

    width:100%;

    max-width:470px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.mi-image img:hover{

    transform:translateY(-7px);

}


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

.mi-content{

    max-width:560px;

}

.mi-small-title{

    display:block;

    margin-bottom:12px;

    font-family:var(--ff-paragraph);

    font-size:1.01rem;

    font-weight: 600;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:var(--clr-primary);

}

.mi-content h3{

    margin:0 0 20px;

    font-family:var(--ff-paragraph);

    font-size:2rem;

    font-weight:300;

    line-height:1.35;

    color:var(--clr-heading);

}

.mi-content  p{

    margin:0 0 17px;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            HIGHLIGHT
==========================================*/

.mi-highlight{

    margin-top:28px;

    padding:22px 24px;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

}

.mi-highlight-label{

    display:block;

    margin-bottom:8px;

    font-family:var(--ff-paragraph);

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#c96d9d;

}

.mi-highlight p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:.99rem;

    line-height:1.75;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .mi-main{

        grid-template-columns:1fr;

        gap:45px;

    }

    .mi-image{

        min-height:auto;

        order:-1;

    }

    .mi-image img{

        max-width:390px;

    }

    .mi-content{

        max-width:700px;

        margin:auto;

        text-align:center;

    }

    .mi-small-title{

        margin-bottom:10px;

    }

}


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

@media(max-width:600px){

    .milia-intro{

        padding:70px 6%;

    }

    .mi-head{

        margin-bottom:45px;

    }

    .mi-title{

        font-size:2.2rem;

    }

    .mi-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mi-image{

        min-height:280px;

    }

    .mi-image img{

        max-width:310px;

    }

    .mi-content h3{

        font-size:1.6rem;

    }

    .mi-content > p{

        font-size:1.02rem;

        line-height:1.8;

    }

    .mi-highlight{

        padding:19px;

        text-align:left;

    }

    .mi-highlight p{

        font-size:.99rem;

    }

}

/*==========================================
        SECTION 2 — HOW DO MILIA DEVELOP?
==========================================*/

.milia-formation{

    padding:95px 6%;

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

}

.mf-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mf-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.mf-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mf-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mf-sub{

    max-width:720px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            TIMELINE
==========================================*/

.mf-timeline{

    display:flex;

    align-items:stretch;

    gap:14px;

}


/*==========================================
            STEP
==========================================*/

.mf-step{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

}

.mf-step-number{

    width:42px;

    height:42px;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff1f8;

    border:1px solid #f1d4e3;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:.90rem;

    letter-spacing:.04em;

}


/*==========================================
            STEP CARD
==========================================*/

.mf-card{

    height:100%;

    background:#ffffff;

    border:1px solid #eedfe7;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.045);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.mf-card:hover{

    transform:translateY(-7px);

    border-color:#efc5db;

    box-shadow:0 20px 45px rgba(236,180,215,.15);

}

.mf-card img{

    display:block;

    width:100%;

    height:190px;

    object-fit:contain;

    padding:18px;

    background:#fffafd;

}

.mf-card-content{

    padding:24px 22px 25px;

}

.mf-card-content > span{

    display:block;

    margin-bottom:8px;

    font-family:var(--ff-paragraph);

    font-size:1.04rem;

    font-weight: 700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--clr-primary);

}

.mf-card-content h3{

    margin:0 0 11px;

    font-family:var(--ff-paragraph);

    font-size:1.25rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.mf-card-content p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            CONNECTOR
==========================================*/

.mf-connector{

    width:25px;

    flex-shrink:0;

    align-self:center;

    height:1px;

    margin-top:130px;

    background:#e8cad9;

}


/*==========================================
            REMINDER
==========================================*/

.mf-reminder{

    max-width:850px;

    margin:35px auto 0;

    padding:20px 25px;

    text-align:center;

    background:#fff7fb;

    border:1px solid #f2dbe7;

    border-radius:20px;

}

.mf-reminder p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


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

@media(max-width:1050px){

    .mf-timeline{

        display:grid;

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

        gap:24px;

    }

    .mf-connector{

        display:none;

    }

    .mf-step-number{

        margin-left:0;

    }

}


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

@media(max-width:600px){

    .milia-formation{

        padding:70px 6%;

    }

    .mf-head{

        margin-bottom:45px;

    }

    .mf-title{

        font-size:2.2rem;

    }

    .mf-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mf-timeline{

        grid-template-columns:1fr;

        gap:18px;

    }

    .mf-step-number{

        margin:0 0 12px;

        width:38px;

        height:38px;

    }

    .mf-card img{

        height:210px;

    }

    .mf-card-content{

        padding:21px 20px 23px;

    }

    .mf-card-content h3{

        font-size:1.18rem;

    }

    .mf-card-content p{

        font-size:.85rem;

    }

    .mf-reminder{

        margin-top:25px;

        padding:18px;

    }

    .mf-reminder p{

        font-size:.85rem;

    }

}

/*==========================================
        SECTION 3 — SIGNS & APPEARANCE
==========================================*/

.milia-signs{

    padding:95px 6%;

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

}

.ms-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.ms-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.ms-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.ms-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.ms-sub{

    max-width:700px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.ms-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:75px;

}


/*==========================================
            VISUAL
==========================================*/

.ms-visual{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:440px;

    background:#fffafd;

    border:1px solid #f2e1e9;

    border-radius:32px;

    overflow:hidden;

}

.ms-visual img{

    display:block;

    width:100%;

    max-width:380px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.ms-visual img:hover{

    transform:translateY(-7px);

}


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

.ms-content{

    max-width:560px;

}

.ms-small-title{

    display:block;

    margin-bottom:11px;

    font-family:var(--ff-paragraph);

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.ms-content h3{

    margin:0 0 25px;

    font-family:var(--ff-heading);

    font-size:2rem;

    font-weight:300;

    line-height:1.35;

    color:var(--clr-heading);

}


/*==========================================
            CHARACTERISTICS
==========================================*/

.ms-characteristics{

    display:grid;

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

    gap:12px;

}

.ms-item{

    position:relative;

    padding:16px 18px 16px 30px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:17px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.6;

    color:var(--clr-text);

    transition:.3s ease;

}

.ms-item::before{

    content:"";

    position:absolute;

    left:15px;

    top:24px;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#d88aad;

}

.ms-item:hover{

    transform:translateY(-3px);

    border-color:#efc5db;

    box-shadow:0 10px 25px rgba(236,180,215,.12);

}


/*==========================================
            BOTTOM NOTE
==========================================*/

.ms-note{

    max-width:900px;

    margin:40px auto 0;

    padding:22px 28px;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

    text-align:center;

}

.ms-note-content span{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:2rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#c795b0;

}

.ms-note-content p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .ms-main{

        grid-template-columns:1fr;

        gap:45px;

    }

    .ms-visual{

        min-height:380px;

    }

    .ms-visual img{

        max-width:400px;

    }

    .ms-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .milia-signs{

        padding:70px 6%;

    }

    .ms-head{

        margin-bottom:45px;

    }

    .ms-title{

        font-size:2.2rem;

    }

    .ms-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .ms-visual{

        min-height:290px;

        border-radius:25px;

    }

    .ms-visual img{

        max-width:320px;

    }

    .ms-content h3{

        font-size:1.65rem;

        margin-bottom:20px;

    }

    .ms-characteristics{

        grid-template-columns:1fr;

        gap:10px;

    }

    .ms-item{

        padding:14px 16px 14px 29px;

        font-size:.85rem;

    }

    .ms-note{

        margin-top:28px;

        padding:18px;

    }

    .ms-note-content p{

        font-size:.85rem;

    }

}

/*==========================================
        SECTION 4 — TYPES OF MILIA
==========================================*/

.milia-types{

    padding:95px 6%;

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

}

.mt-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mt-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.mt-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mt-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mt-sub{

    max-width:720px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            TYPE GRID
==========================================*/

.mt-grid{

    display:grid;

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

    gap:28px;

}


/*==========================================
            TYPE CARD
==========================================*/

.mt-card{

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.mt-card:hover{

    transform:translateY(-7px);

    border-color:#efc5db;

    box-shadow:0 22px 50px rgba(236,180,215,.16);

}


/*==========================================
            CARD TOP
==========================================*/

.mt-card-top{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:260px;

    background:#fffafd;

    border-bottom:1px solid #f2e3e9;

}

.mt-number{

    position:absolute;

    top:20px;

    left:23px;

    font-family:var(--ff-heading);

    font-size:.8rem;

    letter-spacing:.08em;

    color:#d39ab6;

}

.mt-image{

    width:100%;

    height:260px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.mt-image img{

    width:100%;

    max-width:300px;

    height:100%;

    object-fit:contain;

    transition:transform .4s ease;

}

.mt-card:hover .mt-image img{

    transform:translateY(-6px);

}


/*==========================================
            CARD CONTENT
==========================================*/

.mt-content{

    padding:30px;

}

.mt-label{

    display:inline-block;

    margin-bottom:10px;

    font-family:var(--ff-paragraph);

    font-size:.90rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.mt-content h3{

    margin:0 0 15px;

    font-family:var(--ff-paragraph);

    font-size:1.55rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.mt-content p{

    margin:0 0 15px;

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}

.mt-content p:last-of-type{

    margin-bottom:0;

}


/*==========================================
            SECONDARY MILIA CAUSES
==========================================*/

.mt-causes{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:20px;

}

.mt-causes span{

    padding:8px 12px;

    border-radius:999px;

    background:#fff7fb;

    border:1px solid #f1dbe6;

    font-family:var(--ff-paragraph);

    font-size:.96rem;

    color:var(--clr-primary);

}


/*==========================================
            BOTTOM NOTE
==========================================*/

.mt-note{

    max-width:900px;

    margin:35px auto 0;

    padding:22px 27px;

    text-align:center;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

}

.mt-note span{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:2rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#c795b0;

}

.mt-note p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:800px){

    .mt-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .mt-card{

        max-width:650px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .milia-types{

        padding:70px 6%;

    }

    .mt-head{

        margin-bottom:45px;

    }

    .mt-title{

        font-size:2.2rem;

    }

    .mt-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mt-card-top{

        min-height:220px;

    }

    .mt-image{

        height:220px;

    }

    .mt-image img{

        max-width:250px;

    }

    .mt-content{

        padding:24px 21px;

    }

    .mt-content h3{

        font-size:1.35rem;

    }

    .mt-content p{

        font-size:.87rem;

    }

    .mt-causes span{

        font-size:.73rem;

        padding:7px 10px;

    }

    .mt-note{

        margin-top:25px;

        padding:18px;

    }

    .mt-note p{

        font-size:.85rem;

    }

}



/*==========================================
        SECTION 6 — COMMON AREAS
==========================================*/

.milia-areas{

    padding:95px 6%;

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

}

.ma-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.ma-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.ma-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.ma-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.ma-sub{

    max-width:720px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.ma-main{

    display:grid;

    grid-template-columns:470px 1fr;

    align-items:center;

    gap:65px;

}


/*==========================================
            VISUAL
==========================================*/

.ma-visual{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:500px;

    padding:20px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.ma-visual img{

    display:block;

    width:100%;

    max-width:350px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.ma-visual img:hover{

    transform:translateY(-7px);

}


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

.ma-content{

    max-width:650px;

}

.ma-small-title{

    display:block;

    margin-bottom:11px;

    font-family:var(--ff-paragraph);

    font-size:.90rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.ma-content h3{

    margin:0 0 25px;

    font-family:var(--ff-heading);

    font-size:2rem;

    font-weight:300;

    line-height:1.35;

    color:var(--clr-heading);

}


/*==========================================
            AREA GRID
==========================================*/

.ma-area-grid{

    display:grid;

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

    gap:13px;

}

.ma-area{

    position:relative;

    padding:20px 20px 19px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:20px;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.ma-area:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

    box-shadow:0 12px 28px rgba(236,180,215,.12);

}

.ma-number{

    display:block;

    margin-bottom:10px;

    font-family:var(--ff-paragraph);

    font-size:.68rem;

    letter-spacing:.08em;

    color:#d39ab6;

}

.ma-area h4{

    margin:0 0 7px;

    font-family:var(--ff-paragraph);

    font-size:1.5rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.ma-area p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.65;

    color:var(--clr-text);

}


/*==========================================
            BOTTOM NOTE
==========================================*/

.ma-note{

    max-width:900px;

    margin:38px auto 0;

    padding:21px 27px;

    text-align:center;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

}

.ma-note p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:1000px){

    .ma-main{

        grid-template-columns:1fr;

        gap:45px;

    }

    .ma-visual{

        min-height:400px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .ma-visual img{

        max-width:400px;

    }

    .ma-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .milia-areas{

        padding:70px 6%;

    }

    .ma-head{

        margin-bottom:45px;

    }

    .ma-title{

        font-size:2.2rem;

    }

    .ma-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .ma-visual{

        min-height:300px;

        padding:12px;

        border-radius:25px;

    }

    .ma-visual img{

        max-width:320px;

    }

    .ma-content h3{

        font-size:1.65rem;

        margin-bottom:20px;

    }

    .ma-area-grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .ma-area{

        padding:17px 18px;

    }

    .ma-area h4{

        font-size:1.05rem;

    }

    .ma-area p{

        font-size:1.02rem;

    }

    .ma-note{

        margin-top:28px;

        padding:18px;

    }

    .ma-note p{

        font-size:.85rem;

    }

}


/*==========================================
        SECTION 7 — MILIA VS CLOSED COMEDONES
==========================================*/

.milia-comparison{

    padding:95px 6%;

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

}

.mco-wrap{

    max-width:1150px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mco-head{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.mco-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mco-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mco-sub{

    max-width:740px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            COMPARISON TABLE
==========================================*/

.mco-table-wrap{

    overflow-x:auto;

    border:1px solid #eedfe7;

    border-radius:28px;

    background:#ffffff;

    box-shadow:0 12px 35px rgba(0,0,0,.045);

}

.mco-table{

    min-width:720px;

}


/*==========================================
            TABLE ROW
==========================================*/

.mco-row{

    display:grid;

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

    border-bottom:1px solid #f0e3e9;

}

.mco-row:last-child{

    border-bottom:none;

}


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

.mco-header{

    background:#fff4fa;

}

.mco-header .mco-feature{

    color:#8f7884;

}

.mco-header .mco-column{

    font-family:var(--ff-heading);

    font-size:1.25rem;

    font-weight:400;

    color:var(--clr-heading);

}

.milia-column{

    background:rgba(255,239,247,.45);

}

.comedone-column{

    background:rgba(250,247,249,.7);

}


/*==========================================
            CELLS
==========================================*/

.mco-feature{

    display:flex;

    align-items:center;

    padding:21px 25px;

    font-family:var(--ff-paragraph);

    font-size:.99rem;

    font-weight:400;

    color:var(--clr-text);

    background:#fffafd;

}

.mco-column{

    display:flex;

    align-items:center;

    padding:21px 25px;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.7;

    color:var(--clr-text);

    border-left:1px solid #f0e3e9;

}


/*==========================================
            QUICK TIP
==========================================*/

.mco-tip{

    max-width:850px;

    margin:35px auto 0;

    padding:25px 30px;

    background:linear-gradient(
        135deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:25px;

    text-align:center;

}

.mco-tip-content span{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:.83rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--clr-primary);

}

.mco-tip-content h3{

    margin:0 0 9px;

    font-family:var(--ff-heading);

    font-size:1.65rem;

    font-weight:400;

    color:var(--clr-heading);

}

.mco-tip-content p{

    max-width:680px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:800px){

    .mco-title{

        font-size:2.45rem;

    }

    .mco-table-wrap{

        border-radius:22px;

    }

    .mco-column,
    .mco-feature{

        padding:18px 20px;

    }

}


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

@media(max-width:600px){

    .milia-comparison{

        padding:70px 5%;

    }

    .mco-head{

        margin-bottom:45px;

    }

    .mco-title{

        font-size:2.2rem;

    }

    .mco-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mco-table{

        min-width:680px;

    }

    .mco-header .mco-column{

        font-size:1.1rem;

    }

    .mco-feature{

        padding:17px 18px;

        font-size:.76rem;

    }

    .mco-column{

        padding:17px 18px;

        font-size:1.02rem;

        line-height:1.65;

    }

    .mco-tip{

        margin-top:25px;

        padding:20px;

    }

    .mco-tip-content h3{

        font-size:1.25rem;

    }

    .mco-tip-content p{

        font-size:.84rem;

    }

}
/*==========================================
        SECTION 8 — CAN YOU POP MILIA?
==========================================*/

.milia-squeeze{

    padding:95px 6%;

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

}

.msp-wrap{

    max-width:1150px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.msp-head{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.msp-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.msp-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.msp-sub{

    max-width:750px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            MAIN CONTENT
==========================================*/

.msp-main{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:28px;

    align-items:stretch;

}


/*==========================================
            ANSWER PANEL
==========================================*/

.msp-answer{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:40px 32px;

    background:linear-gradient(
        145deg,
        #fdf0f7,
        #ffffff
    );

    border:1px solid #f0d5e4;

    border-radius:30px;

    box-shadow:0 12px 35px rgba(0,0,0,.045);

}

.msp-answer-label{

    margin-bottom:10px;

    font-family:var(--ff-paragraph);

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.msp-answer h3{

    margin:0 0 15px;

    font-family:var(--ff-heading);

    font-size:4.5rem;

    font-weight:300;

    line-height:1;

    color:#c96d9d;

}

.msp-answer p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.01rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            RISKS
==========================================*/

.msp-risks{

    padding:35px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:30px;

    box-shadow:0 12px 35px rgba(0,0,0,.045);

}

.msp-small-title{

    display:block;

    margin-bottom:10px;

    font-family:var(--ff-paragraph);

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.msp-risks h3{

    max-width:600px;

    margin:0 0 25px;

    font-family:var(--ff-heading);

    font-size:1.90rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


/*==========================================
            RISK LIST
==========================================*/

.msp-risk-list{

    display:grid;

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

    gap:12px;

}

.msp-risk{

    display:flex;

    align-items:center;

    gap:13px;

    padding:17px 18px;

    background:#fff8fb;

    border:1px solid #f1dfe8;

    border-radius:18px;

}

.msp-risk span{

    flex-shrink:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    letter-spacing:.06em;

    color:#d39ab6;

}

.msp-risk p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.6;

    color:var(--clr-text);

}


/*==========================================
        PROFESSIONAL REMOVAL
==========================================*/

.msp-professional{

    margin-top:28px;

    padding:28px 32px;

    background:linear-gradient(
        135deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.msp-professional-content{

    max-width:850px;

}

.msp-professional-content > span{

    display:block;

    margin-bottom:8px;

    font-family:var(--ff-paragraph);

    font-size:.80rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.msp-professional h3{

    margin:0 0 9px;

    font-family:var(--ff-heading);

    font-size:1.4rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.msp-professional p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:850px){

    .msp-main{

        grid-template-columns:1fr;

    }

    .msp-answer{

        min-height:260px;

    }

}


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

@media(max-width:600px){

    .milia-squeeze{

        padding:70px 6%;

    }

    .msp-head{

        margin-bottom:45px;

    }

    .msp-title{

        font-size:2.2rem;

    }

    .msp-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .msp-answer{

        padding:30px 24px;

        min-height:220px;

    }

    .msp-answer h3{

        font-size:3.8rem;

    }

    .msp-risks{

        padding:25px 20px;

    }

    .msp-risks h3{

        font-size:1.45rem;

    }

    .msp-risk-list{

        grid-template-columns:1fr;

    }

    .msp-risk{

        padding:15px;

    }

    .msp-risk p{

        font-size:1.02rem;

    }

    .msp-professional{

        padding:22px 20px;

    }

    .msp-professional h3{

        font-size:1.25rem;

    }

    .msp-professional p{

        font-size:.85rem;

    }

}

/*==========================================
        SECTION 9 — CAN MILIA GO AWAY?
==========================================*/

.milia-natural{

    padding:95px 6%;

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

}

.mn-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mn-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.mn-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:.92rem;

    letter-spacing:.04em;

}

.mn-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mn-sub{

    max-width:700px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.mn-main{

    display:flex;

    
    align-items:center;

    justify-content: center;

    gap:70px;

}


/*==========================================
            VISUAL
==========================================*/


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

.mn-content{

    max-width:570px;

}

.mn-small-title{

    display:block;

    margin-bottom:11px;

    font-family:var(--ff-paragraph);

    font-size:.90rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.mn-content h3{

    margin:0 0 20px;

    font-family:var(--ff-heading);

    font-size:2rem;

    font-weight:300;

    line-height:1.35;

    color:var(--clr-heading);

}

.mn-content > p{

    margin:0 0 16px;

    font-family:var(--ff-paragraph);

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            OUTCOMES
==========================================*/

.mn-outcomes{

    display:grid;

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

    gap:13px;

    margin-top:28px;

}

.mn-outcome{

    padding:20px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:20px;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.mn-outcome:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

    box-shadow:0 12px 28px rgba(236,180,215,.12);

}

.mn-outcome-label{

    display:block;

    margin-bottom:9px;

    font-family:var(--ff-paragraph);

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.07em;

    color:#c795b0;

}

.mn-outcome p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.7;

    color:var(--clr-text);

}


/*==========================================
            BOTTOM NOTE
==========================================*/

.mn-note{

    max-width:900px;

    margin:38px auto 0;

    padding:21px 27px;

    text-align:center;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

}

.mn-note p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.01rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .mn-main{

        grid-template-columns:1fr;

        gap:45px;

    }

    .mn-visual{

        min-height:390px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .mn-visual img{

        max-width:400px;

    }

    .mn-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .milia-natural{

        padding:70px 6%;

    }

    .mn-head{

        margin-bottom:45px;

    }

    .mn-title{

        font-size:2.2rem;

    }

    .mn-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mn-visual{

        min-height:300px;

        padding:12px;

        border-radius:25px;

    }

    .mn-visual img{

        max-width:320px;

    }

    .mn-content h3{

        font-size:1.65rem;

    }

    .mn-content > p{

        font-size:.87rem;

        line-height:1.8;

    }

    .mn-outcomes{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:23px;

    }

    .mn-outcome{

        padding:17px;

    }

    .mn-outcome p{

        font-size:1.02rem;

    }

    .mn-note{

        margin-top:28px;

        padding:18px;

    }

    .mn-note p{

        font-size:.85rem;

    }

}

/*==========================================
        SECTION 10 — INGREDIENTS & SKINCARE
==========================================*/

.milia-skincare{

    padding:95px 6%;

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

}

.mks-wrap{

    max-width:1150px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mks-head{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.mks-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mks-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mks-sub{

    max-width:730px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            INGREDIENT GRID
==========================================*/

.mks-grid{

    display:grid;

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

    gap:18px;

}


/*==========================================
            INGREDIENT CARD
==========================================*/

.mks-card{

    position:relative;

    min-height:190px;

    padding:30px 30px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.045);

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.mks-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#f1c9dd;

    opacity:.8;

}

.mks-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 18px 42px rgba(236,180,215,.14);

}

.mks-card img{

    display:block;

    width:100%;

    max-width:120px;

    height:auto;

    margin-bottom:18px;

    object-fit:contain;

}
/*==========================================
            CARD NUMBER
==========================================*/

.mks-card-number{

    margin-bottom:25px;

    font-family:var(--ff-paragraph);

    font-size:.7rem;

    letter-spacing:.1em;

    color:#d39ab6;

}


/*==========================================
            CARD CONTENT
==========================================*/

.mks-card h3{

    margin:0 0 11px;

    font-family:var(--ff-paragraph);

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.mks-card p{

    max-width:470px;

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            IMPORTANT NOTE
==========================================*/

.mks-important{

    margin-top:30px;

    padding:28px 32px;

    background:linear-gradient(
        135deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:27px;

}

.mks-important-content{

    max-width:850px;

}

.mks-important span{

    display:block;

    margin-bottom:8px;

    font-family:var(--ff-paragraph);

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.mks-important h3{

    margin:0 0 10px;

    font-family:var(--ff-heading);

    font-size:1.45rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}

.mks-important p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:700px){

    .mks-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .mks-card{

        min-height:auto;

    }

}


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

@media(max-width:600px){

    .milia-skincare{

        padding:70px 6%;

    }

    .mks-head{

        margin-bottom:45px;

    }

    .mks-title{

        font-size:2.2rem;

    }

    .mks-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mks-card{

        padding:24px 22px;

        border-radius:21px;

    }

    .mks-card-number{

        margin-bottom:20px;

    }

    .mks-card h3{

        font-size:1.3rem;

    }

    .mks-card p{

        font-size:.85rem;

        line-height:1.75;

    }

    .mks-important{

        padding:22px 20px;

        border-radius:22px;

    }

    .mks-important h3{

        font-size:1.25rem;

    }

    .mks-important p{

        font-size:.85rem;

    }

}

/*==========================================
        SECTION 11 — PREVENTION TIPS
==========================================*/

.milia-prevention{

    padding:95px 6%;

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

}

.mp-wrap{

    max-width:1100px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mp-head{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.mp-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mp-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mp-sub{

    max-width:720px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            PREVENTION LIST
==========================================*/

.mp-list{

    display:grid;

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

    gap:16px;

}


/*==========================================
            PREVENTION ITEM
==========================================*/

.mp-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:25px 27px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:23px;

    box-shadow:0 9px 27px rgba(0,0,0,.04);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.mp-item:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 18px 40px rgba(236,180,215,.13);

}

.mp-item img{

    display:block;

    width:100%;

    max-width:90px;

    height:auto;

    object-fit:contain;

}
/*==========================================
            NUMBER
==========================================*/

.mp-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

    font-family:var(--ff-paragraph);

    font-size:.68rem;

    letter-spacing:.05em;

    color:#c96d9d;

}


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

.mp-content{

    flex:1;

}

.mp-content h3{

    margin:0 0 9px;

    font-family:var(--ff-paragraph);

    font-size:1.25rem;

    font-weight:600;

    line-height:1.45;

    color:var(--clr-heading);

}

.mp-content p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            BOTTOM REMINDER
==========================================*/

.mp-reminder{

    max-width:850px;

    margin:32px auto 0;

    padding:24px 28px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.mp-reminder span{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:.93rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.mp-reminder p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.01rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:750px){

    .mp-list{

        grid-template-columns:1fr;

        gap:13px;

    }

}


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

@media(max-width:600px){

    .milia-prevention{

        padding:70px 6%;

    }

    .mp-head{

        margin-bottom:45px;

    }

    .mp-title{

        font-size:2.2rem;

    }

    .mp-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mp-item{

        gap:14px;

        padding:20px;

        border-radius:20px;

    }

    .mp-number{

        width:34px;

        height:34px;

        font-size:.64rem;

    }

    .mp-content h3{

        font-size:1.1rem;

    }

    .mp-content p{

        font-size:.83rem;

        line-height:1.7;

    }

    .mp-reminder{

        margin-top:25px;

        padding:19px;

    }

    .mp-reminder p{

        font-size:.85rem;

    }

}



/*==========================================
        SECTION 12 — MYTHS VS FACTS
==========================================*/

.milia-myths{

    padding:95px 6%;

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

}

.mm-wrap{

    max-width:1100px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mm-head{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.mm-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mm-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mm-sub{

    max-width:730px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            MYTH / FACT LIST
==========================================*/

.mm-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}


/*==========================================
            CARD
==========================================*/

.mm-card{

    position:relative;

    display:grid;

    grid-template-columns:55px 1fr 1.2fr;

    align-items:center;

    gap:25px;

    padding:26px 30px 26px 22px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:24px;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.mm-card:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

    box-shadow:0 17px 38px rgba(236,180,215,.13);

}


/*==========================================
            NUMBER
==========================================*/

.mm-number{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:.68rem;

    letter-spacing:.05em;

}


/*==========================================
            MYTH
==========================================*/

.mm-myth{

    padding-right:20px;

    border-right:1px solid #f0e1e8;

}

.mm-myth span,
.mm-fact span{

    display:block;

    margin-bottom:8px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    
    font-weight: 700;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:var(--clr-primary);

}

.mm-myth h3{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.2rem;

    font-weight:300;

    line-height:1.5;

    color:var(--clr-heading);

}


/*==========================================
            FACT
==========================================*/

.mm-fact{

    padding-left:5px;

}

.mm-fact p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            REMINDER
==========================================*/

.mm-reminder{

    max-width:850px;

    margin:30px auto 0;

    padding:23px 28px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.mm-reminder span{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.mm-reminder p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:800px){

    .mm-card{

        grid-template-columns:45px 1fr;

        gap:18px;

        padding:23px;

    }

    .mm-fact{

        grid-column:2;

        padding:17px 0 0;

        border-top:1px solid #f0e1e8;

    }

    .mm-myth{

        border-right:none;

        padding-right:0;

    }

}


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

@media(max-width:600px){

    .milia-myths{

        padding:70px 6%;

    }

    .mm-head{

        margin-bottom:45px;

    }

    .mm-title{

        font-size:2.2rem;

    }

    .mm-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mm-card{

        grid-template-columns:38px 1fr;

        gap:14px;

        padding:20px;

        border-radius:20px;

    }

    .mm-number{

        width:34px;

        height:34px;

        font-size:.62rem;

    }

    .mm-myth h3{

        font-size:1.08rem;

    }

    .mm-fact{

        grid-column:2;

        padding-top:15px;

    }

    .mm-fact p{

        font-size:.83rem;

        line-height:1.75;

    }

    .mm-reminder{

        margin-top:25px;

        padding:19px;

    }

    .mm-reminder p{

        font-size:.84rem;

    }

}

/*==========================================
        SECTION 13 — MIMII'S TIP
==========================================*/

.mk-note-panel{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    max-width:1250px;

    margin:70px auto;

    padding:0 42px;

    background:linear-gradient(
        135deg,
        #fff8fc,
        #ffffff,
        #fff6fb
    );

    border:1px solid #f4dde7;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(236,177,201,.12);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.mk-note-panel:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(236,177,201,.18);

}


/*==========================================
            MIMII IMAGE
==========================================*/

.mk-note-avatar{

    width:100%;

    max-width:330px;

    flex-shrink:0;

    align-self:flex-end;

}

.mk-note-avatar img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

}


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

.mk-note-content{

    flex:1;

    padding:45px 0;

}

.mk-note-label{

    display:inline-block;

    margin-bottom:16px;

    font-family:var(--ff-heading);

    font-size:1.7rem;

    font-weight:500;

    color:#cf679d;

}

.mk-note-title{

    margin:0 0 16px;

    font-family:var(--ff-heading);

    font-size:2rem;

    font-weight:400;

    line-height:1.35;

    color:#222;

}

.mk-note-description{

    max-width:600px;

    margin:0 0 22px;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.9;

    color:#666;

}

.mk-note-signature{

    font-family:var(--ff-paragraph);

    font-size:.95rem;

    font-weight:600;

    color:#bf7296;

}


/*==========================================
            DECORATION
==========================================*/

.mk-note-decoration{

    width:90px;

    flex-shrink:0;

    align-self:flex-end;

}

.mk-note-decoration img{

    display:block;

    width:100%;

    height:auto;

}


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

@media(max-width:950px){

    .mk-note-panel{

        gap:40px;

        padding:0 30px;

    }

    .mk-note-avatar{

        max-width:330px;

    }

    .mk-note-title{

        font-size:1.7rem;

    }

    .mk-note-description{

        font-size:.94rem;

    }

    .mk-note-decoration{

        width:65px;

    }

}


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

@media(max-width:700px){

    .mk-note-panel{

        flex-direction:column;

        gap:0;

        margin:55px 6%;

        padding:30px 25px 0;

        text-align:center;

    }

    .mk-note-content{

        order:1;

        padding:0 0 30px;

    }

    .mk-note-avatar{

        order:2;

        max-width:280px;

        align-self:center;

    }

    .mk-note-decoration{

        display:none;

    }

    .mk-note-label{

        font-size:1.45rem;

        margin-bottom:12px;

    }

    .mk-note-title{

        font-size:1.55rem;

        line-height:1.4;

    }

    .mk-note-description{

        font-size:1.02rem;

        line-height:1.8;

        margin-bottom:18px;

    }

    .mk-note-signature{

        font-size:1.02rem;

    }

}

/*==========================================
        SECTION 5 — WHAT CAUSES MILIA?
==========================================*/

.milia-causes{

    padding:95px 6%;

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

}

.mc-wrap{

    max-width:1250px;

    margin:auto;

}


/*==========================================
            SECTION HEADING
==========================================*/

.mc-head{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.mc-pill{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    letter-spacing:.04em;

}

.mc-title{

    margin:0 0 18px;

    font-family:var(--ff-heading);

    font-size:2.8rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.mc-sub{

    max-width:740px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.mc-layout{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:30px;

    align-items:stretch;

}


/*==========================================
            FEATURED CAUSE
==========================================*/

.mc-feature{

    display:flex;

    flex-direction:column;

    background:linear-gradient(
        145deg,
        #fff1f8,
        #ffffff
    );

    border:1px solid #f1d6e5;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 13px 35px rgba(0,0,0,.05);

    transition:.35s ease;

}

.mc-feature:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 48px rgba(236,180,215,.15);

}

.mc-feature-image{

    height:270px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fffafd;

    border-bottom:1px solid #f1e0e8;

}

.mc-feature-image img{

    width:100%;

    max-width:330px;

    height:100%;

    object-fit:contain;

    transition:transform .4s ease;

}

.mc-feature:hover .mc-feature-image img{

    transform:translateY(-6px);

}

.mc-feature-content{

    padding:28px 30px 32px;

}

.mc-feature-label{

    display:block;

    margin-bottom:9px;

    font-family:var(--ff-paragraph);

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.mc-feature-content h3{

    margin:0 0 13px;

    font-family:var(--ff-paragraph);

    font-size:1.7rem;

    font-weight:300;

    color:var(--clr-heading);

}

.mc-feature-content p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            OTHER CAUSES
==========================================*/

.mc-list{

    display:grid;

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

    gap:18px;

}

.mc-item{

    position:relative;

    padding:28px 25px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:24px;

    box-shadow:0 9px 27px rgba(0,0,0,.045);

    transition:.3s ease;

    overflow:hidden;

}

.mc-item:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 18px 40px rgba(236,180,215,.13);

}
.mc-item img{

    display:block;

    width:100%;

    max-width:150px;

    height:auto;

    object-fit:contain;

    margin-bottom:15px;

}
.mc-number{

    position:absolute;

    top:16px;

    right:19px;

    font-family:var(--ff-heading);

    font-size:.76rem;

    letter-spacing:.08em;

    color:#d39ab6;

}

.mc-item-content{

    padding-top:13px;

    display: flex;

    align-items: center;

}

.mc-item h3{

    margin:0 0 10px;

    padding-right:30px;

    font-family:var(--ff-paragraph);

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.mc-item p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.75;

    color:var(--clr-text);

}

.injury1 img{

     display:block;

    width:100%;

    max-width:190px;

    height:auto;

    object-fit:contain;

    margin-bottom:80px;


}
/*==========================================
            BOTTOM NOTE
==========================================*/

.mc-note{

    max-width:900px;

    margin:35px auto 0;

    padding:21px 27px;

    text-align:center;

    background:#fff4fa;

    border:1px solid #f1d7e5;

    border-radius:22px;

}

.mc-note p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1.01rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:1024px){

    .mc-layout{

        grid-template-columns:1fr;

        gap:25px;

    }

    .mc-feature{

        max-width:650px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:780px){

    .milia-causes{

        padding:70px 6%;

    }

    .mc-head{

        margin-bottom:45px;

    }

    .mc-title{

        font-size:2.2rem;

    }

    .mc-sub{

        font-size:1.01rem;

        line-height:1.8;

    }

    .mc-feature-image{

        height:230px;

    }

    .mc-feature-image img{

        max-width:270px;

    }

    .mc-feature-content{

        padding:24px 21px 26px;

    }

    .mc-feature-content h3{

        font-size:1.45rem;

    }

    .mc-feature-content p{

        font-size:.87rem;

    }

    .mc-list{

        grid-template-columns:1fr;

        gap:13px;

    }

    .mc-item{

        padding:22px 20px;

    }

    .mc-item h3{

        font-size:1.15rem;

    }

    .mc-item p{

        font-size:.84rem;

    }

    .mc-note{

        margin-top:25px;

        padding:18px;

    }

    .mc-note p{

        font-size:.85rem;

    }

}