.r48{
    margin-top:58px;
    color:#35565d;
}

.r48 *{
    box-sizing:border-box;
}

.r48__intro{
    max-width:900px;
}

.r48__kicker,
.r48__heading p{
    margin:0 0 7px;
    color:#c96b5c;
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.16em;
}

.r48__intro h2{
    margin:0 0 18px;
    color:#163a43;
    font-size:clamp(2rem,4vw,3.25rem);
    line-height:1.08;
}

.r48__lead{
    font-size:1.08rem;
    line-height:1.8;
}

.r48 p{
    line-height:1.75;
}

.r48__nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:28px 0 52px;
}

.r48__nav a{
    padding:8px 11px;
    border:1px solid #d8e2df;
    border-radius:999px;
    background:#fff;
    color:#31646a;
    font-size:.72rem;
    font-weight:800;
    text-decoration:none;
}

.r48__section{
    margin-top:60px;
}

.r48__heading{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.r48__heading > span{
    min-width:40px;
    color:#c6a667;
    font-size:.72rem;
    font-weight:900;
}

.r48__heading h2{
    margin:0;
    color:#163a43;
    font-size:clamp(1.55rem,3vw,2.3rem);
    line-height:1.15;
}

.r48__cards,
.r48__progression,
.r48__tempo,
.r48__weeks{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
}

.r48__cards article,
.r48__progression article,
.r48__tempo article,
.r48__weeks article,
.r48__levels article,
.r48__routine article{
    padding:18px;
    border:1px solid #dce5e3;
    border-radius:15px;
    background:#fff;
}

.r48__cards strong{
    color:#087f84;
}

.r48__figure{
    margin:48px 0;
    padding:18px;
    border:1px solid #dce5e3;
    border-radius:18px;
    background:#fff;
}

.r48__figure img{
    display:block;
    width:100%;
    height:auto;
}

.r48__figure figcaption{
    margin-top:10px;
    color:#718287;
    font-size:.72rem;
    line-height:1.5;
}

.r48__check-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}

.r48__check-grid div{
    display:flex;
    gap:9px;
    align-items:center;
    padding:13px 15px;
    border-radius:12px;
    background:#fff;
}

.r48__check-grid span{
    color:#087f84;
    font-weight:900;
}

.r48__check-grid p{
    margin:0;
}

.r48__tip,
.r48__practice-box{
    margin-top:20px;
    padding:19px 21px;
    border-left:4px solid #c6a667;
    border-radius:0 14px 14px 0;
    background:#fff;
}

.r48__tip strong,
.r48__practice-box strong{
    color:#163a43;
}

.r48__beats{
    display:grid;
    gap:8px;
    margin:22px 0;
}

.r48__beats--in{
    grid-template-columns:repeat(4,1fr);
}

.r48__beats--out{
    grid-template-columns:repeat(8,1fr);
}

.r48__beats > div{
    padding:16px 8px;
    border-radius:12px;
    background:#e7f3f1;
    text-align:center;
}

.r48__beats--out > div{
    background:#f5e7e3;
}

.r48__beats span,
.r48__beats strong,
.r48__beats small{
    display:block;
}

.r48__beats span{
    color:#087f84;
    font-weight:900;
}

.r48__beats--out span{
    color:#b55b4e;
}

.r48__beats strong{
    margin-top:5px;
    color:#163a43;
}

.r48__beats small{
    margin-top:4px;
    color:#718287;
}

.r48__formula{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    padding:16px 18px;
    border-radius:13px;
    background:#173e46;
    color:#fff;
}

.r48__formula span{
    font-weight:800;
}

.r48__procedure{
    margin-top:20px;
    padding:20px 22px;
    border-radius:15px;
    background:#fff;
}

.r48__procedure li,
.r48__steps li{
    margin:.55rem 0;
    line-height:1.6;
}

.r48__comparison{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:20px 0;
}

.r48__comparison article{
    padding:18px;
    border-radius:14px;
    background:#fff;
}

.r48__comparison strong{
    color:#163a43;
}

.r48__comparison p{
    font-family:monospace;
    font-size:1.1rem;
    letter-spacing:.08em;
}

.r48__note-options{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:20px 0;
}

