/* =========================================================
   ASK MIMII — PERSONALIZED ROUTINE
   routine.css
   Works with existing home.css variables
========================================================= */


/* =========================================================
   GLOBAL ROUTINE SETTINGS
========================================================= */

.routine-page{
    background:var(--clr-white);
    color:var(--clr-heading);
    overflow:hidden;
}

.routine-section-inner{
    width:100%;
    max-width:1220px;
    margin:0 auto;
}


/* =========================================================
   SHARED ROUTINE TAG
========================================================= */

.routine-tag{

    display:inline-block;

    margin:0 0 20px;

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

    font-size:.78rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--clr-primary);

}


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

.routine-section-heading{

    max-width:760px;

    margin:0 auto 65px;

    text-align:center;

}

.routine-section-heading h2{

    margin:0 0 22px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.routine-section-heading h2 span{

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

}

.routine-section-heading > p:last-child{

    max-width:620px;

    margin:0 auto;

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

    font-size:1.03rem;

    line-height:1.8;

    color:var(--clr-text);

}


/* =========================================================
   SHARED BUTTONS
========================================================= */

.routine-primary-btn,
.routine-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:58px;

    padding:0 30px;

    border-radius:999px;

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

    font-size:1rem;

    font-weight:500;

    text-decoration:none;

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

}

.routine-primary-btn{

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

    color:var(--clr-white);

    border:1px solid var(--clr-primary-light);

    box-shadow:
        0 12px 30px rgba(214,170,210,.18);

}

.routine-primary-btn:hover{

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

    transform:translateY(-4px);

    box-shadow:
        0 18px 38px rgba(214,170,210,.24);

}

.routine-primary-btn span,
.routine-secondary-btn span{

    font-size:1.1rem;

    transition:transform .3s ease;

}

.routine-primary-btn:hover span{

    transform:translateY(3px);

}

.routine-secondary-btn{

    background:transparent;

    color:var(--clr-primary);

    border:1px solid var(--clr-primary-light);

}

.routine-secondary-btn:hover{

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

    color:var(--clr-white);

    transform:translateY(-4px);

}

.routine-secondary-btn:hover span{

    transform:translateX(5px);

}


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

.routine-hero{

    min-height:calc(100vh - 80px);

    padding:
        120px
        5%
        90px;

    display:flex;

    align-items:center;

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

}

.routine-hero-inner{

    width:100%;

    max-width:1220px;

    margin:0 auto;

    display:grid;

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

    align-items:center;

}


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

.routine-hero-content{

    max-width:650px;

}

.routine-hero-title{

    margin:0 0 28px;

    color:var(--clr-heading);

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

    line-height:1.08;

    font-weight:500;

}

.routine-hero-title span{

    display:block;

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

}

.routine-hero-description{

    max-width:560px;

    margin:0 0 38px;

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

    font-size:1.08rem;

    line-height:1.85;

    color:var(--clr-text);

}


/* =========================================================
   HERO PROFILE
========================================================= */

.routine-hero-profile{

    display:grid;

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

    gap:16px;

    max-width:560px;

    margin-bottom:35px;

}

.routine-profile-item{

    padding:20px 22px;

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

    border:1px solid #eee2e9;

    border-radius:22px;

}

.routine-profile-item span{

    display:block;

    margin-bottom:7px;

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

    font-size:.75rem;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--clr-primary);

}

.routine-profile-item strong{

    display:block;

    color:var(--clr-heading);

    font-size:1.05rem;

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

    font-weight:500;

}


/* =========================================================
   HERO CHARACTER
========================================================= */

.routine-hero-character img{

    position:relative;

    z-index:1;

    width:110%;

    max-width:700px;

    /* max-height:600px; */

    object-fit:contain;

    object-position:center;

    animation:routineCharacterFloat 4.5s ease-in-out infinite;

}

@keyframes routineCharacterFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-9px);
    }

}


/* =========================================================
   SKIN PROFILE SECTION
========================================================= */

.routine-profile-section{

    padding:
        110px
        5%
        120px;

    background:var(--clr-white);

}


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

.routine-profile-grid{

    display:grid;

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

    gap:24px;

}

.routine-profile-card{

    position:relative;

    padding:34px 30px;

    min-height:280px;

    background:#fff;

    border:1px solid #eee4ea;

    border-radius:30px;

    box-shadow:
        0 16px 40px rgba(0,0,0,.045);

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

}

