/*==========================================
        PIE HOME / HERO SECTION
==========================================*/

.pie-home{

    position:relative;

    padding:140px 5% 30px;

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

    overflow:hidden;

}

.skin-home-wrap{

    position:relative;

    z-index:2;

    max-width:1200px;

    min-height:620px;

    margin:auto;

    display:grid;

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

    align-items:center;

    gap:70px;

}


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

.skin-home-content{

    max-width:620px;

}

.skin-home-eyebrow{

    display:inline-block;

    margin-bottom:20px;

    padding:9px 18px;

    border:1px solid #f1d7e4;

    border-radius:999px;

    background:#ffffff;

    color:var(--clr-primary);

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.skin-home-title{

    margin:0 0 23px;

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

    font-size:3.7rem;

    font-weight:300;

    line-height:1.12;

    letter-spacing:-.025em;

    color:var(--clr-heading);

}

.skin-home-title span{

    display:block;

    color:var(--clr-primary);

}

.skin-home-description{

    max-width:610px;

    margin:0;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            QUICK IDENTIFICATION
==========================================*/

.skin-home-highlight{

    margin-top:28px;

    padding:17px 19px;

    max-width:500px;

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

    border:1px solid #f0dce6;

    border-radius:19px;

}

.skin-home-highlight-label{

    display:block;

    margin-bottom:11px;

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

    font-size:.73rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#bd91a7;

}

.skin-home-highlight-points{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.skin-home-highlight-points span{

    padding:7px 13px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f1d8e5;

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

    font-size:.8rem;

    color:#a56f89;

}


/*==========================================
            ACTIONS
==========================================*/

.skin-home-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:30px;

}

.skin-home-btn{

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

    color: var(--clr-text);
    border: none;
    padding: 0 19px;
    height: 46px;
    border-radius: 25px;
    transition: all 1s ease;

    text-indent: 4px;

    position: relative;
    top: -5px;

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

    color:var(--clr-white);

}

.skin-home-btn:hover{

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

    transform:translateY(-4px);

}

.skin-home-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#9b7287;

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

    font-size:.9rem;

    text-decoration:none;

    transition:color .3s ease;

}

.skin-home-link span{

    font-size:1.05rem;

    transition:transform .3s ease;

}

.skin-home-link:hover{

    color:#c96d9d;

}

.skin-home-link:hover span{

    transform:translateX(4px);

}


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

.skin-home-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:520px;

}

.skin-home-visual-glow{

    position:absolute;

    width:390px;

    height:390px;

    border-radius:50%;

    background:#fce5f1;

    filter:blur(3px);

    opacity:.65;

}

.skin-home-image{

    position:relative;

    z-index:2;

    width:110%;

    max-width:600px;

}

.skin-home-image img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(
        0 18px 25px rgba(160,110,135,.1)
    );

    transition:transform .45s ease;

}

.skin-home-image img:hover{

    transform:translateY(-8px);

}


/*==========================================
            FLOATING LABEL
==========================================*/

.skin-home-float{

    position:absolute;

    right:4%;

    bottom:12%;

    z-index:3;

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px 17px;

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

    border:1px solid #f0dce6;

    border-radius:17px;

    box-shadow:0 12px 30px rgba(120,80,105,.08);

    backdrop-filter:blur(8px);

}

.skin-home-float-dot{

    width:10px;

    height:10px;

    flex-shrink:0;

    border-radius:50%;

    background:#d97b93;

    box-shadow:0 0 0 5px #fff0f5;

}

.skin-home-float strong{

    display:block;

    margin-bottom:2px;

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

    font-size:1rem;

    font-weight:500;

    color:var(--clr-heading);

}

.skin-home-float p{

    margin:0;

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

    font-size:.76rem;

    line-height:1.4;

    color:#967b89;

}


/*==========================================
            SCROLL INDICATOR
==========================================*/

.skin-home-scroll{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    margin-top:25px;

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

    font-size:.74rem;

    letter-spacing:.06em;

    color:#b18d9e;

}

.skin-home-scroll-line{

    display:block;

    width:42px;

    height:1px;

    background:#e5c7d5;

}


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

@media(max-width:900px){

    .skin-home-wrap{

        grid-template-columns:1fr;

        gap:40px;

        min-height:auto;

        text-align:center;

    }

    .skin-home-content{

        max-width:760px;

        margin:auto;

    }

    .skin-home-description{

        margin:auto;

    }

    .skin-home-highlight{

        margin:28px auto 0;

        text-align:left;

    }

    .skin-home-actions{

        justify-content:center;

    }

    .skin-home-visual{

        min-height:430px;

    }

    .skin-home-image{

        max-width:430px;

    }

    .skin-home-float{

        right:12%;

        bottom:7%;

    }

}


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

@media(max-width:600px){

    .pie-home{

        padding:75px 6% 60px;

    }

    .skin-home-wrap{

        gap:30px;

    }

    .skin-home-eyebrow{

        margin-bottom:16px;

        font-size:.82rem;

    }

    .skin-home-title{

        font-size:2.8rem;

        line-height:1.16;

    }

    .skin-home-description{

        font-size:1.03rem;

        line-height:1.85;

    }

    .skin-home-highlight{

        margin-top:23px;

        padding:15px;

    }

    .skin-home-highlight-points{

        justify-content:center;

    }

    .skin-home-highlight-points span{

        font-size:.76rem;

    }

    .skin-home-actions{

        gap:16px;

        margin-top:25px;

    }

    .skin-home-btn{

        padding:12px 19px;

        font-size:.84rem;

    }

    .skin-home-link{

        font-size:.84rem;

    }

    .skin-home-visual{

        min-height:330px;

    }

    .skin-home-visual-glow{

        width:270px;

        height:270px;

    }

    .skin-home-image{

        max-width:330px;

    }

    .skin-home-float{

        right:0;

        bottom:3%;

        padding:10px 13px;

        border-radius:14px;

    }

    .skin-home-float strong{

        font-size:.9rem;

    }

    .skin-home-float p{

        font-size:.68rem;

    }

    .skin-home-scroll{

        margin-top:15px;

    }

}

