/* =========================================================
        ASK MIMII — ASK QUESTION PAGE
        FULL CSS
        MATCHED TO THE EXACT HTML STRUCTURE
========================================================= */


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

.ask-question-page{

    width:100%;

    background:var(--clr-white);

    color:var(--clr-heading);

    overflow:hidden;

}


/* =========================================================
        SECTION 1 — HERO
========================================================= */

.ask-question-hero{

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

    padding:120px 4.5% 100px;

    display:flex;

    align-items:center;

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

}


/* =========================================================
        MAIN HERO CONTAINER
========================================================= */

.ask-question-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:70px;

    align-items:center;

}


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

.ask-question-left{

    width:100%;

    max-width:680px;

}


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

.ask-question-tag{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:22px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.82rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}


/* =========================================================
        MAIN TITLE
========================================================= */

.ask-question-title{

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

    line-height:1.08;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}


/* =========================================================
        SUBTITLE
========================================================= */

.ask-question-subtitle{

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

    font-size:1.2rem;

    line-height:1.6;

    font-weight:500;

    color:var(--clr-primary);

    margin-bottom:18px;

}


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

.ask-question-description{

    max-width:560px;

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

    font-size:1.02rem;

    line-height:1.85;

    color:var(--clr-text);

    margin-bottom:35px;

}


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

.ask-form-card{

    width:100%;

    max-width:680px;

    padding:36px;

    background:var(--clr-white);

    border-radius:34px;

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

    border:1px solid rgba(0,0,0,.025);

}


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

.ask-form-header{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:28px;

}


.ask-form-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:1rem;

}


.ask-form-header h2{

    font-size:1.6rem;

    line-height:1.2;

    font-weight:500;

    color:var(--clr-heading);

}


/* =========================================================
        FORM ROW
========================================================= */

.ask-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:20px;

}


/* =========================================================
        FIELD
========================================================= */

.ask-field{

    width:100%;

}


.ask-field label{

    display:block;

    margin-bottom:9px;

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

    font-size:.88rem;

    font-weight:600;

    color:var(--clr-heading);

}


.ask-field label span{

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

}


.ask-field label small{

    font-size:.72rem;

    font-weight:400;

    color:#9e969e;

}


/* =========================================================
        INPUT WRAPPER
========================================================= */

.ask-input-wrapper{

    position:relative;

    width:100%;

}


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

.ask-input-icon{

    position:absolute;

    left:17px;

    top:50%;

    transform:translateY(-50%);

    color:var(--clr-primary);

    font-size:.85rem;

    pointer-events:none;

}


/* =========================================================
        INPUT
========================================================= */

.ask-input-wrapper input{

    width:100%;

    height:55px;

    padding:0 18px 0 45px;

    border:1px solid #eadfe8;

    border-radius:17px;

    outline:none;

    background:#fff;

    color:var(--clr-heading);

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

    font-size:.92rem;

    transition:.35s ease;

}


.ask-input-wrapper input::placeholder{

    color:#aaa2aa;

}


.ask-input-wrapper input:hover{

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

}


.ask-input-wrapper input:focus{

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

    box-shadow:
        0 0 0 4px rgba(221,183,218,.15);

}


/* =========================================================
        QUESTION FIELD
========================================================= */

.ask-question-field{

    margin-bottom:20px;

}


/* =========================================================
        TEXTAREA WRAPPER
========================================================= */

.ask-textarea-wrapper{

    position:relative;

}


/* =========================================================
        TEXTAREA
========================================================= */

.ask-textarea-wrapper textarea{

    width:100%;

    min-height:155px;

    padding:17px 18px 35px;

    resize:vertical;

    border:1px solid #eadfe8;

    border-radius:18px;

    outline:none;

    background:#fff;

    color:var(--clr-heading);

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

    font-size:.92rem;

    line-height:1.7;

    transition:.35s ease;

}


.ask-textarea-wrapper textarea::placeholder{

    color:#aaa2aa;

}


.ask-textarea-wrapper textarea:hover{

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

}


.ask-textarea-wrapper textarea:focus{

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

    box-shadow:
        0 0 0 4px rgba(221,183,218,.15);

}


/* =========================================================
        CHARACTER COUNT
========================================================= */