.routine-profile-card:hover{

    transform:translateY(-8px);

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

    box-shadow:
        0 25px 55px rgba(0,0,0,.07);

}

.routine-profile-card-icon{

    width:54px;

    height:54px;

    margin-bottom:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    color:var(--clr-primary);

    font-size:1.45rem;

}

.routine-profile-card > span{

    display:block;

    margin-bottom:9px;

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

    font-size:.75rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--clr-primary);

}

.routine-profile-card h3{

    margin:0 0 16px;

    color:var(--clr-heading);

    font-size:1.55rem;

    line-height:1.25;

    font-weight:500;

}

.routine-profile-card p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.96rem;

    line-height:1.75;

}


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

.routine-characteristics{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:0 0 17px;

}

.routine-characteristics span{

    display:inline-flex;

    align-items:center;

    padding:8px 12px;

    border-radius:999px;

    background:#fff5fa;

    color:var(--clr-primary);

    border:1px solid #f0dfe9;

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

    font-size:.78rem;

}


/* =========================================================
   ROUTINE INTRO
========================================================= */

.routine-intro-section{

    padding:
        95px
        5%
        100px;

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

}

.routine-intro-inner{

    max-width:780px;

    margin:0 auto;

    text-align:center;

}

.routine-intro-inner h2{

    margin:0 0 22px;

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

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

}

.routine-intro-inner h2 span{

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

}

.routine-intro-inner > p:not(.routine-tag){

    max-width:650px;

    margin:0 auto;

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

    font-size:1.03rem;

    line-height:1.85;

    color:var(--clr-text);

}


/* =========================================================
   INTRO NOTE
========================================================= */

.routine-intro-note{

    max-width:570px;

    margin:35px auto 0;

    padding:18px 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:#fff;

    border:1px solid #eee1e9;

    border-radius:20px;

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

}

.routine-intro-note > span{

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

    font-size:1.25rem;

}

.routine-intro-note p{

    margin:0;

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

    font-size:.95rem;

    color:var(--clr-heading);

}


/* =========================================================
   TIME SECTIONS
========================================================= */

.routine-time-section{

    padding:
        115px
        5%
        110px;

    background:var(--clr-white);

}

.routine-time-section.evening{

    background:#fffafd;

}


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

.routine-time-heading{

    max-width:900px;

    margin:0 auto 55px;

    display:flex;

    align-items:flex-start;

    gap:25px;

}

.routine-time-icon{

    flex:0 0 72px;

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

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

    color:var(--clr-primary);

    font-size:1.55rem;

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

}

.routine-time-icon.morning{

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

    color:var(--clr-primary);

}

.routine-time-icon.evening{

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

    color:var(--clr-primary);

}

.routine-time-heading h2{

    margin:0 0 16px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.routine-time-heading h2 span{

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

}

.routine-time-heading p:not(.routine-tag){

    max-width:600px;

    margin:0;

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

    color:var(--clr-text);

    line-height:1.8;

}


/* =========================================================
   ROUTINE STEPS
========================================================= */

.routine-steps{

    max-width:1000px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}


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

.routine-step-card{

    position:relative;

    display:grid;

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

    align-items:center;

    gap:25px;

    padding:28px 30px;

    min-height:145px;

    background:#fff;

    border:1px solid #eee3e9;

    border-radius:28px;

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

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

}

.routine-step-card:hover{

    transform:translateY(-6px);

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

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

}


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

.routine-step-number{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

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

    color:var(--clr-primary);

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

    font-size:1rem;

    font-weight:600;

}


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

.routine-step-label{

    display:block;

    margin-bottom:7px;

    color:var(--clr-primary);

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:2px;

}

.routine-step-content h3{

    margin:0 0 8px;

    color:var(--clr-heading);

    font-size:1.35rem;

    font-weight:500;

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

}

.routine-step-content p{

    max-width:680px;

    margin:0;

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

    font-size:.95rem;

    line-height:1.7;

    color:var(--clr-text);

}


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

.routine-step-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    background:#fff5fa;

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

    font-size:1.15rem;

}


/* =========================================================
   TIME NOTE
========================================================= */

