/* =========================
DISEASE TRANSITION
========================= */

.disease-transition{

position:fixed;

inset:0;

z-index:99999;

pointer-events:none;

opacity:0;

visibility:hidden;

}

/* FRAME */

.disease-frame{

position:absolute;

inset:0;

opacity:0;

transition:
opacity 1s ease;

background-size:cover;
background-position:center;

filter:
grayscale(.12)
contrast(1.02)
brightness(.58);

}

/* ACTIVE */

.disease-frame.active{

opacity:1;

}

/* IMAGES */

.disease-1{
background-image:url("../images/disease-1.webp");
}

.disease-2{
background-image:url("../images/disease-2.webp");
}

.disease-3{
background-image:url("../images/disease-3.webp");
}

.disease-4{
background-image:url("../images/disease-4.webp");
}

/* DARK OVERLAY */

.transition-dark{

position:absolute;

inset:0;

background:
rgba(0,0,0,.36);

}

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

.protocol-hero{

padding:
40px 0 40px;

text-align:center;

}

/* HERO TITLE */

.protocol-hero .hero-title{

max-width:1180px;

margin:auto;

font-size:
clamp(72px,5.8vw,112px);

line-height:1.02;

letter-spacing:-2px;

font-weight:300;

}

/* LINE */

.protocol-hero .line{

margin-top:38px;

}

/* HERO TEXT */

.protocol-text{

max-width:1080px;

margin:
52px auto 0;

font-size:22px;

line-height:2.15;

color:#5d5a57;
text-align: justify;

}

/* =========================
GRID SECTION
========================= */

.grid-section{

padding:
30px 0 50px;

}

/* PROTOCOL GRID */

.protocol-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);
border-top:
1px solid var(--line);

border-left:
1px solid var(--line);

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

}

/* CARD */

.protocol-card{

padding:
50px 25px;

min-height:300px;

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

text-align:center;

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

border-right:
1px solid var(--line);

border-bottom:
1px solid var(--line);

transition:
background .35s ease;

}

/* HOVER */

.protocol-card:hover{

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

}

/* NUMBER */

.protocol-number{


font-size:88px;

line-height:.85;

font-weight:300;

color:#419688;

margin-bottom:14px;

}

/* SMALL LINE */

.small-line{

width:36px;
height:1px;

background:var(--accent);

margin:
0 auto 24px;

}

/* TITLE */

.protocol-card h3{

font-size:28px;

line-height:1.12;

letter-spacing:-.5px;

margin-bottom:16px;

font-weight:300;

}

/* TEXT */

.protocol-card p{

font-size:18px;

line-height:2;

color:#5d5a57;

}

/* =========================
CTA SECTION
========================= */

.cta{

padding:
50px 0 60px;

text-align:center;

}

/* CTA TITLE */

.cta-title{

max-width:1080px;

margin:
0 auto 30px;

font-size:
clamp(52px,4vw,74px);

line-height:1.14;

letter-spacing:-1.5px;

font-weight:300;

}

/* =========================
BLOG SECTION
========================= */

.blog-section{

background:#f3efeb;

padding:
50px 0 60px;

}

/* BLOG TITLE */

.blog-title{

text-align:center;

font-size:
clamp(64px,5vw,90px);

line-height:.95;

margin-bottom:20px;

font-weight:300;

}

/* BLOG GRID */

.blog-grid{

display:grid;

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

gap:26px;

margin-top:70px;

}

/* BLOG CARD */

.blog-card{

background:#f8f5f2;

overflow:hidden;

transition:
transform .35s ease;

}

/* HOVER */

.blog-card:hover{

transform:
translateY(-4px);

}

/* IMAGE */

.blog-card img{

width:100%;

height:260px;

object-fit:cover;

background:#ebe7e2;

}

/* CONTENT */

.blog-content{

padding:24px;

}

/* TITLE */

.blog-content h3{

font-size:22px;

line-height:1.4;

letter-spacing:-.4px;

font-weight:300;

}

/* BUTTON WRAP */

.read-wrap{

display:flex;
justify-content:center;

margin-top:30px;
padding: 20px;
}

/* =========================
STUDIES SECTION
========================= */

.studies{

padding:
50px 0 60px;

background:#faf8f5;

}

/* TITLE */

.studies-title{

max-width:980px;

margin:
0 auto 34px;

text-align:center;

font-size:
clamp(52px,4vw,72px);

line-height:1.12;

letter-spacing:-1.5px;

font-weight:300;

}

/* LIST */

.study-list{

max-width:1120px;

margin:auto;

padding-left:24px;

margin-top:56px;

}

/* ITEM */

.study-list li{
font-size:15px;
line-height:2;
color:#4A4A4A;
margin-bottom:18px;
}
.study-list li::marker{
    font-variant-numeric: tabular-nums lining-nums;
    font-weight:700;
       font-size:15px;
    color:#4A4A4A;
}
.hedigndes{
    letter-spacing: -.5px;font-size: 35px;margin-top: 20px;}

        .imagedredits{padding: 20px;display: block; text-align: center;}


.intro-overlay{
position:fixed;
inset:0;
z-index:999999;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:#000;

transition:
opacity 1.2s ease,
visibility 1.2s ease;

}
.intro-content img{width: 220px;display: block;
    margin:0px auto;}
.intro-overlay.hide{

opacity:0;

visibility:hidden;

}

.intro-video{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}
.intro-title{

color:#fff !important;

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

line-height:1.08;

max-width:1000px;

margin:
30px auto 0;

font-weight:300;

text-align:center;

}
.intro-dark{

position:absolute;
inset:0;

background:
rgba(0,0,0,.65);

backdrop-filter:
blur(2px);

}

