.frp{
    margin-top:60px;
    color:#35565d;
}

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

.frp__intro{
    max-width:920px;
}

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

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

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

.frp p{
    line-height:1.75;
}

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

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

.frp__section{
    margin-top:62px;
}

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

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

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

.frp__principle{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    gap:8px;
    align-items:center;
    margin-top:24px;
}

.frp__principle > div:not(:nth-child(even)){
    padding:17px;
    border:1px solid #dce5e3;
    border-radius:14px;
    background:#fff;
    text-align:center;
}

.frp__principle span{
    display:inline-flex;
    width:27px;
    height:27px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#087f84;
    color:#fff;
    font-size:.68rem;
    font-weight:900;
}

.frp__principle strong,
.frp__principle p{
    display:block;
}

.frp__principle strong{
    margin-top:7px;
    color:#163a43;
}

.frp__principle p{
    margin:.25rem 0 0;
    font-size:.8rem;
}

.frp__grammar,
.frp__three,
.frp__breath-types,
.frp__marks,
.frp__air-levels,
.frp__tempo,
.frp__dynamic,
.frp__levels{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
}

.frp__grammar article,
.frp__three article,
.frp__breath-types article,
.frp__marks article,
.frp__air-levels article,
.frp__tempo article,
.frp__dynamic article,
.frp__levels article,
.frp__weeks article,
.frp__routine article,
.frp__ab article{
    padding:18px;
    border:1px solid #dce5e3;
    border-radius:15px;
    background:#fff;
}

.frp__grammar > article > span{
    display:block;
    color:#c96b5c;
    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:900;
}

.frp__grammar strong,
.frp__three span,
.frp__marks strong,
.frp__tempo strong,
.frp__dynamic strong{
    color:#163a43;
}

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

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

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

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

.frp__contrast article{
    padding:20px;
    border-radius:15px;
    background:#fff;
}

.frp__contrast strong{
    color:#163a43;
}

.frp__contrast li,
.frp__levels li,
.frp__weeks li{
    margin:.4rem 0;
    line-height:1.5;
}

.frp__tip{
    margin-top:22px;
    padding:19px 21px;
    border-left:4px solid #c6a667;
    border-radius:0 14px 14px 0;
    background:#fff;
}

.frp__tip strong{
    color:#163a43;
}

.frp__rule{
    margin-top:22px;
    padding:22px;
    border-radius:14px;
    background:#173e46;
    color:#fff;
    font-size:1.35rem;
    font-weight:900;
    text-align:center;
}

.frp__breath-types article > span,
.frp__marks article > span{
    display:inline-flex;
    width:31px;
    height:31px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#087f84;
    color:#fff;
    font-weight:900;
}

.frp__breath-types h3{
    margin:.6rem 0;
    color:#163a43;
}

.frp__formula,
.frp__sequence{
    margin:20px 0;
    padding:18px;
    border-radius:14px;
    background:#173e46;
    color:#fff;
    font-size:1.05rem;
    font-weight:800;
    text-align:center;
}

.frp__list{
    padding:18px 18px 18px 40px;
    border-radius:14px;
    background:#fff;
}

.frp__list li{
    margin:.45rem 0;
}

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

.frp__practice h3{
    margin-top:0;
    color:#163a43;
}

.frp__practice li,
.frp__procedure li{
    margin:.55rem 0;
    line-height:1.6;
}

.frp__window{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:center;
    margin:22px 0;
}

.frp__window span{
    padding:16px;
    border-radius:13px;
    background:#fff;
    text-align:center;
    font-weight:800;
}

.frp__window span:nth-child(3){
    background:#087f84;
    color:#fff;
}

.frp__window b{
    color:#c96b5c;
}

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

.frp table{
    width:100%;
    min-width:800px;
    border-collapse:collapse;
}

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

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

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

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

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

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

.frp__checklist p{
    margin:0;
}

.frp__levels article > span,
.frp__weeks article > span,
.frp__routine article > span{
    display:block;
    margin-bottom:7px;
    color:#087f84;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.06em;
}

.frp__levels h3,
.frp__weeks h3{
    margin:.3rem 0 .7rem;
    color:#163a43;
}

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

.frp__questions p{
    margin:0;
    padding:14px 16px;
    border-radius:12px;
    background:#fff;
}

.frp__ab{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:22px 0;
}

.frp__ab span{
    display:inline-flex;
    width:30px;
    height:30px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#c96b5c;
    color:#fff;
    font-weight:900;
}

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

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

.frp__routine strong{
    color:#163a43;
}

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

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

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

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

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

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

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

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

.frp__final strong{
    color:#075e63;
}

@media(max-width:950px){

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

    .frp__principle > div:nth-child(even){
        transform:rotate(90deg);
        text-align:center;
    }

    .frp__weeks,
    .frp__routine{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:720px){

    .frp__grammar,
    .frp__three,
    .frp__contrast,
    .frp__breath-types,
    .frp__marks,
    .frp__air-levels,
    .frp__tempo,
    .frp__dynamic,
    .frp__levels,
    .frp__checklist,
    .frp__questions,
    .frp__ab,
    .frp__weeks,
    .frp__routine,
    .frp__videos{
        grid-template-columns:1fr;
    }

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

    .frp__window b{
        transform:rotate(90deg);
        text-align:center;
    }

}