/* Home, tour and demo visuals. Only these pages link this file. Uses site.css tokens. */
.hv-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); flex: none; }
.hv-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* stats strip */
.stats-band { padding: 0 0 8px; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.stats li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-1); }
.stats b { display: block; font-size: clamp(30px, 6vw, 40px); line-height: 1.05; font-weight: 600; color: var(--green); letter-spacing: -.02em; }
.stats span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

/* problem cards with icons */
.cards.pcards .card { display: flex; flex-direction: column; gap: 4px; }
.cards.pcards .hv-icon { margin-bottom: 12px; }
.cards.pcards .card h3 { margin-bottom: 6px; }
.cards.pcards .card p { color: var(--ink); position: relative; padding-inline-start: 22px; }
.cards.pcards .card p::before { content: ""; position: absolute; inset-inline-start: 0; top: .4em; width: 14px; height: 14px; border-radius: 4px; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%230368F7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* icon tiles */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 4px; align-content: start; }
.tiles .hv-icon { margin-bottom: 10px; }
.tiles strong { font-size: 16px; line-height: 1.3; }
.tiles .t { color: var(--muted); font-size: 14px; line-height: 1.45; }
.tiles.tight li { padding: 14px; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: center; }
.tiles.tight .hv-icon { margin: 0; }

/* step strip */
.flow { list-style: none; counter-reset: f; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.flow li { counter-increment: f; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 4px; align-content: start; }
.flow li::before { content: counter(f); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: var(--green); color: var(--green-ink); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.flow strong { font-size: 17px; line-height: 1.3; }
.flow span { color: var(--muted); font-size: 15px; line-height: 1.45; }
@media (min-width: 800px) {
  .flow li:not(:last-child)::after { content: ""; position: absolute; top: 34px; inset-inline-end: -20px; width: 20px; height: 2px; background: var(--line-strong); }
}

.hv-h2 { margin: 0 0 18px; font-size: clamp(22px, 3vw, 28px); }
.tour-roles { padding: 8px 0 28px; }
.demo-covers .hv-h2 { font-size: 20px; }
.demo-covers ul.tiles { margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .demo-covers ul.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }