/*==============================================
        CLOSED COMEDONES HERO
==============================================*/

.cc-landing{

    min-height:100vh;

    padding-top:100px;

    padding-bottom: 50px;
    padding-inline:5%;

    display:flex;
    align-items:center;
    justify-content:center;

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

}

.cc-canvas{

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

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:60px;

}


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

.cc-copy{

    flex:1;
    max-width:650px;

}

.cc-eyebrow{
    

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

    font-size:.9rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--clr-primary);

    /* padding-bottom: 30px; */

}

.cc-headline{



    font-size:clamp(3.3rem,4.2vw,4.4rem);

    line-height:1.08;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:38px;

    margin-top: 50px;

}

.cc-headline span{

    color:var(--clr-primary-light);

}

.cc-lead{

    max-width:540px;

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

    font-size:1.08rem;

    line-height:2;

    color:var(--clr-text);

    margin-bottom:42px;

}


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

.cc-action{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    background:var(--clr-primary-light);

    color:var(--clr-white);

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

    font-size:.98rem;

    font-weight:500;

    transition:.35s ease;

}

.cc-action:hover{

    background:var(--clr-primary-hover-light);

    transform:translateY(-4px);

}

.cc-action i{

    transition:.35s;

}

.cc-action:hover i{

    transform:translateY(3px);

}


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

.cc-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cc-image img{

    width:620px;

    position:relative;

    z-index:2;

    display:block;

    animation:float 4s ease-in-out infinite;

}

.cc-glow{

    width:520px;

    height:620px;

    position:absolute;

    border-radius:60%;

    background:radial-gradient(

        circle,

        rgba(255,214,224,.8),

        transparent 70%

    );

    filter:blur(35px);

    animation:pulse 6s infinite;

}




/*==============================================
        UNDERSTANDING CLOSED COMEDONES
==============================================*/

.cc-understanding{

    padding:60px 5%;

    background:var(--clr-white);

    margin-top: 100px;

}

.cc-understanding-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:70px;

    align-items:center;

}


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

.cc-understanding-image{

    /* margin-left: 40px; */

    margin-top: 100px;

    overflow:hidden;
/* 
    border-radius:34px;

    box-shadow:0 18px 45px rgba(0,0,0,.06); */

    /* background:linear-gradient(
        145deg,
        #fff,
        #fdf6fb
    ); */

    transition:.4s;

}

.cc-understanding-image:hover{

    transform:translateY(-6px);

    /* box-shadow:0 24px 55px rgba(0,0,0,.08); */

}

.cc-understanding-image img{

    width:90%;

    display:block;

    transition:.45s;

}

.cc-understanding-image:hover img{

    transform:scale(1.03);

}


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

.cc-section-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-section-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);


    margin-bottom:24px;

}

.cc-section-title span{

    color:var(--clr-primary-light);

}

.cc-section-description{

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

    color:var(--clr-text);

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:22px;

}

.cc-section-description:last-child{

    margin-bottom:0;

}



/*==============================================
        FORMATION PROCESS
==============================================*/

.cc-formation{

    margin-top: 100px;

    padding:60px 5%;

    background:var(--clr-white);

}

.cc-formation-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:70px;

    align-items:center;

}


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

.cc-formation-image{

    margin-left: 90px;

    margin-top: 200px;

    overflow:hidden;

    /* border-radius:34px; */

    /* background:linear-gradient(
        145deg,
        #fff,
        #fdf6fb
    ); */

    /* box-shadow:0 18px 45px rgba(0,0,0,.06); */

    transition:.35s;

}

.cc-formation-image:hover{

    transform:translateY(-6px);

    /* box-shadow:0 24px 55px rgba(0,0,0,.08); */

}

.cc-formation-image img{

    width:70%;

    display:block;

    transition:.45s;

}

.cc-formation-image:hover img{

    transform:scale(1.03);

}


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

.cc-formation-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-formation-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:24px;

}

.cc-formation-title span{

    color:var(--clr-primary-light);

}

.cc-formation-description{

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

    margin-bottom:40px;

}


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

.cc-timeline{

    display:flex;

    flex-direction:column;

    gap:18px;

}


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

.cc-step{

    display:flex;

    align-items:flex-start;

    gap:22px;

    background:#fff;

    padding:28px;

    border-radius:28px;

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

    transition:.35s;

}

.cc-step:hover{

    transform:translateY(-5px);

    box-shadow:0 22px 45px rgba(0,0,0,.08);

}

.cc-step-number{

    width:58px;

    height:58px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--clr-primary-light);

    color:var(--clr-white);

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

    font-weight:600;

    font-size:1rem;

}

.cc-step-content{

    flex:1;

}

.cc-step-content h3{

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

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

    margin-bottom:12px;

}

.cc-step-content p{

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

    color:var(--clr-text);

    line-height:1.8;

}


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

.cc-step-arrow{

    display:flex;

    justify-content:center;

    color:var(--clr-primary-light);

    font-size:1.5rem;

}




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

