@font-face {
    font-family: 'DDINExp';
    src: url('../fonts/D-DINExp.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DDINExp';
    src: url('../fonts/D-DINExp-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyriadCampaign';
    src: url('../fonts/MyriadPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --campaign-red: #e31b43;
    --campaign-red-dark: #bf1236;
    --campaign-pink: #f17b96;
    --campaign-light: #fff7f9;
    --campaign-soft: #fde8ee;
    --campaign-grey: #d9d9d9;
    --campaign-text: #941430;
}

body {
    font-family: 'MyriadCampaign', 'Inter', sans-serif;
    color: #7f1d2f;
    overflow: hidden !important; 
}

::-webkit-scrollbar { display: none; }

.campaign-theme {
    background: #fcfcfc !important; 
    position: relative;
    overflow: hidden !important; 
    height: 100vh !important; 
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.campaign-theme::before,
.campaign-theme::after {
    content: none;
    display: none !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.campaign-theme::before {
    height: 76px;
    background: linear-gradient(135deg, transparent 0 20%, rgba(241, 123, 150, 0.36) 21% 48%, transparent 49%), linear-gradient(225deg, transparent 0 24%, rgba(227, 27, 67, 0.46) 25% 50%, transparent 51%);
    opacity: 0.78;
}

.campaign-theme::after {
    height: 34px;
    background: linear-gradient(90deg, rgba(241, 123, 150, 0.72), rgba(227, 27, 67, 0.88));
    clip-path: polygon(0 52%, 18% 28%, 38% 58%, 55% 34%, 76% 54%, 100% 22%, 100% 100%, 0 100%);
}

.campaign-theme > header,
.campaign-theme > main,
.campaign-theme > footer {
    position: relative;
    z-index: 1;
}

.campaign-theme h1,
.campaign-theme h2,
.campaign-theme h3,
.campaign-theme h4,
.campaign-theme .font-bold,
.campaign-theme .font-black {
    font-family: 'DDINExp', 'Inter', sans-serif;
    letter-spacing: 0;
}

.campaign-theme .bg-clinical-50 { background-color: var(--campaign-light) !important; }
.campaign-theme .bg-clinical-100 { background-color: var(--campaign-soft) !important; }
.campaign-theme .bg-clinical-600 { background-color: var(--campaign-red) !important; }
.campaign-theme .hover\:bg-clinical-700:hover { background-color: var(--campaign-red-dark) !important; }
.campaign-theme .text-clinical-600 { color: var(--campaign-red) !important; }
.campaign-theme .text-clinical-700 { color: var(--campaign-red-dark) !important; }
.campaign-theme .text-clinical-900 { color: var(--campaign-text) !important; }
.campaign-theme .border-clinical-600 { border-color: var(--campaign-red) !important; }
.campaign-theme .focus\:ring-clinical-600:focus { --tw-ring-color: var(--campaign-red) !important; }
.campaign-theme .focus\:border-clinical-600:focus,
.campaign-theme .focus\:border-transparent:focus { border-color: var(--campaign-red) !important; }
.campaign-theme .shadow-clinical-600\/20 { --tw-shadow-color: rgba(227, 27, 67, 0.2) !important; }

.campaign-theme header {
    border-bottom-color: #f8c7d3 !important;
    box-shadow: 0 8px 20px rgba(227, 27, 67, 0.05);
}

.campaign-theme footer {
    border-top-color: #f8c7d3 !important;
}

.campaign-mini-logo {
    background: radial-gradient(ellipse at center, #ff8ea4 0%, #e31b43 70%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(227, 27, 67, 0.2);
}

.campaign-mini-logo span {
    font-family: 'DDINExp', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.campaign-logo-mark {
    width: 132px;
    min-height: 124px;
    color: var(--campaign-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    line-height: 0.92;
    text-align: center;
}

.campaign-logo-top,
.campaign-logo-bottom {
    font-size: 32px;
}

.campaign-logo-liver {
    min-width: 116px;
    margin: 3px 0;
    padding: 12px 10px 10px;
    color: #fff;
    font-size: 24px;
    background: radial-gradient(ellipse at center, #ff8ea4 0%, #e31b43 70%);
    border-radius: 52% 48% 54% 46% / 42% 55% 45% 58%;
    box-shadow: inset -12px -10px 22px rgba(155, 12, 40, 0.24), 0 10px 22px rgba(227, 27, 67, 0.18);
}

.campaign-theme #login-section,
.campaign-theme #setup-container,
.campaign-theme #doctor-details-form,
.campaign-theme [id^="question-card"],
.campaign-theme #hero-score + *,
.campaign-theme #category-card,
.campaign-theme #findings-card {
    border-radius: 22px !important;
    border-color: #f8c7d3 !important;
    box-shadow: 0 18px 38px rgba(227, 27, 67, 0.12) !important;
}

.campaign-theme #login-section {
    padding: 34px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92)), radial-gradient(circle at top right, rgba(241, 123, 150, 0.16), transparent 35%) !important;
    backdrop-filter: blur(8px);
}

.campaign-theme #setup-banner {
    background: linear-gradient(135deg, #e31b43, #f17b96) !important;
}

.campaign-theme input,
.campaign-theme select,
.campaign-theme textarea {
    border-color: #d6d6d6 !important;
}

.campaign-theme input:not([type="radio"]):not([type="checkbox"]),
.campaign-theme select,
.campaign-theme textarea {
    background: linear-gradient(#f6f6f6, #ffffff) !important;
    border-radius: 999px !important;
    min-height: 54px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255,255,255,0.95);
}

.campaign-theme textarea {
    border-radius: 22px !important;
}

.campaign-theme button,
.campaign-theme .btn-campaign,
.campaign-theme a.bg-clinical-600 {
    border-radius: 999px !important;
}

.campaign-theme button[type="submit"],
.campaign-theme #login-cta,
.campaign-theme #continue-btn,
.campaign-theme #submitBtn,
.campaign-theme a.bg-clinical-600 {
    background: linear-gradient(180deg, #f43f68 0%, #e31b43 56%, #bf1236 100%) !important;
    box-shadow: 0 10px 18px rgba(227, 27, 67, 0.24) !important;
}

.login-page-shell {
    gap: 34px;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 32px;
    padding-bottom: 32px;
}

.campaign-login-hero {
    width: 520px;
    min-height: 620px;
    padding: 54px 46px;
    border-radius: 34px;
    border: 1px solid #f8c7d3;
    background: radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.55) 0 8%, transparent 9%), radial-gradient(circle at 22% 78%, rgba(241, 123, 150, 0.18) 0 28%, transparent 29%), linear-gradient(145deg, #fff, #fff1f5);
    box-shadow: 0 28px 70px rgba(227, 27, 67, 0.14);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.campaign-login-hero::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 220px;
    left: -72px;
    bottom: -70px;
    background: linear-gradient(135deg, rgba(241, 123, 150, 0.28), rgba(227, 27, 67, 0.42));
    border-radius: 58% 42% 48% 52% / 54% 42% 58% 46%;
    transform: rotate(-8deg);
}

.campaign-login-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 150px;
    right: -80px;
    top: 72px;
    background: linear-gradient(135deg, rgba(227, 27, 67, 0.16), rgba(241, 123, 150, 0.24));
    border-radius: 58% 42% 48% 52% / 54% 42% 58% 46%;
    transform: rotate(12deg);
}

.campaign-login-hero > * {
    position: relative;
    z-index: 1;
}

.campaign-logo-mark-large {
    width: 230px;
    min-height: 220px;
    margin-bottom: 26px;
}

.campaign-logo-mark-large .campaign-logo-top,
.campaign-logo-mark-large .campaign-logo-bottom {
    font-size: 58px;
}

.campaign-logo-mark-large .campaign-logo-liver {
    min-width: 202px;
    font-size: 40px;
    padding: 20px 18px 17px;
}

.campaign-hero-copy .campaign-eyebrow {
    color: var(--campaign-red);
    font-size: 18px;
    margin-bottom: 8px;
}

.campaign-hero-copy h2 {
    color: #e01774;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}

.campaign-hero-copy p:last-child {
    color: var(--campaign-red);
    font-size: 20px;
    margin-top: 8px;
}

.campaign-hero-pills {
    display: flex;
    gap: 10px;
    margin-top: 34px;
}

.campaign-hero-pills span {
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--campaign-red);
    border: 1px solid #fac4d0;
    font-family: 'DDINExp', sans-serif;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(227, 27, 67, 0.08);
}

#loginForm label {
    color: #344155 !important;
    font-family: 'DDINExp', sans-serif;
    font-size: 11px;
}

#security-footer {
    margin-top: 32px !important;
}

@media (max-width: 1023px) {
    .login-page-shell {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 26px;
        padding-bottom: 88px;
    }

    .campaign-theme #login-section {
        padding: 30px !important;
    }
}

@media (max-width: 480px) {
    .campaign-theme #login-section {
        padding: 24px !important;
        border-radius: 20px !important;
    }

    .campaign-logo-mark {
        transform: scale(0.9);
        margin-bottom: 4px !important;
    }
}

