/* =========================================================
   MIRROR CONFIDENCE ASSESSMENT PAGE — COMPLETE PREMIUM STYLE
   File: assets/css/assessment.css
========================================================= */

/* =========================================================
   FALLBACK VARIABLES
========================================================= */

:root {
    --mmc-cream: #F6F3EE;
    --mmc-deep-teal: #0A3434;
    --mmc-green: #72AE44;
    --mmc-muted-gold: #C5A059;
    --mmc-text-secondary: #425B55;
    --mmc-text-muted: #687A74;
    --mmc-font-heading: 'Lora', serif;
    --mmc-font-body: 'Roboto', sans-serif;
}

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

body {
    background: var(--mmc-cream) !important;
}

.mmc-assessment-page {
    background: var(--mmc-cream) !important;
    padding: 0 0 34px !important;
    overflow: hidden !important;
}

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

.mmc-assessment-hero {
    position: relative !important;
    min-height: 330px !important;
    padding: 58px 0 82px !important;

    background:
        radial-gradient(circle at top left, rgba(114, 174, 68, 0.10), transparent 30%),
        linear-gradient(90deg, #F8FFF5 0%, #FFFDF8 54%, #EFE6D8 100%) !important;

    border-bottom: 1px solid rgba(10, 52, 52, 0.08) !important;
    overflow: hidden !important;
}

.mmc-assessment-hero::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;

    width: 210px !important;
    height: 250px !important;

    background: url('../img/shape/leaf-left.png') center/contain no-repeat !important;
    opacity: 0.20 !important;
    pointer-events: none !important;
}

/*.mmc-assessment-hero::after {
    content: "" !important;
    position: absolute !important;
    right: 80px !important;
    top: 48px !important;

    width: 420px !important;
    height: 240px !important;

    background:
        radial-gradient(circle at center, rgba(255,255,255,0.45), transparent 58%),
        url('../img/assessment/assessment-hero-decor.png') center/contain no-repeat !important;

    opacity: 0.92 !important;
    pointer-events: none !important;
}*/

.mmc-assessment-hero::after {
    content: "";
    position: absolute;
    right: 60px;
    top: 15px;
    bottom: 15px;

    width: 560px;
    height: auto;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.45),
            transparent 58%
        ),
        url('../img/assessment/assessment-hero-decor.png')
        center / auto 100% no-repeat;

    border-radius: 50px;
    opacity: 0.92;
    pointer-events: none;
}

.mmc-assessment-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 760px !important;
    margin-left: 160px !important;
}

