.advisor-page {
    background: #f7f5f1;
}

.advisor-hero {
    padding: 70px 0;

    background: #111111;
    color: #ffffff;
}

.advisor-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        260px;

    align-items: center;

    gap: 70px;
}

.advisor-kicker {
    display: block;

    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .13em;
    text-transform: uppercase;

    opacity: .65;
}

.advisor-hero h1 {
    max-width: 900px;

    margin: 0 0 22px;

    font-size:
        clamp(38px, 5vw, 70px);

    line-height: .98;
    font-weight: 400;

    text-transform: uppercase;
}

.advisor-hero p {
    max-width: 760px;

    margin: 0;

    font-size: 13px;
    line-height: 1.7;

    opacity: .72;
}

.advisor-hero__badge {
    display: flex;

    width: 230px;
    height: 230px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border:
        1px solid
        rgba(255, 255, 255, .26);

    border-radius: 50%;

    text-align: center;
}

.advisor-hero__badge strong {
    font-size: 46px;
    line-height: 1;
    font-weight: 500;
}

.advisor-hero__badge span {
    margin-top: 14px;

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

    text-transform: uppercase;
}


.advisor-workspace {
    padding:
        62px 0 100px;
}

.advisor-progress {
    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);

    align-items: end;

    gap: 30px;

    margin-bottom: 40px;
}

.advisor-progress > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.advisor-progress span {
    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: .08em;

    opacity: .5;
}

.advisor-progress strong {
    font-size: 14px;
    font-weight: 500;
}

.advisor-progress__track {
    height: 2px;

    background:
        rgba(0, 0, 0, .12);
}

.advisor-progress__track i {
    display: block;

    width: 20%;
    height: 100%;

    background: #111111;

    transition:
        width .25s ease;
}


.advisor-form {
    padding: 44px;

    background: #ffffff;
}

.advisor-step__number {
    display: block;

    margin-bottom: 14px;

    font-size: 14px;

    letter-spacing: .12em;

    opacity: .42;
}

.advisor-step h2 {
    max-width: 850px;

    margin:
        0 0 12px;

    font-size:
        clamp(27px, 3.5vw, 45px);

    line-height: 1.05;
    font-weight: 400;
}

.advisor-step > p {
    max-width: 700px;

    margin:
        0 0 30px;

    font-size: 12px;
    line-height: 1.6;

    opacity: .62;
}


.advisor-options {
    display: grid;

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

    gap: 10px;
}

.advisor-options label {
    position: relative;

    cursor: pointer;
}

.advisor-options input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.advisor-options label > span {
    display: flex;

    min-height: 100px;

    flex-direction: column;
    justify-content: center;

    padding:
        18px 20px;

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

    transition:
        border-color .15s ease,
        background .15s ease;
}

.advisor-options label:hover > span {
    border-color:
        rgba(0, 0, 0, .45);
}

.advisor-options input:checked + span {
    border-color: #111111;

    background: #f2eee8;
}

.advisor-options strong {
    margin-bottom: 5px;

    font-size: 14px;
    font-weight: 500;
}

.advisor-options small {
    font-size: 12px;
    line-height: 1.5;

    opacity: .58;
}


.advisor-warning {
    display: grid;

    gap: 9px;

    margin-top: 28px;

    padding: 20px;

    background: #faf8f4;
}

.advisor-warning > strong {
    margin-bottom: 5px;

    font-size: 10px;
}

.advisor-warning label {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 10px;
    line-height: 1.45;
}


.advisor-goal {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 26px;
}

.advisor-goal > span {
    font-size: 10px;
    font-weight: 500;
}

.advisor-goal textarea {
    width: 100%;

    min-height: 120px;

    padding: 14px;

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

    border-radius: 0;

    resize: vertical;

    font: inherit;
    font-size: 11px;

    outline: none;
}

.advisor-goal textarea:focus {
    border-color: #111111;
}

.advisor-goal small {
    font-size: 9px;

    opacity: .5;
}


.advisor-actions {
    display: flex;

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

    gap: 18px;

    margin-top: 34px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(0, 0, 0, .08);
}

.advisor-back {
    border: 0;

    background: transparent;

    padding: 10px 0;

    font: inherit;
    font-size: 12px;

    cursor: pointer;

    text-decoration: underline;
    text-underline-offset: 4px;
}

