/* =========================================================
        ASK MIMII — START is-reIS
        FULL PAGE CSS
========================================================= */


/* =========================================================
        ROOT / PAGE
========================================================= */

.start-analysis-page{

    min-height:100vh;

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

    color:var(--clr-heading);

}


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

.analysis-header{

    position:sticky;

    top:0;

    z-index:100;

    width:100%;

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

    backdrop-filter:blur(16px);

    border-bottom:1px solid #eee5eb;

}

.analysis-header-inner{

    width:100%;

    max-width:1400px;

    height:76px;

    margin:auto;

    padding:0 4.5%;

    display:grid;

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

    align-items:center;

}

.analysis-back{

    justify-self:start;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #eadfe8;

    border-radius:50%;

    background:transparent;

    color:var(--clr-heading);

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

    font-size:1.2rem;

    cursor:pointer;

    transition:.35s ease;

}

.analysis-back:hover{

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

    color:var(--clr-primary);

    transform:translateX(-3px);

}

.analysis-logo{

    text-decoration:none;

    color:var(--clr-heading);

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

    font-size:1.45rem;

    font-weight:600;

    letter-spacing:-.5px;

}

.analysis-exit{

    justify-self:end;

    border:0;

    background:transparent;

    color:var(--clr-text);

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

    font-size:.88rem;

    cursor:pointer;

    transition:.3s ease;

}

.analysis-exit:hover{

    color:var(--clr-primary);

}


/* =========================================================
        PROGRESS SECTION
========================================================= */

.analysis-progress-section{

    padding:32px 4.5% 15px;

    background:transparent;

}

.analysis-progress-wrapper{

    width:100%;

    max-width:1200px;

    margin:auto;

}

.analysis-progress-track{

    position:relative;

    width:100%;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.analysis-progress-track::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:2px;

    background:#eadfe8;

    transform:translateY(-50%);

    z-index:0;

}

.analysis-progress-line{

    position:absolute;

    left:0;

    top:50%;

    width:0;

    height:2px;

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

    transform:translateY(-50%);

    transition:.45s ease;

    z-index:1;

}

.analysis-progress-step{

    position:relative;

    z-index:2;

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

    border:2px solid #eadfe8;

    color:#aaa1a9;

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

    font-size:.65rem;

    font-weight:600;

    transition:.35s ease;

}

.analysis-progress-step.active{

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

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

    color:var(--clr-white);

    transform:scale(1.08);

}

.analysis-progress-step.completed{

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

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

    color:var(--clr-white);

}

.analysis-progress-labels{

    display:grid;

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

    margin-top:10px;

    text-align:center;

}

.analysis-progress-labels span{

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

    font-size:.82rem;

    color:#978c95;

}


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

.analysis-screen-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:35px 4.5% 80px;

}


/* =========================================================
        SCREEN
========================================================= */

.analysis-screen{

    width:100%;

}

.analysis-screen[hidden]{

    display:none !important;

}

.analysis-screen.active{

    display:block;

    animation:analysisFadeIn .45s ease;

}

.analysis-screen-content{

    width:100%;

    max-width:850px;

    margin:0 auto;

    text-align:center;

}


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

.analysis-tag{

    display:inline-block;

    margin:0 0 20px;

    padding:9px 17px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.72rem;

    font-weight:600;

    letter-spacing:2.5px;

    text-transform:uppercase;

}


/* =========================================================
        COMMON TITLE
========================================================= */

.analysis-title{

    margin:0 0 20px;

    color:var(--clr-heading);

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

    line-height:1.15;

    font-weight:500;

}

.analysis-title span{

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

}


/* =========================================================
        COMMON DESCRIPTION
========================================================= */

.analysis-description{

    max-width:620px;

    margin:0 auto 35px;

    color:var(--clr-text);

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

    font-size:1.05rem;

    line-height:1.8;

}


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

.analysis-primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:58px;

    padding:0 30px;

    border:0;

    border-radius:999px;

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

    color:var(--clr-white);

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

    font-size:1rem;

    font-weight:500;

    text-decoration:none;

    cursor:pointer;

    transition:.35s ease;

    margin-top: 20px;

}