.cc-signs{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-signs-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.cc-signs-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-signs-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-signs-title span{

    color:var(--clr-primary-light);

}

.cc-signs-description{

    max-width:620px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.cc-signs-grid{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:32px;

}


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

.cc-sign-card{

    background:var(--clr-white);

    border-radius:30px;

    padding:34px 28px;

    text-align:center;

    border:2px solid rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    cursor:pointer;

    overflow:hidden;

    position:relative;

}

.cc-sign-card:hover{

    transform:translateY(-10px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


/*==============================================
            TOP ACCENT
==============================================*/

.cc-sign-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #f7d7ec,
        #e8d5ff
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.cc-sign-card:hover::before{

    transform:scaleX(1);

}


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

.cc-sign-card img{

    width:150px;

    height:150px;

    object-fit:contain;

    margin:0 auto 26px;

    display:block;

    transition:transform .35s ease;

}

.cc-sign-card:hover img{

    transform:scale(1.08);

}


/*==============================================
                TEXT
==============================================*/

.cc-sign-card h3{

    font-size:1.45rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:16px;

    transition:.3s;

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

}

.cc-sign-card:hover h3{

    color:var(--clr-primary);

}

.cc-sign-card p{

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

    color:var(--clr-text);

    line-height:1.8;

    font-size:1rem;

    transition:.3s;

}

.cc-sign-card:hover p{

    color:#555;

}


/*==============================================
        SECTION 4 - CAUSES
==============================================*/

.cc-causes{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-causes-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.cc-causes-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-causes-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-causes-title span{

    color:var(--clr-primary-light);

}

.cc-causes-description{

    max-width:650px;

    margin:auto;

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

    color:var(--clr-text);

    font-size:1.05rem;

    line-height:1.9;

}


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

.cc-causes-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:30px;

}


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

.cc-cause-item{

    display:flex;

    align-items:center;

    gap:35px;

    padding:30px 35px;

    background:var(--clr-white);

    border-radius:30px;

    border:2px solid rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.cc-cause-item:hover{

    transform:translateY(-8px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


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

.cc-cause-image{

    width:130px;

    height:130px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--clr-hover-soft);

    transition:.35s;

}

.cc-cause-item:hover .cc-cause-image{

    transform:scale(1.08);

}

.cc-cause-image img{

    width:125px;

    display:block;

    transition:.35s;

}

.cc-cause-item:hover .cc-cause-image img{

    transform:scale(1.05);

}


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

.cc-cause-content{

    flex:1;

}

.cc-cause-content h3{

    font-size:1.55rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

    transition:.3s;

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

}

.cc-cause-item:hover h3{

    color:var(--clr-primary);

}

.cc-cause-content p{

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

    font-size:1.02rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==============================================
        SECTION 5 - COMMON TRIGGERS
==============================================*/

.cc-triggers{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-triggers-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.cc-triggers-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-triggers-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-triggers-title span{

    color:var(--clr-primary-light);

}

.cc-triggers-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==============================================
                TRIGGER LIST
==============================================*/

.cc-trigger-list{

    max-width:1100px;

    margin:60px auto 0;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:22px;

}


/*==============================================
                TRIGGER PILL
==============================================*/

.cc-trigger-pill{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 26px;

    background:var(--clr-white);

    border:2px solid rgba(0,0,0,.05);

    border-radius:999px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    cursor:pointer;

}

.cc-trigger-pill:hover{

    transform:translateY(-6px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}

.cc-trigger-pill img{

    width:100px;

    height:100px;

    object-fit:contain;

    transition:.35s ease;

}

.cc-trigger-pill:hover img{

    transform:scale(1.08);

}

.cc-trigger-pill span{

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

    font-size:1rem;

    font-weight:600;

    color:var(--clr-text);

    line-height:1.6;

    transition:.3s;

}

.cc-trigger-pill:hover span{

    color:var(--clr-primary);

}


/*==============================================
        SECTION 6 - COMMON AREAS
==============================================*/

.cc-areas{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-areas-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.cc-areas-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-areas-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-areas-title span{

    color:var(--clr-primary-light);

}

.cc-areas-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.cc-areas-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


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

.cc-areas-image{

    /* background:linear-gradient(
        145deg,
        #fff,
        #fdf6fb
    );

    border-radius:34px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.06); */

    transition:.35s ease;

    margin-left: 40px;

    

}

.cc-areas-image:hover{

    transform:translateY(-6px);

    /* box-shadow:0 24px 55px rgba(0,0,0,.08); */

}

.cc-areas-image img{

    width:90%;

    display:block;

    transition:.45s ease;

}

.cc-areas-image:hover img{

    transform:scale(1.03);

}


/*==============================================
                AREA CARDS
==============================================*/

.cc-areas-content{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.cc-area-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px 26px;

    background:var(--clr-white);

    border-radius:28px;

    border:2px solid rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.cc-area-card:hover{

    transform:translateY(-6px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


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

.cc-area-card img{

    width:90px;

    height:90px;

    object-fit:contain;

    flex-shrink:0;

    transition:.35s ease;

}

.cc-area-card:hover img{

    transform:scale(1.08);

}


/*==============================================
                TEXT
==============================================*/

.cc-area-card h3{

    font-size:1.4rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

    transition:.3s;

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

}

.cc-area-card:hover h3{

    color:var(--clr-primary);

}

.cc-area-card p{

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

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==============================================
        SECTION 7 - COMPARISON
==============================================*/

.cc-comparison{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-comparison-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.cc-comparison-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-comparison-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-comparison-title span{

    color:var(--clr-primary-light);

}

.cc-comparison-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.cc-comparison-table-wrapper{

    max-width:1000px;

    margin:60px auto 50px;

    overflow-x:auto;

    border-radius:30px;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

}

.cc-comparison-table{

    width:100%;

    border-collapse:collapse;

    background:var(--clr-white);

}

.cc-comparison-table thead{

    background:var(--clr-primary-light);

}

.cc-comparison-table th{

    padding:24px;

    color:var(--clr-white);

    font-size:1.3rem;

    font-weight:500;

    text-align:center;

}

.cc-comparison-table td{

    padding:22px 24px;

    text-align:center;

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

    font-size:1rem;

    line-height:1.7;

    color:var(--clr-text);

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:.3s;

}

.cc-comparison-table tbody tr{

    transition:.35s ease;

}

.cc-comparison-table tbody tr:hover{

    background:#fff8fc;

}

.cc-comparison-table tbody tr:last-child td{

    border-bottom:none;

}


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

.cc-fact-card{

    max-width:900px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:24px;

    padding:30px 34px;

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

    border:1px solid #f4dde7;

    border-radius:28px;

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

    transition:.35s ease;

}

.cc-fact-card:hover{

    transform:translateY(-5px);

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

}

.cc-fact-icon{

    width:75px;

    height:75px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:var(--clr-hover-soft);

    border-radius:50%;

    color: var(--clr-primary-hover-light);

}

.cc-fact-content{

    flex:1;

}

.cc-fact-content h3{

    font-size:1.5rem;

    font-weight:500;

    color:var(--clr-heading);

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

    margin-bottom:12px;

}

.cc-fact-content p{

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

    font-size:1.02rem;

    line-height:1.9;

    color:var(--clr-text);

}

.cc-fact-content strong{

    color:var(--clr-primary);

}


/*==============================================
        SECTION 8 - INFLAMMATION
==============================================*/

.cc-inflammation{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-inflammation-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.cc-inflammation-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-inflammation-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-inflammation-title span{

    color:var(--clr-primary-light);

}

.cc-inflammation-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==============================================
            PROGRESSION
==============================================*/

.cc-progression{

    max-width:850px;

    margin:70px auto 0;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

}


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

.cc-stage{

    width:100%;

    display:flex;

    align-items:center;

    gap:28px;

    padding:28px 32px;

    background:var(--clr-white);

    border-radius:30px;

    border:2px solid rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.cc-stage:hover{

    transform:translateY(-6px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


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

.cc-stage-image{

    width:120px;

    height:120px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    /* background:var(--clr-hover-soft); */

    transition:.35s;

}

.cc-stage:hover .cc-stage-image{

    transform:scale(1.08);

}

.cc-stage-image img{

    width:130px;

    display:block;

    transition:.35s;

}

.cc-stage:hover .cc-stage-image img{

    transform:scale(1.05);

}


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

.cc-stage-content{

    flex:1;

}

.cc-stage-content h3{

    font-size:1.5rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:12px;

    transition:.3s;

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

}

.cc-stage:hover h3{

    color:var(--clr-primary);

}

.cc-stage-content h3 small{

    font-size:.85rem;

    color:var(--clr-primary);

    font-weight:500;

}

.cc-stage-content p{

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

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.cc-stage-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary-light);

    font-size:2rem;

}


/*==============================================
        SECTION 9 - INGREDIENTS
==============================================*/

.cc-ingredients{

    padding:50px 5%;

    background:var(--clr-white);

}

.cc-ingredients-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:center;



}


/*==============================================
                LEFT
==============================================*/

.cc-ingredients-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-ingredients-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:25px;

}

.cc-ingredients-title span{

    color:var(--clr-primary-light);

}

.cc-ingredients-description{

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

    color:var(--clr-text);

    line-height:1.9;

    font-size:1.05rem;

    max-width:470px;

    margin-bottom:40px;

}


/*==============================================
            INGREDIENT PILLS
==============================================*/

.cc-ingredient-list{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.cc-ingredient-pill{

    min-width:160px;

    padding:14px 24px;

    border-radius:999px;

    border:1px solid #eadfe8;

    background:#fff;

    cursor:pointer;

    transition:.35s;

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

    font-size:1rem;

    color:var(--clr-heading);

}

.cc-ingredient-pill:hover{

    transform:translateY(-3px);

    border-color:var(--clr-primary-light);

}

.cc-ingredient-pill.active{

    background:var(--clr-primary-light);

    color:var(--clr-white);

    border:none;

}


/*==============================================
                RIGHT
==============================================*/

.cc-ingredients-right{

    display:flex;

    flex-direction:column;

    gap:35px;

}


/*==============================================
            SHOWCASE
==============================================*/
/* 
.cc-ingredient-showcase{

    /* background:linear-gradient(
        145deg,
        #fff,
        #fdf6fb
    );

    border-radius:35px;

    padding:30px;

    box-shadow:0 18px 45px rgba(0,0,0,.06); */



.cc-ingredient-showcase img{

    width:40%;

    display:block;

    border-radius:24px;

    transition:.35s;

    object-position: center;

    margin-left: 200px;

}

.cc-ingredient-showcase:hover img{

    transform:scale(1.02);

}


/*==============================================
            DETAIL CARDS
==============================================*/

.cc-ingredient-details{

    display:grid;

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

    gap:20px;

}

.cc-detail-card{

    background:var(--clr-white);

    padding:28px;

    border-radius:26px;

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

    transition:.35s;

}

.cc-detail-card:hover{

    transform:translateY(-6px);

}

.cc-detail-card h4{

    font-size:1.25rem;

    color:var(--clr-heading);

    margin-bottom:15px;

}

.cc-detail-card p{

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

    color:var(--clr-text);

    line-height:1.8;

}


/*==============================================
            FADE ANIMATION
==============================================*/

#ccIngredientImage,
#ccIngredientBenefits,
#ccIngredientSuitable,
#ccIngredientWorks{

    transition:opacity .3s ease;

}


/*==============================================
        SECTION 10 - PREVENTION TIPS
==============================================*/

.cc-prevention{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-prevention-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.cc-prevention-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-prevention-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-prevention-title span{

    color:var(--clr-primary-light);

}

.cc-prevention-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.cc-prevention-grid{

    max-width:1300px;

    margin:60px auto 0;

    display:grid;

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

    gap:30px;

}


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

.cc-prevention-card{

    background:var(--clr-white);

    border-radius:30px;

    padding:34px 28px;

    text-align:center;

    border:2px solid rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.cc-prevention-card:hover{

    transform:translateY(-10px);

    border-color:rgba(214,170,210,.45);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


/*==============================================
            TOP ACCENT
==============================================*/

.cc-prevention-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #f7d7ec,
        #e8d5ff
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.cc-prevention-card:hover::before{

    transform:scaleX(1);

}


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

.cc-prevention-card img{

    width:140px;

    height:140px;

    object-fit:contain;

    margin:0 auto 24px;

    display:block;

    transition:transform .35s ease;

}

.cc-prevention-card:hover img{

    transform:scale(1.08);

}


/*==============================================
                TEXT
==============================================*/

.cc-prevention-card h3{

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:16px;

    transition:.3s;

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

}

.cc-prevention-card:hover h3{

    color:var(--clr-primary);

}

.cc-prevention-card p{

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

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

    transition:.3s;

}

.cc-prevention-card:hover p{

    color:#555;

}

/*==============================================
        SECTION 11 - MYTHS VS FACTS
==============================================*/

.cc-myths{

    padding:50px 5%;

    background:var(--clr-white);

}


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

.cc-myths-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.cc-myths-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

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

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.cc-myths-title{

    font-size:clamp(2.7rem,4vw,4rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.cc-myths-title span{

    color:var(--clr-primary-light);

}

.cc-myths-description{

    max-width:650px;

    margin:auto;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==============================================
                CONTAINER
==============================================*/

.cc-myths-container{

    max-width:1200px;

    margin:60px auto 0;

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*==============================================
                PAIR
==============================================*/

.cc-myth-pair{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}


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

.cc-myth-card,
.cc-fact-box{

    background:var(--clr-white);

    border-radius:28px;

    padding:30px;

    border:2px solid rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.cc-myth-card:hover,
.cc-fact-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(223,184,216,.22);

}


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

.cc-myth-card{

    border-left:6px solid #ef5b5b;

}

.cc-myth-card:hover{

    border-color:#ef5b5b;

}


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

.cc-fact-box{

    border-left:6px solid #71c98a;

}

.cc-fact-box:hover{

    border-color:#71c98a;

}


/*==============================================
                LABELS
==============================================*/

.cc-label{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

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

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

.cc-myth-label{

    background:#ffe9e9;

    color:#d64848;

}

.cc-fact-label{

    background:#e8f8ed;

    color:#29995d;

}


/*==============================================
                TEXT
==============================================*/

.cc-myth-card p,
.cc-fact-box p{

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

    font-size:1.02rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==============================================
            MIMII TIP
==============================================*/

.cc-note-panel{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:150px;

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

    border:1px solid #f4dde7;

    border-radius:28px;

    padding:40px 42px;

    margin:70px auto;

    max-width:1300px;

    overflow:hidden;

    transition:.35s ease;

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

}

.cc-note-panel:hover{

    transform:translateY(-5px);

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

}


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

.cc-note-content{

    flex:1;

    max-width: 1200px;

}

.cc-note-label{

    display:inline-block;

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

    font-size:1.7rem;

    font-weight:500;

    color:#cf679d;

    margin-bottom:16px;

}

.cc-note-title{

    font-size:2rem;

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

    font-weight:400;

    color:#222;

    margin-bottom:16px;

}

.cc-note-description{

    font-size:1.02rem;

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

    line-height:1.9;

    color:#666;

    max-width:560px;

    margin-bottom:22px;

}

.cc-note-signature{

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

    font-size:.95rem;

    font-weight:600;

    color:#bf7296;

}


/*==============================================
                AVATAR
==============================================*/

.cc-note-avatar{

    /* width:100%; */

    max-width:300px;

}

.cc-note-avatar img{

    width:100%;

    display:block;

}

/* ============================================================
            RESPONSIVE CSS — ASK MIMII
   DELETE ALL OLD @MEDIA RULES AND USE ONLY THIS
============================================================ */


/* ============================================================
                    TABLET / IPAD
                    1024px AND BELOW
============================================================ */

@media (max-width:1024px){

    /* -----------------------------------------
                    GLOBAL SAFETY
    ----------------------------------------- */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    /* -----------------------------------------
                    HERO
    ----------------------------------------- */

    .cc-landing{
        min-height:auto;
        padding-top:110px;
        padding-bottom:70px;
        padding-inline:40px;
    }

    .cc-canvas{
        width:100%;
        max-width:100%;
        gap:40px;
    }

    .cc-copy{
        max-width:48%;
    }

    .cc-headline{
        font-size:3rem;
        margin-top:35px;
        margin-bottom:28px;
    }

    .cc-lead{
        font-size:1rem;
        line-height:1.9;
        margin-bottom:32px;
    }

    .cc-image{
        flex:1;
        min-width:0;
    }

    .cc-image img{
        width:100%;
        max-width:430px;
        height:auto;
    }

    .cc-glow{
        width:400px;
        height:400px;
    }


    /* -----------------------------------------
            UNDERSTANDING CLOSED COMEDONES
    ----------------------------------------- */

    .cc-understanding{
        padding:70px 40px;
        margin-top:60px;
    }

    .cc-understanding-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .cc-understanding-image{
        margin-top:0;
        margin-left:0;
        display:flex;
        justify-content:center;
    }

    .cc-understanding-image img{
        width:70%;
        max-width:520px;
    }

    .cc-understanding-content{
        max-width:760px;
        margin:auto;
        text-align:center;
    }


    /* -----------------------------------------
                FORMATION PROCESS
    ----------------------------------------- */

    .cc-formation{
        margin-top:60px;
        padding:70px 40px;
    }

    .cc-formation-container{
        grid-template-columns:1fr;
    }

    .cc-formation-image{
        display: block;
    }

    .cc-formation-image img{
       display: none;
    }

    .cc-formation-content{
        max-width:800px;
       width: 100%;
       margin: 0 auto;
    }

    .cc-step{
        width:100%;
    }


    /* -----------------------------------------
                    SIGNS
    ----------------------------------------- */

    .cc-signs{
        padding:70px 40px;
    }

    .cc-signs-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }


    /* -----------------------------------------
                    CAUSES
    ----------------------------------------- */

    .cc-causes{
        padding:70px 40px;
    }

    .cc-cause-item{
        gap:25px;
        padding:28px;
    }


    /* -----------------------------------------
                    TRIGGERS
    ----------------------------------------- */

    .cc-triggers{
        padding:70px 40px;
    }

    .cc-trigger-list{
        gap:18px;
    }

    .cc-trigger-pill{
        flex:1 1 280px;
    }


    /* -----------------------------------------
                    AREAS
    ----------------------------------------- */

    .cc-areas{
        padding:70px 40px;
    }

    .cc-areas-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .cc-areas-image{
        margin-left:0;
        display:flex;
        justify-content:center;
    }

    .cc-areas-image img{
        width:65%;
        max-width:500px;
    }

    .cc-areas-content{
        max-width:800px;
        width:100%;
        margin:auto;
    }


    /* -----------------------------------------
                    COMPARISON
    ----------------------------------------- */

    .cc-comparison{
        padding:70px 40px;
    }

    .cc-comparison-table-wrapper{
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .cc-comparison-table{
        min-width:700px;
    }

    .cc-comparison-table th{
        font-size:1.1rem;
    }


    /* -----------------------------------------
                    INFLAMMATION
    ----------------------------------------- */

    .cc-inflammation{
        padding:70px 40px;
    }

    .cc-progression{
        width:100%;
        max-width:850px;
    }


    /* -----------------------------------------
                    INGREDIENTS
    ----------------------------------------- */

    .cc-ingredients{
        padding:70px 40px;
    }

    .cc-ingredients-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .cc-ingredients-description{
        max-width:700px;
    }

    .cc-ingredients-left{
        text-align:center;
    }

    .cc-ingredient-list{
        justify-content:center;
    }

    .cc-ingredient-showcase{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .cc-ingredient-showcase img{
        width:45%;
        max-width:400px;
        margin-left:0;
        margin-right:0;
    }

    .cc-ingredient-details{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }


    /* -----------------------------------------
                    PREVENTION
    ----------------------------------------- */

    .cc-prevention{
        padding:70px 40px;
    }

    .cc-prevention-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }


    /* -----------------------------------------
                    MYTHS
    ----------------------------------------- */

    .cc-myths{
        padding:70px 40px;
    }

    .cc-myth-pair{
        grid-template-columns:1fr;
        gap:20px;
    }


    /* -----------------------------------------
                    MIMII NOTE
    ----------------------------------------- */

    .cc-note-panel{
        gap:40px;
        padding:35px;
    }

    .cc-note-avatar{
        max-width:220px;
    }

}



/* ============================================================
                       MOBILE
                     768px AND BELOW
============================================================ */

@media (max-width:768px){

    /* -----------------------------------------
                    GLOBAL
    ----------------------------------------- */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    img{
        max-width:100%;
        height:auto;
    }


    /* -----------------------------------------
                    HERO
    ----------------------------------------- */

    .cc-landing{
        min-height:auto;
        padding:80px 20px 65px;
    }

    .cc-canvas{
        width:100%;
        max-width:100%;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:35px;
    }

    .cc-copy{
        width:100%;
        max-width:600px;
        order:2;
    }

    .cc-image{
        width:100%;
        max-width:100%;
        order:1;
        display:flex;
        justify-content:center;
        align-items:center;
        margin:0;
    }

    .cc-image img{
        width:100%;
        max-width:330px;
        height:auto;
        margin:0 auto;
    }

    .cc-glow{
        width:300px;
        height:300px;
    }

    .cc-eyebrow{
        font-size:.76rem;
        letter-spacing:2px;
    }

    .cc-headline{
        font-size:2.5rem;
        line-height:1.12;
        margin-top:25px;
        margin-bottom:25px;
    }

    .cc-lead{
        width:100%;
        max-width:560px;
        margin:0 auto 30px;
        font-size:.97rem;
        line-height:1.85;
    }

    .cc-action{
        width:auto;
        max-width:300px;
        height:54px;
        padding:0 28px;
    }


    /* -----------------------------------------
                COMMON SECTION HEADINGS
    ----------------------------------------- */

    .cc-section-title,
    .cc-formation-title,
    .cc-signs-title,
    .cc-causes-title,
    .cc-triggers-title,
    .cc-areas-title,
    .cc-comparison-title,
    .cc-inflammation-title,
    .cc-ingredients-title,
    .cc-prevention-title,
    .cc-myths-title{
        font-size:2.2rem;
        line-height:1.18;
    }

    .cc-section-tag,
    .cc-formation-tag,
    .cc-signs-tag,
    .cc-causes-tag,
    .cc-triggers-tag,
    .cc-areas-tag,
    .cc-comparison-tag,
    .cc-inflammation-tag,
    .cc-ingredients-tag,
    .cc-prevention-tag,
    .cc-myths-tag{
        font-size:.76rem;
        letter-spacing:2px;
        padding:9px 15px;
    }

    .cc-section-description,
    .cc-formation-description,
    .cc-signs-description,
    .cc-causes-description,
    .cc-triggers-description,
    .cc-areas-description,
    .cc-comparison-description,
    .cc-inflammation-description,
    .cc-ingredients-description,
    .cc-prevention-description,
    .cc-myths-description{
        font-size:.97rem;
        line-height:1.8;
    }


    /* -----------------------------------------
                    UNDERSTANDING
    ----------------------------------------- */

    .cc-understanding{
        margin-top:30px;
        padding:60px 20px;
    }

    .cc-understanding-container{
        width:100%;
        grid-template-columns:1fr;
        gap:35px;
    }

    .cc-understanding-image{
        width:100%;
        margin:0;
        display:flex;
        justify-content:center;
    }

    .cc-understanding-image img{
        width:100%;
        max-width:360px;
        margin:auto;
    }

    .cc-understanding-content{
        text-align:center;
    }


    /* -----------------------------------------
                FORMATION PROCESS
    ----------------------------------------- */

    .cc-formation{
        margin-top:20px;
        padding:60px 20px;
    }

    .cc-formation-container{
        width:100%;
        grid-template-columns:1fr;
        gap:35px;
    }

    .cc-formation-image{
        width:100%;
        margin:0;
        display:flex;
        justify-content:center;
    }

    .cc-formation-image img{
        width:100%;
        max-width:330px;
        margin:auto;
    }

    .cc-formation-content{
        width:100%;
        text-align:center;
    }

    .cc-timeline{
        width:100%;
        gap:16px;
        text-align:left;
    }

    .cc-step{
        width:100%;
        flex-direction:row;
        align-items:flex-start;
        gap:18px;
        padding:22px;
    }

    .cc-step-number{
        width:50px;
        height:50px;
        flex-shrink:0;
    }

    .cc-step-content h3{
        font-size:1.18rem;
    }


    /* -----------------------------------------
                    SIGNS
    ----------------------------------------- */

    .cc-signs{
        padding:60px 20px;
    }

    .cc-signs-heading{
        margin-bottom:40px;
    }

    .cc-signs-grid{
        width:100%;
        grid-template-columns:1fr;
        gap:20px;
    }

    .cc-sign-card{
        padding:28px 22px;
    }

    .cc-sign-card img{
        width:110px;
        height:110px;
    }


    /* -----------------------------------------
                    CAUSES
    ----------------------------------------- */

    .cc-causes{
        padding:60px 20px;
    }

    .cc-causes-heading{
        margin-bottom:40px;
    }

    .cc-causes-container{
        width:100%;
        gap:20px;
    }

    .cc-cause-item{
        width:100%;
        flex-direction:column;
        text-align:center;
        gap:18px;
        padding:26px 22px;
    }

    .cc-cause-image{
        width:105px;
        height:105px;
    }

    .cc-cause-image img{
        width:95px;
        max-width:100%;
    }

    .cc-cause-content h3{
        font-size:1.28rem;
    }


    /* -----------------------------------------
                    TRIGGERS
    ----------------------------------------- */

    .cc-triggers{
        padding:60px 20px;
    }

    .cc-triggers-heading{
        margin-bottom:40px;
    }

    .cc-trigger-list{
        width:100%;
        margin-top:40px;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:15px;
    }

    .cc-trigger-pill{
        width:100%;
        max-width:100%;
        flex:none;
        padding:16px 20px;
    }

    .cc-trigger-pill img{
        width:60px;
        height:60px;
    }


    /* -----------------------------------------
                    AREAS
    ----------------------------------------- */

    .cc-areas{
        padding:60px 20px;
    }

    .cc-areas-heading{
        margin-bottom:40px;
    }

    .cc-areas-container{
        width:100%;
        grid-template-columns:1fr;
        gap:35px;
    }

    .cc-areas-image{
        width:100%;
        margin:0;
        display:flex;
        justify-content:center;
    }

    .cc-areas-image img{
        width:100%;
        max-width:350px;
        margin:auto;
    }

    .cc-areas-content{
        width:100%;
    }

    .cc-area-card{
        width:100%;
        gap:18px;
        padding:20px;
    }

    .cc-area-card img{
        width:70px;
        height:70px;
    }

    .cc-area-card h3{
        font-size:1.25rem;
    }


    /* -----------------------------------------
                    COMPARISON
    ----------------------------------------- */

    .cc-comparison{
        padding:60px 20px;
    }

    .cc-comparison-heading{
        margin-bottom:40px;
    }

    .cc-comparison-table-wrapper{
        width:100%;
        max-width:100%;
        margin:40px auto;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .cc-comparison-table{
        width:100%;
        min-width:650px;
    }

    .cc-comparison-table th{
        padding:18px;
        font-size:1rem;
    }

    .cc-comparison-table td{
        padding:17px 14px;
        font-size:.9rem;
    }

    .cc-fact-card{
        width:100%;
        flex-direction:column;
        text-align:center;
        padding:26px 22px;
    }


    /* -----------------------------------------
                INFLAMMATION
    ----------------------------------------- */

    .cc-inflammation{
        padding:60px 20px;
    }

    .cc-inflammation-heading{
        margin-bottom:40px;
    }

    .cc-progression{
        width:100%;
        margin-top:45px;
    }

    .cc-stage{
        width:100%;
        flex-direction:column;
        text-align:center;
        gap:18px;
        padding:26px 22px;
    }

    .cc-stage-image{
        width:100px;
        height:100px;
    }

    .cc-stage-image img{
        width:100px;
        max-width:100%;
    }

    .cc-stage-content h3{
        font-size:1.25rem;
    }


    /* -----------------------------------------
                    INGREDIENTS
    ----------------------------------------- */

    .cc-ingredients{
        padding:60px 20px;
    }

    .cc-ingredients-container{
        width:100%;
        grid-template-columns:1fr;
        gap:35px;
    }

    .cc-ingredients-left{
        text-align:center;
    }

    .cc-ingredients-description{
        width:100%;
        max-width:620px;
        margin-left:auto;
        margin-right:auto;
    }

    .cc-ingredient-list{
        width:100%;
        justify-content:center;
        gap:10px;
    }

    .cc-ingredient-pill{
        min-width:0;
        padding:12px 18px;
        font-size:.9rem;
    }

    .cc-ingredients-right{
        width:100%;
        gap:25px;
    }

    .cc-ingredient-showcase{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .cc-ingredient-showcase img{
        width:100%;
        max-width:320px;
        height:auto;
        margin:0 auto;
        object-position:center;
    }

    .cc-ingredient-details{
        width:100%;
        grid-template-columns:1fr;
        gap:16px;
    }

    .cc-detail-card{
        width:100%;
        padding:24px;
        text-align:center;
    }


    /* -----------------------------------------
                    PREVENTION
    ----------------------------------------- */

    .cc-prevention{
        padding:60px 20px;
    }

    .cc-prevention-heading{
        margin-bottom:40px;
    }

    .cc-prevention-grid{
        width:100%;
        grid-template-columns:1fr;
        gap:20px;
    }

    .cc-prevention-card{
        width:100%;
        padding:26px 22px;
    }

    .cc-prevention-card img{
        width:95px;
        height:95px;
        object-fit:contain;
    }


    /* -----------------------------------------
                    MYTHS
    ----------------------------------------- */

    .cc-myths{
        padding:60px 20px;
    }

    .cc-myths-heading{
        margin-bottom:40px;
    }

    .cc-myth-pair{
        width:100%;
        grid-template-columns:1fr;
        gap:18px;
    }

    .cc-myth-card,
    .cc-fact-box{
        width:100%;
        padding:24px;
    }


    /* -----------------------------------------
                    MIMII NOTE
    ----------------------------------------- */

    .cc-note-panel{
        width:100%;
        flex-direction:column;
        text-align:center;
        gap:25px;
        padding:35px 24px;
    }

    .cc-note-avatar{
        order:1;
        width:100%;
        max-width:200px;
        margin:auto;
    }

    .cc-note-content{
        order:2;
        width:100%;
    }

    .cc-note-decoration{
        display:none;
    }

    .cc-note-title{
        font-size:1.7rem;
    }

    .cc-note-description{
        max-width:100%;
    }

}



/* ============================================================
                    SMALL MOBILE
                    480px AND BELOW
============================================================ */

@media (max-width:480px){

    /* -----------------------------------------
                    HERO
    ----------------------------------------- */

    .cc-landing{
        padding:65px 16px 55px;
    }

    .cc-canvas{
        width:100%;
        max-width:100%;
    }

    .cc-image img{
        width:100%;
        max-width:270px;
    }

    .cc-glow{
        width:250px;
        height:250px;
    }

    .cc-eyebrow{
        font-size:.72rem;
        letter-spacing:1.7px;
    }

    .cc-headline{
        font-size:2.05rem;
        line-height:1.15;
        margin-top:22px;
        margin-bottom:22px;
    }

    .cc-lead{
        font-size:.93rem;
        line-height:1.8;
    }

    .cc-action{
        height:52px;
        padding:0 24px;
        font-size:.92rem;
    }


    /* -----------------------------------------
                    SECTIONS
    ----------------------------------------- */

    .cc-understanding,
    .cc-formation,
    .cc-signs,
    .cc-causes,
    .cc-triggers,
    .cc-areas,
    .cc-comparison,
    .cc-inflammation,
    .cc-ingredients,
    .cc-prevention,
    .cc-myths{
        padding-left:16px;
        padding-right:16px;
    }


    /* -----------------------------------------
                  COMMON TITLES
    ----------------------------------------- */

    .cc-section-title,
    .cc-formation-title,
    .cc-signs-title,
    .cc-causes-title,
    .cc-triggers-title,
    .cc-areas-title,
    .cc-comparison-title,
    .cc-inflammation-title,
    .cc-ingredients-title,
    .cc-prevention-title,
    .cc-myths-title{
        font-size:1.9rem;
    }


    /* -----------------------------------------
                    TAGS
    ----------------------------------------- */

    .cc-section-tag,
    .cc-formation-tag,
    .cc-signs-tag,
    .cc-causes-tag,
    .cc-triggers-tag,
    .cc-areas-tag,
    .cc-comparison-tag,
    .cc-inflammation-tag,
    .cc-ingredients-tag,
    .cc-prevention-tag,
    .cc-myths-tag{
        font-size:.7rem;
        letter-spacing:1.5px;
    }


    /* -----------------------------------------
                UNDERSTANDING IMAGE
    ----------------------------------------- */

    .cc-understanding-image img{
        max-width:280px;
    }


    /* -----------------------------------------
                FORMATION
    ----------------------------------------- */

    .cc-formation-image img{
        max-width:270px;
    }

    .cc-step{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:22px 18px;
    }


    /* -----------------------------------------
                    SIGNS
    ----------------------------------------- */

    .cc-sign-card{
        padding:25px 18px;
    }

    .cc-sign-card img{
        width:95px;
        height:95px;
    }


    /* -----------------------------------------
                    CAUSES
    ----------------------------------------- */

    .cc-cause-item{
        padding:24px 18px;
    }


    /* -----------------------------------------
                    TRIGGERS
    ----------------------------------------- */

    .cc-trigger-pill{
        padding:15px 17px;
        gap:14px;
    }

    .cc-trigger-pill img{
        width:52px;
        height:52px;
    }

    .cc-trigger-pill span{
        font-size:.92rem;
    }


    /* -----------------------------------------
                    AREAS
    ----------------------------------------- */

    .cc-areas-image img{
        max-width:280px;
    }

    .cc-area-card{
        flex-direction:column;
        text-align:center;
        padding:22px 18px;
    }


    /* -----------------------------------------
                    COMPARISON
    ----------------------------------------- */

    .cc-comparison-table{
        min-width:600px;
    }

    .cc-fact-card{
        padding:24px 18px;
    }


    /* -----------------------------------------
                INFLAMMATION
    ----------------------------------------- */

    .cc-stage{
        padding:24px 18px;
    }


    /* -----------------------------------------
                    INGREDIENTS
    ----------------------------------------- */

    .cc-ingredient-list{
        gap:8px;
    }

    .cc-ingredient-pill{
        padding:11px 14px;
        font-size:.84rem;
    }

    .cc-ingredient-showcase img{
        max-width:270px;
    }

    .cc-detail-card{
        padding:22px 18px;
    }


    /* -----------------------------------------
                    PREVENTION
    ----------------------------------------- */

    .cc-prevention-card{
        padding:24px 18px;
    }


    /* -----------------------------------------
                    MYTHS
    ----------------------------------------- */

    .cc-myth-card,
    .cc-fact-box{
        padding:22px 18px;
    }


    /* -----------------------------------------
                    MIMII NOTE
    ----------------------------------------- */

    .cc-note-panel{
        padding:28px 18px;
        border-radius:24px;
    }

    .cc-note-avatar{
        max-width:180px;
    }

    .cc-note-title{
        font-size:1.5rem;
    }

    .cc-note-label{
        font-size:1.3rem;
    }

    .cc-note-description{
        font-size:.93rem;
        line-height:1.8;
    }

}