.hw {
  --ink:#2D2A26; --sec:#6B6560; --ter:#6F6962; --greenT:#3AB648; --hair:#E5DFD5;
  max-width:1240px; margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,2.5rem); padding-block:clamp(3.5rem,8vw,6.5rem);
  color:var(--ink);
}
.hw-eyebrow { margin:0 0 clamp(1.25rem,2.2vw,1.75rem); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--greenT); }
.hw-head { margin:0; max-width:22ch; font-size:clamp(2rem,4.4vw,3.6rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.04; text-wrap:balance; }
.hw-lede { margin:clamp(1rem,2vw,1.5rem) 0 0; max-width:58ch;
  font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.55; color:var(--sec); }

.hw-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:start; }
.hw-step { opacity:0; transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1); }
.hw.in .hw-step { opacity:1; transform:none; }
.hw.in .hw-step:nth-child(2){transition-delay:.09s}
.hw.in .hw-step:nth-child(3){transition-delay:.18s}
.hw.in .hw-step:nth-child(4){transition-delay:.27s}

.hw-step-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .6rem;
  padding-bottom:.8rem; border-bottom:2px solid var(--greenT); }
.hw-step.is-soon .hw-step-h { border-bottom-color:var(--hair); border-bottom-style:dashed; }
.hw-n { font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--greenT);
  font-variant-numeric:tabular-nums; }
.hw-step.is-soon .hw-n { color:var(--ter); }
.hw-k { margin:0; font-size:clamp(1.05rem,1.35vw,1.22rem); font-weight:600; letter-spacing:-.02em; }
.hw-tag { flex:0 0 100%; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ter); }
.hw-tag.is-live { color:var(--greenT); }

.hw-shot { margin:clamp(.9rem,1.8vw,1.25rem) 0 0; padding:0; overflow:hidden;
  border-radius:12px; border:1px solid var(--hair); background:#fff;
  aspect-ratio:4/5; }
.hw-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }

.hw-shot.is-wide img { object-position:top left; }
.hw-note { margin:clamp(.9rem,1.8vw,1.25rem) 0 0; padding:clamp(.9rem,1.8vw,1.2rem);
  border-radius:12px; border:1px dashed var(--hair); background:rgba(45,42,38,.025);
  aspect-ratio:4/5; display:grid; align-content:center;
  font-size:.9rem; line-height:1.5; color:var(--sec); }

.hw-sides { margin:clamp(1rem,2vw,1.35rem) 0 0; display:grid; gap:.9rem; }
.hw-sides div { display:grid; gap:.2rem; }
.hw-sides dt { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); opacity:.72; }
.hw-sides dd { margin:0; font-size:.9rem; line-height:1.45; color:var(--sec); }

@media (max-width:1000px) { .hw-steps { grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,2.5rem); } }
@media (max-width:600px) { .hw-steps { grid-template-columns:1fr; }
  .hw-shot,.hw-note { aspect-ratio:16/10; } }
.hw-more { margin: clamp(1.75rem,3.5vw,2.5rem) 0 0; font-size: .82rem; color: var(--ter); }

#howitworks { background:#FFFFFF; }