.analysis-primary-btn span{

    transition:.3s ease;

}

.analysis-primary-btn:hover{

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

    transform:translateY(-4px);

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

}

.analysis-primary-btn:hover span{

    transform:translateX(5px);

}


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

.analysis-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:58px;

    padding:0 30px;

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

    border-radius:999px;

    background:transparent;

    color:var(--clr-primary);

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

    font-size:1rem;

    font-weight:500;

    cursor:pointer;

    transition:.35s ease;

}

.analysis-secondary-btn:hover{

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

    color:var(--clr-white);

    transform:translateY(-4px);

}


/* =========================================================
        STEP 1 — WELCOME
========================================================= */

#analysisWelcome .analysis-screen-content{

    max-width:860px;

}

.analysis-character{

    width:100%;

    /* height:340px; */

    margin:10px auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.analysis-character img{

    width:120%;

    max-width:790px;

    height:100%;

    object-fit:contain;

    display:block;

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

}

.analysis-welcome-note{

    max-width:520px;

    margin:0 auto 28px;

    padding:20px 28px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:26px;

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

}

.analysis-welcome-note p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.92rem;

    line-height:1.8;

}


/* =========================================================
        BENEFITS
========================================================= */

.analysis-benefits{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

    margin:0 auto 32px;

}

.analysis-benefit{

    display:flex;

    align-items:center;

    gap:8px;

}

.analysis-benefit p{

    margin:0;

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

    font-size:.78rem;

    color:var(--clr-text);

}

.analysis-benefit-icon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:.8rem;

}


/* =========================================================
        CHOICE BASE
========================================================= */

.analysis-choice{

    position:relative;

    width:100%;

    min-height:100px;

    padding:22px;

    border:1px solid #eadfe8;

    border-radius:24px;

    background:var(--clr-white);

    color:var(--clr-heading);

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

    cursor:pointer;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.analysis-choice:hover{

    transform:translateY(-4px);

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

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

}

.analysis-choice.selected{

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

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

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

}

.analysis-choice:focus-visible{

    outline:2px solid var(--clr-primary-light);

    outline-offset:3px;

}


/* =========================================================
        SKIN TYPE GRID
========================================================= */

.analysis-option-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}

.skin-type-grid .analysis-choice{

    min-height:155px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.skin-type-grid .analysis-choice-help{

    grid-column:1 / -1;

    min-height:95px;

    flex-direction:row;

    gap:15px;

}

.choice-icon{

    width:60px;

    height:60px;

    margin-bottom:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    font-size:1.1rem;

    color: var(--clr-primary);

}

.analysis-choice-help .choice-icon{

    margin-bottom:0;

}

.choice-title{

    display:block;

    margin-bottom:7px;

    font-size:1.05rem;

    font-weight:600;

    color:var(--clr-heading);

}

.choice-description{

    display:block;

    max-width:230px;

    font-size:.98rem;

    line-height:1.6;

    color:var(--clr-text);

}


/* =========================================================
        DISCOVERY
========================================================= */

.skin-type-discovery{

    margin-top:15px;

    padding:32px;

    border-radius:30px;

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

    border:1px solid #eadfe8;

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

}

.skin-type-discovery[hidden]{

    display:none !important;

}

.analysis-discovery-question{

    animation:analysisFadeIn .4s ease;

}

.analysis-discovery-question[hidden]{

    display:none;

}

.analysis-clue-label{

    display:inline-block;

    margin-bottom:14px;

    color:var(--clr-primary);

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

    font-size:.68rem;

    font-weight:600;

    letter-spacing:2px;

}

.analysis-discovery-question h3{

    max-width:620px;

    margin:0 auto 25px;

    font-size:1.45rem;

    line-height:1.45;

    font-weight:500;

    color:var(--clr-heading);

}


/* =========================================================
        VERTICAL OPTIONS
========================================================= */

.analysis-vertical-options{

    display:flex;

    flex-direction:column;

    gap:12px;

    max-width:600px;

    margin:auto;

}

.analysis-choice-wide{

    min-height:58px;

    padding:15px 22px;

    text-align:left;

    font-size: 1rem;

}


/* =========================================================
        SMALL OPTIONS
========================================================= */

.analysis-small-options{

    display:grid;

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

    gap:12px;

    max-width:650px;

    margin:0 auto;

}

.analysis-small-options .analysis-choice{

    min-height:58px;

    padding:15px 18px;

    font-size: 1rem;

}


/* =========================================================
        DISCOVERY RESULT
========================================================= */

.skin-type-discovery-result{

    padding:28px;

    margin-top:20px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:26px;

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

    animation:analysisFadeIn .45s ease;

}

.skin-type-discovery-result[hidden]{

    display:none;

}

.analysis-discovery-result-icon{

    width:52px;

    height:52px;

    margin:0 auto 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

}

.skin-type-discovery-result h2{

    margin:0 0 10px;

    font-size:1.7rem;

    font-weight:500;

    color:var(--clr-heading);

}

.skin-type-discovery-result p{

    max-width:500px;

    margin:0 auto 15px;

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

    font-size:.99rem;

    line-height:1.7;

    color:var(--clr-text);

}

.analysis-text-button{

    border:0;

    background:transparent;

    color:var(--clr-primary);

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

    font-size:.8rem;

    cursor:pointer;

    text-decoration:underline;

}


/* =========================================================
        STEP 3 — CONCERNS
========================================================= */

.analysis-concern-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;

}