.ask-character-count{

    position:absolute;

    right:16px;

    bottom:12px;

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

    font-size:.7rem;

    color:#9d959d;

    pointer-events:none;

}


/* =========================================================
        MEDICAL NOTICE
========================================================= */

.ask-medical-notice{

    display:flex;

    align-items:flex-start;

    gap:11px;

    padding:15px 17px;

    margin-bottom:22px;

    border-radius:18px;

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

}


.ask-notice-icon{

    flex-shrink:0;

    margin-top:2px;

    color:var(--clr-primary);

    font-size:.85rem;

}


.ask-medical-notice p{

    margin:0;

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

    font-size:.73rem;

    line-height:1.65;

    color:var(--clr-text);

}


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

.ask-submit-btn{

    width:100%;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    border-radius:999px;

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

    color:var(--clr-white);

    cursor:pointer;

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

    font-size:1rem;

    font-weight:500;

    transition:.35s ease;

}


.ask-submit-btn:hover{

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

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(210,170,210,.22);

}


.ask-submit-btn:active{

    transform:translateY(-1px);

}


/* =========================================================
        PRIVACY
========================================================= */

.ask-privacy{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:14px;

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

    font-size:.7rem;

    color:#9b939b;

}


.ask-privacy i{

    color:var(--clr-primary);

}


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

.ask-question-right{

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

}


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

.ask-mimii-visual{

    position:relative;

    width:100%;

    min-height:530px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =========================================================
        SOFT BACKGROUND GLOW
========================================================= */

.ask-mimii-visual::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:60%;

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

    filter:blur(35px);

    animation:ask-mimii-pulse 6s ease-in-out infinite;

}


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

.ask-mimii-visual img{

    position:relative;

    z-index:2;

    width:550px;

    max-width:100%;

    height:auto;

    display:block;

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

}


/* =========================================================
        SKIN NOTE
========================================================= */

.ask-skin-note{

    position:absolute;

    z-index:5;

    top:45px;

    right:5%;

    width:100px;

    min-height:60px;

    padding:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff7df;

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

    transform:rotate(4deg);

}


/* tape */

.ask-skin-note::before{

    content:"";

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%);

    width:38px;

    height:12px;

    background:#e2cbbd;

    opacity:.8;

}


.ask-skin-note p{

    margin:0;

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

    font-size:.75rem;

    line-height:1.55;

    font-weight:600;

    color:#756b68;

}


.ask-skin-note span{

    margin-top:7px;

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

    font-size:1rem;

}


/* =========================================================
        HOW IT WORKS CARD
========================================================= */

.ask-how-card{

    width:100%;

    max-width:460px;

    margin-top:-30px;

    position:relative;

    z-index:4;

    padding:32px;

    background:var(--clr-white);

    border-radius:30px;

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

}


.ask-how-card h2{

    font-size:1.55rem;

    line-height:1.2;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:25px;

}


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

.ask-how-step{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:20px;

}


.ask-how-step:last-of-type{

    margin-bottom:22px;

}


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

.ask-how-icon{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

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

    font-size:.9rem;

    font-weight:600;

}


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

.ask-how-content h3{

    margin-bottom:5px;

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

    font-size:.95rem;

    line-height:1.4;

    font-weight:600;

    color:var(--clr-heading);

}


.ask-how-content p{

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

    font-size:.8rem;

    line-height:1.65;

    color:var(--clr-text);

}


/* =========================================================
        HOW ENDING
========================================================= */

.ask-how-ending{

    margin:3px 0 0;

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

    font-size:1.15rem;

    font-weight:500;

    font-style:italic;

    color:var(--clr-primary);

}


/* =========================================================
        SECTION 2 — COMMUNITY
========================================================= */

.ask-community{

    padding:100px 5%;

    background:var(--clr-white);

}


.ask-community-container{

    width:100%;

    max-width:1250px;

    margin:0 auto;

}


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

.ask-community-header{

    max-width:900px;

    margin:0 auto 55px;

    text-align:center;

}


.ask-community-tag{

    display:inline-block;

    margin-bottom:18px;

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

    font-size:.82rem;

    font-weight:600;

    letter-spacing:3px;

    color:var(--clr-primary);

}


.ask-community-title{

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

    line-height:1.18;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}


