/* HOW IT WORKS — common */
.how { background: var(--ivory); }
.how h2 .italic { font-family: var(--serif); font-style: italic; color: var(--clay); font-weight: 400;}

/* ── A: horizontal stepped cards ── */
.howA-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.howA-card {
  padding: 36px 32px 56px;
  border-left: 1px solid var(--line);
  position: relative;
  background: var(--card);
}
.howA-card:first-child { border-left: none; }
.howA-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 56px;
  color: var(--ink-soft);
}
.howA-num { font-size: 12px; letter-spacing: 0.14em; color: var(--ink-mute);}
.howA-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--clay-wash);
  color: var(--clay-deep);
}
.howA-card h3 { font-size: 24px; max-width: 14ch; letter-spacing: -0.02em;}
.howA-card p { font-size: 14px; color: var(--ink-soft); margin-top: 12px; max-width: 32ch;}
.howA-line { position: absolute; bottom: 24px; left: 32px; right: 32px; display: flex; align-items: center; gap: 8px;}
.howA-line-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay);}
.howA-line-rule { flex: 1; height: 1px; background: var(--line);}

@media (max-width: 980px) {
  .howA-grid { grid-template-columns: 1fr; }
  .howA-card { border-left: none; border-top: 1px solid var(--line);}
  .howA-card:first-child { border-top: none; }
}

/* ── B: vertical timeline + mini mockups ── */
.howB-stack { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line);}
.howB-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.howB-rail { display: flex; flex-direction: column; align-items: center; height: 100%;}
.howB-rail-num {
  font-size: 28px;
  font-weight: 500;
  color: var(--clay);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-family: var(--sans);
}
.howB-rail-bar { width: 1px; flex: 1; background: linear-gradient(180deg, var(--clay), transparent);}
.howB-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-mute); font-size: 11px; letter-spacing: 0.1em; margin-bottom: 14px;}
.howB-dot { color: var(--clay);}
.howB-body h3 { font-size: 28px; letter-spacing: -0.02em; max-width: 14ch;}
.howB-body p { font-size: 15px; color: var(--ink-soft); margin-top: 12px; max-width: 40ch;}

.howB-visual {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  min-height: 180px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
}

.howmm-chat .hmm-bub {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  margin-bottom: 6px;
  max-width: 80%;
  line-height: 1.3;
}
.hmm-bub.them { background: var(--ivory-2); color: var(--ink-2); border-bottom-left-radius: 4px;}
.hmm-bub.us { background: var(--ink); color: var(--paper); align-self: flex-end; margin-left: auto; border-bottom-right-radius: 4px;}
.hmm-typing { display: flex; gap: 4px; margin-top: 4px; padding: 8px 12px; background: var(--ivory-2); border-radius: 14px; width: fit-content;}
.hmm-typing span { width: 5px; height: 5px; background: var(--ink-mute); border-radius: 50%; animation: typing 1.2s infinite;}
.hmm-typing span:nth-child(2) { animation-delay: 0.15s;}
.hmm-typing span:nth-child(3) { animation-delay: 0.3s;}
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4;} 30% { transform: translateY(-3px); opacity: 1;}}

.howmm-build .hmm-build-bar { display: flex; gap: 4px; margin-bottom: 12px;}
.howmm-build .hmm-build-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);}
.hmm-build-title { font-family: var(--mono); font-size: 12px; color: var(--ink-soft);}
.hmm-build-prog { height: 4px; background: var(--ivory-2); border-radius: 2px; margin: 10px 0 14px; overflow: hidden;}
.hmm-build-prog-fill { height: 100%; background: var(--clay); width: 72%; animation: progress 2s ease-out;}
@keyframes progress { from { width: 0;} to { width: 72%;}}
.hmm-build-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ink-2);}
.hmm-build-row .mono { color: var(--ink-mute); font-size: 12px;}
.hmm-build-row .done { color: var(--moss);}

.howmm-live { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.hmm-live-card { background: var(--paper); padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);}
.hmm-live-eye { font-size: 9px; color: var(--ink-mute); letter-spacing: 0.14em;}
.hmm-live-msg { font-size: 12px; margin: 6px 0 6px; line-height: 1.3;}
.hmm-live-foot { font-size: 10px; color: var(--moss);}
.hmm-live-card-2 { background: var(--ink); color: var(--paper);}
.hmm-live-card-2 .hmm-live-eye { color: rgba(255,255,255,0.6);}
.hmm-live-big { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin-top: 6px;}

@media (max-width: 980px) {
  .howB-row { grid-template-columns: 60px 1fr; }
  .howB-visual { grid-column: 1 / -1; }
}

/* ── C: editorial spreads ── */
.howC-spread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
}
.howC-page {
  padding: 44px 38px 36px;
  border-left: 1px solid var(--line);
  position: relative;
  background: var(--paper);
  min-height: 360px;
  display: flex; flex-direction: column;
}
.howC-page:first-child { border-left: none; }
.howC-page.alt { background: var(--card);}
.howC-folio { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--ink-mute); letter-spacing: 0.24em;}
.howC-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  color: var(--clay);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  font-weight: 400;
}
.howC-title { font-size: 26px; letter-spacing: -0.02em; max-width: 14ch; }
.howC-body { font-size: 15px; color: var(--ink-soft); margin-top: 14px; max-width: 36ch;}
.howC-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.howC-foot .mono { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.16em;}
.howC-foot-val { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink);}

@media (max-width: 980px) {
  .howC-spread { grid-template-columns: 1fr; }
  .howC-page { border-left: none; border-top: 1px solid var(--line);}
  .howC-page:first-child { border-top: none; }
}