.routine-time-note{

    max-width:1000px;

    margin:30px auto 0;

    padding:20px 25px;

    display:flex;

    align-items:flex-start;

    gap:15px;

    border-radius:22px;

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

}

.routine-time-note > span{

    flex:0 0 auto;

    color:var(--clr-primary);

    font-size:1.35rem;

    line-height:1.3;

}

.routine-time-note strong{

    display:block;

    margin-bottom:5px;

    color:var(--clr-heading);

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

    font-size:.95rem;

    font-weight:600;

}

.routine-time-note p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.9rem;

    line-height:1.65;

}


/* =========================================================
   WHY THIS ROUTINE
========================================================= */

.routine-reason-section{

    padding:
        115px
        5%
        120px;

    background:var(--clr-white);

}


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

.routine-reason-list{

    max-width:1000px;

    margin:0 auto;

    display:grid;

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

    gap:20px;

}

.routine-reason-card{

    padding:30px 27px;

    display:flex;

    align-items:flex-start;

    gap:17px;

    background:#fff;

    border:1px solid #eee3e9;

    border-radius:27px;

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

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

}

.routine-reason-card:hover{

    transform:translateY(-7px);

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

}

.routine-reason-icon{

    flex:0 0 43px;

    width:43px;

    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

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

    color:var(--clr-primary);

    font-size:1rem;

}

.routine-reason-card h3{

    margin:0 0 9px;

    color:var(--clr-heading);

    font-size:1.3rem;

    font-weight:500;

}

.routine-reason-card p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.99rem;

    line-height:1.7;

}


/* =========================================================
   ROUTINE RULES
========================================================= */

.routine-rules-section{

    padding:
        110px
        5%
        120px;

    background:#fffafd;

}

.routine-rules-grid{

    display:grid;

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

    gap:22px;

    max-width:1000px;

    margin:0 auto;

}


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

.routine-rule-card{

    position:relative;

    min-height:230px;

    padding:34px 32px;

    background:#fff;

    border:1px solid #eee2e9;

    border-radius:29px;

    overflow:hidden;

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

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

}

.routine-rule-card:hover{

    transform:translateY(-7px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.065);

}

.routine-rule-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    margin-bottom:25px;

    border-radius:17px;

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

    color:var(--clr-primary);

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

    font-size:.85rem;

    font-weight:600;

}

.routine-rule-card h3{

    margin:0 0 12px;

    color:var(--clr-heading);

    font-size:1.35rem;

    line-height:1.3;

    font-weight:500;

}

.routine-rule-card p{

    max-width:470px;

    margin:0;

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

    color:var(--clr-text);

    font-size:.93rem;

    line-height:1.75;

}


/* =========================================================
   INGREDIENT GUIDANCE
========================================================= */

.routine-ingredients-section{

    padding:
        110px
        5%
        115px;

    background:var(--clr-white);

}

.routine-ingredients-section
.routine-section-inner{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(350px,.8fr);

    gap:80px;

    align-items:center;

}

.routine-ingredient-content{

    max-width:620px;

}