/*==========================================
        SECTION 1 — WHAT IS PIE?
==========================================*/

.pie-understanding{

    padding:100px 6%;

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

}

.pie-understanding-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pie-understanding-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pie-understanding-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pie-understanding-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pie-understanding-intro{

    max-width:770px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pie-understanding-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.pie-understanding-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:470px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pie-understanding-glow{

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:#fde5ed;

    filter:blur(8px);

    opacity:.7;

}

.pie-understanding-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:470px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pie-understanding-visual img:hover{

    transform:translateY(-7px);

}


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

.pie-understanding-content{

    max-width:570px;

}

.pie-understanding-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pie-understanding-content h3{

    margin:0 0 22px;

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

    font-size:2.05rem;

    font-weight:600;

    line-height:1.4;

    color:var(--clr-heading);

}

.pie-understanding-content > p{

    margin:0 0 17px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            KEY POINTS
==========================================*/

.pie-understanding-points{

    display:flex;

    flex-direction:column;

    gap:11px;

    margin-top:27px;

}

.pie-understanding-point{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px 17px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:18px;

    box-shadow:0 7px 22px rgba(0,0,0,.035);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pie-understanding-point:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.pie-understanding-point-icon{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#fff0f5;

    color:#d77b96;

    font-size:.7rem;

}

.pie-understanding-point strong{

    display:block;

    margin-bottom:5px;

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

    font-size:1.1rem;

    font-weight:400;

    color:var(--clr-heading);

}

.pie-understanding-point p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.7;

    color:var(--clr-text);

}


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

.pie-understanding-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pie-understanding-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pie-understanding-note p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .pie-understanding-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pie-understanding-visual{

        max-width:600px;

        width:100%;

        min-height:410px;

        margin:auto;

    }

    .pie-understanding-visual img{

        max-width:420px;

    }

    .pie-understanding-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-understanding{

        padding:75px 6%;

    }

    .pie-understanding-head{

        margin-bottom:50px;

    }

    .pie-understanding-title{

        font-size:2.5rem;

    }

    .pie-understanding-intro{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pie-understanding-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pie-understanding-glow{

        width:210px;

        height:210px;

    }

    .pie-understanding-visual img{

        max-width:320px;

    }

    .pie-understanding-content h3{

        font-size:1.8rem;

    }

    .pie-understanding-content > p{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pie-understanding-point{

        padding:14px;

        gap:11px;

    }

    .pie-understanding-point-icon{

        width:26px;

        height:26px;

    }

    .pie-understanding-point p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .pie-understanding-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pie-understanding-note p{

        font-size:1.03rem;

    }

}

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

.pie-formation{

    padding:100px 6%;

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

}

.pif-wrap{

    max-width:1150px;

    margin:auto;

}


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

.pif-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pif-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pif-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pif-sub{

    max-width:770px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pif-process{

    max-width:900px;

    margin:auto;

}


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

.pif-step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:25px;

    padding:25px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pif-step:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}


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

.pif-number{

    position:relative;

    z-index:2;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #efcadb;

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

    font-size:.75rem;

    letter-spacing:.05em;

    color:#c96d9d;

    box-shadow:0 0 0 7px #ffffff;

}


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

.pif-step-content{

    flex:1;

    padding-top:3px;

}

.pif-step-label{

    display:block;

    margin-bottom:6px;

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

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pif-step-content h3{

    margin:0 0 10px;

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

    font-size:1.5rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pif-step-content p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


/*==========================================
            CONNECTORS
==========================================*/

.pif-connector{

    width:1px;

    height:28px;

    margin:0 0 0 29px;

    background:#e8cedb;

}


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

.pif-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pif-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pif-note p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:700px){

    .pif-step{

        gap:18px;

        padding:22px 20px;

    }

    .pif-number{

        width:51px;

        height:51px;

    }

    .pif-connector{

        margin-left:25px;

    }

}


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

@media(max-width:600px){

    .pie-formation{

        padding:75px 6%;

    }

    .pif-head{

        margin-bottom:50px;

    }

    .pif-title{

        font-size:2.5rem;

    }

    .pif-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pif-step{

        gap:14px;

        padding:21px 17px;

        border-radius:21px;

    }

    .pif-number{

        width:40px;

        height:40px;

        box-shadow:0 0 0 5px #ffffff;

        font-size:.65rem;

    }

    .pif-step-label{

        font-size:.68rem;

    }

    .pif-step-content h3{

        font-size:1.3rem;

    }

    .pif-step-content p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pif-connector{

        height:22px;

        margin-left:20px;

    }

    .pif-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pif-note p{

        font-size:1.03rem;

    }

}

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

.pie-appearance{

    padding:100px 6%;

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

}

.pia-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pia-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pia-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pia-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pia-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pia-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.pia-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:500px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pia-visual-glow{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:#fde3eb;

    filter:blur(10px);

    opacity:.7;

}

.pia-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pia-visual img:hover{

    transform:translateY(-7px);

}


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

.pia-visual-label{

    position:absolute;

    right:24px;

    bottom:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 14px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

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

    font-size:.76rem;

    color:#987687;

    backdrop-filter:blur(7px);

}

.pia-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#d77b96;

    box-shadow:0 0 0 4px #fff0f4;

}


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

.pia-content{

    max-width:570px;

}

.pia-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pia-content h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:400;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.pia-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.pia-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:13px 16px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:17px;

    box-shadow:0 6px 20px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pia-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

    box-shadow:0 11px 26px rgba(236,180,215,.11);

}

.pia-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:35px;

    height:35px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pia-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.65;

    color:var(--clr-text);

}


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

.pia-tip{

    max-width:900px;

    margin:45px auto 0;

    padding:27px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pia-tip span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pia-tip p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .pia-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pia-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .pia-visual img{

        max-width:420px;

    }

    .pia-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-appearance{

        padding:75px 6%;

    }

    .pia-head{

        margin-bottom:50px;

    }

    .pia-title{

        font-size:2.5rem;

    }

    .pia-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pia-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pia-visual-glow{

        width:210px;

        height:210px;

    }

    .pia-visual img{

        max-width:320px;

    }

    .pia-visual-label{

        right:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .pia-content h3{

        font-size:1.8rem;

    }

    .pia-item{

        padding:12px 13px;

        gap:12px;

    }

    .pia-number{

        width:33px;

        height:33px;

    }

    .pia-item p{

        font-size:1.03rem;

        line-height:1.7;

    }

    .pia-tip{

        margin-top:30px;

        padding:22px 19px;

    }

    .pia-tip p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 4 — PIE VS PIH
==========================================*/

.pie-vs-pih{

    padding:100px 6%;

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

}

.pvw-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pvw-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pvw-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pvw-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pvw-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pvw-comparison{

    display:grid;

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

    align-items:center;

    gap:20px;

}


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

.pvw-card{

    padding:34px 32px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pvw-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

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

}


/* PIE */

.pvw-pie{

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

}


/* PIH */

.pvw-pih{

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

}


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

.pvw-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;

}

.pvw-label{

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pvw-color-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    box-shadow:0 0 0 5px rgba(255,255,255,.8);

}

.pvw-red-dot{

    background:#d77b96;

}

.pvw-brown-dot{

    background:#9b6b58;

}


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

.pvw-card h3{

    margin:0 0 13px;

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

    font-size:1.7rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}

.pvw-card-intro{

    margin:0 0 27px;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


/*==========================================
            DETAILS
==========================================*/

.pvw-details{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.pvw-detail{

    padding:13px 15px;

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

    border:1px solid #eee0e7;

    border-radius:16px;

}

.pvw-detail span{

    display:block;

    margin-bottom:4px;

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

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:.07em;

    color:#c795b0;

}

.pvw-detail p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.65;

    color:var(--clr-text);

}


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

.pvw-vs{

    display:flex;

    align-items:center;

    justify-content:center;

}

.pvw-vs span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #efd7e4;

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

    font-size:1rem;

    color:#c96d9d;

    box-shadow:0 7px 20px rgba(0,0,0,.04);

}


/*==========================================
            MEMORY TIP
==========================================*/

.pvw-memory{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pvw-memory > span{

    display:block;

    margin-bottom:18px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pvw-memory-items{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

}

.pvw-memory-item strong{

    display:block;

    margin-bottom:5px;

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

    font-size:1.5rem;

    font-weight:400;

    color:var(--clr-heading);

}

.pvw-memory-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.7;

    color:var(--clr-text);

}

.pvw-memory-item p span{

    margin-left:3px;

}

.pvw-memory-divider{

    width:1px;

    height:45px;

    background:#ead5df;

}


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

@media(max-width:850px){

    .pvw-comparison{

        grid-template-columns:1fr;

        gap:15px;

    }

    .pvw-vs{

        height:48px;

    }

}


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

@media(max-width:600px){

    .pie-vs-pih{

        padding:75px 6%;

    }

    .pvw-head{

        margin-bottom:50px;

    }

    .pvw-title{

        font-size:2.5rem;

    }

    .pvw-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pvw-card{

        padding:25px 21px;

        border-radius:23px;

    }

    .pvw-card h3{

        font-size:1.5rem;

    }

    .pvw-card-intro{

        font-size:1.03rem;

    }

    .pvw-detail{

        padding:12px 13px;

    }

    .pvw-detail p{

        font-size:1.03rem;

        line-height:1.7;

    }

    .pvw-vs span{

        width:48px;

        height:48px;

        font-size:.9rem;

    }

    .pvw-memory{

        margin-top:30px;

        padding:22px 19px;

    }

    .pvw-memory-items{

        gap:20px;

    }

    .pvw-memory-item strong{

        font-size:1.3rem;

    }

    .pvw-memory-item p{

        font-size:1.03rem;

    }

    .pvw-memory-divider{

        height:38px;

    }

}

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

.pie-causes{

    padding:100px 6%;

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

}

.pic-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pic-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pic-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pic-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pic-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pic-main{

    display:grid;

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

    gap:60px;

    align-items:center;

}


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

.pic-visual{

    position:relative;

    display:grid;

    /* align-items:center;

    justify-content:center; */

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

    min-height:500px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pic-visual-glow{

    position:absolute;

    width:310px;

    height:310px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(10px);

    opacity:.7;

}

.pic-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:120px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pic-visual img:hover{

    transform:translateY(-7px);

}


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

.pic-visual-caption{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 14px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

    backdrop-filter:blur(7px);

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

    font-size:.76rem;

    color:#987687;

}

.pic-caption-dot{

    width:9px;

    height:9px;

    flex-shrink:0;

    border-radius:50%;

    background:#d77b96;

    box-shadow:0 0 0 4px #fff0f4;

}


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

.pic-causes-list{

    display:flex;

    flex-direction:column;

    gap:13px;

}

.pic-cause-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px 21px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:22px;

    box-shadow:0 7px 24px rgba(0,0,0,.035);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pic-cause-card:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}


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

.pic-cause-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.69rem;

    letter-spacing:.04em;

    color:#c96d9d;

}


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

.pic-cause-content{

    flex:1;

}

.pic-cause-content h3{

    margin:0 0 8px;

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

    font-size:1.4rem;

    font-weight:400;

    line-height:1.4;

    color:var(--clr-heading);

}

.pic-cause-content p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.pic-bottom-note{

    display:flex;

    align-items:center;

    gap:17px;

    max-width:900px;

    margin:45px auto 0;

    padding:25px 28px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.pic-bottom-icon{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#fff0f4;

    border:1px solid #f1cfdc;

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

    font-size:1rem;

    color:#cf7594;

}

.pic-bottom-note span{

    display:block;

    margin-bottom:5px;

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

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pic-bottom-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){

    .pic-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pic-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .pic-visual img{

        max-width:420px;

    }

    .pic-causes-list{

        max-width:700px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-causes{

        padding:75px 6%;

    }

    .pic-head{

        margin-bottom:50px;

    }

    .pic-title{

        font-size:2.5rem;

    }

    .pic-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pic-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pic-visual-glow{

        width:210px;

        height:210px;

    }

    .pic-visual img{

        max-width:320px;

    }

    .pic-visual-caption{

        left:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .pic-cause-card{

        gap:13px;

        padding:19px 16px;

        border-radius:20px;

    }

    .pic-cause-number{

        width:35px;

        height:35px;

    }

    .pic-cause-content h3{

        font-size:1.25rem;

    }

    .pic-cause-content p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pic-bottom-note{

        align-items:flex-start;

        margin-top:30px;

        padding:20px 18px;

        border-radius:21px;

    }

    .pic-bottom-note p{

        font-size:1.03rem;

    }

}

/* =========================================================
        SECTION 7 — DOES PIE FADE?
========================================================= */

.pie-fade{

    padding:110px 5% 90px;

    background:var(--clr-white);

}


.pifd-wrap{

    width:100%;

    max-width:1220px;

    margin:0 auto;

}


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

.pifd-head{

    max-width:760px;

    margin:0 auto 65px;

    text-align:center;

}


.pifd-pill{

    display:inline-block;

    padding:9px 18px;

    margin-bottom:20px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.78rem;

    font-weight:600;

    letter-spacing:2.5px;

    text-transform:uppercase;

}


.pifd-title{

    margin:0 0 20px;

    color:var(--clr-heading);

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

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

    font-weight:500;

    line-height:1.15;

}


.pifd-title::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:18px auto 0;

    border-radius:999px;

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

}


.pifd-sub{

    max-width:680px;

    margin:0 auto;

    color:var(--clr-text);

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

    font-size:1.02rem;

    line-height:1.85;

}


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

.pifd-main{

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:70px;

    align-items:center;

}


/* =========================================================
        LEFT — VISUAL
========================================================= */

.pifd-visual{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:35px;

    border-radius:38px;

    background:linear-gradient(
        145deg,
        #fff,
        #fff7fb
    );

    border:1px solid rgba(223,184,216,.20);

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    overflow:hidden;

}


.pifd-glow{

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,214,224,.65),
        transparent 70%
    );

    filter:blur(35px);

    z-index:0;

}


.pifd-visual img{

    position:relative;

    z-index:1;

    width:100%;

    max-width:500px;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.4s ease;

}


.pifd-visual:hover img{

    transform:scale(1.025);

}


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

.pifd-visual-label{

    position:absolute;

    left:28px;

    bottom:25px;

    z-index:2;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 17px;

    border-radius:999px;

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

    border:1px solid rgba(223,184,216,.25);

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

    backdrop-filter:blur(8px);

    color:var(--clr-text);

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

    font-size:.88rem;

}


.pifd-dot{

    width:9px;

    height:9px;

    border-radius:50%;

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

    box-shadow:0 0 0 5px rgba(231,178,199,.16);

}


/* =========================================================
        RIGHT — INFORMATION
========================================================= */

.pifd-content{

    width:100%;

    max-width:600px;

}


.pifd-small-title{

    display:inline-block;

    margin-bottom:15px;

    color:var(--clr-primary);

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

    font-size:.82rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}


.pifd-content h3{

    margin:0 0 22px;

    color:var(--clr-heading);

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

    font-size:clamp(2rem,3vw,2.8rem);

    font-weight:500;

    line-height:1.2;

}


.pifd-content > p{

    margin:0 0 18px;

    color:var(--clr-text);

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

    font-size:1rem;

    line-height:1.85;

}


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

.pifd-factors{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:32px;

}


.pifd-factor{

    display:grid;

    grid-template-columns:48px 1fr;

    gap:17px;

    align-items:start;

    padding:18px 20px;

    background:#fff;

    border:1px solid rgba(223,184,216,.18);

    border-radius:22px;

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

    transition:.35s ease;

}


.pifd-factor:hover{

    transform:translateY(-4px);

    border-color:rgba(231,178,199,.45);

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

}


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

.pifd-factor-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--clr-background);

    color:var(--clr-primary);

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

    font-size:.82rem;

    font-weight:600;

}


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

