.how-hero { padding: clamp(72px, 10vw, 140px) clamp(24px, 7vw, 104px); display: grid; grid-template-columns: 1.15fr .65fr; gap: clamp(45px, 9vw, 130px); align-items: end; background: var(--green); color: white; }
.how-hero h1 { max-width: 900px; margin: 0; font-family: Georgia, serif; font-size: clamp(3.6rem, 7vw, 7.3rem); line-height: .9; letter-spacing: -.06em; }
.how-hero > p { margin: 0; color: #d7e8e0; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; }
.journey { padding: clamp(72px, 9vw, 125px) clamp(22px, 7vw, 104px); }
.journey-creators { background: var(--paper); }
.journey-brands { background: var(--pink); }
.journey-heading { max-width: 850px; }
.journey-heading h2, .marketplace-boundary h2 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(2.8rem, 5.4vw, 5.7rem); line-height: .96; letter-spacing: -.05em; }
.journey-heading > p:last-child { max-width: 700px; color: #59635e; font-size: 1.05rem; line-height: 1.65; }
.journey-steps { max-width: 1240px; margin: 48px 0 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.journey-steps article { min-height: 275px; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: var(--cream); }
.journey-brands .journey-steps article { background: rgba(255,253,248,.82); }
.journey-steps span { color: var(--coral); font-family: Georgia, serif; font-size: 2.2rem; }
.journey-steps h3 { margin: 42px 0 10px; color: var(--green); font-family: Georgia, serif; font-size: 1.65rem; line-height: 1.08; }
.journey-steps p { margin: 0; color: #59635e; font-size: .88rem; line-height: 1.58; }
.how-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.marketplace-boundary { padding: clamp(70px, 9vw, 120px) clamp(24px, 7vw, 104px); background: var(--cream); text-align: center; }
.marketplace-boundary h2 { max-width: 930px; margin: 0 auto; }
.marketplace-boundary > p:last-child { max-width: 760px; margin: 24px auto 0; color: #59635e; font-size: 1.05rem; line-height: 1.7; }
@media (max-width: 960px) { .how-hero { grid-template-columns: 1fr; } .journey-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .journey-steps { grid-template-columns: 1fr; } .journey-steps article { min-height: 0; } .journey-steps h3 { margin-top: 24px; } }