.advisor-form__feedback {
    margin-top: 20px;

    padding: 12px 14px;

    background: #f4e9e6;

    color: #8c3b33;

    font-size: 10px;
    line-height: 1.5;
}


.advisor-result {
    margin-top: 30px;
}

.advisor-result__intro {
    padding: 38px;

    background: #111111;
    color: #ffffff;
}

.advisor-result__intro span {
    display: block;

    margin-bottom: 13px;

    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: .11em;

    opacity: .55;
}

.advisor-result__intro h2 {
    max-width: 950px;

    margin:
        0 0 17px;

    font-size:
        clamp(30px, 4vw, 50px);

    font-weight: 400;
    line-height: 1.05;
}

.advisor-result__intro p {
    max-width: 850px;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    opacity: .72;
}


.advisor-routine {
    margin-top: 1px;

    padding: 34px;

    background: #ffffff;
}

.advisor-routine h3 {
    margin:
        0 0 22px;

    font-size: 22px;
    font-weight: 400;
}

.advisor-routine__item {
    display: grid;

    grid-template-columns:
        46px
        170px
        minmax(0, 1fr);

    gap: 20px;

    padding:
        18px 0;

    border-top:
        1px solid
        rgba(0, 0, 0, .09);
}

.advisor-routine__item > b {
    font-size: 14px;

    opacity: .45;
}

.advisor-routine__item > strong {
    font-size: 14px;
    font-weight: 500;
}

.advisor-routine__item p {
    margin: 0;

    font-size: 14px;
    line-height: 1.55;

    opacity: .68;
}

.advisor-routine__item small {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    line-height: 1.5;
}


.advisor-products {
    display: grid;

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

    gap: 12px;

    margin-top: 12px;
}

.advisor-product {
    display: flex;

    min-width: 0;

    flex-direction: column;

    padding: 14px;

    background: #ffffff;
}

.advisor-product__image {
    display: block;

    aspect-ratio: 1 / 1;

    margin-bottom: 16px;

    overflow: hidden;

    background: #f4f2ee;
}

.advisor-product__image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.advisor-product__type {
    margin-bottom: 6px;

    font-size: 12px;

    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .45;
}

.advisor-product h3 {
    min-height: 42px;

    margin:
        0 0 9px;

    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
}

.advisor-product h3 a {
    color: inherit;

    text-decoration: none;
}

.advisor-product__description {
    min-height: 48px;

    margin:
        0 0 16px;

    font-size: 12px;
    line-height: 1.5;

    opacity: .62;
}

.advisor-product__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: auto;
}