.routine-ingredient-content h2{

    margin:0 0 22px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.routine-ingredient-content h2 span{

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

}

.routine-ingredient-content > p:not(.routine-tag){

    max-width:560px;

    margin:0 0 32px;

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

    color:var(--clr-text);

    font-size:1rem;

    line-height:1.85;

}


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

.routine-ingredient-visual{

    min-height:390px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.routine-ingredient-orbit{

    position:relative;

    width:310px;

    height:310px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid #eadfe8;

    background:
        radial-gradient(
            circle,
            #fff7fb 0%,
            #fff 67%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.055);

}

.routine-ingredient-orbit::before{

    content:"";

    position:absolute;

    width:205px;

    height:205px;

    border-radius:50%;

    border:1px dashed #ead5e5;

}

.routine-ingredient-orbit::after{

    content:"INGREDIENTS";

    position:absolute;

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

    font-size:.65rem;

    font-weight:600;

    letter-spacing:3px;

    color:var(--clr-primary);

}

.routine-ingredient-orbit span{

    position:absolute;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

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

    border:1px solid #eadfe8;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

    font-size:1rem;

}

.routine-ingredient-orbit span:nth-child(1){

    top:25px;

    left:50%;

    transform:translateX(-50%);

}

.routine-ingredient-orbit span:nth-child(2){

    right:24px;

    bottom:58px;

}

.routine-ingredient-orbit span:nth-child(3){

    left:24px;

    bottom:58px;

}


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

.routine-personal-note{
    
    padding: 20px 2% 0;

    background:
        linear-gradient(
            145deg,
            #fff8fb,
            #faf5ff
        );

}

.routine-personal-note-inner{

    max-width:1050px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        350px 1fr;

    gap:70px;

    align-items:center;

}

.routine-personal-note-character{

    min-height:350px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.routine-personal-note-character img{

    width:100%;

    max-width:350px;

    max-height:430px;

    object-fit:contain;

    animation:
        routineCharacterFloat 5s ease-in-out infinite;

}

.routine-personal-note-content{

    max-width:600px;

}

.routine-personal-note-content h2{

    margin:0 0 22px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.routine-personal-note-content h2 span{

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

}

.routine-personal-note-content
> p:not(.routine-tag){

    margin:0;

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

    font-size:1rem;

    line-height:1.9;

    color:var(--clr-text);

}


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

.routine-actions-section{

    padding:
        115px
        5%
        120px;

    background:var(--clr-white);

}

.routine-actions-inner{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.routine-actions-inner h2{

    margin:0 0 22px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.routine-actions-inner h2 span{

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

}

.routine-actions-inner
> p:not(.routine-tag){

    max-width:620px;

    margin:0 auto;

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

    color:var(--clr-text);

    font-size:1rem;

    line-height:1.8;

}


/* =========================================================
   ACTION BUTTON GROUP
========================================================= */

.routine-actions{

    margin-top:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

}


/* =========================================================
   CLOSING
========================================================= */

.routine-closing{

    padding:
        65px
        20px
        75px;

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

    text-align:center;

}

.routine-closing p{

    margin:0;

    color:var(--clr-heading);

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

    font-size:1rem;

    line-height:2;

    letter-spacing:.3px;

}

.routine-closing p::first-line{

    color:var(--clr-primary);

}


/* =========================================================
   TABLET
   1024px
========================================================= */

@media screen and (max-width:1024px){

    .routine-hero{

        min-height:auto;

        padding:
            110px
            5%
            85px;

    }

    .routine-hero-inner{

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

        gap:35px;

    }

    .routine-hero-title{

        font-size:3.7rem;

    }

    .routine-hero-character{

        min-height:430px;

    }

    .routine-hero-character img{

        max-width:590px;

    }

    .routine-hero-character::before{

        width:370px;

        height:370px;

    }


    /* PROFILE */

    .routine-profile-section{

        padding:
            90px 5%
            100px;

    }

    .routine-profile-grid{

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

    }

    .routine-profile-card:last-child{

        grid-column:1 / -1;

        max-width:calc(50% - 12px);

        width:100%;

        margin:0 auto;

    }


    /* REASONS */

    .routine-reason-list{

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

    }

    .routine-reason-card:last-child{

        grid-column:1 / -1;

        max-width:calc(50% - 10px);

        width:100%;

        margin:0 auto;

    }


    /* INGREDIENT */

    .routine-ingredients-section
    .routine-section-inner{

        gap:50px;

    }

    .routine-ingredient-visual{

        min-height:330px;

    }

    .routine-ingredient-orbit{

        width:270px;

        height:270px;

    }


    /* NOTE */

    .routine-personal-note-inner{

        grid-template-columns:
            280px 1fr;

        gap:45px;

    }

}


/* =========================================================
   MOBILE
   768px
========================================================= */

@media screen and (max-width:768px){

    /* -----------------------------------------------------
       SHARED
    ----------------------------------------------------- */

    .routine-section-heading{

        margin-bottom:45px;

    }

    .routine-section-heading h2{

        font-size:2.35rem;

    }

    .routine-section-heading
    > p:last-child{

        font-size:.95rem;

    }


    .routine-primary-btn,
    .routine-secondary-btn{

        width:100%;

        min-height:54px;

        padding:0 22px;

        font-size:.92rem;

    }


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

    .routine-hero{

        padding:
            90px
            20px
            70px;

        text-align:center;

    }

    .routine-hero-inner{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

    .routine-hero-content{

        max-width:100%;

    }

    .routine-hero-title{

        font-size:2.65rem;

        line-height:1.13;

        margin-bottom:22px;

    }

    .routine-hero-description{

        max-width:100%;

        margin:
            0 auto
            30px;

        font-size:.96rem;

        line-height:1.75;

    }

    .routine-hero-profile{

        width:100%;

        max-width:500px;

        margin:
            0 auto 28px;

        text-align:left;

    }

    .routine-hero-character{

        order:2;

        min-height:330px;

        width:100%;

    }

    .routine-hero-character img{

        width:100%;

        max-width:310px;

        max-height:370px;

    }

    .routine-hero-character::before{

        width:300px;

        height:300px;

    }


    /* -----------------------------------------------------
       PROFILE
    ----------------------------------------------------- */

    .routine-profile-section{

        padding:
            75px
            20px
            85px;

    }

    .routine-profile-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .routine-profile-card{

        min-height:auto;

        padding:28px 24px;

        border-radius:25px;

    }

    .routine-profile-card:last-child{

        grid-column:auto;

        max-width:none;

    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .routine-intro-section{

        padding:
            75px
            20px
            80px;

    }

    .routine-intro-inner h2{

        font-size:2.35rem;

    }

    .routine-intro-inner
    > p:not(.routine-tag){

        font-size:.95rem;

    }

    .routine-intro-note{

        padding:16px 18px;

        text-align:left;

        justify-content:flex-start;

    }


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

    .routine-time-section{

        padding:
            80px
            20px
            85px;

    }

    .routine-time-heading{

        gap:17px;

        margin-bottom:40px;

    }

    .routine-time-icon{

        flex:0 0 58px;

        width:58px;

        height:58px;

        border-radius:19px;

        font-size:1.2rem;

    }

    .routine-time-heading h2{

        font-size:2.2rem;

    }

    .routine-time-heading p:not(.routine-tag){

        font-size:.93rem;

    }


    /* -----------------------------------------------------
       STEP CARDS
    ----------------------------------------------------- */

    .routine-steps{

        gap:15px;

    }

    .routine-step-card{

        grid-template-columns:
            52px 1fr;

        gap:17px;

        padding:22px;

        min-height:auto;

        border-radius:24px;

    }

    .routine-step-number{

        width:52px;

        height:52px;

        border-radius:17px;

        font-size:.85rem;

    }

    .routine-step-content h3{

        font-size:1.15rem;

    }

    .routine-step-content p{

        font-size:.88rem;

        line-height:1.65;

    }

    .routine-step-icon{

        display:none;

    }


    /* -----------------------------------------------------
       TIME NOTE
    ----------------------------------------------------- */

    .routine-time-note{

        padding:17px 18px;

        gap:12px;

    }

    .routine-time-note p{

        font-size:.85rem;

    }


    /* -----------------------------------------------------
       REASONS
    ----------------------------------------------------- */

    .routine-reason-section{

        padding:
            80px
            20px
            90px;

    }

    .routine-reason-list{

        grid-template-columns:1fr;

        gap:16px;

    }

    .routine-reason-card{

        padding:24px 21px;

    }

    .routine-reason-card:last-child{

        grid-column:auto;

        max-width:none;

    }


    /* -----------------------------------------------------
       RULES
    ----------------------------------------------------- */

    .routine-rules-section{

        padding:
            80px
            20px
            90px;

    }

    .routine-rules-grid{

        grid-template-columns:1fr;

        gap:17px;

    }

    .routine-rule-card{

        min-height:auto;

        padding:28px 24px;

        border-radius:25px;

    }


    /* -----------------------------------------------------
       INGREDIENT
    ----------------------------------------------------- */

    .routine-ingredients-section{

        padding:
            80px
            20px
            90px;

    }

    .routine-ingredients-section
    .routine-section-inner{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .routine-ingredient-content{

        max-width:100%;

    }

    .routine-ingredient-content h2{

        font-size:2.35rem;

    }

    .routine-ingredient-content
    > p:not(.routine-tag){

        font-size:.95rem;

    }

    .routine-ingredient-visual{

        min-height:300px;

    }

    .routine-ingredient-orbit{

        width:250px;

        height:250px;

    }

    .routine-ingredient-orbit::before{

        width:165px;

        height:165px;

    }

    .routine-ingredient-orbit span{

        width:43px;

        height:43px;

    }

    .routine-ingredient-orbit span:nth-child(1){

        top:20px;

    }

    .routine-ingredient-orbit span:nth-child(2){

        right:18px;

        bottom:48px;

    }

    .routine-ingredient-orbit span:nth-child(3){

        left:18px;

        bottom:48px;

    }


    /* -----------------------------------------------------
       PERSONAL NOTE
    ----------------------------------------------------- */

    .routine-personal-note{

        padding:
            75px
            20px
            80px;

    }

    .routine-personal-note-inner{

        grid-template-columns:1fr;

        gap:20px;

        text-align:center;

    }

    .routine-personal-note-character{

        min-height:280px;

    }

    .routine-personal-note-character img{

        max-width:270px;

        max-height:320px;

    }

    .routine-personal-note-content{

        max-width:100%;

    }

    .routine-personal-note-content h2{

        font-size:2.3rem;

    }

    .routine-personal-note-content
    > p:not(.routine-tag){

        font-size:.95rem;

    }


    /* -----------------------------------------------------
       ACTIONS
    ----------------------------------------------------- */

    .routine-actions-section{

        padding:
            80px
            20px
            90px;

    }

    .routine-actions-inner h2{

        font-size:2.35rem;

    }

    .routine-actions-inner
    > p:not(.routine-tag){

        font-size:.95rem;

    }

    .routine-actions{

        flex-direction:column;

        width:100%;

        max-width:360px;

        margin:
            32px auto 0;

    }


    /* -----------------------------------------------------
       CLOSING
    ----------------------------------------------------- */

    .routine-closing{

        padding:
            50px
            20px
            60px;

    }

}


/* =========================================================
   SMALL MOBILE
   480px
========================================================= */

@media screen and (max-width:480px){

    .routine-tag{

        font-size:.68rem;

        letter-spacing:2.2px;

    }

    .routine-hero{

        padding-top:80px;

    }

    .routine-hero-title{

        font-size:2.25rem;

    }

    .routine-hero-profile{

        grid-template-columns:1fr;

    }

    .routine-profile-item{

        padding:17px 18px;

    }

    .routine-hero-character{

        min-height:280px;

    }

    .routine-hero-character img{

        max-width:400px;

    }


    .routine-section-heading h2,
    .routine-intro-inner h2,
    .routine-time-heading h2,
    .routine-ingredient-content h2,
    .routine-personal-note-content h2,
    .routine-actions-inner h2{

        font-size:2rem;

    }


    .routine-time-heading{

        align-items:flex-start;

    }

    .routine-time-icon{

        flex:0 0 50px;

        width:50px;

        height:50px;

        border-radius:16px;

    }


    .routine-step-card{

        grid-template-columns:
            45px 1fr;

        padding:19px;

        gap:13px;

    }

    .routine-step-number{

        width:45px;

        height:45px;

        border-radius:14px;

        font-size:.78rem;

    }

    .routine-step-label{

        font-size:.62rem;

    }

    .routine-step-content h3{

        font-size:1.05rem;

    }

    .routine-step-content p{

        font-size:.82rem;

    }


    .routine-profile-card{

        padding:24px 21px;

    }

    .routine-profile-card-icon{

        width:48px;

        height:48px;

        border-radius:16px;

        margin-bottom:20px;

    }

    .routine-profile-card h3{

        font-size:1.35rem;

    }


    .routine-rule-card{

        padding:25px 21px;

    }

    .routine-rule-card h3{

        font-size:1.2rem;

    }


    .routine-ingredient-orbit{

        width:220px;

        height:220px;

    }

    .routine-ingredient-orbit::before{

        width:145px;

        height:145px;

    }

    .routine-ingredient-orbit span{

        width:39px;

        height:39px;

        font-size:.85rem;

    }

    .routine-ingredient-orbit span:nth-child(1){

        top:15px;

    }

    .routine-ingredient-orbit span:nth-child(2){

        right:13px;

        bottom:40px;

    }

    .routine-ingredient-orbit span:nth-child(3){

        left:13px;

        bottom:40px;

    }


    .routine-personal-note-character{

        min-height:240px;

    }

    .routine-personal-note-character img{

        max-width:230px;

    }


    .routine-actions{

        max-width:100%;

    }


    .routine-closing p{

        font-size:.9rem;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion:reduce){

    .routine-hero-character img,
    .routine-personal-note-character img{

        animation:none;

    }

    .routine-primary-btn,
    .routine-secondary-btn,
    .routine-profile-card,
    .routine-step-card,
    .routine-reason-card,
    .routine-rule-card{

        transition:none;

    }

}


/* =========================================================
   OPTIONAL JS-INSERTED ROUTINE STEP SUPPORT
   Matches your existing analysis JS output.
========================================================= */

.analysis-routine-step{

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px 26px;

    background:#fff;

    border:1px solid #eee3e9;

    border-radius:24px;

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

}

.analysis-routine-step
.routine-step-number{

    flex:0 0 50px;

    width:50px;

    height:50px;

}

.analysis-routine-step h4{

    margin:0 0 7px;

    color:var(--clr-heading);

    font-size:1.15rem;

    font-weight:500;

}

.analysis-routine-step p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.9rem;

    line-height:1.7;

}


/* =========================================================
   END
========================================================= */

/* ==========================================
        ANALYSIS REQUIRED POPUP
========================================== */

.analysis-popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(48,32,48,.35);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}


.analysis-popup-overlay.show{

    opacity:1;

    visibility:visible;

}


/* ==========================================
        POPUP
========================================== */

.analysis-popup{

    position:relative;

    width:100%;

    max-width:520px;

    padding:55px 50px 45px;

    background:#fff;

    border-radius:35px;

    text-align:center;

    box-shadow:
        0 30px 80px rgba(0,0,0,.15);

    transform:translateY(20px) scale(.97);

    transition:.35s ease;

}


.analysis-popup-overlay.show
.analysis-popup{

    transform:translateY(0) scale(1);

}


/* ==========================================
        CLOSE
========================================== */

.analysis-popup-close{

    position:absolute;

    top:18px;

    right:20px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#fff5fa;

    color:var(--clr-primary);

    font-size:1.5rem;

    cursor:pointer;

    transition:.3s ease;

}


.analysis-popup-close:hover{

    transform:rotate(90deg);

    background:var(--clr-background);

}


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

.analysis-popup-icon{

    width:72px;

    height:72px;

    margin:0 auto 22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--clr-background);

    color:var(--clr-primary);

    font-size:1.5rem;

}


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

.analysis-popup-tag{

    margin-bottom:15px;

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

    font-size:.72rem;

    font-weight:600;

    letter-spacing:2.5px;

    color:var(--clr-primary);

}


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

.analysis-popup h2{

    margin-bottom:20px;

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

    font-size:2.5rem;

    line-height:1.15;

    font-weight:400;

    color:var(--clr-heading);

}


.analysis-popup h2 span{

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

}


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

.analysis-popup-text{

    max-width:400px;

    margin:0 auto 12px;

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

    font-size:1rem;

    line-height:1.7;

    color:var(--clr-text);

}


.analysis-popup-small{

    max-width:390px;

    margin:0 auto 30px;

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

    font-size:.9rem;

    line-height:1.7;

    color:var(--clr-placeholder);

}


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

.analysis-popup-btn{

    width:100%;

    min-height:56px;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:999px;

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

    color:#fff;

    text-decoration:none;

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

    font-size:1rem;

    font-weight:500;

    transition:.35s ease;

}


.analysis-popup-btn:hover{

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

    transform:translateY(-3px);

}


.analysis-popup-btn span{

    transition:.3s ease;

}


.analysis-popup-btn:hover span{

    transform:translateX(5px);

}


/* ==========================================
        MAYBE LATER
========================================== */

.analysis-popup-later{

    margin-top:18px;

    border:none;

    background:none;

    color:var(--clr-placeholder);

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

    font-size:.9rem;

    cursor:pointer;

}


.analysis-popup-later:hover{

    color:var(--clr-primary);

}


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

@media(max-width:600px){

    .analysis-popup{

        max-width:420px;

        padding:45px 25px 30px;

        border-radius:28px;

    }

    .analysis-popup-icon{

        width:62px;

        height:62px;

        font-size:1.3rem;

    }

    .analysis-popup h2{

        font-size:2rem;

    }

    .analysis-popup-text{

        font-size:.95rem;

    }

    .analysis-popup-small{

        font-size:.85rem;

    }

}