.ask-community-description{

    max-width:600px;

    margin:0 auto;

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

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


/* =========================================================
        SORT
========================================================= */

.ask-sort{

    display:flex;

    justify-content:flex-end;

    margin-top:25px;

    margin-bottom: 25px;

}


.ask-sort select{

    height:44px;

    width: 150px;

    padding:1px 18px;

    border:1px solid #eadfe8;

    border-radius:999px;

    outline:none;

    background:var(--clr-white);

    color:var(--clr-text);

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

    font-size:.8rem;

    cursor:pointer;

    transition:.3s ease;

}


.ask-sort select:hover{

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

}


.ask-sort select:focus{

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

}


/* =========================================================
        COMMUNITY QUESTION CARD
========================================================= */

.ask-community-question{

    display:grid;

    grid-template-columns:165px 1fr;

    width:100%;

    background:var(--clr-white);

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

    border-radius:30px;

    overflow:hidden;

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

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

}


.ask-community-question + .ask-community-question{

    margin-top:22px;

}


.ask-community-question:hover{

    transform:translateY(-6px);

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

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

}


/* =========================================================
        COMMUNITY USER
========================================================= */

.ask-community-user{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:28px 20px;

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

}


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

.ask-avatar{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:10px;

    border-radius:50%;

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

    color:var(--clr-white);

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

    font-size:1rem;

    font-weight:600;

}


/* =========================================================
        USER INFO
========================================================= */

.ask-user-info{

    text-align:center;

}


.ask-user-info h3{

    margin-bottom:4px;

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

    font-size:.88rem;

    font-weight:600;

    color:var(--clr-heading);

}


.ask-user-info time{

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

    font-size:.68rem;

    color:#9e969e;

}


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

.ask-community-content{

    padding:30px 35px;

}


/* =========================================================
        QUESTION TOGGLE
========================================================= */

.ask-question-toggle{

    width:100%;

    padding:0;

    border:none;

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    cursor:pointer;

    text-align:left;

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

    font-size:1.02rem;

    line-height:1.6;

    font-weight:600;

    color:var(--clr-heading);

}


.ask-toggle-arrow{

    flex-shrink:0;

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--clr-primary);

    font-size:.85rem;

    transition:.35s ease;

}


/* =========================================================
        OPEN QUESTION
========================================================= */

.ask-community-question.active
.ask-toggle-arrow{

    transform:rotate(180deg);

}


.ask-community-question.active
.ask-toggle-arrow{

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

    color:var(--clr-white);

}


/* =========================================================
        ANSWER
========================================================= */

.ask-answer{

    display:none;

    padding-top:20px;

    margin-top:18px;

    border-top:1px solid #eee6ed;

}


.ask-community-question.active
.ask-answer{

    display:block;

}


/* =========================================================
        ANSWER LABEL
========================================================= */

.ask-answer-label{

    display:inline-block;

    padding:7px 14px;

    margin-bottom:11px;

    border-radius:999px;

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

    color:var(--clr-primary);

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

    font-size:.7rem;

    font-weight:600;

}


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

.ask-answer p{

    max-width:900px;

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

    font-size:.9rem;

    line-height:1.85;

    color:var(--clr-text);

}


/* =========================================================
        SECTION 3 — BOTTOM CTA
========================================================= */

.ask-question-bottom{

    padding:0 5% 100px;

    background:var(--clr-white);

}


.ask-question-bottom-container{

    position:relative;

    width:100%;

    max-width:1250px;

    min-height:260px;

    margin:auto;

    padding:30px 60px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:34px;

    background:linear-gradient(
        135deg,
        #fff7fb 0%,
        #f9f1fc 100%
    );

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

}


/* =========================================================
        BOTTOM MIMII
========================================================= */

.ask-bottom-mimii{

    width:270px;

    height:230px;

    align-self:flex-end;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    flex-shrink:0;

}


.ask-bottom-mimii img{

    width:240px;

    max-width:100%;

    height:auto;

    display:block;

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

}


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

.ask-bottom-content{

    flex:1;

    padding-left:35px;

}


.ask-bottom-content h2{

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

    line-height:1.2;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:12px;

}


.ask-bottom-content h2 span{

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

}


.ask-bottom-content p{

    max-width:520px;

    margin-bottom:22px;

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

    font-size:.95rem;

    line-height:1.7;

    color:var(--clr-text);

}


