/* "Como usar um cupom" customer help (site and app layouts).
   SPEC: specs/counter-qr-coupon-validation.md §3 */
.htu {
  --htu-text: var(--mob-text, #f5f5f5);
  --htu-muted: var(--mob-text-muted, #a0a0aa);
  --htu-accent: var(--mob-accent, #d2ff2a);
  --htu-surface: rgba(255, 255, 255, 0.04);
  --htu-border: rgba(255, 255, 255, 0.08);
  color: var(--htu-text);
  line-height: 1.6;
}
.htu-lead { margin: 0 0 24px; font-size: 1.05rem; }
.htu-block { margin: 0 0 32px; }
.htu-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.25rem; font-weight: 800; }
.htu-num {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--htu-accent); color: #0a0a0a; font-size: 0.95rem; font-weight: 900;
}
.htu-tag { padding: 2px 10px; border-radius: 999px; background: var(--htu-accent); color: #0a0a0a; font-size: 0.75rem; font-weight: 800; }
.htu p { margin: 0 0 12px; }
.htu a { color: var(--htu-accent); }
.htu-steps { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.htu-step {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start;
  padding: 14px; border: 1px solid var(--htu-border); border-radius: 14px; background: var(--htu-surface);
}
.htu-step img, .htu-split img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--htu-border); }
.htu-step strong { display: block; margin-bottom: 4px; }
.htu-step p { margin: 0; color: var(--htu-muted); }
.htu-split { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; }
.htu-faq dt { margin-top: 14px; font-weight: 700; }
.htu-faq dd { margin: 4px 0 0; color: var(--htu-muted); }
.htu-cta { margin: 8px 0 0; }
.htu-btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 12px;
  background: var(--htu-accent); color: #0a0a0a !important; font-weight: 800; text-decoration: none;
}
.mob-account-page .htu { padding: 0 16px 32px; }
@media (min-width: 720px) {
  .htu-step { grid-template-columns: 200px 1fr; }
  .htu-split { grid-template-columns: 220px 1fr; }
}
@media (max-width: 360px) {
  .htu-step, .htu-split { grid-template-columns: 1fr; }
  .htu-step img, .htu-split img { max-width: 220px; }
}