.pifd-factor strong{

    display:block;

    margin:2px 0 6px;

    color:var(--clr-heading);

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

    font-size:1rem;

    font-weight:600;

}


.pifd-factor p{

    margin:0;

    color:var(--clr-text);

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

    font-size:.9rem;

    line-height:1.65;

}


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

.pifd-note{

    display:flex;

    align-items:center;

    gap:18px;

    max-width:950px;

    margin:65px auto 0;

    padding:20px 26px;

    border-radius:20px;

    background:var(--clr-quote-box);

    border:1px solid rgba(223,184,216,.18);

}


.pifd-note > span{

    flex-shrink:0;

    padding:8px 15px;

    border-radius:999px;

    background:#fff;

    color:var(--clr-primary);

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

    font-size:.78rem;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.pifd-note p{

    margin:0;

    color:var(--clr-text);

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

    font-size:.92rem;

    line-height:1.7;

}


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

@media(max-width:1024px){

    .pie-fade{

        padding:90px 40px 75px;

    }


    .pifd-head{

        margin-bottom:50px;

    }


    .pifd-main{

        grid-template-columns:1fr;

        gap:45px;

    }


    .pifd-visual{

        min-height:420px;

        max-width:650px;

        width:100%;

        margin:0 auto;

    }


    .pifd-content{

        max-width:700px;

        margin:0 auto;

    }


    .pifd-factor{

        padding:17px 19px;

    }


    .pifd-note{

        margin-top:50px;

    }

}


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

@media(max-width:768px){

    .pie-fade{

        padding:75px 20px 65px;

    }


    .pifd-head{

        margin-bottom:40px;

    }


    .pifd-pill{

        font-size:.7rem;

        letter-spacing:2px;

        padding:8px 15px;

    }


    .pifd-title{

        font-size:2.25rem;

    }


    .pifd-sub{

        font-size:.94rem;

        line-height:1.75;

    }


    .pifd-main{

        gap:35px;

    }


    .pifd-visual{

        min-height:320px;

        padding:25px 20px;

        border-radius:28px;

    }


    .pifd-glow{

        width:260px;

        height:260px;

    }


    .pifd-visual img{

        max-width:360px;

    }


    .pifd-visual-label{

        left:18px;

        bottom:18px;

        font-size:.78rem;

        padding:8px 13px;

    }


    .pifd-small-title{

        font-size:.72rem;

        letter-spacing:1.7px;

    }


    .pifd-content h3{

        font-size:2rem;

        margin-bottom:18px;

    }


    .pifd-content > p{

        font-size:.94rem;

        line-height:1.8;

    }


    .pifd-factors{

        gap:12px;

        margin-top:26px;

    }


    .pifd-factor{

        grid-template-columns:42px 1fr;

        gap:13px;

        padding:16px;

        border-radius:19px;

    }


    .pifd-factor-icon{

        width:42px;

        height:42px;

        font-size:.75rem;

    }


    .pifd-factor strong{

        font-size:.94rem;

    }


    .pifd-factor p{

        font-size:.84rem;

        line-height:1.6;

    }


    .pifd-note{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        margin-top:40px;

        padding:18px 20px;

        border-radius:18px;

    }


    .pifd-note p{

        font-size:.85rem;

        line-height:1.7;

    }

}


/* =========================================================
        SMALL PHONES
========================================================= */

@media(max-width:480px){

    .pie-fade{

        padding:65px 16px 55px;

    }


    .pifd-title{

        font-size:2rem;

    }


    .pifd-title::after{

        width:45px;

        height:2px;

    }


    .pifd-sub{

        font-size:.9rem;

    }


    .pifd-visual{

        min-height:280px;

        padding:20px;

        border-radius:25px;

    }


    .pifd-visual img{

        max-width:300px;

    }


    .pifd-visual-label{

        position:relative;

        left:auto;

        bottom:auto;

        margin-top:15px;

        font-size:.74rem;

    }


    .pifd-content h3{

        font-size:1.8rem;

    }


    .pifd-factor{

        grid-template-columns:38px 1fr;

        gap:12px;

        padding:14px;

    }


    .pifd-factor-icon{

        width:38px;

        height:38px;

        font-size:.7rem;

    }


    .pifd-factor strong{

        font-size:.9rem;

    }


    .pifd-factor p{

        font-size:.8rem;

    }


    .pifd-note > span{

        font-size:.7rem;

    }

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

.pie-areas{

    padding:100px 6%;

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

}

.piaa-wrap{

    max-width:1200px;

    margin:auto;

}


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

.piaa-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.piaa-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.piaa-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.piaa-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.piaa-main{

    display:grid;

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

    align-items:center;

    gap:65px;

}


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

.piaa-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:510px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.piaa-glow{

    position:absolute;

    width:310px;

    height:310px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(10px);

    opacity:.7;

}

.piaa-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:470px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.piaa-visual img:hover{

    transform:translateY(-7px);

}


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

.piaa-visual-label{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:3;

    padding:10px 15px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

    backdrop-filter:blur(7px);

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

    font-size:.76rem;

    color:#987687;

}


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

.piaa-content{

    max-width:620px;

}

.piaa-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.piaa-content h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.piaa-area-grid{

    display:grid;

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

    gap:12px;

}

.piaa-area-card{

    padding:20px 18px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:20px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.piaa-area-card:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

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

}


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

.piaa-area-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:35px;

    height:35px;

    margin-bottom:13px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}


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

.piaa-area-card h4{

    margin:0 0 7px;

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

    font-size:1.25rem;

    font-weight:400;

    line-height:1.4;

    color:var(--clr-heading);

}

.piaa-area-card p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.75;

    color:var(--clr-text);

}


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

