.hero .name{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:17px;color:rgba(255,255,255,.85);margin-bottom:18px}
.hero .name b{font-weight:500;color:#fff}

/* the cost of the problem: three cards */
.costs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.costs div{padding:30px 28px;border-radius:22px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.costs b{display:block;font-weight:500;font-size:clamp(20px,1.5vw,24px);line-height:1.25}
.costs p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}
@media (max-width:900px){.costs{grid-template-columns:1fr;max-width:560px}}

/* the method: eight steps in a numbered row */
.steps8{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.steps8 li{counter-increment:st;padding:24px 22px 26px 0;border-bottom:1px solid var(--line)}
.steps8 li:not(:nth-child(4n+1)){padding-right:22px;border-right:1px solid var(--line)}
.steps8 li::before{content:counter(st);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--petrol);color:#fff;font:700 13px/1 var(--stamp);margin-bottom:14px}
.steps8 b{display:block;font-weight:500;font-size:18px;line-height:1.3}
.steps8 p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:900px){.steps8{grid-template-columns:1fr 1fr}.steps8 li:not(:nth-child(4n+1)){padding-right:0;border-right:0}.steps8 li:nth-child(2n){padding-right:20px;border-right:1px solid var(--line)}}
@media (max-width:520px){.steps8{grid-template-columns:1fr}.steps8 li:nth-child(2n){padding-right:0;border-right:0}}

/* what you keep: the Tracker on the dark frame */
.keepsec{background:var(--frame);color:#fff}
.keepsec .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:center}
.keepsec h2{font-size:var(--fs-2xl)}
.keepsec .intro{color:rgba(255,255,255,.8)}
.keepsec ul{list-style:none;margin-top:28px;display:grid;gap:12px}
.keepsec li{position:relative;padding-right:20px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.keepsec li::before{content:"";position:absolute;right:0;top:.6em;width:7px;height:7px;border-radius:50%;background:#9fd0e2}
.keepsec .fr{display:block;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.keepsec .fr img{width:100%;height:auto}
.keepsec .cap{margin-top:14px;font-size:14px;color:rgba(255,255,255,.65)}
@media (max-width:900px){.keepsec .grid{grid-template-columns:1fr}}
.also{margin-top:20px;color:var(--muted);font-size:16px}