.method-hero{

    padding:90px 0;

}

.narrow{

    max-width:820px;

}

.method-hero h1{

    margin:20px 0 30px;

}

.method-hero p{

    color:var(--muted);
    font-size:1.15rem;

}

/* Framework */

.framework{

    background:#fafafa;

}

.framework-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;

}

.framework-card{

    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:42px;

}

.step{

    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    margin-bottom:30px;

}

.framework-card h2{

    margin-bottom:8px;

}

.framework-card h3{

    font-size:1.2rem;
    margin-bottom:20px;

}

.framework-card p{

    color:var(--muted);
    margin-bottom:25px;

}

.framework-card ul{

    padding-left:20px;
    color:var(--muted);

}

.framework-card li{

    margin-bottom:10px;

}

/* Principles */

.principles-list{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;

}

.principles-list div{

    border-top:3px solid var(--accent);
    padding-top:20px;

}

.principles-list strong{

    display:block;
    color:var(--accent);
    margin-bottom:16px;
    font-size:1.4rem;

}

.principles-list p{

    color:var(--muted);

}

/* Responsive */

@media(max-width:1000px){

    .framework-grid{

        grid-template-columns:1fr;

    }

    .principles-list{

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

    }

}

@media(max-width:700px){

    .principles-list{

        grid-template-columns:1fr;

    }

}