/*
 * How It Works — S1 step visuals.
 *
 * Four mock graphics inside the step bands: install code block, chat
 * widget, pricing engine, lead inbox. Per the design handoff these are
 * representative mocks — swap for real product screenshots before
 * launch (docs/plans/how-it-works-page-spec.md §6).
 */

.hiw-visual {
  padding: 24px;
  background: var(--ink-0);
  border: 1px solid var(--ink-3);
}

/* ---- 01 · Install code block ---- */
.hiw-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-bottom: none;
}
.hiw-code-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.hiw-code-file {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gray-2);
}
.hiw-code-block {
  margin: 0;
  padding: 20px;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-3);
  white-space: pre-wrap;
  overflow-x: auto;
}
.hiw-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hiw-platform-chip {
  padding: 5px 10px;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--gray-3);
}

/* ---- 02 · Chat widget mock ---- */
.hiw-widget {
  display: flex;
  flex-direction: column;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  overflow: hidden;
}
.hiw-widget-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--amber-2);
}
.hiw-widget-brand {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-0);
}
.hiw-widget-close { color: var(--ink-0); font-weight: 700; }
.hiw-widget-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  min-height: 200px;
}
.hiw-bubble-ai,
.hiw-bubble-user {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 13px;
}
.hiw-bubble-ai { align-self: flex-start; background: var(--ink-2); color: var(--paper); }
.hiw-bubble-user {
  align-self: flex-end;
  background: var(--amber-2);
  color: var(--ink-0);
  font-weight: 500;
}
.hiw-widget-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--ink-3);
}
.hiw-widget-input-ph { font-size: 13px; color: var(--gray-2); }
.hiw-widget-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--amber-2);
  color: var(--ink-0);
  font-weight: 700;
}

/* ---- 03 · Pricing engine ---- */
.hiw-engine { display: flex; flex-direction: column; }
.hiw-engine-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-3);
}
.hiw-engine-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gray-2);
}
.hiw-engine-val { font-family: var(--mono); font-size: 12px; color: var(--paper); }
.hiw-engine-sep { height: 2px; margin: 12px 0; background: var(--amber-2); }
.hiw-engine-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
}
.hiw-engine-result-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--amber);
}
.hiw-engine-result-val {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* ---- 04 · Lead inbox ---- */
.hiw-inbox { display: flex; flex-direction: column; border: 1px solid var(--ink-3); }
.hiw-inbox-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
}
.hiw-inbox-head-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--gray-2);
}
.hiw-inbox-head-r {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--amber);
}
.hiw-inbox-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-3);
}
.hiw-inbox-row:last-child { border-bottom: none; }
.hiw-inbox-row--muted { opacity: 0.55; }
.hiw-inbox-row-l { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.hiw-inbox-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}
.hiw-inbox-preview { font-size: 12px; color: var(--gray-3); }
.hiw-inbox-meta {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--gray-2);
}
.hiw-inbox-price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}
.hiw-inbox-price-flag {
  padding: 4px 8px;
  border: 1px solid var(--amber);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--amber);
}