.r48__note-options span{
    min-width:50px;
    padding:11px 15px;
    border-radius:999px;
    background:#173e46;
    color:#fff;
    font-weight:900;
    text-align:center;
}

.r48__dynamic{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    align-items:center;
    margin:22px 0;
    padding:18px;
    border-radius:15px;
    background:#fff;
    font-size:1.2rem;
}

.r48__dynamic span{
    color:#163a43;
    font-weight:900;
}

.r48__dynamic b{
    color:#c96b5c;
}

.r48__tempo article span,
.r48__progression article > span,
.r48__weeks article > span,
.r48__levels article > span,
.r48__routine article > span{
    display:block;
    margin-bottom:6px;
    color:#087f84;
    font-size:.72rem;
    font-weight:900;
}

.r48__tempo strong{
    display:block;
    color:#163a43;
}

.r48__table-wrap{
    margin-top:22px;
    overflow-x:auto;
    border:1px solid #dce5e3;
    border-radius:15px;
    background:#fff;
}

.r48 table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.r48 th,
.r48 td{
    padding:13px 15px;
    border-bottom:1px solid #e1e9e7;
    text-align:left;
    vertical-align:top;
}

.r48 th{
    background:#e9f2f0;
    color:#163a43;
    font-size:.77rem;
}

.r48 td{
    color:#536b70;
    font-size:.82rem;
    line-height:1.55;
}

.r48__checklist{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:22px;
}

.r48__checklist > div{
    display:flex;
    gap:10px;
    padding:13px 15px;
    border:1px solid #dce5e3;
    border-radius:12px;
    background:#fff;
}

.r48__checklist span{
    color:#087f84;
    font-weight:900;
}

.r48__checklist p{
    margin:0;
}

.r48__progression h3,
.r48__weeks h3{
    margin:.3rem 0 .6rem;
    color:#163a43;
}

.r48__phrase{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:22px 0;
}

.r48__phrase div{
    padding:16px;
    border-radius:13px;
    background:#fff;
    text-align:center;
}

.r48__phrase span{
    display:block;
    color:#c96b5c;
    font-weight:900;
}

.r48__phrase p{
    margin:.35rem 0 0;
}

.r48__notes{
    color:#087f84;
    font-size:1.15rem;
    font-weight:900;
}

.r48__levels{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:22px;
}

.r48__weeks ul,
.r48__levels ul{
    padding-left:18px;
}

.r48__weeks li,
.r48__levels li{
    margin:.4rem 0;
    line-height:1.5;
}

.r48__routine{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin-top:22px;
}

.r48__routine strong{
    display:block;
    color:#163a43;
}

.r48__warning{
    padding:20px 22px;
    border:1px solid #e5c3bd;
    border-radius:15px;
    background:#fff3f0;
}

.r48__warning strong{
    color:#a5483d;
}

.r48__videos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:23px;
}

.r48__videos article{
    overflow:hidden;
    border:1px solid #dce5e3;
    border-radius:17px;
    background:#fff;
}

.r48__video{
    aspect-ratio:16/9;
    background:#173e46;
}

.r48__video iframe{
    width:100%;
    height:100%;
    border:0;
}

.r48__video-copy{
    padding:17px 18px;
}

.r48__video-copy > span{
    color:#c96b5c;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.08em;
}

.r48__video-copy h3{
    margin:.4rem 0;
    color:#163a43;
}

.r48__final{
    margin-top:60px;
    padding:22px 24px;
    border-left:4px solid #087f84;
    border-radius:0 15px 15px 0;
    background:#e8f4f2;
}

.r48__final strong{
    color:#075e63;
}

@media(max-width:900px){

    .r48__cards,
    .r48__progression,
    .r48__tempo,
    .r48__weeks,
    .r48__phrase{
        grid-template-columns:1fr 1fr;
    }

    .r48__routine{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:700px){

    .r48__cards,
    .r48__check-grid,
    .r48__comparison,
    .r48__progression,
    .r48__tempo,
    .r48__checklist,
    .r48__levels,
    .r48__weeks,
    .r48__routine,
    .r48__videos,
    .r48__phrase{
        grid-template-columns:1fr;
    }

    .r48__beats--in{
        grid-template-columns:repeat(2,1fr);
    }

    .r48__beats--out{
        grid-template-columns:repeat(4,1fr);
    }

}