.piaa-area-wide{

    grid-column:1 / -1;

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.piaa-area-wide .piaa-area-number{

    flex-shrink:0;

    margin-bottom:0;

}


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

.piaa-note{

    max-width:900px;

    margin:45px auto 0;

    padding:27px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.piaa-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.piaa-note p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .piaa-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .piaa-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .piaa-visual img{

        max-width:420px;

    }

    .piaa-content{

        max-width:720px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-areas{

        padding:75px 6%;

    }

    .piaa-head{

        margin-bottom:50px;

    }

    .piaa-title{

        font-size:2.5rem;

    }

    .piaa-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .piaa-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .piaa-glow{

        width:210px;

        height:210px;

    }

    .piaa-visual img{

        max-width:320px;

    }

    .piaa-visual-label{

        left:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .piaa-content h3{

        font-size:1.8rem;

    }

    .piaa-area-grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .piaa-area-card{

        padding:17px 15px;

        border-radius:19px;

    }

    .piaa-area-number{

        width:33px;

        height:33px;

        margin-bottom:11px;

    }

    .piaa-area-card h4{

        font-size:1.2rem;

    }

    .piaa-area-card p{

        font-size:1.03rem;

        line-height:1.75;

    }

    .piaa-area-wide{

        grid-column:auto;

        display:block;

    }

    .piaa-area-wide .piaa-area-number{

        margin-bottom:11px;

    }

    .piaa-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .piaa-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 8 — WHAT HELPS PIE?
==========================================*/

.pie-help{

    padding:100px 6%;

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

}

.pihp-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pihp-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pihp-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pihp-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pihp-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pihp-main{

    display:grid;

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

    align-items:center;

    gap:65px;

}


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

.pihp-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:530px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pihp-glow{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(10px);

    opacity:.7;

}

.pihp-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pihp-visual img:hover{

    transform:translateY(-7px);

}


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

.pihp-visual-label{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 15px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

    backdrop-filter:blur(7px);

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

    font-size:.76rem;

    color:#987687;

}

.pihp-dot{

    width:9px;

    height:9px;

    flex-shrink:0;

    border-radius:50%;

    background:#d77b96;

    box-shadow:0 0 0 4px #fff0f4;

}


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

.pihp-content{

    max-width:620px;

}

.pihp-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pihp-content > h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


/*==========================================
            INGREDIENT / CARE ITEMS
==========================================*/

.pihp-content{

    display:flex;

    flex-direction:column;

}

.pihp-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 17px;

    margin-bottom:11px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:20px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pihp-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.pihp-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.67rem;

    letter-spacing:.04em;

    color:#c96d9d;

}


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

.pihp-featured{

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

    border-color:#efd4e1;

}

.pihp-item-title{

    display:flex;

    align-items:center;

    gap:8px;

}

.pihp-item-title h4{

    margin:0;

}

.pihp-star{

    font-size:.85rem;

}


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

.pihp-item h4{

    margin:0 0 7px;

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

    font-size:1.3rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pihp-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.pihp-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pihp-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pihp-note p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .pihp-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pihp-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .pihp-visual img{

        max-width:420px;

    }

    .pihp-content{

        max-width:720px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-help{

        padding:75px 6%;

    }

    .pihp-head{

        margin-bottom:50px;

    }

    .pihp-title{

        font-size:2.5rem;

    }

    .pihp-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pihp-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pihp-glow{

        width:210px;

        height:210px;

    }

    .pihp-visual img{

        max-width:320px;

    }

    .pihp-visual-label{

        left:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .pihp-content > h3{

        font-size:1.8rem;

    }

    .pihp-item{

        gap:12px;

        padding:16px 14px;

        border-radius:19px;

    }

    .pihp-number{

        width:34px;

        height:34px;

    }

    .pihp-item h4{

        font-size:1.2rem;

    }

    .pihp-item p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pihp-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pihp-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 9 — WHAT SHOULD YOU AVOID?
==========================================*/

.pie-avoid{

    padding:100px 6%;

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

}

.pav-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pav-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pav-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pav-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pav-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pav-main{

    display:grid;

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

    align-items:center;

    gap:65px;

}


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

.pav-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:500px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pav-glow{

    position:absolute;

    width:310px;

    height:310px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(10px);

    opacity:.7;

}

.pav-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:470px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pav-visual img:hover{

    transform:translateY(-7px);

}


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

.pav-visual-label{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 15px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

    backdrop-filter:blur(7px);

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

    font-size:.76rem;

    color:#987687;

}

.pav-dot{

    width:9px;

    height:9px;

    flex-shrink:0;

    border-radius:50%;

    background:#d77b96;

    box-shadow:0 0 0 4px #fff0f4;

}


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

.pav-content{

    max-width:620px;

}

.pav-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pav-content h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


/*==========================================
            AVOID ITEMS
==========================================*/

.pav-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:11px;

    padding:14px 16px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:18px;

    box-shadow:0 6px 20px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pav-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.pav-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pav-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.7;

    color:var(--clr-text);

}


/*==========================================
            WHY BOX
==========================================*/

.pav-why{

    display:flex;

    align-items:center;

    gap:16px;

    max-width:900px;

    margin:45px auto 0;

    padding:25px 28px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.pav-why-icon{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#fff0f4;

    border:1px solid #f1cfdc;

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

    font-size:1rem;

    color:#cf7594;

}

.pav-why span{

    display:block;

    margin-bottom:5px;

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

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pav-why 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){

    .pav-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pav-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .pav-visual img{

        max-width:420px;

    }

    .pav-content{

        max-width:720px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-avoid{

        padding:75px 6%;

    }

    .pav-head{

        margin-bottom:50px;

    }

    .pav-title{

        font-size:2.5rem;

    }

    .pav-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pav-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pav-glow{

        width:210px;

        height:210px;

    }

    .pav-visual img{

        max-width:320px;

    }

    .pav-visual-label{

        left:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .pav-content h3{

        font-size:1.8rem;

    }

    .pav-item{

        gap:12px;

        padding:12px 13px;

        margin-bottom:9px;

    }

    .pav-number{

        width:33px;

        height:33px;

    }

    .pav-item p{

        font-size:1.03rem;

        line-height:1.7;

    }

    .pav-why{

        align-items:flex-start;

        margin-top:30px;

        padding:20px 18px;

        border-radius:21px;

    }

    .pav-why p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

/*==========================================
        SECTION 10 — PIE VS ACTIVE ACNE
==========================================*/

.pie-active-acne{

    padding:100px 6%;

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

}

.paa-wrap{

    max-width:1200px;

    margin:auto;

}


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

.paa-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.paa-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.paa-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.paa-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.paa-comparison{

    display:grid;

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

    align-items:center;

    gap:20px;

}


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

.paa-card{

    padding:30px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.paa-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

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

}


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

.paa-acne{

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

}

.paa-pie{

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

}


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

.paa-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:24px;

}

.paa-card-label{

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

    font-size:1.05rem;

    font-weight:400;

    color:var(--clr-heading);

}

.paa-status{

    padding:6px 10px;

    border-radius:999px;

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

    font-size:.68rem;

    letter-spacing:.03em;

}

.paa-status-active{

    background:#fff0f1;

    border:1px solid #f2d2d7;

    color:#c47783;

}

.paa-status-healed{

    background:#fff1f6;

    border:1px solid #f1d6e4;

    color:#c27598;

}


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

.paa-card-visual{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:145px;

    margin-bottom:25px;

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

    border:1px solid #f0e1e7;

    border-radius:22px;

}

.paa-acne-symbol,
.paa-pie-symbol{

    display:flex;

    align-items:center;

    justify-content:center;

    width:74px;

    height:74px;

    border-radius:50%;

    font-size:0;

}

.paa-acne-symbol{

    background:#f1a1ad;

    border:9px solid #fff0f2;

    box-shadow:

        0 0 0 1px #efcbd2,

        0 10px 25px rgba(194,112,126,.15);

}

.paa-pie-symbol{

    width:85px;

    height:55px;

    border-radius:50%;

    background:#dc829a;

    border:7px solid #fff0f4;

    box-shadow:

        0 0 0 1px #efcbdc,

        0 10px 25px rgba(194,112,144,.13);

}


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

.paa-card h3{

    margin:0 0 22px;

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

    font-size:1.6rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.paa-list{

    display:flex;

    flex-direction:column;

    gap:9px;

}

.paa-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 13px;

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

    border:1px solid #eee0e7;

    border-radius:15px;

}

.paa-item span{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:29px;

    height:29px;

    border-radius:50%;

    background:#fff3f8;

    border:1px solid #f1d6e4;

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

    font-size:.61rem;

    color:#c96d9d;

}

.paa-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.65;

    color:var(--clr-text);

}


/*==========================================
            CENTER VS
==========================================*/

.paa-middle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.paa-vs{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #efd7e4;

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

    font-size:1rem;

    color:#c96d9d;

    box-shadow:0 7px 20px rgba(0,0,0,.04);

}


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

.paa-tip{

    max-width:900px;

    margin:45px auto 0;

    padding:27px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.paa-tip span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.paa-tip p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:850px){

    .paa-comparison{

        grid-template-columns:1fr;

        gap:15px;

    }

    .paa-middle{

        height:48px;

    }

}


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

@media(max-width:600px){

    .pie-active-acne{

        padding:75px 6%;

    }

    .paa-head{

        margin-bottom:50px;

    }

    .paa-title{

        font-size:2.5rem;

    }

    .paa-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .paa-card{

        padding:24px 20px;

        border-radius:22px;

    }

    .paa-card-visual{

        height:125px;

    }

    .paa-card h3{

        font-size:1.45rem;

    }

    .paa-item{

        padding:10px 11px;

    }

    .paa-item p{

        font-size:1.03rem;

        line-height:1.7;

    }

    .paa-vs{

        width:48px;

        height:48px;

        font-size:.9rem;

    }

    .paa-tip{

        margin-top:30px;

        padding:22px 19px;

    }

    .paa-tip p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 12 — PREVENTION TIPS
==========================================*/

.pie-prevention{

    padding:100px 6%;

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

}

.ppv-wrap{

    max-width:1200px;

    margin:auto;

}


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

.ppv-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.ppv-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4f8;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.ppv-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.ppv-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.ppv-main{

    display:grid;

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

    align-items:center;

    gap:65px;

}


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

.ppv-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:540px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.ppv-glow{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(10px);

    opacity:.7;

}

.ppv-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.ppv-visual img:hover{

    transform:translateY(-7px);

}


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

.ppv-visual-label{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 15px;

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

    border:1px solid #f0dce6;

    border-radius:999px;

    box-shadow:0 9px 24px rgba(120,80,105,.07);

    backdrop-filter:blur(7px);

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

    font-size:.76rem;

    color:#987687;

}

.ppv-dot{

    width:9px;

    height:9px;

    flex-shrink:0;

    border-radius:50%;

    background:#d77b96;

    box-shadow:0 0 0 4px #fff0f4;

}


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

.ppv-content{

    max-width:620px;

}

.ppv-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.ppv-content h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:300;

    line-height:1.4;

    color:var(--clr-heading);

}


/*==========================================
            PREVENTION ITEMS
==========================================*/

.ppv-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:10px;

    padding:14px 16px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:18px;

    box-shadow:0 6px 20px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.ppv-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.ppv-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.ppv-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.7;

    color:var(--clr-text);

}


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

.ppv-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.ppv-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.ppv-note p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:900px){

    .ppv-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .ppv-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .ppv-visual img{

        max-width:420px;

    }

    .ppv-content{

        max-width:720px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-prevention{

        padding:75px 6%;

    }

    .ppv-head{

        margin-bottom:50px;

    }

    .ppv-title{

        font-size:2.5rem;

    }

    .ppv-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ppv-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .ppv-glow{

        width:210px;

        height:210px;

    }

    .ppv-visual img{

        max-width:320px;

    }

    .ppv-visual-label{

        left:14px;

        bottom:14px;

        padding:8px 11px;

        font-size:.68rem;

    }

    .ppv-content h3{

        font-size:1.8rem;

    }

    .ppv-item{

        gap:12px;

        padding:12px 13px;

        margin-bottom:9px;

    }

    .ppv-number{

        width:33px;

        height:33px;

    }

    .ppv-item p{

        font-size:1.03rem;

        line-height:1.7;

    }

    .ppv-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .ppv-note p{

        font-size:1.03rem;

    }

}

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

.pie-myths{

    padding:100px 6%;

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

}

.pmf-wrap{

    max-width:1050px;

    margin:auto;

}


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

.pmf-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pmf-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pmf-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:300;

    line-height:1.25;

    color:var(--clr-heading);

}

.pmf-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pmf-card{

    margin-bottom:18px;

    padding:25px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

    box-shadow:0 7px 25px rgba(0,0,0,.035);

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pmf-card:hover{

    transform:translateY(-3px);

    border-color:#efc5db;

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

}


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

.pmf-card-top{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

}

.pmf-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff2f7;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pmf-topic{

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

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}


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

.pmf-grid{

    display:grid;

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

    align-items:center;

    gap:30px;

}

.pmf-myth{

    padding:21px;

    background:#fff8f9;

    border:1px solid #f3e1e4;

    border-radius:19px;

}

.pmf-fact{

    padding:21px;

    background:#fff9fc;

    border:1px solid #f0e0e8;

    border-radius:19px;

}

.pmf-label{

    display:block;

    margin-bottom:10px;

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

    font-size:1rem;

    font-weight:500;

    letter-spacing:.04em;

}

.pmf-myth .pmf-label{

    color:#c47783;

}

.pmf-fact .pmf-label{

    color:#b77d9b;

}


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

.pmf-myth h3{

    margin:0;

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

    font-size:1.35rem;

    font-weight:300;

    line-height:1.55;

    color:var(--clr-heading);

}


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

.pmf-fact p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            DIVIDER
==========================================*/

.pmf-divider{

    width:1px;

    height:80%;

    min-height:80px;

    background:#ead7e1;

}


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

.pmf-note{

    display:flex;

    align-items:center;

    gap:16px;

    max-width:900px;

    margin:45px auto 0;

    padding:25px 28px;

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

    border:1px solid #f1d6e5;

    border-radius:24px;

}

.pmf-note-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff0f5;

    border:1px solid #efd1df;

    font-size:1rem;

    color:#c96d9d;

}

.pmf-note span{

    display:block;

    margin-bottom:5px;

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

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pmf-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:750px){

    .pmf-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .pmf-divider{

        display:none;

    }

}


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

@media(max-width:600px){

    .pie-myths{

        padding:75px 6%;

    }

    .pmf-head{

        margin-bottom:50px;

    }

    .pmf-title{

        font-size:2.5rem;

    }

    .pmf-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pmf-card{

        padding:20px 16px;

        margin-bottom:13px;

        border-radius:21px;

    }

    .pmf-card-top{

        margin-bottom:17px;

    }

    .pmf-myth,
    .pmf-fact{

        padding:17px;

        border-radius:17px;

    }

    .pmf-myth h3{

        font-size:1.22rem;

        line-height:1.5;

    }

    .pmf-fact p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pmf-note{

        align-items:flex-start;

        margin-top:30px;

        padding:20px 18px;

        border-radius:21px;

    }

    .pmf-note p{

        font-size:1.03rem;

        line-height:1.75;

    }

}


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

.pie-mimii-tip{

    padding:100px 6%;

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

}

.pmt-wrap{

    max-width:1150px;

    margin:auto;

    display:grid;

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

    align-items:center;

    gap:70px;

}


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

.pmt-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:500px;

    padding:25px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:34px;

    overflow:hidden;

}

.pmt-glow{

    position:absolute;

    width:330px;

    height:330px;

    border-radius:50%;

    background:#fde4ec;

    filter:blur(12px);

    opacity:.72;

}

.pmt-visual img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pmt-visual img:hover{

    transform:translateY(-7px);

}


/*==========================================
            SPARKLES
==========================================*/

.pmt-sparkle{

    position:absolute;

    z-index:3;

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

    color:#d9a6bc;

    pointer-events:none;

}

.pmt-sparkle-one{

    top:70px;

    right:75px;

    font-size:1.4rem;

}

.pmt-sparkle-two{

    bottom:80px;

    left:65px;

    font-size:1rem;

}


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

.pmt-content{

    max-width:610px;

}

.pmt-eyebrow{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 16px;

    border-radius:999px;

    background:#fff1f6;

    border:1px solid #f1d6e4;

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

    font-size:.78rem;

    letter-spacing:.05em;

    color:#c96d9d;

}

.pmt-title{

    margin:0 0 25px;

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

    font-size:2.7rem;

    font-weight:300;

    line-height:1.3;

    color:var(--clr-heading);

}

.pmt-text{

    margin:0 0 17px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            KEY TAKEAWAYS
==========================================*/

.pmt-takeaways{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:28px;

}

.pmt-takeaway{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 13px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:16px;

    box-shadow:0 6px 18px rgba(0,0,0,.025);

    transition:

        transform .3s ease,

        border-color .3s ease;

}

.pmt-takeaway:hover{

    transform:translateY(-3px);

    border-color:#efc5db;

}

.pmt-check{

    display:flex;

    align-items:center;

    justify-content:center;

    width:25px;

    height:25px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff1f6;

    border:1px solid #efd4e1;

    font-size:.7rem;

    color:#c96d9d;

}

.pmt-takeaway p{

    margin:0;

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

    font-size:1.03rem;

    line-height:1.55;

    color:var(--clr-text);

}


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

.pmt-final{

    margin-top:28px;

    padding:22px 24px;

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

    border:1px solid #f1d6e5;

    border-radius:22px;

}

.pmt-final span{

    display:block;

    margin-bottom:7px;

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

    font-size:1.15rem;

    font-weight:400;

    color:var(--clr-heading);

}

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

    .pmt-wrap{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pmt-visual{

        max-width:600px;

        width:100%;

        min-height:420px;

        margin:auto;

    }

    .pmt-visual img{

        max-width:420px;

    }

    .pmt-content{

        max-width:720px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pie-mimii-tip{

        padding:75px 6%;

    }

    .pmt-wrap{

        gap:38px;

    }

    .pmt-visual{

        min-height:310px;

        padding:14px;

        border-radius:25px;

    }

    .pmt-glow{

        width:210px;

        height:210px;

    }

    .pmt-visual img{

        max-width:320px;

    }

    .pmt-sparkle-one{

        top:45px;

        right:40px;

        font-size:1.1rem;

    }

    .pmt-sparkle-two{

        bottom:50px;

        left:35px;

        font-size:.85rem;

    }

    .pmt-title{

        font-size:2.3rem;

    }

    .pmt-text{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pmt-takeaways{

        grid-template-columns:1fr;

        gap:9px;

        margin-top:24px;

    }

    .pmt-takeaway{

        padding:11px 12px;

    }

    .pmt-takeaway p{

        font-size:1.03rem;

    }

    .pmt-final{

        margin-top:24px;

        padding:19px 17px;

    }

    .pmt-final span{

        font-size:1.08rem;

    }

    .pmt-final p{

        font-size:1.03rem;

        line-height:1.75;

    }

}

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

.mk-note-panel{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    max-width:1250px;

    margin:70px auto;

    padding:0 42px;

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

    border:1px solid #f4dde7;

    border-radius:28px;

    overflow:hidden;

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

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.mk-note-panel:hover{

    transform:translateY(-5px);

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

}


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

.mk-note-avatar{

    width:100%;

    max-width:280px;

    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;

    }

}