/* "How MeterWatch works": five steps from the meter's flashing light to the app.
   Shared by index.html and buy-sensor.html. Colours come from each page's own
   --text, --muted, --line and --track, with fallbacks. */
.hiw { max-width: 1080px; margin: 0 auto; }
.hiw h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--text, #0f1115); }
.hiw .hiw-sub { margin-top: 8px; font-size: 16px; color: var(--secondary, #5b616b); }
.hiw ol { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
.hiw li { position: relative; text-align: center; }
.hiw li img { display: block; width: 100%; max-width: 170px; aspect-ratio: 1; margin: 0 auto; object-fit: contain; mix-blend-mode: multiply; }
.hiw li h3 { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--text, #0f1115); }
.hiw li p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--secondary, #5b616b); }
.hiw li:not(:last-child)::after { content: "\2192"; position: absolute; top: 70px; right: -24px; width: 20px; text-align: center; font-size: 22px; color: #2563eb; }
.hiw .hiw-note { margin-top: 32px; padding: 18px 22px; text-align: center; background: var(--track, #f1f2f4); border-radius: 14px; }
.hiw .hiw-note b { display: block; font-size: 17px; font-weight: 700; color: var(--text, #0f1115); }
.hiw .hiw-note p { margin-top: 6px; font-size: 14px; color: var(--secondary, #5b616b); }

@media (max-width: 760px) {
    .hiw ol { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
    .hiw li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; text-align: left; padding: 14px 0; }
    .hiw li img { grid-row: 1 / span 2; max-width: 96px; }
    .hiw li h3 { margin-top: 0; align-self: end; font-size: 16px; }
    .hiw li p { margin-top: 2px; align-self: start; }
    .hiw li:not(:last-child) { border-bottom: 1px solid var(--line, #e8eaee); }
    .hiw li:not(:last-child)::after { display: none; }
}