/*==========================================
        PIH — HERO SECTION
==========================================*/

.pih-hero{

    position:relative;

    padding:90px 5% 30px;

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

    overflow:hidden;

}

.ph-wrap{

    max-width:1300px;

    margin:auto;

    min-height:620px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.ph-content{

    max-width:640px;

}

.ph-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:22px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #f2d8e6;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.ph-title{

    margin:0 0 27px;

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

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

    font-weight:500;

    line-height:1.08;

    color:var(--clr-heading);

}

.ph-description{

    max-width:620px;

    margin:0 0 17px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}

.ph-actions{

    display:flex;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;

    margin-top:34px;

}

.ph-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 27px;

    border-radius:999px;

    background:var(--clr-primary);

    color:#ffffff;

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

    font-size:.94rem;

    text-decoration:none;

    transition:.3s ease;

}

.ph-button:hover{

    transform:translateY(-3px);

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

}

.ph-note{

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

    font-size:.88rem;

    color:#9c8490;

}


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

.ph-visual{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ph-visual::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:#fde8f2;

    opacity:.55;

}

.ph-image-wrap{

    position:relative;

    z-index:1;

    width:100%;

    max-width:600px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ph-image{

    display:block;

    width:105%;

    max-width:700px;

    height:auto;

    object-fit:contain;

    transition:transform .45s ease;

}

.ph-image:hover{

    transform:translateY(-8px);

}


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

@media(max-width:1050px){

    .ph-wrap{

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

        gap:45px;

    }

    .ph-title{

        font-size:4rem;

    }

    .ph-description{

        font-size:1.03rem;

    }

    .ph-visual::before{

        width:370px;

        height:370px;

    }

}


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

@media(max-width:800px){

    .pih-hero{

        padding:80px 6% 75px;

    }

    .ph-wrap{

        grid-template-columns:1fr;

        gap:45px;

        min-height:auto;

        text-align:center;

    }

    .ph-content{

        max-width:720px;

        margin:auto;

    }

    .ph-description{

        margin-left:auto;

        margin-right:auto;

    }

    .ph-actions{

        justify-content:center;

    }

    .ph-visual{

        min-height:420px;

        order:-1;

    }

    .ph-image-wrap{

        max-width:450px;

    }

}


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

@media(max-width:520px){

    .pih-hero{

        padding:65px 6% 60px;

    }

    .ph-pill{

        font-size:.83rem;

        margin-bottom:18px;

    }

    .ph-title{

        font-size:3.15rem;

        margin-bottom:22px;

    }

    .ph-description{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ph-actions{

        flex-direction:column;

        gap:14px;

        margin-top:28px;

    }

    .ph-button{

        width:100%;

        max-width:270px;

    }

    .ph-note{

        font-size:.82rem;

    }

    .ph-visual{

        min-height:330px;

    }

    .ph-visual::before{

        width:280px;

        height:280px;

    }

    .ph-image-wrap{

        max-width:330px;

    }

}

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

.pih-intro{

    padding:100px 6%;

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

}

.pi-wrap{

    max-width:1250px;

    margin:auto;

}


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

.pi-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pi-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pi-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pi-sub{

    max-width:760px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pi-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


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

.pi-content{

    max-width:580px;

}

.pi-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pi-content h3{

    margin:0 0 22px;

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

    font-size:2.1rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pi-content p{

    margin:0 0 18px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}

.pi-content p:last-child{

    margin-bottom:0;

}


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

.pi-visual{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:470px;

    padding:20px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pi-visual img{

    display:block;

    width:100%;

    max-width:500px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pi-visual img:hover{

    transform:translateY(-7px);

}


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

.pi-highlight{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pi-highlight-content{

    max-width:760px;

    margin:auto;

}

.pi-highlight span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pi-highlight h3{

    margin:0 0 11px;

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

    font-size:1.65rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pi-highlight 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){

    .pi-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pi-content{

        max-width:700px;

        margin:auto;

        text-align:center;

    }

    .pi-visual{

        max-width:600px;

        width:100%;

        min-height:410px;

        margin:auto;

    }

    .pi-visual img{

        max-width:420px;

    }

}


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

@media(max-width:600px){

    .pih-intro{

        padding:75px 6%;

    }

    .pi-head{

        margin-bottom:50px;

    }

    .pi-title{

        font-size:2.5rem;

    }

    .pi-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pi-content h3{

        font-size:1.8rem;

    }

    .pi-content p{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pi-visual{

        min-height:310px;

        padding:12px;

        border-radius:25px;

    }

    .pi-visual img{

        max-width:320px;

    }

    .pi-highlight{

        margin-top:30px;

        padding:23px 19px;

    }

    .pi-highlight h3{

        font-size:1.45rem;

    }

    .pi-highlight p{

        font-size:1.03rem;

    }

}



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

.pih-formation{

    padding:100px 6%;

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

}

.pf-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pf-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pf-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;

}

.pf-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pf-sub{

    max-width:770px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pf-process{

    position:relative;

    max-width:950px;

    margin:auto;

}

.pf-process::before{

    content:"";

    position:absolute;

    left:30px;

    top:30px;

    bottom:30px;

    width:1px;

    background:#efd8e4;

}


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

.pf-step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:28px;

    margin-bottom:18px;

    padding:25px 28px 25px 0;

}

.pf-step:last-child{

    margin-bottom:0;

}


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

.pf-number{

    position:relative;

    z-index:2;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:61px;

    height:61px;

    border-radius:50%;

    background:#fff4fa;

    border:1px solid #efd5e3;

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

    font-size:.75rem;

    letter-spacing:.05em;

    color:#c96d9d;

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

}


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

.pf-step-content{

    flex:1;

    padding:22px 27px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:23px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pf-step-content:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.pf-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);

}

.pf-step-content p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


/*==========================================
            EXAMPLES
==========================================*/

.pf-examples{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:17px;

}

.pf-examples span{

    display:inline-flex;

    padding:7px 12px;

    border-radius:999px;

    background:#fff7fb;

    border:1px solid #f0dfe8;

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

    font-size:.78rem;

    color:#927885;

}


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

.pf-summary{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pf-summary span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pf-summary 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){

    .pf-process::before{

        left:25px;

    }

    .pf-step{

        gap:20px;

        padding-right:0;

    }

    .pf-number{

        width:51px;

        height:51px;

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

    }

}


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

@media(max-width:600px){

    .pih-formation{

        padding:75px 6%;

    }

    .pf-head{

        margin-bottom:50px;

    }

    .pf-title{

        font-size:2.5rem;

    }

    .pf-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pf-process::before{

        display:none;

    }

    .pf-step{

        gap:14px;

        padding:0;

        margin-bottom:13px;

    }

    .pf-number{

        width:42px;

        height:42px;

        box-shadow:none;

        font-size:.66rem;

    }

    .pf-step-content{

        padding:20px 18px;

        border-radius:20px;

    }

    .pf-step-content h3{

        font-size:1.3rem;

    }

    .pf-step-content p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pf-examples{

        gap:6px;

    }

    .pf-examples span{

        font-size:.75rem;

        padding:6px 10px;

    }

    .pf-summary{

        margin-top:30px;

        padding:22px 19px;

    }

    .pf-summary p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 3 — WHAT DOES PIH LOOK LIKE?
==========================================*/

.pih-appearance{

    padding:100px 6%;

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

}

.pa-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pa-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pa-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pa-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pa-sub{

    max-width:760px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pa-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.pa-visual{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:470px;

    padding:20px;

    background:#fffafd;

    border:1px solid #f1e0e8;

    border-radius:32px;

    overflow:hidden;

}

.pa-visual img{

    display:block;

    width:100%;

    max-width:400px;

    height:auto;

    object-fit:contain;

    transition:transform .4s ease;

}

.pa-visual img:hover{

    transform:translateY(-7px);

}


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

.pa-content{

    max-width:570px;

}

.pa-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pa-content h3{

    margin:0 0 27px;

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

    font-size:2.05rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.pa-list{

    display:flex;

    flex-direction:column;

    gap:11px;

}

.pa-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:15px 18px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:18px;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pa-item:hover{

    transform:translateX(5px);

    border-color:#efc5db;

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

}

.pa-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:35px;

    height:35px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.67rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pa-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.65;

    color:var(--clr-text);

}


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

.pa-tip{

    max-width:900px;

    margin:45px auto 0;

    padding:27px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pa-tip span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

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

    .pa-main{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pa-visual{

        max-width:600px;

        width:100%;

        min-height:410px;

        margin:auto;

    }

    .pa-visual img{

        max-width:420px;

    }

    .pa-content{

        max-width:700px;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pih-appearance{

        padding:75px 6%;

    }

    .pa-head{

        margin-bottom:50px;

    }

    .pa-title{

        font-size:2.5rem;

    }

    .pa-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pa-visual{

        min-height:310px;

        padding:12px;

        border-radius:25px;

    }

    .pa-visual img{

        max-width:320px;

    }

    .pa-content h3{

        font-size:1.8rem;

    }

    .pa-item{

        padding:14px 15px;

        gap:13px;

    }

    .pa-number{

        width:33px;

        height:33px;

    }

    .pa-item p{

        font-size:1.03rem;

    }

    .pa-tip{

        margin-top:30px;

        padding:22px 19px;

    }

    .pa-tip p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 4 — WHAT CAUSES PIH?
==========================================*/

.pih-causes{

    padding:100px 6%;

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

}

.pc-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pc-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pc-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;

}

.pc-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pc-sub{

    max-width:770px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pc-grid{

    display:grid;

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

    gap:18px;

}


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

.pc-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:22px;

    min-height:205px;

    padding:30px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:26px;

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

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pc-card:last-child{

    grid-column:1 / -1;

    max-width:580px;

    width:100%;

    margin:auto;

}

.pc-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#f1c9dd;

    opacity:.8;

}

.pc-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

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

}


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

.pc-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:43px;

    height:43px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.7rem;

    letter-spacing:.05em;

    color:#c96d9d;

}


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

.pc-card-content{

    flex:1;

}

.pc-card-content h3{

    margin:0 0 12px;

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

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pc-card-content p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pc-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pc-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

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

    .pc-grid{

        grid-template-columns:1fr;

    }

    .pc-card:last-child{

        grid-column:auto;

        max-width:none;

    }

}


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

@media(max-width:600px){

    .pih-causes{

        padding:75px 6%;

    }

    .pc-head{

        margin-bottom:50px;

    }

    .pc-title{

        font-size:2.5rem;

    }

    .pc-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pc-grid{

        gap:13px;

    }

    .pc-card{

        min-height:auto;

        padding:25px 21px;

        gap:14px;

        border-radius:22px;

    }

    .pc-number{

        width:35px;

        height:35px;

    }

    .pc-card-content h3{

        font-size:1.3rem;

    }

    .pc-card-content p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pc-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pc-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 5 — WHAT CAN MAKE PIH WORSE?
==========================================*/

.pih-triggers{

    padding:100px 6%;

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

}

.pt-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pt-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pt-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pt-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pt-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pt-grid{

    display:grid;

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

    gap:18px;

}


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

.pt-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:22px;

    min-height:205px;

    padding:30px 28px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:26px;

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

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pt-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

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

}

.pt-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#f1c9dd;

    opacity:.8;

}


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

.pt-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:43px;

    height:43px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.7rem;

    letter-spacing:.05em;

    color:#c96d9d;

}


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

.pt-content{

    flex:1;

}
.pt-content img{

    display:block;

    width:100%;

    max-width:100px;

    height:auto;

    object-fit:contain;

    margin-bottom:15px;

}
.pt-content h3{

    margin:0 0 12px;

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

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pt-content p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pt-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pt-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

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

    .pt-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:600px){

    .pih-triggers{

        padding:75px 6%;

    }

    .pt-head{

        margin-bottom:50px;

    }

    .pt-title{

        font-size:2.5rem;

    }

    .pt-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pt-grid{

        gap:13px;

    }

    .pt-card{

        min-height:auto;

        padding:25px 21px;

        gap:14px;

        border-radius:22px;

    }

    .pt-number{

        width:35px;

        height:35px;

    }

    .pt-content h3{

        font-size:1.3rem;

    }

    .pt-content p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pt-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pt-note p{

        font-size:1.03rem;

    }

}



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

.pih-comparison{

    padding:100px 6%;

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

}

.pp-wrap{

    max-width:1150px;

    margin:auto;

}


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

.pp-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.pp-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;

}

.pp-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pp-sub{

    max-width:770px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pp-intro{

    display:grid;

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

    align-items:stretch;

    gap:20px;

    margin-bottom:35px;

}

.pp-intro-card{

    padding:32px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:26px;

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

}

.pp-intro-card:first-child{

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

}

.pp-intro-card:last-child{

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

}

.pp-intro-card span{

    display:block;

    margin-bottom:10px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pp-intro-card h3{

    margin:0 0 13px;

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

    font-size:1.55rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.pp-intro-card p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pp-vs{

    display:flex;

    align-items:center;

    justify-content:center;

    align-self:center;

    width:58px;

    height:58px;

    margin:auto;

    border-radius:50%;

    background:#fff4fa;

    border:1px solid #f1d6e4;

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

    font-size:1rem;

    color:#c96d9d;

}


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

.pp-table-wrap{

    overflow-x:auto;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

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

}

.pp-table{

    min-width:720px;

}

.pp-row{

    display:grid;

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

    border-bottom:1px solid #f0e3e9;

}

.pp-row:last-child{

    border-bottom:none;

}

.pp-header{

    background:#fff4fa;

}


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

.pp-feature{

    display:flex;

    align-items:center;

    padding:22px 25px;

    background:#fffafd;

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

    font-size:.82rem;

    font-weight:600;

    color:#947c88;

}

.pp-column{

    display:flex;

    align-items:center;

    padding:22px 25px;

    border-left:1px solid #f0e3e9;

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

    font-size:1.04rem;

    line-height:1.75;

    color:var(--clr-text);

}

.pp-header .pp-column{

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

    font-size:1.3rem;

    font-weight:400;

    color:var(--clr-heading);

}


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

.pp-reminder{

    max-width:800px;

    margin:40px auto 0;

    padding:27px 30px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pp-reminder span{

    display:block;

    margin-bottom:8px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pp-reminder h3{

    margin:0 0 7px;

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

    font-size:1.6rem;

    font-weight:500;

    color:var(--clr-heading);

}

.pp-reminder p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

@media(max-width:800px){

    .pp-intro{

        grid-template-columns:1fr;

        gap:14px;

    }

    .pp-vs{

        width:48px;

        height:48px;

        font-size:.9rem;

    }

}


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

@media(max-width:600px){

    .pih-comparison{

        padding:75px 6%;

    }

    .pp-head{

        margin-bottom:50px;

    }

    .pp-title{

        font-size:2.5rem;

    }

    .pp-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pp-intro-card{

        padding:25px 22px;

        border-radius:22px;

    }

    .pp-intro-card h3{

        font-size:1.4rem;

    }

    .pp-intro-card p{

        font-size:1.03rem;

    }

    .pp-table{

        min-width:700px;

    }

    .pp-feature{

        padding:18px 19px;

    }

    .pp-column{

        padding:18px 19px;

        font-size:1.03rem;

        line-height:1.7;

    }

    .pp-header .pp-column{

        font-size:1.15rem;

    }

    .pp-reminder{

        margin-top:30px;

        padding:22px 19px;

    }

    .pp-reminder h3{

        font-size:1.45rem;

    }

    .pp-reminder p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 7 — PIH VS ACTIVE ACNE
==========================================*/

.pih-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 65px;

    text-align:center;

}

.paa-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    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:500;

    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;

}


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

.paa-card{

    padding:34px 32px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:28px;

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

}

.paa-acne{

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

}

.paa-pih{

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

}

.paa-label{

    display:block;

    margin-bottom:11px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.paa-card h3{

    margin:0 0 14px;

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

    font-size:1.8rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.paa-card > p{

    margin:0 0 25px;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.paa-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.paa-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 15px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:16px;

}

.paa-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:33px;

    height:33px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    color:#c96d9d;

}

.paa-item p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.6;

    color:var(--clr-text);

}


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

.paa-vs{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin:auto;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #efd7e4;

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

    font-size:1rem;

    color:#c96d9d;

}


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

.paa-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.paa-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.paa-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:850px){

    .paa-comparison{

        grid-template-columns:1fr;

        gap:15px;

    }

    .paa-vs{

        width:48px;

        height:48px;

    }

}


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

@media(max-width:600px){

    .pih-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:25px 21px;

        border-radius:23px;

    }

    .paa-card h3{

        font-size:1.5rem;

    }

    .paa-card > p{

        font-size:1.03rem;

    }

    .paa-item{

        padding:12px 13px;

    }

    .paa-number{

        width:32px;

        height:32px;

    }

    .paa-item p{

        font-size:1.03rem;

    }

    .paa-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .paa-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 8 — HOW LONG DOES PIH TAKE TO FADE?
==========================================*/

.pih-fading{

    padding:100px 6%;

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

}

.pfd-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pfd-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pfd-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;

}

.pfd-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pfd-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
==========================================*/

.pfd-main{

    display:grid;

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

    gap:70px;

    align-items:center;

}


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

.pfd-content{

    max-width:600px;

}

.pfd-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pfd-content h3{

    margin:0 0 28px;

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

    font-size:2.05rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}


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

.pfd-factors{

    display:grid;

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

    gap:12px;

}

.pfd-factor{

    display:flex;

    align-items:center;

    gap:13px;

    min-height:66px;

    padding:14px 16px;

    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;

}

.pfd-factor:hover{

    transform:translateY(-3px);

    border-color:#efc5db;

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

}

.pfd-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.66rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pfd-factor p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.6;

    color:var(--clr-text);

}


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

.pfd-timeline{

    position:relative;

    padding:15px 0 15px 45px;

}

.pfd-timeline-line{

    position:absolute;

    left:12px;

    top:30px;

    bottom:30px;

    width:1px;

    background:#efd8e4;

}

.pfd-stage{

    position:relative;

    display:flex;

    gap:20px;

    margin-bottom:34px;

}

.pfd-stage:last-child{

    margin-bottom:0;

}

.pfd-stage-dot{

    position:absolute;

    left:-39px;

    top:5px;

    width:17px;

    height:17px;

    border-radius:50%;

    background:#ffffff;

    border:4px solid #e8b8d0;

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

}

.pfd-stage-label{

    display:block;

    margin-bottom:9px;

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

    font-size:1.35rem;

    font-weight:400;

    color:var(--clr-heading);

}

.pfd-stage p{

    max-width:430px;

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pfd-note{

    max-width:900px;

    margin:50px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pfd-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

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

    .pfd-main{

        grid-template-columns:1fr;

        gap:55px;

    }

    .pfd-content{

        max-width:750px;

        margin:auto;

    }

    .pfd-timeline{

        max-width:700px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pih-fading{

        padding:75px 6%;

    }

    .pfd-head{

        margin-bottom:50px;

    }

    .pfd-title{

        font-size:2.5rem;

    }

    .pfd-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pfd-content h3{

        font-size:1.8rem;

    }

    .pfd-factors{

        grid-template-columns:1fr;

    }

    .pfd-factor{

        min-height:auto;

        padding:14px;

    }

    .pfd-factor p{

        font-size:1.03rem;

    }

    .pfd-timeline{

        padding-left:38px;

    }

    .pfd-timeline-line{

        left:8px;

    }

    .pfd-stage{

        gap:15px;

        margin-bottom:28px;

    }

    .pfd-stage-dot{

        left:-37px;

        width:15px;

        height:15px;

        border-width:3px;

    }

    .pfd-stage-label{

        font-size:1.25rem;

    }

    .pfd-stage p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pfd-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pfd-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 9 — INGREDIENTS THAT HELP
==========================================*/

.pih-ingredients{

    padding:100px 6%;

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

}

.pig-wrap{

    max-width:1200px;

    margin:auto;

}


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

.pig-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.pig-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.pig-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pig-sub{

    max-width:780px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.pig-grid{

    display:grid;

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

    gap:18px;

}


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

.pig-card{

    position:relative;

    min-height:235px;

    padding:28px 27px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

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

    overflow:hidden;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.pig-card:hover{

    transform:translateY(-5px);

    border-color:#efc5db;

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

}


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

.pig-featured{

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

    border-color:#efd3e1;

}


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

.pig-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:25px;

}

.pig-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.67rem;

    letter-spacing:.04em;

    color:#c96d9d;

}

.pig-category{

    padding:6px 11px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #efdce6;

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

    font-size:.72rem;

    letter-spacing:.04em;

    color:#b47f98;

}


/*==========================================
            CARD CONTENT
==========================================*/
.pig-card img{

    display:block;

    width:100%;

    max-width:100px;

    height:auto;

    object-fit:contain;

    margin-bottom:15px;

}
.pig-card h3{

    margin:0 0 13px;

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

    font-size:1.55rem;

    font-weight:500;

    line-height:1.35;

    color:var(--clr-heading);

}

.pig-card p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pig-note{

    max-width:900px;

    margin:45px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:25px;

}

.pig-note span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

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

    .pig-grid{

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

    }

    .pig-featured{

        grid-column:1 / -1;

    }

}


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

@media(max-width:600px){

    .pih-ingredients{

        padding:75px 6%;

    }

    .pig-head{

        margin-bottom:50px;

    }

    .pig-title{

        font-size:2.5rem;

    }

    .pig-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pig-grid{

        grid-template-columns:1fr;

        gap:13px;

    }

    .pig-featured{

        grid-column:auto;

    }

    .pig-card{

        min-height:auto;

        padding:25px 21px;

        border-radius:22px;

    }

    .pig-card-top{

        margin-bottom:20px;

    }

    .pig-card h3{

        font-size:1.35rem;

    }

    .pig-card p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pig-note{

        margin-top:30px;

        padding:22px 19px;

    }

    .pig-note p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 10 — PREVENTION TIPS
==========================================*/

.pih-prevention{

    padding:100px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 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:#ffffff;

    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:500;

    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);

}


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

.ppv-grid{

    display:grid;

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

    gap:16px;

}


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

.ppv-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    min-height:175px;

    padding:28px 27px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:25px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.ppv-card:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

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

}


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

.ppv-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:43px;

    height:43px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.7rem;

    letter-spacing:.05em;

    color:#c96d9d;

}


/*==========================================
            CARD CONTENT
==========================================*/
.ppv-card img{

    display:block;

    width:100%;

    max-width:100px;

    height:auto;

    object-fit:contain;

    margin-bottom:15px;

}
.ppv-card h3{

    margin:0 0 11px;

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

    font-size:1.45rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.ppv-card p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.ppv-reminder{

    max-width:900px;

    margin:45px auto 0;

    padding:30px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:26px;

}

.ppv-reminder span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.ppv-reminder h3{

    margin:0 0 12px;

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

    font-size:1.7rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.ppv-reminder p{

    max-width:750px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:750px){

    .ppv-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:600px){

    .pih-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-grid{

        gap:13px;

    }

    .ppv-card{

        min-height:auto;

        padding:24px 20px;

        gap:14px;

        border-radius:22px;

    }

    .ppv-number{

        width:35px;

        height:35px;

    }

    .ppv-card h3{

        font-size:1.3rem;

    }

    .ppv-card p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .ppv-reminder{

        margin-top:30px;

        padding:22px 19px;

    }

    .ppv-reminder h3{

        font-size:1.45rem;

    }

    .ppv-reminder p{

        font-size:1.03rem;

    }

}

/*==========================================
        SECTION 11 — CAN PIH BE PREVENTED?
==========================================*/

.pih-preventable{

    padding:100px 6%;

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

}

.ppb-wrap{

    max-width:1200px;

    margin:auto;

}


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

.ppb-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.ppb-pill{

    display:inline-block;

    padding:9px 19px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f3d9e7;

    color:#c96d9d;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

.ppb-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.ppb-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
==========================================*/

.ppb-main{

    display:grid;

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

    gap:65px;

    align-items:center;

}


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

.ppb-content{

    max-width:560px;

}

.ppb-small-title{

    display:block;

    margin-bottom:13px;

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.ppb-content h3{

    margin:0 0 22px;

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

    font-size:2.05rem;

    font-weight:500;

    line-height:1.4;

    color:var(--clr-heading);

}

.ppb-content p{

    margin:0 0 18px;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}

.ppb-content p:last-child{

    margin-bottom:0;

}


/*==========================================
            PREVENTION PATH
==========================================*/

.ppb-path{

    padding:30px 32px;

    background:#ffffff;

    border:1px solid #eee0e7;

    border-radius:30px;

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

}

.ppb-step{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.ppb-number{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:43px;

    height:43px;

    border-radius:50%;

    background:#fff3f9;

    border:1px solid #f1d6e4;

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

    font-size:.7rem;

    letter-spacing:.05em;

    color:#c96d9d;

}

.ppb-step h4{

    margin:0 0 7px;

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

    font-size:1.35rem;

    font-weight:400;

    line-height:1.4;

    color:var(--clr-heading);

}

.ppb-step p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.8;

    color:var(--clr-text);

}


/*==========================================
            CONNECTING LINES
==========================================*/

.ppb-line{

    width:1px;

    height:28px;

    margin:7px 0 7px 21px;

    background:#efd8e4;

}


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

.ppb-reminder{

    max-width:1000px;

    margin:50px auto 0;

    padding:30px 35px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:27px;

}

.ppb-reminder span{

    display:block;

    margin-bottom:10px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.ppb-reminder h3{

    max-width:850px;

    margin:0 auto 12px;

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

    font-size:1.5rem;

    font-weight:400;

    line-height:1.6;

    color:var(--clr-heading);

}

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

    .ppb-main{

        grid-template-columns:1fr;

        gap:45px;

    }

    .ppb-content{

        max-width:750px;

        margin:auto;

        text-align:center;

    }

    .ppb-path{

        max-width:700px;

        width:100%;

        margin:auto;

    }

}


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

@media(max-width:600px){

    .pih-preventable{

        padding:75px 6%;

    }

    .ppb-head{

        margin-bottom:50px;

    }

    .ppb-title{

        font-size:2.5rem;

    }

    .ppb-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ppb-content h3{

        font-size:1.8rem;

    }

    .ppb-content p{

        font-size:1.03rem;

        line-height:1.85;

    }

    .ppb-path{

        padding:24px 20px;

        border-radius:23px;

    }

    .ppb-step{

        gap:13px;

    }

    .ppb-number{

        width:35px;

        height:35px;

    }

    .ppb-step h4{

        font-size:1.25rem;

    }

    .ppb-step p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .ppb-line{

        height:23px;

        margin-left:17px;

    }

    .ppb-reminder{

        margin-top:30px;

        padding:22px 19px;

    }

    .ppb-reminder h3{

        font-size:1.35rem;

        line-height:1.55;

    }

    .ppb-reminder p{

        font-size:1.03rem;

    }

}

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

.pih-myths{

    padding:100px 6%;

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

}

.pm-wrap{

    max-width:1150px;

    margin:auto;

}


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

.pm-head{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}

.pm-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;

}

.pm-title{

    margin:0 0 20px;

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

    font-size:3rem;

    font-weight:500;

    line-height:1.25;

    color:var(--clr-heading);

}

.pm-sub{

    max-width:760px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.9;

    color:var(--clr-text);

}


/*==========================================
            MYTH / FACT CARDS
==========================================*/

.pm-card{

    display:grid;

    grid-template-columns:1fr 1.35fr;

    gap:35px;

    align-items:center;

    margin-bottom:15px;

    padding:28px 32px;

    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;

}

.pm-card:hover{

    transform:translateY(-4px);

    border-color:#efc5db;

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

}


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

.pm-myth{

    padding-right:30px;

    border-right:1px solid #f0e1e8;

}

.pm-label{

    display:block;

    margin-bottom:9px;

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

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:#c795b0;

}

.pm-myth h3{

    margin:0;

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

    font-size:1.35rem;

    font-weight:500;

    line-height:1.5;

    color:var(--clr-heading);

}


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

.pm-fact{

    padding-left:0;

}

.pm-fact p{

    margin:0;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

.pm-reminder{

    max-width:900px;

    margin:35px auto 0;

    padding:28px 32px;

    text-align:center;

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

    border:1px solid #f1d6e5;

    border-radius:26px;

}

.pm-reminder span{

    display:block;

    margin-bottom:9px;

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

    font-size:.76rem;

    text-transform:uppercase;

    letter-spacing:.09em;

    color:#c795b0;

}

.pm-reminder p{

    max-width:760px;

    margin:auto;

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

    font-size:1.04rem;

    line-height:1.85;

    color:var(--clr-text);

}


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

@media(max-width:800px){

    .pm-card{

        grid-template-columns:1fr;

        gap:20px;

        padding:26px;

    }

    .pm-myth{

        padding:0 0 18px;

        border-right:none;

        border-bottom:1px solid #f0e1e8;

    }

}


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

@media(max-width:600px){

    .pih-myths{

        padding:75px 6%;

    }

    .pm-head{

        margin-bottom:50px;

    }

    .pm-title{

        font-size:2.5rem;

    }

    .pm-sub{

        font-size:1.03rem;

        line-height:1.85;

    }

    .pm-card{

        gap:17px;

        margin-bottom:12px;

        padding:22px 20px;

        border-radius:21px;

    }

    .pm-myth{

        padding-bottom:15px;

    }

    .pm-myth h3{

        font-size:1.2rem;

    }

    .pm-fact p{

        font-size:1.03rem;

        line-height:1.8;

    }

    .pm-reminder{

        margin-top:28px;

        padding:22px 19px;

    }

    .pm-reminder p{

        font-size:1.03rem;

    }

}

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

.mk-note-panel{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    max-width:1250px;

    margin:70px auto;

    padding:0 42px;

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

    border:1px solid #f4dde7;

    border-radius:28px;

    overflow:hidden;

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

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.mk-note-panel:hover{

    transform:translateY(-5px);

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

}


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

.mk-note-avatar{

    width:100%;

    max-width:330px;

    margin-bottom: 40px;

    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;

    }

}