:root{
    --ink:#000;
    --paper:#fbf8f2;
    --cream-dim:#000;
    --brass:#000;
    --brass-light:#000;
    --line:#e33a3b;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family: "Marcellus", sans-serif; background:var(--paper); color:var(--ink);}

.commitment{
    max-width:760px;
    margin:0 auto;
    padding:90px 32px 110px;
}

.commitment-head{
    text-align:center;
    margin-bottom:70px;
}
.commitment-head .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--brass);
    font-size:13px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:16px;
}
.commitment-head .eyebrow::before,
.commitment-head .eyebrow::after{
    content:"";
    width:24px;
    height:1px;
    background:var(--brass);
}
.commitment-head h1{
    font-family: "Marcellus", sans-serif;
    font-weight:700;
    font-size:clamp(28px,4vw,42px);
    line-height:1.2;
}

.steps{
    position:relative;
}
.steps::before{
    content:"";
    position:absolute;
    left:34px;
    top:34px;
    bottom:34px;
    width:1px;
    background:var(--line);
    z-index:0;
}

.step{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:68px 1fr;
    gap:32px;
    padding-bottom:56px;
}
.step:last-child{padding-bottom:0;}

.step-num{
    width:68px;
    height:68px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: "Marcellus", sans-serif;
    font-weight:700;
    font-size:22px;
    color:var(--brass);
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.step:hover .step-num{
    background:var(--brass);
    color:#fff;
    border-color:var(--brass);
    transform:scale(1.06);
}

.step-copy{
    padding-top:10px;
}
.step-copy h3{
    font-family: "Marcellus", sans-serif;
    font-weight:600;
    font-size:20px;
    margin-bottom:10px;
    line-height:1.3;
}
.step-copy p{
    color:var(--dim);
    font-size:15px;
    line-height:1.7;
    max-width:480px;
}

@media (max-width:600px){
    .steps::before{left:26px;}
    .step{grid-template-columns:52px 1fr; gap:20px;}
    .step-num{width:52px; height:52px; font-size:17px;}
}