.intro-content{

position:relative;

z-index:2;

width:100%;

height:500px;

display:flex;

align-items:center;

flex-direction:column;

}

.contenttitle{

position:absolute;

top:60%;

left:50%;

transform:translate(-50%,-50%);

width:100%;

max-width:1200px;

padding:0 20px;

margin:0;

text-align:center;

font-size:65px;

line-height:1.15;

color:#fff;

opacity:0;

visibility:hidden;

pointer-events:none;

}

.contenttitle.active{

opacity:1;

visibility:visible;

}

#countdownTimer{
font-size:30px;
color: #fff;
top:70%;
position: relative;
}

.health-section{

padding:
80px 0 90px;

background:#FCFAF8;

overflow:hidden;

}

.health-section .section-title{

max-width:1000px;

font-size:
clamp(46px,4vw,76px);

line-height:1.14;

letter-spacing:-1.5px;

margin-bottom:0;
}


/* =========================
CTA
========================= */

.mint{

background:#D6E2DE;

padding:
70px 0;

text-align:center;

overflow:hidden;

}

.mint-inner{

max-width:1100px;

margin:auto;

}

.mint-title{

max-width:900px;

margin:auto;

font-size:
clamp(40px,3vw,62px);

line-height:1.22;

letter-spacing:-1.4px;

color:#111111;

}

.mint-subtext{

margin-top:24px;

font-size:21px;

line-height:1.9;

color:#37403D;

}

.health-action{

margin-top:40px;

display:flex;

justify-content:center;

}
/* Desktop default */
.intro-video-desktop {
    display: block;
}

.intro-video-mobile {
    display: none;
}


/* Mobile */
@media (max-width: 767px) {

    .intro-video-desktop {
        display: none;
    }

    .intro-video-mobile {
        display: block;
    }

}


.rrds-start, .rrds-result, .rrds-test {
        padding: 5px;
    }
    .rrds-symbol-svg {
    width: 16px;
    height: 19px;}
    .rrds-digit {
    font-size: 16px;}
    .rrds-key-box, .rrds-play-box {
    padding: 10px;
}
    .rrds-target {
        width: 60px;
        height: 60px;
        font-size: 31px;
    }
    .rrds-target-wrap {
    padding: 6px;}

.rrds-history {
    min-height: 23px;
    margin-top: 7px;
    display: flex;
    justify-content: center;
    gap: 4px;}




@media (max-width: 768px) {

    /* TEST SCREEN — everything should fit in one mobile screen */
    .rrds-test-screen {
        padding: 8px !important;
        min-height: 100vh !important;
    }

    /* Top Time / Score / Errors */
    .rrds-topbar {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .rrds-pill {
        padding: 6px 9px !important;
        font-size: 11px !important;
    }

    .rrds-pill strong {
        font-size: 10px !important;
    }

    /* KEY + PLAY SIDE BY SIDE */
    .rrds-test-grid {
        grid-template-columns: 0.82fr 1.18fr !important;
        gap: 8px !important;
        align-items: start !important;
    }

    /* Number-symbol key */
    .rrds-key-box {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .rrds-section-label {
        font-size: 10px !important;
        margin-bottom: 7px !important;
        letter-spacing: 0.8px !important;
    }

    .rrds-key-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .rrds-key-cell {
        min-height: 55px !important;
        padding: 4px !important;
        border-radius: 9px !important;
    }

    .rrds-digit {
        font-size: 17px !important;
        line-height: 1 !important;
    }

    .rrds-symbol-svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* RIGHT SIDE — Current number + answers */
    .rrds-play-box {
        padding: 0 !important;
    }

    .rrds-target-wrap {
        padding: 14px 8px !important;
        border-radius: 14px !important;
    }

    .rrds-target-note {
        font-size: 9px !important;
        margin-bottom: 6px !important;
        letter-spacing: 0.8px !important;
    }

    .rrds-target {
        width: 58px !important;
        height: 58px !important;
        font-size: 34px !important;
        margin: 0 auto 6px !important;
        border-radius: 15px !important;
    }

    .rrds-target-wrap .rrds-mini {
        font-size: 9px !important;
        line-height: 1.25 !important;
        margin: 4px 0 !important;
    }

    /* 3 × 3 answer buttons */
    .rrds-answer-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        margin-top: 7px !important;
    }

    .rrds-answer-grid button {
        min-height: 52px !important;
        padding: 4px !important;
        border-radius: 9px !important;
    }

    .rrds-answer-grid svg {
        width: 23px !important;
        height: 23px !important;
    }

    /* Remove unnecessary history height */
    .rrds-history {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Prevent horizontal overflow */
    .rrds-card,
    .rrds-test-screen,
    .rrds-test-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .rrds-start, .rrds-result, .rrds-test, .rrds-wrap {
        padding: 8px !important;
    }

    .line{display: none}
    .read-wrap {
    margin-top: 0px;padding: 10px}
    .protocol-hero {
    padding: 40px 0 20px;
}
.grid-section {
    padding: 30px 0 10px;
}
.protocol-card {
    padding: 10px !important;
    min-height: 180px;}
        .protocol-number {
        font-size: 40px;
        margin-bottom: 5px;
    }
    .protocol-card h3 {
    font-size: 25px !important;
    margin-bottom: 0px;}
    .hedigndes {
    font-size: 25px;
    margin-top: 0px;
}
.protocol-number {
        font-size: 45px !important;
        font-weight: 500;
    }
    .studies {
    padding: 30px 0 30px;}
    .protocol-number, .small-line{display: none;}
        .protocol-card {
        padding: 10px !important;
        min-height: 110px;
    }
}