.concern-choice{

    min-height:62px;

    padding:15px;

    font-size:.94rem;

    font-weight:500;

}

.analysis-selection-count{

    width:max-content;

    margin:20px auto 8px;

    padding:9px 17px;

    border-radius:999px;

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

    color:var(--clr-text);

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

    font-size:.76rem;

}

.analysis-selection-count span{

    color:var(--clr-primary);

    font-weight:600;

}

.analysis-clue-message{

    margin:0 auto 25px;

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

    font-size:.78rem;

    color:#958a92;

}


/* =========================================================
        CONDITIONAL CONCERNS
========================================================= */

.conditional-concern-container{

    margin-top:20px;

}

.conditional-concern-container:empty{

    display:none;

}


/* =========================================================
        STEP 4 — MYTH FACT
========================================================= */

.analysis-myth-card{

    max-width:680px;

    margin:0 auto 25px;

    padding:35px 30px;

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

    border:1px solid #eadfe8;

    border-radius:30px;

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

}

.analysis-myth-label{

    display:block;

    margin-bottom:15px;

    color:var(--clr-primary);

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

    font-size:.68rem;

    font-weight:600;

    letter-spacing:2px;

}

.analysis-myth-card h2{

    margin:0;

    font-size:1.55rem;

    line-height:1.5;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-myth-options{

    display:grid;

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

    gap:15px;

    max-width:550px;

    margin:auto;

}

.analysis-myth-options .analysis-choice{

    min-height:64px;

    font-weight:600;

    letter-spacing:1px;

}

.analysis-myth-result{

    max-width:650px;

    margin:22px auto;

    padding:22px 25px;

    border-radius:25px;

    background:#fbfff9;

    border:1px solid #dfead8;

}

.analysis-myth-result[hidden]{

    display:none;

}

.analysis-myth-result-icon{

    width:34px;

    height:34px;

    margin:0 auto 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#e9f4e4;

    color:#66835d;

}

.analysis-myth-result h3{

    margin:0 0 7px;

    font-size:1.05rem;

    font-weight:600;

    color:#55734a;

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

}

.analysis-myth-result p{

    max-width:520px;

    margin:auto;

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

    font-size:.92rem;

    line-height:1.7;

    color:var(--clr-text);

}


/* =========================================================
        STEP 5 — SHELF
========================================================= */

.analysis-shelf-section{

    margin-bottom:30px;

    padding:28px;

    text-align:left;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:28px;

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

}

.analysis-shelf-heading{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.analysis-shelf-icon{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:1.1rem;

}

.analysis-shelf-heading h3{

    margin:0 0 4px;

    font-size:1.3rem;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-shelf-heading p{

    margin:0;

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

    font-size:.88rem;

    color:var(--clr-text);

}

.analysis-shelf-grid{

    display:grid;

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

    gap:10px;

}

.shelf-choice{

    min-height:68px;

    padding:12px 8px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border-radius:18px;

    font-size:.92rem;

}

.shelf-choice span{

    font-size:1rem;

    color: var(--clr-primary);

}

.analysis-input-group{

    margin-top:18px;

    text-align:left;

}

.analysis-input-group label{

    display:block;

    margin-bottom:8px;

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

    font-size:.76rem;

    font-weight:600;

    color:var(--clr-heading);

}

.analysis-input-group label span{

    color:#999;

    font-weight:400;

}

.analysis-input-group input{

    width:100%;

    height:50px;

    padding:0 16px;

    border:1px solid #eadfe8;

    border-radius:15px;

    outline:none;

    background:#fff;

    color:var(--clr-heading);

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

    font-size:.82rem;

    transition:.3s ease;

}

.analysis-input-group input::placeholder{

    color:#aaa1a9;

}

.analysis-input-group input:focus{

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

    box-shadow:0 0 0 4px rgba(238,190,211,.12);

}

.analysis-tip{

    max-width:700px;

    margin:25px auto 30px;

    padding:18px 22px;

    border-radius:22px;

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

    color:var(--clr-text);

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

    font-size:.88rem;

    line-height:1.7;

    text-align:left;

}

.analysis-tip strong{

    color:var(--clr-primary);

}


/* =========================================================
        STEP 6 — HABITS
========================================================= */

.analysis-question-group{

    margin-bottom:25px;

    padding:25px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:25px;

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

    text-align:left;

}

.analysis-question-group h3{

    margin:0 0 18px;

    font-size:1.2rem;

    line-height:1.5;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-select{

    width:100%;

    height:52px;

    padding:0 15px;

    border:1px solid #eadfe8;

    border-radius:15px;

    outline:none;

    background:#fff;

    color:var(--clr-heading);

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

    font-size:.82rem;

    cursor:pointer;

    transition:.3s ease;

}

.analysis-select:focus{

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

    box-shadow:0 0 0 4px rgba(238,190,211,.12);

}


/* =========================================================
        STEP 7 — EXPERIMENTS
========================================================= */

.analysis-experiment{

    margin-bottom:25px;

    padding:28px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:28px;

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

}

.analysis-experiment-icon{

    width:48px;

    height:48px;

    margin:0 auto 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    font-size:1.1rem;

    color: var(--clr-primary);

}

.analysis-experiment .analysis-clue-label{

    margin-bottom:10px;

}

.analysis-experiment h3{

    max-width:600px;

    margin:0 auto 22px;

    font-size:1.2rem;

    line-height:1.5;

    font-weight:500;

}


/* =========================================================
        STEP 8 — PROFILE
========================================================= */

.analysis-profile-section{

    margin-bottom:25px;

    padding:28px;

    text-align:left;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:28px;

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

}

.analysis-profile-section h3{

    margin:0 0 20px;

    font-size:1.3rem;

    line-height:1.5;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-profile-options{

    display:grid;

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

    gap:11px;

    margin-bottom:18px;

}

.analysis-profile-options .analysis-choice{

    min-height:58px;

    padding:13px 15px;

    font-size:.98rem;

}

.analysis-goal-options{

    display:grid;

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

    gap:11px;

}

.analysis-goal-options .analysis-choice{

    min-height:58px;

    padding:12px;

    font-size:.96rem;

}

.analysis-profile-section
.analysis-vertical-options{

    margin-bottom:18px;

}


/* =========================================================
        PROFILE PREVIEW
========================================================= */

.analysis-profile-preview{

    margin:25px 0 30px;

    padding:28px;

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

    border:1px solid #eadfe8;

    border-radius:28px;

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

    text-align:left;

}

.analysis-profile-preview[hidden]{

    display:none;

}

.analysis-profile-preview h3{

    margin:0 0 25px;

    font-size:1.05rem;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-profile-meter{

    margin-bottom:18px;

}

.analysis-profile-meter:last-child{

    margin-bottom:0;

}

.analysis-profile-meter-label{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:7px;

}

.analysis-profile-meter-label span{

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

    font-size:.75rem;

    color:var(--clr-text);

}

.analysis-profile-meter-label strong{

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

    font-size:.7rem;

    font-weight:600;

    color:var(--clr-primary);

}

.analysis-profile-meter-track{

    width:100%;

    height:7px;

    overflow:hidden;

    border-radius:999px;

    background:#eee5eb;

}

.analysis-profile-meter-fill{

    width:0;

    height:100%;

    border-radius:999px;

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

    transition:width 1s ease;

}


/* =========================================================
        STEP 9 — ANALYZING
========================================================= */

.analysis-analyzing-screen
.analysis-screen-content{

    max-width:700px;

}

.analyzing-character{

    /* height:300px; */

    margin-bottom:20px;

}

.analyzing-character img{

    width: 100;

    max-width:630px;

}

.analysis-result-progress{

    width:130px;

    height:130px;

    margin:30px auto;

    display:flex;

    align-items:center;

    justify-content:center;

}

.analysis-result-progress-circle{

    width:120px;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            #fff 58%,
            transparent 60%
        ),

        conic-gradient(
            var(--clr-primary-light) 0deg,
            #eee5eb 0deg
        );

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

    font-size:1rem;

    font-weight:600;

    color:var(--clr-heading);

    transition:background 1s ease;

}


/* =========================================================
        STEP 10 — RESULTS
========================================================= */

.analysis-results-screen{

    width:100%;

}

.analysis-results-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:45px;

    align-items:start;

}

.analysis-results-main{

    text-align:left;

}

.analysis-results-main
.analysis-description{

    margin-left:0;

    margin-right:0;

    text-align:left;

}

.analysis-result-card{

    display:flex;

    gap:18px;

    padding:25px;

    margin-bottom:18px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:27px;

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

}

.analysis-result-card-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

}

.analysis-result-card > div:last-child{

    flex:1;

}

.analysis-result-card > div:last-child > span{

    display:block;

    margin-bottom:5px;

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

    font-size:.68rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--clr-primary);

}

.analysis-result-card h2{

    margin:0 0 8px;

    font-size:1.5rem;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-result-card p{

    margin:0;

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

    font-size:.98rem;

    line-height:1.7;

    color:var(--clr-text);

}

.analysis-result-characteristics{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:10px 0;

}

.analysis-result-characteristics span{

    padding:7px 11px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.68rem;

}

.analysis-result-explanation{

    padding:25px;

    margin-bottom:20px;

    border-radius:26px;

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

    border:1px solid #eadfe8;

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

    font-size:.94rem;

    line-height:1.8;

    color:var(--clr-text);

}

.analysis-result-character{

    width:100%;

    /* height:260px; */

    display:flex;

    align-items:center;

    justify-content:center;

}

.analysis-result-character img{

    width:120%;

    max-width:800px;

    /* height:100%; */

    object-fit:contain;

}


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

.analysis-results-details{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.analysis-top-concerns,
.analysis-result-block{

    padding:25px;

    background:var(--clr-white);

    border:1px solid #eadfe8;

    border-radius:27px;

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

}

.analysis-result-heading{

    margin:0 0 7px;

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

    font-size:.7rem;

    font-weight:600;

    letter-spacing:2px;

    color:var(--clr-primary);

}

.analysis-result-subheading{

    display:block;

    margin-bottom:18px;

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

    font-size:.72rem;

    color:#999;

}


/* =========================================================
        TOP TEN
========================================================= */

.analysis-top-ten{

    margin:0;

    padding:0;

    list-style:none;

    counter-reset:topConcern;

}

.analysis-top-ten li{

    counter-increment:topConcern;

    display:flex;

    align-items:center;

    gap:12px;

    min-height:48px;

    padding:9px 0;

    border-bottom:1px solid #f0e9ee;

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

    font-size:.98rem;

    color:var(--clr-heading);

}

.analysis-top-ten li:last-child{

    border-bottom:0;

}

.analysis-top-ten li::before{

    content:counter(topConcern);

    width:25px;

    height:25px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:.65rem;

    font-weight:600;

}


/* =========================================================
        RESULT TAGS
========================================================= */

.analysis-result-tags{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}

.analysis-result-tags span{

    padding:9px 14px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.9rem;

}


/* =========================================================
        EVIDENCE
========================================================= */

.analysis-result-evidence{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.analysis-result-evidence > div{

    padding:14px 16px;

    border-radius:17px;

    background:#fdf9fb;

    border:1px solid #f0e6ec;

}

.analysis-result-evidence strong{

    display:block;

    margin-bottom:4px;

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

    font-size:.78rem;

    color:var(--clr-heading);

}

.analysis-result-evidence p{

    margin:0;

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

    font-size:.92rem;

    line-height:1.6;

    color:var(--clr-text);

}


/* =========================================================
        ROUTINE TABS
========================================================= */

.analysis-routine-tabs{

    display:grid;

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

    gap:8px;

    margin:18px 0;

}

.analysis-routine-tab{

    min-height:48px;

    padding:10px;

    border:1px solid #eadfe8;

    border-radius:999px;

    background:transparent;

    color:var(--clr-text);

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

    font-size:.92rem;

    cursor:pointer;

    transition:.3s ease;

}

.analysis-routine-tab:hover{

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

    color:var(--clr-primary);

}

.analysis-routine-tab.active{

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

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

    color:var(--clr-white);

}

.analysis-routine-content{

    min-height:100px;

}

.analysis-routine-content > div{

    padding:16px;

    margin-bottom:9px;

    border-radius:17px;

    background:#fdf9fb;

    border:1px solid #f0e6ec;

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

    font-size:.95rem;

    line-height:1.6;

    color:var(--clr-text);

}


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

.analysis-result-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/* =========================================================
        HELP SECTION
========================================================= */

.analysis-help-section{

    max-width:1050px;

    min-height:240px;

    margin:70px auto 0;

    padding:30px 40px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    overflow:hidden;

    border-radius:34px;

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

    border:1px solid #eadfe8;

}

.analysis-help-content{

    flex:1;

    padding-bottom:30px;

    text-align:left;

}

.analysis-help-content .analysis-tag{

    margin-bottom:15px;

}

.analysis-help-content h2{

    margin:0 0 10px;

    font-size:clamp(1.8rem,3vw,2.5rem);

    line-height:1.25;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-help-content > p:not(.analysis-tag){

    max-width:470px;

    margin:0 0 20px;

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

    font-size:.9rem;

    line-height:1.7;

    color:var(--clr-text);

}

.analysis-help-character{

    width:400px;

   
    flex-shrink:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.analysis-help-character img{

    width:100%;

   max-width: 450px;

    object-fit:contain;

}


/* =========================================================
        WHY ASK MIMII
========================================================= */

.analysis-why-section{

    padding:70px 4.5%;

    background:var(--clr-white);

}

.analysis-why-content{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.analysis-why-grid{

    display:grid;

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

    gap:22px;

    margin-top:30px;

}

.analysis-why-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:23px;

    text-align:left;

    background:#fff;

    border:1px solid #eadfe8;

    border-radius:25px;

    transition:.35s ease;

}

.analysis-why-item:hover{

    transform:translateY(-6px);

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

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

}

.analysis-why-item > span{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

}

.analysis-why-item h3{

    margin:0 0 5px;

    font-size:1rem;

    font-weight:500;

    color:var(--clr-heading);

}

.analysis-why-item p{

    margin:0;

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

    font-size:.75rem;

    line-height:1.6;

    color:var(--clr-text);

}


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

.analysis-closing{

    padding:60px 20px 80px;

    text-align:center;

    background:var(--clr-white);

}

.analysis-closing p{

    margin:0;

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

    font-size:1rem;

    line-height:2;

    color:var(--clr-text);

}


/* =========================================================
        ANIMATIONS
========================================================= */

@keyframes analysisFadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes analysisFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


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

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

    .analysis-header-inner{

        padding:0 40px;

    }

    .analysis-progress-section{

        padding-inline:40px;

    }

    .analysis-progress-labels span{

        font-size:.55rem;

    }

    .analysis-screen-container{

        padding-inline:40px;

    }

    .analysis-results-layout{

        grid-template-columns:1fr;

        gap:30px;

    }

    .analysis-results-main{

        text-align:center;

    }

    .analysis-results-main
    .analysis-description{

        margin-left:auto;

        margin-right:auto;

        text-align:center;

    }

    .analysis-concern-grid{

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

    }

    .analysis-shelf-grid{

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

    }

    .analysis-goal-options{

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

    }

    .analysis-why-grid{

        grid-template-columns:1fr;

    }

}


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

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

    .analysis-header-inner{

        height:68px;

        padding:0 20px;

    }

    .analysis-logo{

        font-size:1.25rem;

    }

    .analysis-back{

        width:38px;

        height:38px;

        font-size:1rem;

    }

    .analysis-exit{

        font-size:.8rem;

    }

    .analysis-progress-section{

        padding:24px 20px 10px;

        overflow:hidden;

    }

    .analysis-progress-track{

        min-width:620px;

    }

    .analysis-progress-wrapper{

        overflow-x:auto;

        padding-bottom:4px;

    }

    .analysis-progress-labels{

        min-width:620px;

    }

    .analysis-progress-labels span{

        font-size:.5rem;

    }

    .analysis-screen-container{

        padding:30px 20px 60px;

    }

    .analysis-title{

        font-size:2.25rem;

        line-height:1.2;

    }

    .analysis-description{

        font-size:.92rem;

        line-height:1.75;

    }

    .analysis-character{

        height:280px;

    }

    .analysis-character img{

        max-width:320px;

    }

    .analysis-benefits{

        flex-direction:column;

        gap:10px;

    }

    .analysis-option-grid{

        grid-template-columns:1fr;

    }

    .skin-type-grid .analysis-choice{

        min-height:125px;

    }

    .skin-type-grid .analysis-choice-help{

        grid-column:auto;

        min-height:80px;

    }

    .skin-type-discovery{

        padding:22px 17px;

    }

    .analysis-small-options{

        grid-template-columns:1fr;

    }

    .analysis-concern-grid{

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

        gap:9px;

    }

    .concern-choice{

        min-height:57px;

        padding:12px 8px;

        font-size:.72rem;

    }

    .analysis-myth-card{

        padding:28px 20px;

    }

    .analysis-myth-card h2{

        font-size:1.3rem;

    }

    .analysis-myth-options{

        grid-template-columns:1fr;

    }

    .analysis-shelf-section{

        padding:22px 18px;

    }

    .analysis-shelf-grid{

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

    }

    .analysis-question-group{

        padding:21px 17px;

    }

    .analysis-experiment{

        padding:23px 18px;

    }

    .analysis-profile-section{

        padding:23px 18px;

    }

    .analysis-profile-options{

        grid-template-columns:1fr;

    }

    .analysis-goal-options{

        grid-template-columns:1fr 1fr;

    }

    .analysis-profile-preview{

        padding:23px 18px;

    }

    .analysis-results-layout{

        gap:25px;

    }

    .analysis-result-card{

        padding:20px;

    }

    .analysis-result-character{

        height:230px;

    }

    .analysis-help-section{

        flex-direction:column;

        padding:30px 22px 0;

        text-align:center;

    }

    .analysis-help-content{

        width:100%;

        padding-bottom:0;

        text-align:center;

    }

    .analysis-help-content > p:not(.analysis-tag){

        margin-left:auto;

        margin-right:auto;

    }

    .analysis-help-character{

        width:210px;

        height:180px;

    }

    .analysis-why-section{

        padding:60px 20px;

    }

}


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

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

    .analysis-header-inner{

        padding:0 16px;

    }

    .analysis-screen-container{

        padding-inline:16px;

    }

    .analysis-progress-section{

        padding-inline:16px;

    }

    .analysis-title{

        font-size:1.95rem;

    }

    .analysis-tag{

        font-size:.62rem;

        letter-spacing:2px;

        padding:8px 13px;

    }

    .analysis-character{

        height:240px;

    }

    .analysis-character img{

        max-width:270px;

    }

    .analysis-welcome-note{

        padding:17px 20px;

    }

    .analysis-primary-btn,
    .analysis-secondary-btn{

        width:100%;

        min-width:0;

        height:54px;

        font-size:.88rem;

    }

    .analysis-concern-grid{

        grid-template-columns:1fr 1fr;

    }

    .analysis-shelf-grid{

        grid-template-columns:1fr 1fr;

    }

    .analysis-goal-options{

        grid-template-columns:1fr;

    }

    .analysis-result-card{

        gap:13px;

        padding:17px;

    }

    .analysis-result-card-icon{

        width:40px;

        height:40px;

    }

    .analysis-result-card h2{

        font-size:1.25rem;

    }

    .analysis-result-card p{

        font-size:.75rem;

    }

    .analysis-top-concerns,
    .analysis-result-block{

        padding:20px;

    }

    .analysis-routine-tabs{

        grid-template-columns:1fr;

    }

    .analysis-help-section{

        margin-top:50px;

        border-radius:27px;

    }

    .analysis-help-content h2{

        font-size:1.7rem;

    }

    .analysis-help-character{

        width:180px;

        height:155px;

    }

    .analysis-why-grid{

        gap:13px;

    }

    .analysis-why-item{

        padding:18px;

    }

    .analysis-closing{

        padding:45px 20px 65px;

    }

}


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

.analysis-back:focus-visible,
.analysis-exit:focus-visible,
.analysis-primary-btn:focus-visible,
.analysis-secondary-btn:focus-visible,
.analysis-text-button:focus-visible,
.analysis-routine-tab:focus-visible,
.analysis-choice:focus-visible{

    outline:2px solid var(--clr-primary-light);

    outline-offset:3px;

}


/* =========================================================
        REDUCED MOTION
========================================================= */

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

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}
/* =====================================================
   CONDITIONAL CONCERN SWITCHER
===================================================== */

.conditional-concern-switcher {
    margin-bottom: 58px;
}


.conditional-concern-switcher-label {
    margin: 0 0 12px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0.02em;

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

    margin-bottom: 30px;
}


.conditional-concern-switcher-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.conditional-concern-switch {
    border: 1px solid var(--clr-border, #eadde5);
    background: #fff;
   color: var(--clr-heading);
    border-radius: 999px;
    padding: 15px 16px;

    font-size: var(--ff-heading);
   
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.conditional-concern-switch:hover {
    transform: translateY(-1px);
}


.conditional-concern-switch.active {
    background: var(--clr-primary-light, #f7e6ef);
    border-color: var(--clr-primary, #c98baa);

    
}


/* =====================================================
   CONDITIONAL QUESTION AREA
===================================================== */

#conditionalConcernQuestions {
    scroll-margin-top: 100px;
}


.conditional-concern-section {
    animation: conditionalConcernFadeIn 0.25s ease;
}


@keyframes conditionalConcernFadeIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================================
   STEP 3 — CONDITIONAL CONCERN HEADINGS
========================================================= */

.conditional-concern-section {
    margin-top: 42px;
}


/* -----------------------------------------
   CONCERN HEADER
----------------------------------------- */

.conditional-concern-heading {
    margin-bottom: 28px;
    text-align: left;
}


/* Small eyebrow */

.conditional-concern-heading .analysis-clue-label {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

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


/* Main concern title */

.conditional-concern-heading h3 {
    margin: 0;

    font-size:2rem;
    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -0.025em;

    color: var(--clr-text-dark);
}


/* -----------------------------------------
   INDIVIDUAL QUESTIONS
----------------------------------------- */

.conditional-concern-question {
    margin-top: 30px;
}


.conditional-concern-question h4 {
    margin: 0 0 19px;

    font-size: 18px;
    line-height: 1.45;

    font-weight: 600;

    color: var(--clr-text-dark);

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

    letter-spacing: -0.01em;
}


/* -----------------------------------------
   QUESTION NUMBER / CATEGORY
----------------------------------------- */

.conditional-concern-question h4::before {
    content: "QUESTION";

    display: block;

    margin-bottom: 6px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

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


/* -----------------------------------------
   SEPARATION BETWEEN QUESTIONS
----------------------------------------- */

.conditional-concern-question + 
.conditional-concern-question {
    padding-top: 30px;

    border-top: 1px solid
        rgba(120, 90, 110, 0.10);
}