.campaign-portrait-shell {
    width: 100%;
    height: 100vh; 
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fcfcfc; 
    overflow: hidden;
}

.campaign-portrait-screen {
    width: 100%;
    max-width: 440px; 
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    position: relative;
    overflow: hidden !important; 
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px; 
    color: var(--campaign-red);
    box-shadow: 0 20px 70px rgba(148, 20, 48, 0.08);
    border-radius: 22px; 
    transform: translateZ(0); 
}

.campaign-main-logo {
    width: 236px;
    height: 300px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    line-height: 0.92;
    color: var(--campaign-red);
}

.campaign-main-logo .logo-line {
    font-size: 62px;
}

.campaign-main-logo .logo-liver {
    width: 226px;
    height: 116px;
    margin: 6px 0 10px;
    border-radius: 52% 48% 52% 48% / 42% 54% 46% 58%;
    background: radial-gradient(circle at 70% 72%, #668923 0 9%, transparent 10%), radial-gradient(circle at 58% 74%, #486a22 0 7%, transparent 8%), linear-gradient(145deg, #ff6d85 0%, #e51c43 52%, #be1334 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    box-shadow: inset -18px -15px 28px rgba(126, 0, 28, 0.18), 0 12px 24px rgba(227, 27, 67, 0.2);
    transform: rotate(-4deg);
    position: relative;
}

.campaign-main-logo .logo-liver::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 16px;
    width: 74px;
    height: 54px;
    background: linear-gradient(145deg, #ff647f, #d7193e);
    border-radius: 48% 70% 45% 65%;
    transform: rotate(14deg);
    z-index: -1;
}

.campaign-login-screen .campaign-main-logo {
    width: 160px;
    height: 170px;
    margin-top: -20px !important; 
}

.campaign-login-screen .campaign-main-logo .logo-line {
    font-size: 46px;
}

.campaign-login-screen .campaign-main-logo .logo-liver {
    width: 150px;
    height: 70px;
    font-size: 28px;
    margin: 3px 0 5px;
}

.campaign-login-form {
    width: 100%;
    padding: 0 64px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.campaign-field {
    width: 100%;
    text-align: left;
}

.campaign-field input,
.campaign-field textarea {
    text-align: left !important;
}

.campaign-field label {
    display: block;
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}

.campaign-pill-input {
    width: 100%;
    height: 32px; 
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(#f3f3f3, #ffffff);
    border: 3px solid #d6d6d6;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
}

.campaign-theme .campaign-pill-input input {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    color: #666;
    text-align: center;
    font-size: 13px;
}

.campaign-login-button {
    width: 106px !important;
    height: 28px;
    margin-top: 18px;
    padding: 0 !important;
    border: 0;
    border-radius: 999px !important;
    background: linear-gradient(#f04b69, #cf1234) !important;
    color: #fff;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 8px 14px rgba(148, 20, 48, 0.22) !important;
}

.campaign-brand-block {
    position: relative; 
    width: 100%;
    text-align: center;
    margin-top: 35px; 
    z-index: 2;
}

.campaign-brand-block h1 {
    color: #e01774 !important;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
}

.campaign-brand-block p {
    color: var(--campaign-red);
    font-size: 10px;
    line-height: 1.1;
}

.campaign-footer-logos {
    position: relative; 
    width: 100%;
    margin-top: 15px; 
    margin-bottom: 25px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.intas-logo {
    color: #0071bc;
    border: 1px solid #0071bc;
    border-radius: 50%;
    padding: 1px 5px;
    font-family: Georgia, serif;
    font-size: 9px;
    line-height: 0.86;
    font-weight: 700;
}

.intas-logo small {
    display: block;
    border: 0;
    font-family: Arial, sans-serif;
    font-size: 4px;
    line-height: 1;
}

.brand-divider {
    width: 1px;
    height: 20px;
    background: #777;
}

.neovet-logo {
    color: #69b342;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.campaign-corner-logo {
    position: absolute;
    top: 12px;
    right: 30px;
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    color: var(--campaign-red);
    line-height: 0.92;
    font-size: 16px;
    z-index: 5;
}

.campaign-corner-logo b {
    margin: 1px 0;
    padding: 4px 5px;
    border-radius: 999px;
    background: linear-gradient(#ff6d85, #d7193e);
    color: #fff;
    font-size: 10px;
}

.campaign-doctor-screen .campaign-corner-logo,
.campaign-question-screen .campaign-corner-logo,
.campaign-activity-screen .campaign-corner-logo {
    top: 13px;
    right: 31px;
}

.campaign-card-form {
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.campaign-colour-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px; 
}

.campaign-colour-option {
    width: 175px; 
    height: 65px; 
    border-radius: 999px;
    background: linear-gradient(#fbfbfb, #eeeeee);
    border: 7px solid #dedede;
    box-shadow: inset 0 3px 4px rgba(255,255,255,0.95), 0 4px 8px rgba(0,0,0,0.10);
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr; 
    align-items: center;
    padding: 0 12px 0 10px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    
    
    touch-action: manipulation; 
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


.campaign-colour-option > * {
    pointer-events: none;
}


.campaign-colour-option.is-selected-anim,
.campaign-colour-option.is-selected-anim::before,
.campaign-colour-option.is-selected-anim::after,
.holi-ripple {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity, filter, box-shadow;
}
.campaign-colour-option input:checked ~ .colour-title {
    text-shadow: 0 0 0 currentColor;
}

.colour-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
    grid-row: 1 / span 2; 
    align-self: center; 
}

.campaign-colour-green .colour-dot { background: linear-gradient(135deg, #45d96e, #009f4d); }
.campaign-colour-grey .colour-dot { background: linear-gradient(135deg, #dadede, #8e9494); }
.campaign-colour-blue .colour-dot { background: linear-gradient(135deg, #7ecfff, #0089d6); }

.colour-title {
  font-family: 'DDINExp', sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
    text-align: left; 
    display: block; 
    width: 100%; 
}

.campaign-colour-green { color: #00a750; --anim-color: 0, 167, 80; }
.campaign-colour-grey { color: #7a7f83; --anim-color: 122, 127, 131; }
.campaign-colour-blue { color: #0087d4; --anim-color: 0, 135, 212; }


    .campaign-colour-option {
        position: relative;
        overflow: visible;
        isolation: isolate;
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            filter 0.25s ease;
    }

    .campaign-colour-option.is-selected-anim {
        --glow-color: rgba(var(--anim-color), 0.55);

        animation:
            premiumPop 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
            glowPulse 850ms ease-out forwards;

        z-index: 50;
        background: #fff;
        filter: saturate(1.15);
    }

    /* =========================================================
       POWDER CLOUD
    ========================================================= */
    .campaign-colour-option.is-selected-anim::before {
        content: '';

        position: absolute;
        inset: -20%;
        border-radius: 999px;

        background:
            radial-gradient(circle at center,
                rgba(var(--anim-color), 0.9) 0%,
                rgba(var(--anim-color), 0.55) 25%,
                rgba(var(--anim-color), 0.15) 55%,
                transparent 75%
            );

        transform: scale(0.5);
        filter: blur(6px);

        opacity: 0;
        z-index: -2;
        pointer-events: none;

        animation: powderBlast 900ms ease-out forwards;
    }

    /* =========================================================
       PARTICLES
    ========================================================= */
    .campaign-colour-option.is-selected-anim::after {
        content: '';

        position: absolute;
        inset: -40%;
        border-radius: 999px;

        pointer-events: none;
        z-index: -1;

        background-image:
            radial-gradient(circle, rgba(var(--anim-color),1) 0 28%, transparent 30%),
            radial-gradient(circle, rgba(var(--anim-color),0.95) 0 30%, transparent 32%),
            radial-gradient(circle, rgba(var(--anim-color),0.9) 0 24%, transparent 26%),
            radial-gradient(circle, rgba(var(--anim-color),0.85) 0 26%, transparent 28%),
            radial-gradient(circle, rgba(var(--anim-color),1) 0 22%, transparent 24%),
            radial-gradient(circle, rgba(var(--anim-color),0.8) 0 20%, transparent 22%),
            radial-gradient(circle, rgba(var(--anim-color),1) 0 18%, transparent 20%),
            radial-gradient(circle, rgba(var(--anim-color),0.9) 0 22%, transparent 24%);

        background-repeat: no-repeat;

        animation: particleExplosion 950ms cubic-bezier(0.18, 0.9, 0.3, 1) forwards;
    }

    /* =========================================================
       RIPPLE
    ========================================================= */
    .campaign-colour-option .holi-ripple {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        border: 2px solid rgba(var(--anim-color), 0.65);

        pointer-events: none;
        z-index: -3;

        animation: rippleWave 850ms ease-out forwards;
    }

    /* =========================================================
       POP
    ========================================================= */
    @keyframes premiumPop {

        0% {
            transform: scale(1) rotate(0deg);
        }

        20% {
            transform: scale(0.86) rotate(-2deg);
        }

        45% {
            transform: scale(1.12) rotate(2deg);
        }

        65% {
            transform: scale(0.97) rotate(-1deg);
        }

        100% {
            transform: scale(1) rotate(0deg);
        }
    }

    /* =========================================================
       GLOW
    ========================================================= */
    @keyframes glowPulse {

        0% {
            box-shadow:
                0 0 0px rgba(var(--anim-color), 0),
                0 0 0px rgba(var(--anim-color), 0);
        }

        40% {
            box-shadow:
                0 0 20px rgba(var(--anim-color), 0.9),
                0 0 50px rgba(var(--anim-color), 0.45);
        }

        100% {
            box-shadow:
                0 0 0px rgba(var(--anim-color), 0),
                0 0 0px rgba(var(--anim-color), 0);
        }
    }

    /* =========================================================
       POWDER BLAST
    ========================================================= */
    @keyframes powderBlast {

        0% {
            opacity: 0.95;
            transform: scale(0.4);
            filter: blur(4px);
        }

        35% {
            opacity: 0.75;
            transform: scale(1.1);
            filter: blur(12px);
        }

        100% {
            opacity: 0;
            transform: scale(1.9);
            filter: blur(28px);
        }
    }

    /* =========================================================
       PARTICLE EXPLOSION
    ========================================================= */
    @keyframes particleExplosion {

        0% {
            opacity: 1;

            background-size:
                12% 12%,
                18% 18%,
                10% 10%,
                14% 14%,
                8% 8%,
                10% 10%,
                7% 7%,
                9% 9%;

            background-position:
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%;
        }

        100% {
            opacity: 0;

            background-size:
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%;

            background-position:
                -35% -35%,
                145% -10%,
                -20% 130%,
                135% 125%,
                50% -55%,
                50% 150%,
                -45% 55%,
                145% 60%;
        }
    }

    /* =========================================================
       RIPPLE
    ========================================================= */
    @keyframes rippleWave {

        0% {
            opacity: 0.8;
            transform: scale(0.7);
        }

        100% {
            opacity: 0;
            transform: scale(2.2);
        }
    }

.colour-reward {
  grid-column: 2;
  margin-top: 3px; 
  margin-left: 3px !important; 
  color: currentColor;
  font-size: 12px; 
  line-height: 1.2; 
  text-align: left; 
  text-decoration: none;
  display: block; 
  width: 100%; 
}

.campaign-colour-option strong {
  position: absolute;
  left: 0; 
  right: 0; 
  bottom: -38px;
  text-align: center; 
  padding-left: 0px; 
  font-family: 'DDINExp', sans-serif;
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}
.campaign-language-row {
    margin: 44px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.campaign-language-row span {
    display: block;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #f39caf;
    color: var(--campaign-red);
    font-size: 12px;
}

.campaign-language-row input:checked + span {
    background: #ffe8ee;
}

.campaign-hidden-submit {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.campaign-doctor-screen {
    align-items: stretch;
}

.campaign-doctor-form {
    width: 100%;
    padding: 0 36px;
    margin-top: auto;   
    margin-bottom: 0; 
    position: relative;
    z-index: 2;
}

.campaign-section-pill {
    width: 196px;
    height: 44px;
    margin: 0 auto 24px;
    border-radius: 999px;
    border: 7px solid #dedede;
    background: linear-gradient(#fbfbfb, #eeeeee);
    box-shadow: inset 0 3px 4px rgba(255,255,255,0.95), 0 4px 8px rgba(0,0,0,0.10);
    color: var(--campaign-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DDINExp', sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.campaign-quiz-page .campaign-question-mark {
    font-size: 80px !important; 
    right: 120px !important;
    top: 20px !important; 
}

.campaign-doctor-screen .campaign-doctor-field {
    margin-bottom: 12px !important; 
}

.campaign-doctor-field label {
    display: block;
    color: var(--campaign-red);
    font-family: 'MyriadCampaign', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.05;
}

.campaign-doctor-field p {
    margin: 1px 0 0;
    color: #dc2626;
    font-size: 9px;
    line-height: 1;
}

.campaign-theme .campaign-doctor-field .campaign-pill-input input {
    text-align: left !important;
    padding-left: 18px !important; 
}

.campaign-theme .campaign-next-mark,
.campaign-theme button.campaign-next-mark {
    position: absolute;
    right: 25px;
    bottom: 50px; 
    width: auto !important; 
    min-width: 100px !important;
    height: 44px !important; 
    border: 1px solid var(--campaign-red) !important;
    border-radius: 22px !important; 
    background: var(--campaign-red) !important; 
    color: #fff !important; 
    line-height: 44px !important; 
    text-align: center;
    font-size: 18px !important; 
    font-family: 'DDINExp', sans-serif !important; 
    font-weight: 700 !important;
    z-index: 10;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; 
    cursor: pointer;
    pointer-events: auto;
    padding: 0 20px !important; 
    box-shadow: 0 4px 10px rgba(227, 27, 67, 0.3) !important; 
    animation: blinkAttention 1.5s infinite ease-in-out; 
}

@keyframes blinkAttention {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
        background: var(--campaign-red) !important; 
    }
    50% { 
        opacity: 0.85; 
        transform: scale(0.94);
        background: var(--campaign-red-dark) !important; 
    }
}

.campaign-question-screen {
    align-items: stretch;
}

.campaign-question-form {
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.campaign-question-item {
    display: none;
}

.campaign-question-item.active {
    display: block;
}

.campaign-question-visual {
    height: 200px; 
    position: relative;
}

.campaign-question-number {
    position: absolute;
    top: 34px;
    left: 48px;
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.campaign-question-arrow {
    position: absolute;
    top: 66px;
    left: 31px;
    width: 44px;
    height: 2px;
    background: var(--campaign-red);
}

.campaign-question-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 34px;
    background: var(--campaign-red);
}

.campaign-question-arrow::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 28px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--campaign-red);
}

.campaign-question-circle {
    position: absolute;
    top: 13px;
    left: 75px; 
    width: 176px; 
    height: 176px; 
    border: 3px solid var(--campaign-red);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    box-shadow: 12px 16px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px; 
}

.campaign-question-circle p {
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.04;
    text-align: center;
}

.campaign-question-mark {
    position: absolute;
    right: 40px; 
    top: 10px; 
    color: var(--campaign-red);
    font-family: Arial, sans-serif;
    font-size: 112px;
    font-weight: 300;
    line-height: 1;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 3px var(--campaign-red);
}

.campaign-question-options {
    margin: 25px 45px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.campaign-instruction-note {
    text-align: center;
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-size: 16px; 
    margin-top: 8px; 
    margin-bottom: -20px; 
    font-weight: 700; 
}

.campaign-question-options label {
    display: grid;
    grid-template-columns: 15px 1fr;
    column-gap: 10px;
    align-items: start;
    color: var(--campaign-red);
    cursor: pointer;
}

.campaign-question-options input {
    position: absolute;
    opacity: 0;
}

.campaign-question-options span {
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 1.5px solid var(--campaign-red);
    background: #fff;
}

.campaign-question-options input:checked + span {
    background: var(--campaign-red);
    box-shadow: inset 0 0 0 2px #fff;
}

.campaign-question-options b {
    font-family: 'MyriadCampaign', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

.campaign-question-error {
    display: none;
    margin: 8px 45px 0;
    color: #dc2626;
    font-size: 10px;
}

.campaign-question-item.show-error .campaign-question-error {
    display: block;
}

.campaign-question-empty {
    width: 100%;
    margin-top: 185px;
    text-align: center;
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    position: relative;
    z-index: 2;
}

.campaign-result-content,
.campaign-scratch-content,
.campaign-thank-copy {
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.campaign-result-content {
    margin-top: 20px;
}

.campaign-result-content h1 {
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
}

.campaign-result-content h1 span {
    display: inline-block;
    min-width: 28px;
    border-bottom: 2px solid var(--campaign-red);
}

.campaign-gauge {
    width: 340px;  
    height: 170px; 
    margin: 42px auto 0;
    position: relative;
}



.gauge-outer-track {
    position: absolute;
    inset: 0;
    background: #f4f5f7;
    border-radius: 170px 170px 0 0; 
    box-shadow: inset 0px 4px 10px rgba(0,0,0,0.06);
    z-index: 1;
}


.gauge-band {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px; 
    height: 130px;
    border-radius: 130px 130px 0 0; 
    background: conic-gradient(from 270deg at 50% 100%, #00a651 0deg 45deg, #ffcc1b 45deg 90deg, #f58220 90deg 135deg, #ed1b2f 135deg 180deg);
    box-shadow: inset 0px 5px 12px rgba(0,0,0,0.15), 0px 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 2;
}




.gauge-band::before {
    
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px; 
    height: 90px; 
    border-radius: 90px 90px 0 0; 
    background: #fcfcfc; 
    box-shadow: 0px -4px 12px rgba(0,0,0,0.08);
}



.gauge-center-base {
    display: none !important; 
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at top, #ffffff, #e4e7f0);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    z-index: 3;
}

.band-label {
    position: absolute;
    z-index: 2;
    color: #1a202c; 
    font-size: 11.5px; 
    font-weight: 500; 
    line-height: 1.2;
    text-align: center;
    width: max-content;
}

.band-low { 
    left: 31px; 
    top: 113px; 
    transform: translate(-50%, -50%) rotate(-69.5deg); 
}
.band-mild { 
    left: 113px; 
    top: 31px; 
    transform: translate(-50%, -50%) rotate(-22.5deg); 
}
.band-moderate { 
    right: 113px; 
    top: 31px; 
    transform: translate(50%, -50%) rotate(22.5deg); 
}
.band-high { 
    right: 31px; 
    top: 113px; 
    transform: translate(50%, -50%) rotate(67.5deg); 
}

.gauge-needle {
    position: absolute;
    width: 16px; 
    height: 115px; 
    left: calc(50% - 8px); 
    bottom: -5px; 
    background: #022016; 
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%); 
    transform-origin: 50% 100%;
    transform: rotate(var(--needle-angle));
    z-index: 4;
}

.gauge-image {
    position: absolute;
    width: 140px; 
    height: auto;         
    left: 50%; 
    transform: translateX(-50%);          
    bottom: -40px; 
    z-index: 5;            
    object-fit: contain;  
}
.campaign-suggested-action {
    margin: 38px 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #787f86;
    font-size: 12px;
    text-align: center;
}

.campaign-suggested-action span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.campaign-suggested-action i {
    width: 1px;
    height: 14px;
    background: #bfc5ca;
    flex-shrink: 0;
    display: block;
}

.campaign-suggested-action b,
.campaign-suggested-action strong {
    font-weight: 400;
}



.result-green { color: #00a651; }
.result-yellow { color: #ffcc1b; }
.result-orange { color: #f58220; }
.result-red { color: #ed1b2f; }

.campaign-scratch-content {
    margin-top: 20px;
}

.campaign-scratch-content h1 {
    color: #7d8389;
    font-family: 'DDINExp', sans-serif;
    font-size: 28px;
    line-height: 1.2;
    text-align: center; 
    margin-left: 0; 
    margin-bottom: 15px; 
}

.campaign-scratch-content h1 span {
    color: var(--campaign-red);
    font-size: 32px;
}

.campaign-scratch-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 174px;
    margin-top: 34px;
    border: 0;
    border-radius: 9px !important;
    color: #fff;
    font-family: 'DDINExp', sans-serif;
    box-shadow: none !important;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.campaign-scratch-green { background: linear-gradient(#69c84b, #008b55) !important; }
.campaign-scratch-grey { background: linear-gradient(#d7d9d9, #888d8d) !important; }
.campaign-scratch-blue { background: linear-gradient(#69d0e8, #3385d9) !important; }

.campaign-scratch-card-wrap {
    width: 160px;
    height: 174px;
    margin: 34px auto 0;
}

.campaign-scratch-card canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    cursor: grab;
    z-index: 5;
    transition: opacity 0.45s ease, transform 0.45s ease;
    touch-action: none;
}

.campaign-scratch-card canvas:active {
    cursor: grabbing;
}

.scratch-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 6;
    color: rgba(255,255,255,0.9);
    font-family: 'DDINExp', sans-serif;
    font-size: 11px;
    font-style: normal;
    text-shadow: 0 2px 5px rgba(0,0,0,0.35);
    pointer-events: none;
    animation: scratchPulse 1.2s ease-in-out infinite;
}

.campaign-scratch-card.is-revealing canvas,
.campaign-scratch-card.is-revealing .scratch-hint {
    opacity: 0;
    transform: scale(0.96);
}

@keyframes scratchPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.campaign-scratch-card.is-disabled {
    opacity: 0.65;
}

.campaign-scratch-card span {
    display: block;
    color: #fff7d0;
    font-family: cursive;
    font-size: 31px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 2px 3px 0 #cc6a00, 0 2px 5px rgba(0,0,0,0.35);
}

.campaign-scratch-card b {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-size: 22px;
    line-height: 1.28;
    text-shadow: 2px 3px 0 #cc6a00, 0 2px 5px rgba(0,0,0,0.35);
}

.campaign-scratch-empty {
    margin-top: 12px;
    color: var(--campaign-red);
    font-size: 11px;
}

.campaign-winner-copy {
    margin-top: 18px;
    margin-bottom: 20px; 
    color: #f7a62c;
    text-shadow: 2px 3px 0 #fff, 2px 5px 0 #ce6d20;
    font-family: cursive;
}

.campaign-winner-copy p {
    font-size: 30px;
    line-height: 1;
}

.campaign-winner-copy h2 {
    font-size: 34px;
    line-height: 1;
}

.campaign-reward-card {
    width: 210px;
    height: 126px;
    margin: 12px auto 0;
    position: relative;
}

.campaign-reward-card strong {
    position: relative;
    z-index: 2;
    width: 100px;
    text-align: left;
}

.campaign-thank-copy {
    margin-top: 30px;
}

.campaign-thank-copy h1 {
    color: var(--campaign-red);
    font-family: 'DDINExp', sans-serif;
    font-size: 44px;
    line-height: 1.12;
}

.campaign-thank-copy h1 span {
    color: #777d82;
    font-size: 28px;
}

.campaign-thank-screen .campaign-brand-block p:first-child {
    color: var(--campaign-red);
    font-size: 9px;
    margin-bottom: 1px;
}

.selection-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.selection-card:hover {
    transform: translateY(-2px);
}

.active-ring {
    ring: 3px;
    ring-color: var(--campaign-red);
    ring-offset: 2px;
}

.pill-toggle,
.login-card {
    transition: all 0.3s ease;
}

.reward-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 5;
}

.reward-detox {
    max-height: 180px;
    max-width: 180px;
    margin-top: 20px; 
}

.reward-nuts {
    max-height: 200px; 
    max-width: 200px;  
    margin-top: 20px; 
    margin-bottom: -15px; 
}

.reward-liver {
    max-height: 280px; 
    max-width: 280px;  
    width: 240px;    
    margin-top: 25px; 
    margin-bottom: 45px; 
}

.employee-logout-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 13px;
    border: 1px solid rgba(224, 20, 58, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #e0143a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(224, 20, 58, 0.12);
    backdrop-filter: blur(8px);
}

.employee-logout-link:hover {
    color: #ffffff;
    background: #e0143a;
}

.box-wave {
    position: absolute;
    bottom: 0;
    width: 150px;
    z-index: 1;
    pointer-events: none;
}

.box-wave.wave-left { left: 0; }
.box-wave.wave-right { right: 0; }

.box-wave svg {
    display: block;
    width: 100%;
    height: auto;
}

.box-wave-path-dark {
    fill: #eb4b6b;
}

.box-wave-path-light {
    fill: #da0827;
    opacity: 0.7;
}

.campaign-main-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin-top: 20px !important;
}

.campaign-corner-logo img {
    width: 100%;
    height: auto;
}

.logo-tribivet {
    height: 50px;
    margin: 0 auto 5px;
}


.campaign-scratch-screen .logo-tribivet {
    margin-bottom: -50px !important;
    margin-top: 60px !important; 
}

.logo-intas {
    height: 48px; 
    width: auto;  
}

.logo-neovet {
    height: 38px; 
    width: auto;
}

.hero-img-fill {
    object-fit: fill;
}

@media (min-width: 361px) {
    .campaign-portrait-screen {
        max-height: 96vh;
        max-height: 96dvh;
    }
}

@media (max-width: 480px) { 
    .campaign-portrait-screen {
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        height: 100dvh;
        box-shadow: none;
        border-radius: 0; 
    }

    .campaign-quiz-page .campaign-question-mark {
        right: 70px !important; 
    }
}

@media (max-height: 660px) {
    .campaign-portrait-screen {
        min-height: 100vh;
        min-height: 100dvh;
        height: 100dvh;
        padding-bottom: 20px;
        aspect-ratio: auto;
    }

    .campaign-login-screen .campaign-main-logo {
        transform: scale(0.88);
        transform-origin: top center;
        margin-top: 18px;
        height: 150px;
    }

    .campaign-login-form {
        margin-top: 4px;
        gap: 8px;
    }

    .campaign-field label {
        margin-bottom: 4px;
    }

    .campaign-login-button {
        margin-top: 14px;
    }

    .campaign-theme .campaign-doctor-field .campaign-pill-input input {
        text-align: left;
        padding-left: 16px !important; 
    }

    .campaign-next-mark {
        bottom: 58px; 
    }

    .campaign-section-pill {
        margin-bottom: 12px; 
    }

    .campaign-question-options {
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .campaign-doctor-edit-page .campaign-doctor-form {
        margin-top: 80px !important; 
    }
    .campaign-login-screen .box-wave {
        bottom: 26px !important; 
    }
}

@media (min-width: 769px) {
    .campaign-doctor-edit-page .campaign-doctor-form {
        margin-top: 100px !important; 
    }
}

.campaign-doctor-edit-page .campaign-brand-block {
    margin-top: 0px; 
}

.campaign-doctor-edit-page .campaign-footer-logos {
    margin-bottom: 30px !important; 
    gap: 8px !important; 
    margin-top: -20px !important;
}

.campaign-doctor-edit-page .brand-divider {
    height: 16px; 
}

.campaign-doctor-edit-page .campaign-doctor-field {
    margin-bottom: 12px !important; 
}

.campaign-login-screen .box-wave {
    z-index: 0; 
}

@media (min-width: 1024px) {
    .campaign-portrait-shell {
        background: #ffffff;
    }

    .campaign-portrait-screen {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        justify-content: center;
    }

    .campaign-theme #login-section,
    .campaign-theme #setup-container,
    .campaign-theme #doctor-details-form,
    .campaign-theme [id^="question-card"],
    .campaign-theme #hero-score + *,
    .campaign-theme #category-card,
    .campaign-theme #findings-card {
        border-radius: 0 !important;
    }

    .campaign-login-form,
    .campaign-card-form,
    .campaign-doctor-form,
    .campaign-question-form,
    .campaign-question-empty,
    .campaign-result-content,
    .campaign-scratch-content,
    .campaign-thank-copy {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .box-wave {
        width: 25vw !important;
        max-width: 400px !important;
        bottom: -1px !important;
        z-index: 0 !important;
    }

    .box-wave.wave-left { left: -1px !important; }
    .box-wave.wave-right { right: -1px !important; }

    .campaign-corner-logo {
        right: 50px !important;
        top: 30px !important;
        width: 110px;
    }

   .campaign-theme .campaign-next-mark,
    .campaign-theme button.campaign-next-mark {
        right: 60px !important;
        bottom: auto !important; 
        top: 50% !important; 
        margin-top: -22px !important; 
    }

    .logo-intas { height: 65px !important; }
    .logo-neovet { height: 55px !important; }

    .campaign-colour-list {
        flex-direction: row !important;
        justify-content: center;
        gap: 40px !important;
    }

    .campaign-colour-option {
        width: 220px; 
        height: 75px; 
    }
    .campaign-colour-option .colour-title { font-size: 32px; } 
    .campaign-colour-option strong { font-size: 34px; bottom: -48px; } 

    .campaign-language-row { gap: 30px; }
    
    .campaign-instruction-note {
        font-size: 20px;
        margin-bottom: 0px; 
    }

    
    .campaign-language-row span {
        font-size: 18px; 
        padding: 10px 35px; 
        border-width: 2px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(243, 156, 175, 0.2);
    }

    .campaign-language-row label:hover span {
        background: #ffe8ee;
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(243, 156, 175, 0.4);
    }

    .employee-logout-link {
        font-size: 16px;
        padding: 10px 22px;
        min-height: 42px;
    }

    .reward-detox {
        max-width: 210px; 
        max-height: 210px; 
        margin-top: 35px !important; 
    }

    .reward-nuts {
        max-width: 240px; 
        max-height: 240px; 
        margin-top: 35px !important; 
        margin-bottom: -25px !important; 
    }

    
    .campaign-scratch-content h1 {
        margin-bottom: 20px;
    }
    .campaign-winner-copy {
        margin-bottom: 30px;
    }

    
   .reward-liver {
        width: 400px; 
        max-width: 400px; 
        max-height: 400px; 
        margin-top: 40px !important;    
        margin-bottom: 70px !important; 
    }

    #loginForm label {
        font-size: 16px !important;
    }


    
}

@media (min-width: 1551px) {
    .campaign-portrait-screen {
        max-width: 100% !important;
    }
    
    .campaign-login-form,
    .campaign-card-form,
    .campaign-doctor-form,
    .campaign-question-form,
    .campaign-question-empty,
    .campaign-result-content,
    .campaign-scratch-content,
    .campaign-thank-copy {
        max-width: 650px !important; 
    }

    .campaign-main-logo .logo-line { font-size: 85px; } 
    .campaign-main-logo .logo-liver { 
        width: 340px; height: 170px; font-size: 64px; 
    }
    
    .campaign-login-screen .campaign-main-logo .logo-liver {
        width: 220px; height: 100px; font-size: 38px; 
    }

    .campaign-brand-block h1 { font-size: 34px !important; }
    .campaign-brand-block p { font-size: 14px; }

    .logo-tribivet { height: 60px; } 
    .logo-intas { height: 65px; width: auto; } 
    .logo-neovet { height: 52px; width: auto; } 

    .campaign-field label, 
    .campaign-doctor-field label { 
        font-size: 20px; 
    }
    #loginForm label {
        font-size: 20px !important; 
        margin-bottom: 10px;
    }
    .campaign-pill-input { 
        height: 46px; 
    }
    .campaign-theme .campaign-pill-input input { 
        font-size: 18px; 
    }

    .campaign-login-button { 
        width: 140px !important; height: 38px; font-size: 18px; 
    }
    .campaign-section-pill { 
        width: 250px; height: 56px; font-size: 22px; 
    }
    .campaign-theme .campaign-next-mark, 
    .campaign-theme button.campaign-next-mark {
        width: auto !important; min-width: 140px !important; 
        height: 64px !important; 
        font-size: 26px !important; 
        line-height: 64px !important;
        padding: 0 30px !important; 
        border-radius: 32px !important;
        right: 80px !important;
        bottom: auto !important; 
        top: 50% !important; 
        margin-top: -32px !important; 
    }

    .campaign-question-visual { height: 260px; }
    .campaign-question-number { font-size: 30px; }
    .campaign-question-circle { 
        width: 230px; height: 230px; padding: 30px; 
    }
    .campaign-question-circle p { font-size: 18px; }
    .campaign-quiz-page .campaign-question-mark { 
        font-size: 120px !important; right: 150px !important; top: 25px !important;
    }
    .campaign-question-options b { font-size: 20px; }
    .campaign-question-options span { 
        width: 18px; height: 18px; margin-top: 4px; 
    }

    .campaign-colour-option { width: 210px; height: 75px; }
    .colour-title { font-size: 34px; }
    .campaign-colour-option strong { font-size: 38px; bottom: -50px; }
    .campaign-instruction-note { font-size: 24px; }
    .reward-liver { width: 380px; max-width: 380px; max-height: 380px; } 
    
    .reward-detox { 
        max-width: 320px; 
        max-height: 320px; 
        margin-top: 45px !important; 
    } 
    
    .reward-nuts { 
        max-width: 320px; 
        max-height: 320px; 
        margin-top: 45px !important; 
        margin-bottom: -30px !important; 
    }

    .campaign-scratch-card-wrap {
        transform: scale(1.35); 
        transform-origin: top center;
        margin-bottom: 60px;
    }

    .employee-logout-link {
        font-size: 18px; 
        padding: 12px 24px; 
        min-height: 48px;
    }
    
    .campaign-language-row span {
        font-size: 20px; 
        padding: 12px 40px; 
        border-width: 2px;
    }

    .campaign-corner-logo {
        width: 130px;
        font-size: 24px; 
        right: 80px !important;
        top: 40px !important;
    }
    .campaign-corner-logo b {
        font-size: 14px;
        padding: 6px 8px;
    }

    .campaign-scratch-screen .logo-tribivet {
    margin-bottom: -0px !important;
    margin-top: 60px !important; 
}

    
    .campaign-scratch-content h1 {
        margin-bottom: 30px;
    }
    .campaign-winner-copy {
        margin-bottom: 40px;
    }

    
    .reward-liver {
        margin-top: 55px !important;
        margin-bottom: 90px !important; 
    }
    
    .campaign-result-content h1 { 
        font-size: 28px; 
    }
    .campaign-result-content h1 span { 
        font-size: 32px; 
    }
    .campaign-gauge { 
        transform: scale(1.05); 
        transform-origin: top center; 
        margin-top: 50px; 
        margin-bottom: 50px; 
    }
    .campaign-suggested-action { 
        font-size: 18px; 
        margin-top: 71px; 
    }
        
}


@media (max-width: 1023px) {
    .hide-on-mobile {
        display: none !important;
    }
    .campaign-theme .campaign-next-mark,
    .campaign-theme button.campaign-next-mark {
        width: 80px !important;
        min-width: 80px !important;
        padding: 0 !important;
        font-size: 30px !important;
    }
}