/**
 * The "איך זה עובד?" strip: the three-step diagram, the chip legend and the
 * note under them. Lifted out of the old board stylesheet, which the table
 * stopped loading when the front page became the client's demo — the page
 * kept the markup and lost the drawing (client note 18, 29 Sep).
 *
 * Colours come from the tokens, so the dark skin restyles it for free.
 */

.how {
	margin-block-start: 26px;
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
}

.how__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.how__head h2 {
	margin: 0;
	font-size: var(--fs-h4);
}

.how__info {
	color: var(--muted-4);
}

.how__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 18px 0;
	padding: 0;
	list-style: none;
}

.how__step {
	display: grid;
	justify-items: center;
	gap: 8px;
}

.how__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tint);
	font-size: 22px;
}

.how__title {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy-600);
}

.how__arrow {
	color: var(--line);
	font-size: 22px;
}

.how__body {
	color: var(--muted-2);
	font-size: var(--fs-xs);
	text-align: center;
	max-width: 76ch;
	margin-inline: auto;
}

.how__legend {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-block-start: 14px;
}

.legend-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted-2);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

.legend-chip__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .12);
}

.legend-chip__dot--7 { background: var(--chip-7); }
.legend-chip__dot--10 { background: var(--chip-10); }
.legend-chip__dot--70 { background: var(--chip-70); }
.legend-chip__dot--100 { background: var(--chip-100); }
.legend-chip__dot--700 { background: var(--chip-700); }
.legend-chip__dot--1000 { background: var(--chip-1000); }

.how__foot {
	margin: 12px 0 0;
	color: var(--muted-4);
	font-size: var(--fs-2xs);
	text-align: center;
}

/* The step chips read as buttons on the dark ground, not as flat text. */
.how__icon {
	border: 1px solid var(--line);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.how__arrow {
	color: var(--gold);
	opacity: .7;
}

@media (max-width: 560px) {
	.how__steps {
		gap: 12px;
	}

	.how__arrow {
		display: none;
	}
}