/*==========================================
            ROSACEA — HOME / HERO
==========================================*/

.rosacea-home{

    position:relative;

    padding:105px 5% 10px;

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

    overflow:hidden;

}

.ros-home-wrap{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

}


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

.ros-home-content{

    max-width:650px;

}

.ros-home-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff;

    border:1px solid #f0dce5;

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

    font-size:.78rem;

    letter-spacing:.08em;

    color:#bd7898;

}

.ros-home-content h1{

    margin:0 0 22px;

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

    font-size:4rem;

    font-weight:400;

    line-height:1.15;

    color:var(--clr-heading);

}

.ros-home-description{

    max-width:620px;

    margin:0 0 15px;

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

    font-size:1.06rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            QUICK SYMPTOMS
==========================================*/

.ros-home-points{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px 20px;

    margin-top:30px;

}

.ros-home-point{

    display:flex;

    align-items:center;

    gap:10px;

}

.ros-home-dot{

    width:7px;

    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:#d48aaa;

}

.ros-home-point p{

    margin:0;

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

    font-size:1rem;

    line-height:1.6;

    color:#665c62;

}


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

.ros-home-note{

    display:flex;

    align-items:stretch;

    gap:15px;

    max-width:610px;

    margin-top:30px;

    padding:18px 20px;

    background:rgba(255,255,255,.75);

    border:1px solid #f0dce5;

    border-radius:18px;

}

.ros-home-note-line{

    width:3px;

    flex-shrink:0;

    border-radius:10px;

    background:#d995b1;

}

.ros-home-note p{

    margin:0;

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

    font-size:.98rem;

    line-height:1.75;

    color:#756a70;

}


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

.ros-home-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:520px;

}

.ros-home-glow{

    position:absolute;

    width:390px;

    height:390px;

    border-radius:50%;

    background:#f8dce6;

    filter:blur(15px);

    opacity:.55;

}

.ros-home-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.ros-home-visual img:hover{

    transform:translateY(-7px);

}


/*==========================================
            BOTTOM INTRO
==========================================*/

.ros-home-bottom{

    max-width:1200px;

    margin:0 auto 0;

    padding-top:25px;

    border-top:1px solid #f0dfe6;

    text-align:center;

}

.ros-home-bottom p{

    margin:0;

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

    font-size:1rem;

    line-height:1.7;

    color:#766a70;

}

.ros-home-bottom strong{

    font-weight:600;

    color:#b9668d;

}


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

@media(max-width:950px){

    .rosacea-home{

        padding:85px 6% 65px;

    }

    .ros-home-wrap{

        grid-template-columns:1fr;

        gap:45px;

    }

    .ros-home-content{

        max-width:750px;

        margin:auto;

        text-align:center;

    }

    .ros-home-description{

        margin-left:auto;

        margin-right:auto;

    }

    .ros-home-points{

        max-width:620px;

        margin:28px auto 0;

        text-align:left;

    }

    .ros-home-note{

        margin-left:auto;

        margin-right:auto;

        text-align:left;

    }

    .ros-home-visual{

        min-height:400px;

    }

    .ros-home-visual img{

        max-width:420px;

    }

}


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

@media(max-width:600px){

    .rosacea-home{

        padding:70px 6% 55px;

    }

    .ros-home-wrap{

        gap:30px;

    }

    .ros-home-content h1{

        font-size:2.8rem;

        line-height:1.2;

    }

    .ros-home-description{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ros-home-points{

        grid-template-columns:1fr;

        gap:8px;

        margin-top:25px;

    }

    .ros-home-point{

        justify-content:center;

    }

    .ros-home-point p{

        font-size:1rem;

    }

    .ros-home-note{

        padding:16px;

        margin-top:25px;

        text-align:left;

    }

    .ros-home-note p{

        font-size:1rem;

        line-height:1.75;

    }

    .ros-home-visual{

        min-height:290px;

    }

    .ros-home-glow{

        width:230px;

        height:230px;

    }

    .ros-home-visual img{

        max-width:320px;

    }

    .ros-home-bottom{

        margin-top:45px;

    }

    .ros-home-bottom p{

        font-size:.96rem;

    }

}

/*==========================================
        SECTION 1 — WHY DOES ROSACEA HAPPEN?
==========================================*/

.rosacea-cause{

    padding:100px 6%;

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

}

.roc-wrap{

    max-width:1200px;

    margin:auto;

}


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

.roc-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.roc-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.roc-head h2{

    margin:0 0 20px;

    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);

}

.roc-intro{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            FACTOR GRID
==========================================*/

.roc-grid{

    display:grid;

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

    gap:18px;

}


/*==========================================
            FACTOR CARDS
==========================================*/

.roc-card{

    position:relative;

    min-height:220px;

    padding:28px 24px 25px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

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

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.roc-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#e7b5ca;

}

.roc-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 15px 35px rgba(221,163,191,.12);

}


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

.roc-card-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100px;

    height:100px;

    margin-bottom:22px;

    border-radius:13px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

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

    font-size:.72rem;

    letter-spacing:.06em;

    color:#c17b9b;

}


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