/* =========================================================
        NEW QUESTION BUTTON
========================================================= */

.ask-new-question-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:54px;

    padding:0 28px;

    border-radius:999px;

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

    color:var(--clr-white);

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

    font-size:.9rem;

    font-weight:500;

    transition:.35s ease;

}


.ask-new-question-btn:hover{

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

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(210,170,210,.22);

}


.ask-new-question-btn span{

    transition:.3s ease;

}


.ask-new-question-btn:hover span{

    transform:translateX(5px);

}


/* =========================================================
        ENVELOPE
========================================================= */

.ask-bottom-envelope{

    width:220px;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


.ask-envelope-paper{

    width:100px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--clr-white);

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

    font-size:2rem;

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

    transform:rotate(8deg);

}


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

@keyframes ask-mimii-float{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


@keyframes ask-mimii-pulse{

    0%,
    100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}


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

@media(max-width:1024px){

    .ask-question-hero{

        padding:110px 40px 90px;

    }


    .ask-question-container{

        grid-template-columns:1fr;

        gap:65px;

    }


    .ask-question-left{

        max-width:760px;

        margin:auto;

    }


    .ask-form-card{

        max-width:760px;

    }


    .ask-question-right{

        max-width:700px;

        margin:auto;

    }


    .ask-mimii-visual{

        min-height:400px;

    }


    .ask-mimii-visual img{

        width:400px;

    }


    .ask-how-card{

        max-width:520px;

    }


    .ask-community{

        padding:90px 40px;

    }


    .ask-question-bottom{

        padding-inline:40px;

    }


    .ask-bottom-envelope{

        width:170px;

    }

}


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

@media(max-width:768px){

    .ask-question-hero{

        min-height:auto;

        padding:90px 20px 80px;

    }


    .ask-question-container{

        gap:50px;

    }


    .ask-question-left{

        text-align:center;

    }


    .ask-question-tag{

        font-size:.75rem;

        letter-spacing:2.5px;

    }


    .ask-question-title{

        font-size:2.4rem;

        line-height:1.15;

    }


    .ask-question-subtitle{

        font-size:1.05rem;

    }


    .ask-question-description{

        font-size:.95rem;

        line-height:1.75;

        margin-inline:auto;

    }


    .ask-form-card{

        padding:28px;

        border-radius:28px;

        text-align:left;

    }


    .ask-form-row{

        grid-template-columns:1fr;

        gap:18px;

    }


    .ask-mimii-visual{

        min-height:420px;

    }


    .ask-mimii-visual img{

        width:390px;

    }


    .ask-mimii-visual::before{

        width:400px;

        height:400px;

    }


    .ask-skin-note{

        top:25px;

        right:0;

    }


    .ask-how-card{

        margin-top:-20px;

        padding:28px;

        border-radius:28px;

    }


    .ask-community{

        padding:80px 20px;

    }


    .ask-community-header{

        margin-bottom:45px;

    }


    .ask-community-title{

        font-size:2.2rem;

    }


    .ask-community-description{

        font-size:.95rem;

    }


    .ask-sort{

        justify-content:center;

    }


    .ask-community-question{

        grid-template-columns:1fr;

        border-radius:27px;

    }


    .ask-community-user{

        flex-direction:row;

        justify-content:flex-start;

        gap:12px;

        padding:18px 22px;

    }


    .ask-avatar{

        width:45px;

        height:45px;

        margin-bottom:0;

    }


    .ask-user-info{

        text-align:left;

    }


    .ask-community-content{

        padding:25px;

    }


    .ask-question-toggle{

        font-size:.92rem;

        gap:15px;

    }


    .ask-question-bottom{

        padding:0 20px 80px;

    }


    .ask-question-bottom-container{

        min-height:auto;

        padding:35px 25px 0;

        flex-direction:column;

        align-items:flex-start;

        border-radius:30px;

    }


    .ask-bottom-mimii{

        order:3;

        width:100%;

        height:180px;

        justify-content:center;

    }


    .ask-bottom-mimii img{

        width:210px;

    }


    .ask-bottom-content{

        width:100%;

        padding-left:0;

    }


    .ask-bottom-envelope{

        position:absolute;

        width:100px;

        height:100px;

        top:15px;

        right:15px;

    }


    .ask-envelope-paper{

        width:65px;

        height:50px;

        font-size:1.3rem;

    }

}


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

@media(max-width:480px){

    .ask-question-title{

        font-size:2rem;

    }


    .ask-question-subtitle{

        font-size:.98rem;

    }


    .ask-question-description{

        font-size:.88rem;

    }


    .ask-form-card{

        padding:22px;

        border-radius:25px;

    }


    .ask-form-header{

        margin-bottom:23px;

    }


    .ask-form-header h2{

        font-size:1.4rem;

    }


    .ask-form-icon{

        width:38px;

        height:38px;

    }


    .ask-input-wrapper input{

        height:52px;

        border-radius:14px;

        font-size:.85rem;

    }


    .ask-textarea-wrapper textarea{

        min-height:135px;

        border-radius:15px;

        font-size:.85rem;

    }


    .ask-medical-notice{

        padding:13px;

    }


    .ask-medical-notice p{

        font-size:.68rem;

    }


    .ask-submit-btn{

        height:52px;

        font-size:.9rem;

    }


    .ask-privacy{

        font-size:.65rem;

        line-height:1.5;

        text-align:center;

    }


    .ask-mimii-visual{

        min-height:350px;

    }


    .ask-mimii-visual img{

        width:290px;

    }


    .ask-mimii-visual::before{

        width:320px;

        height:320px;

    }


    .ask-skin-note{

        width:95px;

        min-height:90px;

        padding:13px;

    }


    .ask-skin-note p{

        font-size:.63rem;

    }


    .ask-how-card{

        padding:24px;

        border-radius:25px;

    }


    .ask-how-card h2{

        font-size:1.35rem;

    }


    .ask-how-step{

        gap:11px;

    }


    .ask-how-icon{

        width:36px;

        height:36px;

    }


    .ask-how-content h3{

        font-size:.88rem;

    }


    .ask-how-content p{

        font-size:.74rem;

    }


    .ask-how-ending{

        font-size:1rem;

    }


    .ask-community-title{

        font-size:1.9rem;

    }


    .ask-community-tag{

        font-size:.7rem;

        letter-spacing:2px;

    }


    .ask-community-description{

        font-size:.88rem;

    }


    .ask-community-question{

        border-radius:23px;

    }


    .ask-community-user{

        padding:16px 18px;

    }


    .ask-community-content{

        padding:21px;

    }


    .ask-question-toggle{

        font-size:.85rem;

        line-height:1.55;

    }


    .ask-toggle-arrow{

        width:27px;

        height:27px;

        font-size:.75rem;

    }


    .ask-answer p{

        font-size:.8rem;

        line-height:1.75;

    }


    .ask-question-bottom-container{

        padding:30px 22px 0;

        border-radius:27px;

    }


    .ask-bottom-content h2{

        font-size:1.8rem;

    }


    .ask-bottom-content p{

        font-size:.85rem;

    }


    .ask-new-question-btn{

        width:100%;

        height:52px;

        font-size:.85rem;

    }


    .ask-bottom-mimii{

        height:160px;

    }


    .ask-bottom-mimii img{

        width:190px;

    }

}

/* =========================================================
        FORM SUCCESS / ERROR MESSAGE
========================================================= */

.ask-form-message {

    display: none;

    margin-bottom: 22px;

    padding: 15px 18px;

    border-radius: 18px;

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

    font-size: .9rem;

    line-height: 1.6;

}


/* SUCCESS */

.ask-form-message.success {

    display: block;

    background: #f3faf5;

    border: 1px solid #d8ebdd;

    color: #4d8060;

}


/* ERROR */

.ask-form-message.error {

    display: block;

    background: #fff5f6;

    border: 1px solid #f0d9dd;

    color: #a45c66;

}

/* =========================================================
        EMPTY COMMUNITY STATE
========================================================= */

.ask-community-empty {

    width: 100%;

    padding: 55px 30px;

    margin-top: 10px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #fffafd,
            #faf7fb
        );

    border: 1px solid #eee3eb;

    border-radius: 28px;

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

}


.ask-community-empty p {

    margin: 0;

    color: var(--clr-text);

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

    font-size: 1rem;

    line-height: 1.8;
}