.reframe-section{
    margin:140px 0 180px;
    color:#2F2F2F;
}

.reframe-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:80px;
    align-items:start;
    margin-bottom:64px;
}

.reframe-eyebrow{
    grid-column:1 / -1;
    margin-bottom:22px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
}

.reframe-intro h2{
    margin:0;
    max-width:650px;
    font-size:46px;
    line-height:1.08;
    font-weight:600;
}

.reframe-intro p{
    max-width:410px;
    margin:6px 0 0 auto;
    font-size:15px;
    line-height:1.55;
}

.reframe-stage{
    position:relative;
    aspect-ratio:21 / 9;
    overflow:hidden;
    border-top:1px solid #A7A39F;
    border-bottom:1px solid #A7A39F;
    background:#F3F2F0;
}

.reframe-rule{
    position:absolute;
    top:0;
    bottom:0;
    left:12%;
    width:1px;
    background:#2F2F2F;
    animation:reframeRule 15s cubic-bezier(.65,0,.35,1) infinite;
}

.reframe-phase{
    position:absolute;
    top:50%;
    opacity:0;
}

.reframe-phase p{
    margin:0;
    font-size:34px;
    line-height:1.2;
    font-weight:500;
}

.reframe-label{
    display:block;
    margin-bottom:28px;
    font-size:11px;
    line-height:1;
    font-weight:600;
    text-transform:uppercase;
}

.reframe-question{
    left:18%;
    width:68%;
    animation:reframeQuestion 15s cubic-bezier(.22,1,.36,1) infinite;
}

.reframe-meaning{
    left:55%;
    width:36%;
    animation:reframeMeaning 15s cubic-bezier(.22,1,.36,1) infinite;
}

.reframe-meaning .reframe-support{
    margin-top:26px;
    font-size:17px;
    line-height:1.5;
    font-weight:400;
}

.reframe-action{
    left:18%;
    width:64%;
    animation:reframeAction 15s cubic-bezier(.22,1,.36,1) infinite;
}

.reframe-action a{
    display:inline-block;
    margin-top:34px;
    padding-bottom:4px;
    border-bottom:1px solid currentColor;
    font-size:13px;
    font-weight:600;
}

@keyframes reframeQuestion{
    0%{opacity:0;transform:translateY(calc(-50% + 26px));clip-path:inset(0 0 100% 0);}
    4%,23%{opacity:1;transform:translateY(-50%);clip-path:inset(0 0 0 0);}
    29%,100%{opacity:0;transform:translate(-55px,-50%);clip-path:inset(0 100% 0 0);}
}

@keyframes reframeMeaning{
    0%,29%{opacity:0;transform:translate(42px,-50%);clip-path:inset(0 0 100% 0);}
    35%,56%{opacity:1;transform:translate(0,-50%);clip-path:inset(0 0 0 0);}
    62%,100%{opacity:0;transform:translate(-55px,-50%);clip-path:inset(0 100% 0 0);}
}

@keyframes reframeAction{
    0%,62%{opacity:0;transform:translateY(calc(-50% + 26px));clip-path:inset(0 0 100% 0);}
    68%,92%{opacity:1;transform:translateY(-50%);clip-path:inset(0 0 0 0);}
    98%,100%{opacity:0;transform:translateY(calc(-50% - 24px));clip-path:inset(100% 0 0 0);}
}

@keyframes reframeRule{
    0%,24%{left:12%;}
    33%,57%{left:50%;}
    66%,93%{left:88%;}
    100%{left:12%;}
}

.answer-source-library{margin-top:100px;}

.answer-source-heading{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:80px;
    margin-bottom:48px;
}

.answer-source-heading h3{
    margin:0;
    font-size:28px;
    line-height:1.2;
    font-weight:600;
}

.answer-source-heading p{
    margin:3px 0 0;
    font-size:13px;
    line-height:1.5;
}

.answer-source-index{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:80px;
}

.answer-source-index a{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:12px;
    align-items:start;
    padding:20px 0 22px;
    border-top:1px solid #C8C6C3;
}

.answer-source-index span{
    padding-top:2px;
    font-size:11px;
    font-weight:400;
}

.answer-source-index strong{
    font-size:16px;
    line-height:1.35;
    font-weight:600;
}

.answer-source-index a:hover strong,
.answer-source-index a:focus strong{text-decoration:underline;}

.answer-source-open{
    display:inline-block;
    margin-top:46px;
    padding-bottom:5px;
    border-bottom:1px solid currentColor;
    font-size:20px;
    font-weight:700;
}

@media screen and (max-width:1159px){
    .reframe-section{
        width:80%;
        margin:120px 10% 140px;
    }

    .reframe-intro,
    .answer-source-heading{
        display:block;
        margin-bottom:42px;
    }

    .reframe-intro h2{font-size:clamp(32px,6vw,48px);}
    .reframe-intro p{margin:24px 0 0;max-width:520px;}

    .reframe-stage{aspect-ratio:16 / 10;}
    .reframe-phase p{font-size:clamp(24px,4.2vw,38px);}
    .reframe-meaning .reframe-support{font-size:15px;}

    .answer-source-heading p{margin-top:14px;}
    .answer-source-index{column-gap:40px;}
}

@media screen and (max-width:640px){
    .reframe-section{margin-top:100px;margin-bottom:110px;}
    .reframe-eyebrow{margin-bottom:18px;}
    .reframe-intro h2{font-size:34px;}
    .reframe-stage{aspect-ratio:4 / 5;}

    .reframe-phase p{font-size:25px;line-height:1.2;}
    .reframe-label{margin-bottom:20px;font-size:10px;}
    .reframe-question{left:14%;width:74%;}
    .reframe-meaning{left:24%;width:66%;}
    .reframe-action{left:14%;width:74%;}
    .reframe-meaning .reframe-support{margin-top:20px;font-size:14px;line-height:1.4;}
    .reframe-action a{margin-top:25px;font-size:12px;}

    @keyframes reframeRule{
        0%,24%{left:8%;}
        33%,57%{left:17%;}
        66%,93%{left:92%;}
        100%{left:8%;}
    }

    .answer-source-library{margin-top:74px;}
    .answer-source-heading h3{font-size:25px;}
    .answer-source-index{display:block;}
    .answer-source-index a{grid-template-columns:34px 1fr;padding:17px 0 19px;}
    .answer-source-index strong{font-size:15px;}
    .answer-source-open{margin-top:36px;font-size:18px;}
}

@media (prefers-reduced-motion:reduce){
    .reframe-stage{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:36px;
        aspect-ratio:auto;
        padding:52px 40px;
    }
    .reframe-rule{display:none;animation:none;}
    .reframe-phase{
        position:static;
        width:auto;
        opacity:1;
        transform:none;
        animation:none;
    }
    .reframe-phase p{font-size:20px;}
    .reframe-meaning .reframe-support{font-size:14px;}
}

@media screen and (max-width:640px) and (prefers-reduced-motion:reduce){
    .reframe-stage{display:block;padding:36px 24px;}
    .reframe-phase + .reframe-phase{margin-top:42px;padding-top:34px;border-top:1px solid #C8C6C3;}
}