.mmc-assessment-kicker {
    display: inline-block !important;
    margin-bottom: 10px !important;

    color: var(--mmc-green) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.mmc-assessment-hero h1 {
    margin: 0 0 14px !important;
    color: var(--mmc-deep-teal) !important;
    font-family: var(--mmc-font-heading) !important;
    font-size: clamp(38px, 3vw, 68px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.055em !important;
    font-weight: 700 !important;
}

.mmc-assessment-hero p {
    max-width: 780px !important;
    margin: 0 0 22px !important;

    color: var(--mmc-text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
}

.mmc-assessment-hero-points {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 28px !important;
}

.mmc-assessment-hero-point {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #1A302E !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.mmc-assessment-hero-point i {
    color: var(--mmc-deep-teal) !important;
    font-size: 19px !important;
}

/* =========================================================
   STEP JOURNEY BAR
========================================================= */

.mmc-assessment-journey {
    position: relative !important;
    z-index: 5 !important;

    max-width: 1180px !important;
    margin: -48px auto 34px !important;
    padding: 18px 28px !important;

    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(10, 52, 52, 0.08) !important;
    box-shadow: 0 16px 42px rgba(10, 52, 52, 0.08) !important;

    display: grid !important;
    grid-template-columns: 1fr 120px 1fr 120px 1fr 120px 1fr !important;
    align-items: center !important;
    gap: 0 !important;
}

.mmc-assessment-journey-step {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
}

.mmc-assessment-journey-number {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;

    background: #F1FAEF !important;
    border: 1px solid rgba(114, 174, 68, 0.28) !important;
    color: var(--mmc-green) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: var(--mmc-font-heading) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.mmc-assessment-journey-step.is-active .mmc-assessment-journey-number {
    background: var(--mmc-deep-teal) !important;
    border-color: var(--mmc-deep-teal) !important;
    color: #ffffff !important;
}

.mmc-assessment-journey-step h4 {
    margin: 0 0 2px !important;

    color: #1A302E !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.mmc-assessment-journey-step p {
    margin: 0 !important;

    color: var(--mmc-text-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.mmc-assessment-journey-line {
    height: 1px !important;
    border-top: 1px dashed rgba(114, 174, 68, 0.55) !important;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.mmc-assessment-layout {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) 280px !important;
    gap: 28px !important;
    align-items: stretch !important;

    max-width: 1320px !important;
    margin: 0 auto !important;
}

.mmc-assessment-side-card {
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(10, 52, 52, 0.08) !important;
    box-shadow: 0 18px 46px rgba(10, 52, 52, 0.07) !important;
}

/* =========================================================
   LEFT SUPPORT CARD
========================================================= */

.mmc-assessment-start-card {
    padding: 30px 24px 26px !important;
    text-align: left !important;

    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 34%),
        linear-gradient(180deg, #FFFDF8 0%, #F8FFF5 100%) !important;
}

.mmc-assessment-start-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 22px !important;
    border-radius: 50% !important;

    background: rgba(114, 174, 68, 0.13) !important;
    color: var(--mmc-green) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 26px !important;
}

.mmc-assessment-start-card h3 {
    margin: 0 0 14px !important;

    color: var(--mmc-deep-teal) !important;
    font-family: var(--mmc-font-heading) !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
}

.mmc-assessment-start-card p {
    margin: 0 0 15px !important;

    color: var(--mmc-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
}

.mmc-assessment-start-list {
    margin-top: 22px !important;
    display: grid !important;
    gap: 13px !important;
}

.mmc-assessment-start-list-item {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: flex-start !important;

    color: var(--mmc-deep-teal) !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

.mmc-assessment-start-list-item i {
    color: var(--mmc-green) !important;
    font-size: 16px !important;
    margin-top: 2px !important;
}

.mmc-assessment-safe-box {
    margin-top: 28px !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;

    background: #F1FAEF !important;
    border: 1px solid rgba(114, 174, 68, 0.20) !important;

    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

.mmc-assessment-safe-box i {
    color: var(--mmc-green) !important;
    font-size: 22px !important;
}

.mmc-assessment-safe-box h4 {
    margin: 0 0 2px !important;
    color: var(--mmc-deep-teal) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.mmc-assessment-safe-box p {
    margin: 0 !important;
    color: var(--mmc-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

/* =========================================================
   CENTER QUESTION CARD
========================================================= */

.mmc-assessment-main-card {
    min-height: 350px !important;
    padding: 28px 30px 24px !important;
    border-radius: 22px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(10, 52, 52, 0.08) !important;
    box-shadow: 0 18px 46px rgba(10, 52, 52, 0.07) !important;
}

.mmc-assessment-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 10px !important;
}

.mmc-assessment-card-top span {
    color: var(--mmc-green) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.mmc-assessment-save-later {
    border: none !important;
    background: transparent !important;

    color: #1A302E !important;
    font-size: 13px !important;
    font-weight: 800 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mmc-assessment-question {
    margin: 0 0 4px !important;

    color: var(--mmc-deep-teal) !important;
    font-family: var(--mmc-font-heading) !important;
    font-size: clamp(26px, 2.3vw, 36px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
}

.mmc-assessment-instruction {
    margin: 0 0 18px !important;

    color: var(--mmc-text-secondary) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
}

.mmc-assessment-options {
    display: grid !important;
    gap: 10px !important;
}

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

.option-card {
    min-height: 48px !important;
    padding: 0 16px 0 0 !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    border: 1px solid rgba(10, 52, 52, 0.11) !important;
    box-shadow: 0 8px 18px rgba(10, 52, 52, 0.04) !important;

    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 12px !important;

    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.option-card:hover {
    background: #F8FFF5 !important;
    border-color: rgba(114, 174, 68, 0.50) !important;
}

.option-card.selected {
    background: #F1FAEF !important;
    border-color: var(--mmc-green) !important;
    box-shadow: 0 0 0 1px rgba(114, 174, 68, 0.65), 0 10px 24px rgba(10, 52, 52, 0.06) !important;
}

.option-icon {
    width: 42px !important;
    height: 42px !important;
    margin-left: 8px !important;
    border-radius: 50% !important;

    background: #F4EAD8 !important;
    color: var(--mmc-deep-teal) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;
}

.option-card.selected .option-icon {
    background: var(--mmc-green) !important;
    color: #ffffff !important;
}

.option-text {
    color: #1A302E !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

.option-text strong {
    display: none !important;
}

.indicator-box {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;

    border: 2px solid rgba(10, 52, 52, 0.25) !important;
    background: #ffffff !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.type-single {
    border-radius: 50% !important;
}

.option-card.selected .indicator-box {
    background: var(--mmc-deep-teal) !important;
    border-color: var(--mmc-deep-teal) !important;
}

.option-card.selected .type-multi::after {
    content: "" !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    margin-bottom: 2px !important;
}

.option-card.selected .type-single::after {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

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

.mmc-assessment-actions {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 150px !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 18px !important;
}

.mmc-assessment-btn {
    height: 44px !important;
    border-radius: 9px !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    transition: all 0.25s ease !important;
}

.mmc-assessment-btn-back {
    background: #ffffff !important;
    border: 1px solid rgba(10, 52, 52, 0.18) !important;
    color: #1A302E !important;
}

.mmc-assessment-btn-next {
    background: #D8DAD3 !important;
    border: none !important;
    color: #8C9089 !important;
    pointer-events: none !important;
}

.mmc-assessment-btn-next.ready {
    background: var(--mmc-deep-teal) !important;
    color: #ffffff !important;
    pointer-events: auto !important;
    box-shadow: 0 12px 26px rgba(10, 52, 52, 0.18) !important;
}

.mmc-assessment-btn-next.ready:hover {
    background: var(--mmc-green) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.mmc-assessment-progress-saved {
    justify-self: center !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: var(--mmc-green) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.mmc-assessment-progress-saved i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;

    background: var(--mmc-green) !important;
    color: #ffffff !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   WHY CARD
========================================================= */

.mmc-assessment-why-card {
    padding: 28px 24px !important;
    text-align: center !important;

    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.90), transparent 35%),
        linear-gradient(180deg, #F8FFF5 0%, #EEF9EF 100%) !important;

    border-color: rgba(114, 174, 68, 0.18) !important;
}

.mmc-assessment-why-avatar {
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 22px !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(10, 52, 52, 0.08) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.mmc-assessment-why-avatar img {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
}

.mmc-assessment-why-card h3 {
    margin: 0 0 10px !important;

    color: #111111 !important;
    font-family: var(--mmc-font-heading) !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
}

.mmc-assessment-why-card p {
    margin: 0 auto 18px !important;
    max-width: 210px !important;

    color: #1A302E !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

.mmc-assessment-why-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    max-width: 150px !important;
    margin: 20px auto !important;
    color: var(--mmc-muted-gold) !important;
}

.mmc-assessment-why-divider span {
    height: 1px !important;
    width: 56px !important;
    background: rgba(197, 160, 89, 0.58) !important;
}

.mmc-assessment-why-divider i {
    color: var(--mmc-muted-gold) !important;
    font-size: 15px !important;
}

.mmc-assessment-why-card em {
    display: block !important;
    max-width: 210px !important;
    margin: 0 auto !important;

    color: var(--mmc-deep-teal) !important;
    font-family: var(--mmc-font-heading) !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

/* =========================================================
   TRUST STRIP
========================================================= */

.mmc-assessment-trust-strip {
    max-width: 1060px !important;
    margin: 26px auto 0 !important;
    padding: 16px 24px !important;

    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(10, 52, 52, 0.08) !important;
    box-shadow: 0 14px 38px rgba(10, 52, 52, 0.06) !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
    gap: 18px !important;
    align-items: center !important;
}

.mmc-assessment-trust-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
}

.mmc-assessment-trust-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;

    background: rgba(114, 174, 68, 0.12) !important;
    color: var(--mmc-green) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 19px !important;
}

.mmc-assessment-trust-item h4 {
    margin: 0 0 2px !important;
    color: #1A302E !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.mmc-assessment-trust-item p {
    margin: 0 !important;
    color: var(--mmc-text-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.mmc-assessment-trust-divider {
    width: 1px !important;
    height: 50px !important;
    background: rgba(10, 52, 52, 0.12) !important;
}

/* =========================================================
   LEAD CAPTURE / RESULT SCREEN
========================================================= */

.wg-dark-card {
    background: var(--mmc-deep-teal) !important;
    border-radius: 22px !important;
    padding: 38px 36px !important;
    box-shadow: 0 28px 80px rgba(10,52,52,0.18) !important;
}

.wg-processing-heart {
    font-size: 52px !important;
    color: var(--mmc-green) !important;
    margin-bottom: 20px !important;
}

.lead-label,
.res-badge {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--mmc-green) !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

.lead-title,
.res-title {
    font-family: var(--mmc-font-heading) !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-bottom: 14px !important;
    line-height: 1.18 !important;
}

.lead-subtext,
.res-text {
    font-size: 16px !important;
    color: rgba(255,255,255,0.76) !important;
    margin-bottom: 30px !important;
    line-height: 1.7 !important;
}

.form-group-lead {
    margin-bottom: 18px !important;
}

.form-group-lead label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    color: rgba(255,255,255,0.88) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.input-lead {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 15px 18px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-shadow: none !important;
}

.input-lead::placeholder {
    color: rgba(255,255,255,0.38) !important;
}

.input-lead:focus {
    border-color: rgba(114,174,68,0.75) !important;
    box-shadow: 0 0 0 4px rgba(114,174,68,0.12) !important;
}

.btn-submit-lead {
    background-color: var(--mmc-green) !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 15px !important;
    border-radius: 50px !important;
    width: 100% !important;
    border: none !important;
    margin-top: 10px !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.btn-submit-lead:hover {
    background-color: #FFFFFF !important;
    color: var(--mmc-deep-teal) !important;
}

.btn-submit-lead.is-loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.link-skip-lead {
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,0.66) !important;
    font-size: 14px !important;
    margin-top: 20px !important;
    text-decoration: underline !important;
}

.privacy-note,
.whatsapp-note {
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.58) !important;
    margin-top: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1.6 !important;
}

.res-score {
    font-size: 68px !important;
    font-weight: 900 !important;
    color: var(--mmc-green) !important;
    margin-bottom: 16px !important;
    font-family: var(--mmc-font-heading) !important;
    line-height: 1 !important;
}

.res-tag {
    display: inline-block !important;
    background-color: rgba(114,174,68,0.14) !important;
    color: #FFFFFF !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 26px !important;
    border: 1px solid rgba(114,174,68,0.28) !important;
}

.prod-reveal-box {
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 24px !important;
    padding: 28px !important;
    margin: 34px 0 !important;
}

.prod-heading {
    font-family: var(--mmc-font-heading) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-bottom: 14px !important;
}

.prod-desc {
    font-size: 15px !important;
    color: rgba(255,255,255,0.74) !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
}

.advantage-list {
    margin: 22px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.advantage-list li {
    font-size: 14.5px !important;
    color: rgba(255,255,255,0.92) !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    line-height: 1.6 !important;
}

.advantage-list li i {
    color: #72AE44 !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

.advantage-list li span {
    color: rgba(255,255,255,0.92) !important;
}

.advantage-list li strong {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}





.offer-ribbon {
    background: rgba(114,174,68,0.12) !important;
    border-left: 4px solid var(--mmc-green) !important;
    padding: 20px !important;
    border-radius: 0 18px 18px 0 !important;
    margin: 26px 0 0 !important;
}

.offer-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

.offer-text {
    font-size: 14px !important;
    color: rgba(255,255,255,0.76) !important;
    margin: 0 !important;
    line-height: 1.65 !important;
}

.btn-whatsapp {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 16px 36px rgba(37,211,102,0.22) !important;
    border: none !important;
    border-radius: 50px !important;
}

.btn-whatsapp:hover {
    background-color: #20BA5A !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {
    .mmc-assessment-hero-content {
        margin-left: 40px !important;
    }

    .mmc-assessment-layout {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
    }

    .mmc-assessment-why-card {
        max-width: 100% !important;
    }

    .mmc-assessment-journey {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .mmc-assessment-journey-line {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mmc-assessment-hero {
        padding: 48px 0 76px !important;
    }

    .mmc-assessment-hero::before {
        opacity: 0.10 !important;
    }

    .mmc-assessment-hero::after {
        opacity: 0.16 !important;
        right: -60px !important;
        top: 46px !important;
    }

    .mmc-assessment-hero-content {
        margin-left: 0 !important;
        text-align: center !important;
    }

    .mmc-assessment-hero-points {
        justify-content: center !important;
    }

    .mmc-assessment-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mmc-assessment-trust-divider {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mmc-assessment-page {
        padding-bottom: 24px !important;
    }

    .mmc-assessment-hero {
        padding: 42px 0 70px !important;
    }

    .mmc-assessment-hero::before {
        width: 150px !important;
        height: 190px !important;
        opacity: 0.08 !important;
    }

    .mmc-assessment-hero::after {
        width: 260px !important;
        height: 160px !important;
        opacity: 0.12 !important;
        right: -80px !important;
        top: 40px !important;
    }

    
    .mmc-assessment-hero h1 {
        font-size: 38px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.045em !important;
    }

    .mmc-assessment-hero p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .mmc-assessment-hero-points {
        gap: 14px 20px !important;
    }

    .mmc-assessment-journey {
        margin-top: -38px !important;
        grid-template-columns: 1fr !important;
        padding: 18px !important;
    }

    .mmc-assessment-journey-step {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .mmc-assessment-journey-number {
        width: 44px !important;
        height: 44px !important;
        font-size: 21px !important;
    }

    .mmc-assessment-layout {
        gap: 20px !important;
    }

    .mmc-assessment-main-card {
        padding: 24px 18px 22px !important;
    }

    .mmc-assessment-card-top {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .mmc-assessment-question {
        font-size: 27px !important;
    }

    .option-card {
        grid-template-columns: 50px minmax(0, 1fr) 22px !important;
    }

    .option-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .mmc-assessment-actions {
        grid-template-columns: 1fr !important;
    }

    .mmc-assessment-progress-saved {
        order: -1 !important;
    }

    .mmc-assessment-trust-strip {
        grid-template-columns: 1fr !important;
        padding: 18px !important;
    }

    .wg-dark-card {
        padding: 34px 22px !important;
    }

    .lead-title,
    .res-title {
        font-size: 30px !important;
    }

    .res-score {
        font-size: 56px !important;
    }

    .privacy-note,
    .whatsapp-note {
        flex-wrap: wrap !important;
    }
}


@media (max-width: 420px) {
    .mmc-assessment-hero h1 {
        font-size: 36px !important;
    }
}