.advisor-product__price {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.advisor-product__price strong {
    font-size: 16px;
}

.advisor-product__price del {
    font-size: 12px;

    opacity: .45;
}

.advisor-product button {
    min-height: 38px;

    padding:
        0 12px;

    border:
        1px solid #111111;

    background: #111111;
    color: #ffffff;

    font: inherit;
    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: .05em;

    cursor: pointer;
}

.advisor-product button:disabled {
    opacity: .5;
}


.advisor-notes {
    margin-top: 12px;

    padding: 26px;

    background: #f2eee8;
}

.advisor-notes strong {
    display: block;

    margin-bottom: 10px;

    font-size: 16px;
}

.advisor-notes ul {
    margin: 0;

    padding-left: 17px;
}

.advisor-notes li {
    margin: 6px 0;

    font-size: 13px;
    line-height: 1.55;
}


.advisor-specialist {
    padding: 38px;

    background: #f2eee8;
}

.advisor-specialist h2 {
    max-width: 850px;

    margin:
        0 0 16px;

    font-size:
        clamp(28px, 4vw, 48px);

    font-weight: 400;
    line-height: 1.05;
}

.advisor-specialist p {
    max-width: 800px;

    font-size: 11px;
    line-height: 1.7;
}


.advisor-disclaimer {
    display: grid;

    grid-template-columns:
        120px
        minmax(0, 620px);

    gap: 25px;

    margin-top: 28px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(0, 0, 0, .12);
}

.advisor-disclaimer strong {
    font-size: 16px;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.advisor-disclaimer p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    opacity: .55;
}


@media (max-width: 1100px) {
    .advisor-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 800px) {

    .advisor-hero {
        padding: 44px 0;
    }

    .advisor-hero__grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .advisor-hero__badge {
        justify-self: start;

        width: 150px;
        height: 150px;
    }

    .advisor-hero__badge strong {
        font-size: 34px;
    }

    .advisor-progress {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .advisor-form {
        padding: 24px;
    }

    .advisor-options {
        grid-template-columns: 1fr;
    }

    .advisor-routine__item {
        grid-template-columns:
            35px
            minmax(0, 1fr);
    }

    .advisor-routine__item > div {
        grid-column: 2;
    }

    .advisor-disclaimer {
        grid-template-columns: 1fr;

        gap: 8px;
    }

}


@media (max-width: 560px) {

    .advisor-workspace {
        padding:
            36px 0 75px;
    }

    .advisor-products {
        grid-template-columns: 1fr;
    }

    .advisor-actions {
        justify-content:
            space-between;
    }

    .advisor-result__intro,
    .advisor-routine,
    .advisor-specialist {
        padding: 24px;
    }

}


/* =========================================================
   AI ADVISOR LOADER R1.1
   ========================================================= */

.advisor-loading {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr);

    align-items: center;

    gap: 42px;

    margin-top: 30px;

    padding:
        46px;

    background: #111111;
    color: #ffffff;
}

.advisor-loading[hidden] {
    display: none;
}


.advisor-loading__visual {
    display: flex;

    align-items: center;
    justify-content: center;
}


.advisor-loading__orb {
    position: relative;

    display: flex;

    width: 136px;
    height: 136px;

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

    gap: 7px;

    border:
        1px solid
        rgba(255, 255, 255, .22);

    border-radius: 50%;
}

.advisor-loading__orb::before,
.advisor-loading__orb::after {
    content: "";

    position: absolute;

    inset: -1px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius: 50%;

    animation:
        advisorPulse
        2.2s
        ease-out
        infinite;
}

.advisor-loading__orb::after {
    animation-delay:
        1.1s;
}


.advisor-loading__orb span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffffff;

    animation:
        advisorDot
        1.1s
        ease-in-out
        infinite;
}

.advisor-loading__orb span:nth-child(2) {
    animation-delay: .14s;
}

.advisor-loading__orb span:nth-child(3) {
    animation-delay: .28s;
}


.advisor-loading__kicker {
    display: block;

    margin-bottom: 13px;

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

    text-transform: uppercase;
    letter-spacing: .12em;

    opacity: .5;
}


.advisor-loading h2 {
    margin:
        0 0 13px;

    font-size:
        clamp(27px, 3.5vw, 44px);

    line-height: 1.05;
    font-weight: 400;
}


.advisor-loading__content > p {
    max-width: 640px;

    margin:
        0 0 26px;

    font-size: 11px;
    line-height: 1.65;

    opacity: .64;
}


.advisor-loading__steps {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px 22px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);
}


.advisor-loading__steps span {
    position: relative;

    padding-left: 13px;

    font-size: 9px;

    opacity: .3;

    transition:
        opacity .25s ease;
}


.advisor-loading__steps span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        currentColor;

    transform:
        translateY(-50%);
}


.advisor-loading__steps span.is-active {
    opacity: 1;
}


.advisor-form.is-loading {
    opacity: .48;

    pointer-events: none;

    transition:
        opacity .2s ease;
}


@keyframes advisorPulse {

    0% {
        transform: scale(.82);
        opacity: .5;
    }

    75%,
    100% {
        transform: scale(1.35);
        opacity: 0;
    }

}


@keyframes advisorDot {

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

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }

}


@media (max-width: 700px) {

    .advisor-loading {
        grid-template-columns:
            1fr;

        gap: 28px;

        padding: 30px 24px;
    }


    .advisor-loading__visual {
        justify-content:
            flex-start;
    }


    .advisor-loading__orb {
        width: 100px;
        height: 100px;
    }


    .advisor-loading__steps {
        flex-direction: column;

        gap: 10px;
    }

}


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

    .advisor-loading__orb::before,
    .advisor-loading__orb::after,
    .advisor-loading__orb span {
        animation: none;
    }

}