.roc-card h3{

    margin:0 0 10px;

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

    font-size:1.05rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.roc-card p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            KEY MESSAGE
==========================================*/

.roc-message{

    display:flex;

    align-items:flex-start;

    gap:18px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.roc-message-mark{

    width:4px;

    min-height:80px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.roc-message span{

    display:block;

    margin-bottom:8px;

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

    font-size:.73rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#bd7898;

}

.roc-message p{

    margin:0 0 6px;

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

    font-size:1.04rem;

    line-height:1.75;

    color:var(--clr-text);

}

.roc-message p:last-child{

    margin-bottom:0;

}

.roc-message strong{

    font-weight:600;

    color:#9e5f7e;

}


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

@media(max-width:950px){

    .roc-grid{

        grid-template-columns:1fr 1fr;

    }

    .roc-card:last-child{

        grid-column:1 / -1;

        max-width:500px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .rosacea-cause{

        padding:75px 6%;

    }

    .roc-head{

        margin-bottom:50px;

    }

    .roc-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .roc-grid{

        grid-template-columns:1fr;

        gap:13px;

    }

    .roc-card{

        min-height:auto;

        padding:24px 19px 22px;

        border-radius:22px;

    }

    .roc-card:last-child{

        grid-column:auto;

        max-width:none;

    }

    .roc-card-number{

        width:36px;

        height:36px;

        margin-bottom:18px;

    }

    .roc-card h3{

        font-size:1.08rem;

    }

    .roc-card p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .roc-message{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .roc-message-mark{

        min-height:95px;

    }

    .roc-message p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 2 — HOW DOES ROSACEA DEVELOP?
==========================================*/

.rosacea-development{

    padding:100px 6%;

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

}

.rod-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rod-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.rod-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rod-head h2{

    margin:0 0 20px;

    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rod-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            DEVELOPMENT FLOW
==========================================*/

.rod-flow{

    max-width:850px;

    margin:auto;

}

.rod-step{

    display:flex;

    align-items:center;

    gap:24px;

    padding:25px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:24px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.rod-step:hover{

    transform:translateX(5px);

    border-color:#efc5db;

    box-shadow:0 14px 32px rgba(221,163,191,.12);

}


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

.rod-step-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff2f7;

    border:1px solid #f1d6e3;

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

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}


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

.rod-step-content{

    flex:1;

}

.rod-step-label{

    display:block;

    margin-bottom:5px;

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

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795ad;

}

.rod-step-content h3{

    margin:0 0 7px;

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

    font-size:1.2rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rod-step-content p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            FLOW ARROW
==========================================*/

.rod-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    height:42px;

    color:#d39ab2;

}

.rod-arrow i{

    font-size:.75rem;

}


/*==========================================
            TAKEAWAY
==========================================*/

.rod-takeaway{

    display:grid;

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

    align-items:center;

    gap:40px;

    max-width:1000px;

    margin:60px auto 0;

    padding:25px;

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

    border:1px solid #f1d6e5;

    border-radius:27px;

    overflow:hidden;

}

.rod-takeaway-image{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:230px;

    border-radius:21px;

    background:#fffafd;

    overflow:hidden;

}

.rod-takeaway-image img{

    display:block;

    width:100%;

    max-width:390px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.rod-takeaway-image img:hover{

    transform:scale(1.03);

}


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

.rod-takeaway-content{

    padding:15px 15px 15px 0;

}

.rod-takeaway-content > span{

    display:block;

    margin-bottom:12px;

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

    font-size:.73rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#bd7898;

}

.rod-takeaway-content h3{

    margin:0 0 13px;

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

    font-size:1.35rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rod-takeaway-content p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .rod-takeaway{

        grid-template-columns:1fr;

        gap:25px;

        max-width:750px;

    }

    .rod-takeaway-image{

        min-height:260px;

    }

    .rod-takeaway-content{

        padding:5px;

    }

}


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

@media(max-width:600px){

    .rosacea-development{

        padding:75px 6%;

    }

    .rod-head{

        margin-bottom:50px;

    }

    .rod-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rod-step{

        gap:15px;

        padding:20px 17px;

        border-radius:21px;

    }

    .rod-step-number{

        width:45px;

        height:45px;

        border-radius:14px;

        font-size:.7rem;

    }

    .rod-step-content h3{

        font-size:1.08rem;

    }

    .rod-step-content p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rod-arrow{

        height:32px;

    }

    .rod-takeaway{

        gap:20px;

        margin-top:40px;

        padding:15px;

        border-radius:23px;

    }

    .rod-takeaway-image{

        min-height:210px;

        border-radius:18px;

    }

    .rod-takeaway-content{

        padding:4px;

    }

    .rod-takeaway-content h3{

        font-size:1.2rem;

    }

    .rod-takeaway-content p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 3 — THE 4 MAIN ROSACEA PATTERNS
==========================================*/

.rosacea-patterns{

    padding:100px 6%;

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

}

.rop-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rop-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.rop-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rop-head h2{

    margin:0 0 20px;

    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rop-intro{

    max-width:800px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            PATTERN GRID
==========================================*/

.rop-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}


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

.rop-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 8px 28px rgba(0,0,0,.035);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.rop-card:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 17px 40px rgba(221,163,191,.13);

}


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

.rop-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:24px 25px 0;

}

.rop-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:14px;

    background:#fff2f7;

    border:1px solid #f1d6e3;

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}

.rop-type{

    padding:7px 11px;

    border-radius:999px;

    background:#fff8fa;

    border:1px solid #f1dce5;

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

    font-size:.68rem;

    letter-spacing:.04em;

    color:#b77d9b;

}


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

.rop-image{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:250px;

    margin:20px 25px 0;

    background:#fffafd;

    border:1px solid #f3e3ea;

    border-radius:22px;

    overflow:hidden;

}

.rop-image img{

    display:block;

    width:100%;

    max-width:380px;

    height:230px;

    object-fit:contain;

    transition:transform .4s ease;

}

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

    transform:translateY(-4px) scale(1.02);

}


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

.rop-content{

    padding:25px;

}

.rop-content h3{

    margin:0 0 11px;

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

    font-size:1.35rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rop-content > p{

    margin:0 0 19px;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            FEATURES
==========================================*/

.rop-features{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}

.rop-features p{

    margin:0;

    padding:7px 10px;

    background:#fff7fa;

    border:1px solid #f0dce6;

    border-radius:999px;

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

    font-size:.78rem;

    line-height:1.4;

    color:#896f7b;

}


/*==========================================
            AREA / EXTRA NOTE
==========================================*/

.rop-area{

    display:block;

    padding-top:15px;

    border-top:1px solid #f1e4e9;

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

    font-size:.87rem;

    line-height:1.65;

    color:#a67d91;

}


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

.rop-note{

    display:flex;

    align-items:flex-start;

    gap:16px;

    max-width:900px;

    margin:45px auto 0;

    padding:23px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:23px;

}

.rop-note-line{

    width:4px;

    min-height:58px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.rop-note span{

    display:block;

    margin-bottom:5px;

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

    font-size:.73rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.rop-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){

    .rop-grid{

        grid-template-columns:1fr;

        max-width:650px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .rosacea-patterns{

        padding:75px 6%;

    }

    .rop-head{

        margin-bottom:50px;

    }

    .rop-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rop-grid{

        gap:15px;

    }

    .rop-card{

        border-radius:23px;

    }

    .rop-card-top{

        padding:19px 18px 0;

    }

    .rop-number{

        width:37px;

        height:37px;

        border-radius:13px;

    }

    .rop-type{

        font-size:.63rem;

        padding:6px 9px;

    }

    .rop-image{

        min-height:220px;

        margin:16px 18px 0;

        border-radius:19px;

    }

    .rop-image img{

        height:200px;

        max-width:320px;

    }

    .rop-content{

        padding:21px 18px 22px;

    }

    .rop-content h3{

        font-size:1.18rem;

    }

    .rop-content > p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rop-features{

        gap:7px;

    }

    .rop-features p{

        font-size:.75rem;

        padding:6px 9px;

    }

    .rop-area{

        font-size:.84rem;

    }

    .rop-note{

        gap:12px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .rop-note-line{

        min-height:75px;

    }

    .rop-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 4 — WHAT TRIGGERS ROSACEA?
==========================================*/

.rosacea-triggers{

    padding:100px 6%;

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

}

.rot-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rot-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.rot-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rot-head h2{

    margin:0 0 20px;

    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rot-intro{

    max-width:760px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            TRIGGER GRID
==========================================*/

.rot-grid{

    display:grid;

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

    gap:16px;

}


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

.rot-card{

    position:relative;

    min-height:185px;

    padding:24px 20px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:23px;

    box-shadow:0 7px 23px rgba(0,0,0,.03);

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.rot-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#e5b2c8;

}

.rot-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 15px 34px rgba(221,163,191,.12);

}


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

.rot-card-top{

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:15px;

}

.rot-number img{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100px;

    height:100px;

    flex-shrink:0;

    border-radius:12px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

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

    font-size:.67rem;

    font-weight:600;

    letter-spacing:.05em;

    color:#bd7898;

}


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

.rot-card h3{

    margin:0;

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

    font-size:1.02rem;

    font-weight:600;

    line-height:1.45;

    color:var(--clr-heading);

}


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

.rot-card > p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.7;

    color:var(--clr-text);

}


/*==========================================
            PERSONAL TRIGGER NOTE
==========================================*/

.rot-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.rot-note-mark{

    width:4px;

    min-height:72px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.rot-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.rot-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){

    .rot-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

    .rot-card{

        min-height:175px;

    }

}


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

@media(max-width:600px){

    .rosacea-triggers{

        padding:75px 6%;

    }

    .rot-head{

        margin-bottom:50px;

    }

    .rot-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rot-grid{

        grid-template-columns:1fr;

        gap:12px;

    }

    .rot-card{

        min-height:auto;

        padding:21px 18px;

        border-radius:21px;

    }

    .rot-card-top{

        margin-bottom:12px;

    }

    .rot-number img{

        width:100px;

       

        border-radius:11px;

    }

    .rot-card h3{

        font-size:1.04rem;

    }

    .rot-card > p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rot-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .rot-note-mark{

        min-height:90px;

    }

    .rot-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}


/*==========================================
        SECTION 5 — ROSACEA VS ACNE
==========================================*/

.rosacea-acne{

    padding:100px 6%;

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

}

.roa-wrap{

    max-width:1200px;

    margin:auto;

}


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

.roa-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.roa-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.roa-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.roa-intro{

    max-width:800px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.roa-comparison{

    position:relative;

    display:grid;

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

    align-items:stretch;

    gap:20px;

}


/*==========================================
            COLUMNS
==========================================*/

.roa-column{

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 8px 28px rgba(0,0,0,.035);

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

}

.roa-column:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 17px 38px rgba(221,163,191,.12);

}


/*==========================================
            COLUMN HEAD
==========================================*/

.roa-column-head{

    display:flex;

    align-items:center;

    gap:15px;

    padding:27px 27px 24px;

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

    border-bottom:1px solid #f1e1e7;

}

.roa-column-mark{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:17px;

    background:#ffffff;

    border:1px solid #efd4df;

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

    font-size:.95rem;

    font-weight:600;

    color:#bd7898;

}

.roa-column-head span{

    display:block;

    margin-bottom:4px;

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

    font-size:.68rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795ad;

}

.roa-column-head h3{

    margin:0;

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

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}


/*==========================================
            COMPARISON ROWS
==========================================*/

.roa-list{

    padding:7px 27px 25px;

}

.roa-row{

    display:grid;

    grid-template-columns:.75fr 1.25fr;

    gap:20px;

    padding:20px 0;

    border-bottom:1px solid #f1e6eb;

}

.roa-row:last-child{

    border-bottom:none;

}

.roa-row > span{

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

    font-size:.88rem;

    font-weight:600;

    line-height:1.55;

    color:#9c6d83;

}

.roa-row p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.7;

    color:var(--clr-text);

}


/*==========================================
            VS BADGE
==========================================*/

.roa-vs{

    display:flex;

    align-items:center;

    justify-content:center;

}

.roa-vs span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#fff4f8;

    border:1px solid #efd4df;

    box-shadow:0 7px 20px rgba(220,160,190,.12);

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

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}


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

.roa-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.roa-note-mark{

    width:4px;

    min-height:60px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.roa-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.roa-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:900px){

    .roa-comparison{

        grid-template-columns:1fr;

        gap:18px;

        max-width:700px;

        margin:auto;

    }

    .roa-vs{

        height:40px;

    }

    .roa-vs span{

        width:44px;

        height:44px;

    }

}


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

@media(max-width:600px){

    .rosacea-acne{

        padding:75px 6%;

    }

    .roa-head{

        margin-bottom:50px;

    }

    .roa-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .roa-column{

        border-radius:23px;

    }

    .roa-column-head{

        padding:21px 18px;

    }

    .roa-column-mark{

        width:46px;

        height:46px;

        border-radius:15px;

    }

    .roa-column-head h3{

        font-size:1.3rem;

    }

    .roa-list{

        padding:3px 18px 18px;

    }

    .roa-row{

        grid-template-columns:1fr;

        gap:5px;

        padding:17px 0;

    }

    .roa-row > span{

        font-size:.84rem;

    }

    .roa-row p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .roa-vs{

        height:35px;

    }

    .roa-vs span{

        width:40px;

        height:40px;

        font-size:.65rem;

    }

    .roa-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .roa-note-mark{

        min-height:90px;

    }

    .roa-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 6 — ROSACEA VS SENSITIVE SKIN
==========================================*/

.rosacea-sensitive{

    padding:100px 6%;

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

}

.ros-wrap{

    max-width:1100px;

    margin:auto;

}


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

.ros-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.ros-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.ros-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.ros-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.ros-comparison{

    display:grid;

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

    align-items:center;

    gap:20px;

}


/*==========================================
            COMPARISON CARDS
==========================================*/

.ros-card{

    position:relative;

    min-height:330px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 8px 28px rgba(0,0,0,.035);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.ros-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#e5b4ca;

}

.ros-card-main::before{

    background:#d994b1;

}

.ros-card:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 17px 38px rgba(221,163,191,.12);

}


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

.ros-card-head{

    display:flex;

    align-items:center;

    gap:15px;

    padding:27px 27px 23px;

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

    border-bottom:1px solid #f1e2e8;

}

.ros-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    flex-shrink:0;

    border-radius:16px;

    background:#ffffff;

    border:1px solid #efd5e0;

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

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}

.ros-card-label{

    display:block;

    margin-bottom:4px;

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

    font-size:.68rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795ad;

}

.ros-card-head h3{

    margin:0;

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

    font-size:1.4rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.ros-card-content{

    padding:27px;

}

.ros-card-content > p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.ros-highlight{

    margin-top:25px;

    padding:18px;

    background:#fff6f9;

    border:1px solid #f1dce5;

    border-radius:19px;

}

.ros-highlight span{

    display:block;

    margin-bottom:6px;

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

    font-size:.7rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.ros-highlight p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.7;

    color:#71666c;

}


/*==========================================
            CENTER DIFFERENCE
==========================================*/

.ros-divider{

    display:flex;

    align-items:center;

    justify-content:center;

}

.ros-divider span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #efd4df;

    box-shadow:0 7px 20px rgba(220,160,190,.12);

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

    font-size:1.05rem;

    color:#bd7898;

}


/*==========================================
            KEY MESSAGE
==========================================*/

.ros-key-message{

    display:flex;

    align-items:flex-start;

    gap:16px;

    max-width:850px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.ros-key-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #efd1df;

    color:#c96d9d;

}

.ros-key-icon i{

    font-size:.8rem;

}

.ros-key-message > div:last-child{

    flex:1;

}

.ros-key-message span{

    display:block;

    margin-bottom:5px;

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

    font-size:.73rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.ros-key-message h3{

    margin:0 0 7px;

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

    font-size:1.2rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.ros-key-message p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


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

@media(max-width:850px){

    .ros-comparison{

        grid-template-columns:1fr;

        gap:18px;

        max-width:700px;

        margin:auto;

    }

    .ros-divider{

        height:35px;

    }

    .ros-divider span{

        width:43px;

        height:43px;

    }

}


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

@media(max-width:600px){

    .rosacea-sensitive{

        padding:75px 6%;

    }

    .ros-head{

        margin-bottom:50px;

    }

    .ros-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ros-card{

        min-height:auto;

        border-radius:23px;

    }

    .ros-card-head{

        padding:21px 18px;

    }

    .ros-number{

        width:45px;

        height:45px;

        border-radius:15px;

    }

    .ros-card-head h3{

        font-size:1.28rem;

    }

    .ros-card-content{

        padding:21px 18px 22px;

    }

    .ros-card-content > p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .ros-highlight{

        margin-top:20px;

        padding:16px;

        border-radius:17px;

    }

    .ros-highlight p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .ros-key-message{

        gap:12px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .ros-key-icon{

        width:38px;

        height:38px;

    }

    .ros-key-message h3{

        font-size:1.08rem;

    }

    .ros-key-message p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 7 — WHAT CAN MAKE ROSACEA WORSE?
==========================================*/

.rosacea-worse{

    padding:100px 6%;

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

}

.row-wrap{

    max-width:1200px;

    margin:auto;

}


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

.row-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.row-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.row-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.row-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.row-layout{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    align-items:start;

    gap:60px;

}


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

.row-visual{

    position:sticky;

    top:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:540px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f0dfe7;

    border-radius:30px;

    overflow:hidden;

}

.row-visual-bg{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:#f9dfe8;

    filter:blur(15px);

    opacity:.55;

}

.row-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.row-visual img:hover{

    transform:translateY(-6px);

}


/*==========================================
            FACTORS
==========================================*/

.row-factors{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.row-factor{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:21px 20px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:22px;

    box-shadow:0 7px 23px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.row-factor:hover{

    transform:translateX(5px);

    border-color:#efc5db;

    box-shadow:0 13px 30px rgba(221,163,191,.11);

}


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

.row-factor-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:14px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}


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

.row-factor h3{

    margin:0 0 6px;

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

    font-size:1.08rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.row-factor p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.7;

    color:var(--clr-text);

}


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

.row-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.row-note-line{

    width:4px;

    min-height:70px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.row-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.row-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:900px){

    .row-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .row-visual{

        position:relative;

        top:auto;

        min-height:390px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .row-visual img{

        max-width:400px;

    }

}


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

@media(max-width:600px){

    .rosacea-worse{

        padding:75px 6%;

    }

    .row-head{

        margin-bottom:50px;

    }

    .row-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .row-visual{

        min-height:290px;

        padding:15px;

        border-radius:24px;

    }

    .row-visual-bg{

        width:220px;

        height:220px;

    }

    .row-visual img{

        max-width:310px;

    }

    .row-factors{

        gap:10px;

    }

    .row-factor{

        gap:12px;

        padding:17px 15px;

        border-radius:19px;

    }

    .row-factor-number{

        width:37px;

        height:37px;

        border-radius:12px;

    }

    .row-factor h3{

        font-size:1.04rem;

    }

    .row-factor p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .row-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .row-note-line{

        min-height:95px;

    }

    .row-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

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

.rosacea-ingredients{

    padding:100px 6%;

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

}

.roi-wrap{

    max-width:1200px;

    margin:auto;

}


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

.roi-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.roi-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.roi-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.roi-intro{

    max-width:800px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.roi-grid{

    display:grid;

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

    gap:20px;

}


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

.roi-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:285px;

    padding:27px 24px 24px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:26px;

    box-shadow:0 8px 26px rgba(0,0,0,.03);

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.roi-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#e5b4ca;

}

.roi-card:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 16px 36px rgba(221,163,191,.12);

}


/*==========================================
            FEATURED SUNSCREEN
==========================================*/

.roi-card-featured{

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

}

.roi-card-featured::before{

    background:#d995b1;

}


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

.roi-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:25px;

}

.roi-number img{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100px;

    height:100px;

    flex-shrink:0;

    border-radius:13px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}

.roi-category{

    padding:6px 10px;

    border-radius:999px;

    background:#fff8fa;

    border:1px solid #f0dce6;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#a9788d;

}


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

.roi-card h3{

    margin:0 0 12px;

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

    font-size:1.3rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.roi-card > p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            SUNSCREEN NOTE
==========================================*/

.roi-sunscreen-note{

    margin-top:auto;

    padding-top:18px;

}

.roi-sunscreen-note span{

    display:block;

    margin-bottom:5px;

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

    font-size:.7rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.roi-sunscreen-note p{

    margin:0;

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

    font-size:.95rem;

    line-height:1.7;

    color:#756970;

}


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

.roi-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.roi-note-mark{

    width:4px;

    min-height:75px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.roi-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.roi-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:950px){

    .roi-grid{

        grid-template-columns:1fr 1fr;

    }

    .roi-card:last-child{

        grid-column:1 / -1;

        max-width:500px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .rosacea-ingredients{

        padding:75px 6%;

    }

    .roi-head{

        margin-bottom:50px;

    }

    .roi-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .roi-grid{

        grid-template-columns:1fr;

        gap:13px;

    }

    .roi-card{

        min-height:auto;

        padding:24px 18px 22px;

        border-radius:22px;

    }

    .roi-card:last-child{

        grid-column:auto;

        max-width:none;

    }

    .roi-card-top{

        margin-bottom:20px;

    }

    .roi-number img{

        width:100px;

        

        border-radius:12px;

    }

    .roi-category{

        font-size:.62rem;

    }

    .roi-card h3{

        font-size:1.18rem;

    }

    .roi-card > p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .roi-sunscreen-note{

        margin-top:20px;

        padding-top:16px;

    }

    .roi-sunscreen-note p{

        font-size:.94rem;

        line-height:1.7;

    }

    .roi-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .roi-note-mark{

        min-height:105px;

    }

    .roi-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 9 — WHAT SHOULD ROSACEA-PRONE
        SKIN AVOID?
==========================================*/

.rosacea-avoid{

    padding:100px 6%;

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

}

.roav-wrap{

    max-width:1200px;

    margin:auto;

}


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

.roav-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.roav-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.roav-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.roav-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.roav-layout{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    align-items:start;

    gap:60px;

}


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

.roav-visual{

    position:sticky;

    top:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:540px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f0dfe7;

    border-radius:30px;

    overflow:hidden;

}

.roav-visual-circle{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:#f9dfe8;

    filter:blur(15px);

    opacity:.55;

}

.roav-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.roav-visual img:hover{

    transform:translateY(-6px);

}


/*==========================================
            AVOID LIST
==========================================*/

.roav-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.roav-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:21px 20px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:22px;

    box-shadow:0 7px 23px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.roav-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

    box-shadow:0 13px 30px rgba(221,163,191,.11);

}


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

.roav-item-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:14px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.06em;

    color:#bd7898;

}


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

.roav-item h3{

    margin:0 0 6px;

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

    font-size:1.08rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.roav-item p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.7;

    color:var(--clr-text);

}


/*==========================================
            NATURAL NOTE
==========================================*/

.roav-natural{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:25px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.roav-natural-mark{

    width:4px;

    min-height:100px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.roav-natural span{

    display:block;

    margin-bottom:7px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.roav-natural h3{

    margin:0 0 8px;

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

    font-size:1.2rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.roav-natural p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .roav-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .roav-visual{

        position:relative;

        top:auto;

        min-height:390px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .roav-visual img{

        max-width:400px;

    }

}


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

@media(max-width:600px){

    .rosacea-avoid{

        padding:75px 6%;

    }

    .roav-head{

        margin-bottom:50px;

    }

    .roav-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .roav-visual{

        min-height:290px;

        padding:15px;

        border-radius:24px;

    }

    .roav-visual-circle{

        width:220px;

        height:220px;

    }

    .roav-visual img{

        max-width:310px;

    }

    .roav-list{

        gap:10px;

    }

    .roav-item{

        gap:12px;

        padding:17px 15px;

        border-radius:19px;

    }

    .roav-item-number{

        width:37px;

        height:37px;

        border-radius:12px;

    }

    .roav-item h3{

        font-size:1.04rem;

    }

    .roav-item p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .roav-natural{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .roav-natural-mark{

        min-height:125px;

    }

    .roav-natural h3{

        font-size:1.08rem;

    }

    .roav-natural p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 10 — CAN ROSACEA BE CURED?
==========================================*/

.rosacea-management{

    padding:100px 6%;

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

}

.rom-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rom-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.rom-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rom-head h2{

    margin:0 0 20px;

    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rom-intro{

    max-width:800px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.rom-layout{

    display:grid;

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

    align-items:start;

    gap:55px;

}


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

.rom-visual{

    position:sticky;

    top:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:560px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f0dfe7;

    border-radius:30px;

    overflow:hidden;

}

.rom-visual-circle{

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:#f8dce7;

    filter:blur(15px);

    opacity:.55;

}

.rom-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.rom-visual img:hover{

    transform:translateY(-6px);

}


/*==========================================
            MANAGEMENT GOALS
==========================================*/

.rom-goals{

    display:flex;

    flex-direction:column;

    gap:13px;

}

.rom-goal{

    display:flex;

    align-items:flex-start;

    gap:17px;

    padding:22px 21px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:23px;

    box-shadow:0 7px 23px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.rom-goal:hover{

    transform:translateX(5px);

    border-color:#efc5db;

    box-shadow:0 14px 31px rgba(221,163,191,.11);

}


/*==========================================
            GOAL ICON
==========================================*/

.rom-goal-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;

    height:45px;

    flex-shrink:0;

    border-radius:14px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

    color:#c4779a;

}

.rom-goal-icon i{

    font-size:.85rem;

}


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

.rom-goal h3{

    margin:0 0 6px;

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

    font-size:1.08rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rom-goal p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            MEDICAL GOAL
==========================================*/

.rom-goal-medical{

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

}


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

.rom-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.rom-note-mark{

    width:4px;

    min-height:92px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.rom-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.rom-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:900px){

    .rom-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .rom-visual{

        position:relative;

        top:auto;

        min-height:390px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .rom-visual img{

        max-width:400px;

    }

}


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

@media(max-width:600px){

    .rosacea-management{

        padding:75px 6%;

    }

    .rom-head{

        margin-bottom:50px;

    }

    .rom-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rom-visual{

        min-height:290px;

        padding:15px;

        border-radius:24px;

    }

    .rom-visual-circle{

        width:220px;

        height:220px;

    }

    .rom-visual img{

        max-width:310px;

    }

    .rom-goals{

        gap:10px;

    }

    .rom-goal{

        gap:12px;

        padding:17px 15px;

        border-radius:19px;

    }

    .rom-goal-icon{

        width:38px;

        height:38px;

        border-radius:12px;

    }

    .rom-goal-icon i{

        font-size:.75rem;

    }

    .rom-goal h3{

        font-size:1.04rem;

    }

    .rom-goal p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rom-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .rom-note-mark{

        min-height:125px;

    }

    .rom-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}


/*==========================================
        SECTION 11 — WHEN SHOULD SOMEONE
        SEE A DERMATOLOGIST?
==========================================*/

.rosacea-dermatologist{

    padding:100px 6%;

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

}

.rodm-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rodm-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.rodm-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rodm-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rodm-intro{

    max-width:800px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.rodm-layout{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    align-items:start;

    gap:60px;

}


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

.rodm-visual{

    position:sticky;

    top:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:550px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f0dfe7;

    border-radius:30px;

    overflow:hidden;

}

.rodm-visual-circle{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:#f8dce7;

    filter:blur(15px);

    opacity:.55;

}

.rodm-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.rodm-visual img:hover{

    transform:translateY(-6px);

}


/*==========================================
            REASONS
==========================================*/

.rodm-reasons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:13px;

}

.rodm-reason{

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:21px 18px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:22px;

    box-shadow:0 7px 23px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.rodm-reason:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

    box-shadow:0 13px 30px rgba(221,163,191,.11);

}


/*==========================================
            ICON
==========================================*/

.rodm-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    flex-shrink:0;

    border-radius:13px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

    color:#c4779a;

}

.rodm-icon i{

    font-size:.76rem;

}


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

.rodm-reason h3{

    margin:0 0 6px;

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

    font-size:1.02rem;

    font-weight:500;

    line-height:1.45;

    color:var(--clr-heading);

}

.rodm-reason p{

    margin:0;

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

    font-size:.96rem;

    line-height:1.65;

    color:var(--clr-text);

}


/*==========================================
            DIAGNOSIS NOTE
==========================================*/

.rodm-note{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:25px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.rodm-note-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    flex-shrink:0;

    border-radius:15px;

    background:#ffffff;

    border:1px solid #efd3df;

    color:#c4779a;

}

.rodm-note-icon i{

    font-size:.85rem;

}

.rodm-note > div:last-child{

    flex:1;

}

.rodm-note span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.rodm-note h3{

    margin:0 0 8px;

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

    font-size:1.2rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rodm-note p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:950px){

    .rodm-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .rodm-visual{

        position:relative;

        top:auto;

        min-height:390px;

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .rodm-visual img{

        max-width:400px;

    }

}


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

@media(max-width:600px){

    .rosacea-dermatologist{

        padding:75px 6%;

    }

    .rodm-head{

        margin-bottom:50px;

    }

    .rodm-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rodm-visual{

        min-height:290px;

        padding:15px;

        border-radius:24px;

    }

    .rodm-visual-circle{

        width:220px;

        height:220px;

    }

    .rodm-visual img{

        max-width:310px;

    }

    .rodm-reasons{

        grid-template-columns:1fr;

        gap:10px;

    }

    .rodm-reason{

        gap:12px;

        padding:17px 15px;

        border-radius:19px;

    }

    .rodm-icon{

        width:38px;

        height:38px;

        border-radius:12px;

    }

    .rodm-reason h3{

        font-size:1.04rem;

    }

    .rodm-reason p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rodm-note{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .rodm-note-icon{

        width:40px;

        height:40px;

        border-radius:13px;

    }

    .rodm-note h3{

        font-size:1.08rem;

    }

    .rodm-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

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

.rosacea-myths{

    padding:100px 6%;

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

}

.romyth-wrap{

    max-width:1200px;

    margin:auto;

}


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

.romyth-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.romyth-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.romyth-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.romyth-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            MYTH / FACT GRID
==========================================*/

.romyth-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


/*==========================================
            MYTH / FACT CARD
==========================================*/

.romyth-card{

    display:grid;

    grid-template-rows:auto auto;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:26px;

    overflow:hidden;

    box-shadow:0 8px 26px rgba(0,0,0,.03);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.romyth-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

    box-shadow:0 16px 35px rgba(221,163,191,.12);

}


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

.romyth-myth{

    padding:25px 25px 23px;

    background:#fff7fa;

    border-bottom:1px solid #f2e0e7;

}

.romyth-myth .romyth-tag{

    color:#a46c84;

    background:#ffffff;

    border-color:#efd9e2;

}

.romyth-myth h3{

    margin:13px 0 0;

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

    font-size:1.12rem;

    font-weight:500;

    line-height:1.65;

    color:var(--clr-heading);

}


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

.romyth-fact{

    padding:24px 25px 26px;

    background:#ffffff;

}

.romyth-fact .romyth-tag{

    color:#b9658d;

    background:#fff2f7;

    border-color:#efd2df;

}

.romyth-fact p{

    margin:13px 0 0;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            TAG
==========================================*/

.romyth-tag{

    display:inline-flex;

    align-items:center;

    padding:6px 10px;

    border:1px solid;

    border-radius:999px;

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

    font-size:.67rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}


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

.romyth-reminder{

    display:flex;

    align-items:flex-start;

    gap:16px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.romyth-reminder-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex-shrink:0;

    border-radius:14px;

    background:#ffffff;

    border:1px solid #efd3df;

    color:#c4779a;

}

.romyth-reminder-icon i{

    font-size:.8rem;

}

.romyth-reminder > div:last-child{

    flex:1;

}

.romyth-reminder span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.romyth-reminder 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){

    .romyth-grid{

        grid-template-columns:1fr;

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .rosacea-myths{

        padding:75px 6%;

    }

    .romyth-head{

        margin-bottom:50px;

    }

    .romyth-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .romyth-grid{

        gap:13px;

    }

    .romyth-card{

        border-radius:22px;

    }

    .romyth-myth{

        padding:21px 18px 20px;

    }

    .romyth-myth h3{

        font-size:1.06rem;

        line-height:1.6;

    }

    .romyth-fact{

        padding:20px 18px 21px;

    }

    .romyth-fact p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .romyth-reminder{

        gap:12px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .romyth-reminder-icon{

        width:39px;

        height:39px;

        border-radius:12px;

    }

    .romyth-reminder p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

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

.rosacea-mimii-tip{

    padding:20px 0 40px;

}


/*==========================================
            MIMII NOTE PANEL
==========================================*/

.rosacea-mimii-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;

}

.rosacea-mimii-tip .mk-note-panel:hover{

    transform:translateY(-5px);

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

}


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

.rosacea-mimii-tip .mk-note-avatar{

    width:100%;

    max-width:430px;

    flex-shrink:0;

    align-self:flex-end;

}

.rosacea-mimii-tip .mk-note-avatar img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

}


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

.rosacea-mimii-tip .mk-note-content{

    flex:1;

    padding:45px 0;

}

.rosacea-mimii-tip .mk-note-label{

    display:inline-block;

    margin-bottom:16px;

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

    font-size:1.55rem;

    font-weight:500;

    color:#cf679d;

}

.rosacea-mimii-tip .mk-note-title{

    margin:0 0 16px;

    font-size:2rem;

    font-weight:400;

    line-height:1.35;

    color:#222;

}

.rosacea-mimii-tip .mk-note-description{

    max-width:600px;

    margin:0 0 22px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:#666;

}

.rosacea-mimii-tip .mk-note-signature{

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

    font-size:.95rem;

    font-weight:600;

    color:#bf7296;

}


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

.rosacea-mimii-tip .mk-note-decoration{

    width:90px;

    flex-shrink:0;

    align-self:flex-end;

}

.rosacea-mimii-tip .mk-note-decoration img{

    display:block;

    width:100%;

    height:auto;

}


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

@media(max-width:950px){

    .rosacea-mimii-tip .mk-note-panel{

        gap:40px;

        padding:0 30px;

    }

    .rosacea-mimii-tip .mk-note-avatar{

        max-width:330px;

    }

    .rosacea-mimii-tip .mk-note-title{

        font-size:1.8rem;

    }

    .rosacea-mimii-tip .mk-note-description{

        font-size:1.03rem;

    }

    .rosacea-mimii-tip .mk-note-decoration{

        width:65px;

    }

}


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

@media(max-width:700px){

    .rosacea-mimii-tip{

        padding:5px 0 25px;

    }

    .rosacea-mimii-tip .mk-note-panel{

        flex-direction:column;

        gap:0;

        margin:55px 6%;

        padding:30px 25px 0;

        text-align:center;

    }

    .rosacea-mimii-tip .mk-note-content{

        order:1;

        padding:0 0 30px;

    }

    .rosacea-mimii-tip .mk-note-avatar{

        order:2;

        max-width:280px;

        align-self:center;

    }

    .rosacea-mimii-tip .mk-note-decoration{

        display:none;

    }

    .rosacea-mimii-tip .mk-note-label{

        font-size:1.45rem;

        margin-bottom:12px;

    }

    .rosacea-mimii-tip .mk-note-title{

        font-size:1.65rem;

        line-height:1.4;

    }

    .rosacea-mimii-tip .mk-note-description{

        font-size:1.03rem;

        line-height:1.85;

        margin-bottom:18px;

    }

    .rosacea-mimii-tip .mk-note-signature{

        font-size:.9rem;

    }

}

/*==========================================
        SECTION 14 — ROSACEA AT A GLANCE
==========================================*/

.rosacea-summary{

    padding:100px 6%;

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

}

.rosum-wrap{

    max-width:1200px;

    margin:auto;

}


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

.rosum-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.rosum-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 17px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f1dbe5;

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

    font-size:.78rem;

    letter-spacing:.07em;

    color:#bd7898;

}

.rosum-head h2{

    margin:0 0 20px;
    
    font-size: var(--clr-heading);

    font-size: 3rem;

    font-weight: 400;

    color: var(--clr-heading);


}

.rosum-intro{

    max-width:790px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            SUMMARY GRID
==========================================*/

.rosum-grid{

    display:grid;

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

    gap:18px;

}


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

.rosum-card{

    padding:28px 22px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.rosum-card:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 15px 34px rgba(221,163,191,.12);

}


/*==========================================
            ICON
==========================================*/

.rosum-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    margin-bottom:23px;

    border-radius:15px;

    background:#fff3f7;

    border:1px solid #f1d6e3;

    color:#c4779a;

}

.rosum-icon i{

    font-size:.85rem;

}


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

.rosum-card h3{

    margin:0 0 10px;

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

    font-size:1.1rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}

.rosum-card p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.75;

    color:var(--clr-text);

}


/*==========================================
            FINAL MESSAGE
==========================================*/

.rosum-final{

    display:flex;

    align-items:flex-start;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:24px 27px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.rosum-final-line{

    width:4px;

    min-height:75px;

    flex-shrink:0;

    border-radius:10px;

    background:#d48aaa;

}

.rosum-final span{

    display:block;

    margin-bottom:6px;

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

    font-size:.74rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#bd7898;

}

.rosum-final 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){

    .rosum-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

}


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

@media(max-width:600px){

    .rosacea-summary{

        padding:75px 6%;

    }

    .rosum-head{

        margin-bottom:50px;

    }

    .rosum-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .rosum-grid{

        grid-template-columns:1fr;

        gap:12px;

    }

    .rosum-card{

        padding:22px 18px;

        border-radius:21px;

    }

    .rosum-icon{

        width:42px;

        height:42px;

        margin-bottom:18px;

        border-radius:13px;

    }

    .rosum-card h3{

        font-size:1.05rem;

    }

    .rosum-card p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .rosum-final{

        gap:13px;

        margin-top:30px;

        padding:19px 17px;

        border-radius:20px;

    }

    .rosum-final-line{

        min-height:115px;

    }

    .rosum-final p{

        font-size:1.03rem;

        line-height:1.75;

    }

}


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

.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:430px;

    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.55rem;

    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.04rem;

    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.8rem;

    }

    .mk-note-description{

        font-size:1.03rem;

    }

    .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.65rem;

        line-height:1.4;

    }

    .mk-note-description{

        font-size:1.03rem;

        line-height:1.85;

        margin-bottom:18px;

    }

    .mk-note-signature{

        font-size:.9rem;

    }

}