/* ========================================
   HOW IT WORKS — BORDERED FEATURE CARD
   ======================================== */
.hiw {
	max-inline-size: 1920px;
	margin-inline: auto;
	padding-block: clamp(80px, 10vw, 160px);
	padding-inline: 27px;
	color: var(--color-text);

	@media (width <= 768px) {
		padding-inline: 16px;
	}
}

.hiw-hero {
	display: flex;
	align-items: baseline;
	gap: 27px;
	flex-wrap: wrap;
	margin-block-end: clamp(32px, 4vw, 64px);
}

.hiw-hero__num,
.hiw-hero__title {
	font-size: clamp(32px, 4.6vw, 68px);
	font-weight: var(--font-medium);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--color-text);
	-webkit-text-fill-color: currentColor;
	background: none;
	font-variant-numeric: tabular-nums;
}

.hiw-hero__title {
	white-space: nowrap;

	@media (width <= 768px) {
		white-space: normal;
	}
}

/* Static wrapper — features reveal together on scroll into view */
.hiw-scroll {
	position: relative;
}

.hiw-sticky {
	position: static;
}

/* Outer card */
.hiw-card {
	position: relative;
	display: grid;
	grid-template-rows: auto;
	background-color: #fafafa;
	border: 1px solid rgb(0 0 0 / 0.07);
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	transition: none;
}

.hiw-card:hover {
	transform: none;
	box-shadow: none;
}

.hiw-card::before,
.hiw-card::after,
.hiw-card > footer::before,
.hiw-card > footer::after {
	display: none;
}

/* Corner dots — 4 corners via two pseudo pairs */
.hiw-card::before,
.hiw-card::after,
.hiw-card > footer::before,
.hiw-card > footer::after {
	content: "";
	position: absolute;
	inline-size: 5px;
	block-size: 5px;
	background-color: rgb(0 0 0 / 0.2);
	border-radius: 50%;
	pointer-events: none;
}

.hiw-card::before {
	inset-block-start: -3px;
	inset-inline-start: -3px;
}

.hiw-card::after {
	inset-block-start: -3px;
	inset-inline-end: -3px;
}

.hiw-card > footer {
	position: relative;
}

.hiw-card > footer::before {
	inset-block-end: -3px;
	inset-inline-start: -3px;
}

.hiw-card > footer::after {
	inset-block-end: -3px;
	inset-inline-end: -3px;
}

/* Top: centered title + subtitle */
.hiw-card__top {
	padding: clamp(48px, 6vw, 96px) 20px;
	text-align: center;
	border-block-end: 1px solid rgb(0 0 0 / 0.07);
	position: static;
}

.hiw-card__title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: var(--font-medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	color: #292524;
	-webkit-text-fill-color: currentColor;
	background: none;
}

.hiw-card__subtitle {
	font-size: var(--text-base);
	line-height: 1.5;
	margin: 0 auto;
	max-inline-size: 540px;
	color: #292524;
}

/* Middle: 3 columns — features | illustration | features */
.hiw-card__mid {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;

	@media (width <= 1024px) {
		grid-template-columns: 1fr 1fr;
	}

	@media (width <= 640px) {
		grid-template-columns: 1fr;
	}
}

.hiw-card__col {
	display: grid;
	grid-template-rows: 1fr 1fr;

	@media (width <= 640px) {
		grid-template-rows: auto auto;
	}
}

.hiw-card__col:first-of-type {
	border-inline-end: 1px solid rgb(0 0 0 / 0.07);

	@media (width <= 640px) {
		border-inline-end: 0;
	}
}

.hiw-card__col:last-of-type {
	border-inline-start: 1px solid rgb(0 0 0 / 0.07);

	@media (width <= 640px) {
		border-inline-start: 0;
	}
}

.hiw-card__col > .hiw-feature + .hiw-feature {
	border-block-start: 1px solid rgb(0 0 0 / 0.07);
}

.hiw-feature {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px clamp(24px, 4vw, 64px);
	opacity: 0;
	transition:
		opacity 0.5s ease,
		translate 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.hiw-card__col:first-of-type .hiw-feature {
	translate: -120px 0;
}

.hiw-card__col:last-of-type .hiw-feature {
	translate: 120px 0;
	transition-delay: 0.5s;
}

.hiw-card__col .hiw-feature.is-revealed {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.hiw-feature {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
}

.hiw-feature__icon {
	align-self: flex-start;
	color: var(--color-accent);
	font-size: 32px;
	line-height: 1;
	margin-block-end: 4px;
}

.hiw-feature__title {
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: var(--font-medium);
	line-height: 1.11;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--color-text);
}

.hiw-feature__desc {
	margin: 0;
	font-size: 17px;
	line-height: 1.26;
	color: var(--color-text);
}

/* Center illustration */
.hiw-card__illustration {
	margin: 0;
	display: grid;
	place-items: center;
	padding: 36px 24px;
	background-color: var(--color-bg);

	@media (width <= 1024px) {
		grid-column: 1 / -1;
		grid-row: 1;
		border-block-end: 1px solid rgb(0 0 0 / 0.07);
	}

	@media (width <= 640px) {
		grid-column: auto;
		grid-row: auto;
		border-block-end: 0;
		border-block-start: 1px solid rgb(0 0 0 / 0.07);
	}
}

.hiw-card__illustration img {
	inline-size: 100%;
	max-inline-size: 560px;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Bottom: testimonial + quote mark */
.hiw-card__bottom {
	display: grid;
	grid-template-columns: 2fr 1fr;
	border-block-start: 1px solid rgb(0 0 0 / 0.07);

	@media (width <= 768px) {
		grid-template-columns: 1fr;
	}
}

.hiw-card__quote {
	margin: 0;
	padding: 32px clamp(24px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hiw-card__quote p {
	margin: 0;
	font-size: clamp(16px, 1.2vw, 20px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #292524;
}

.hiw-card__quote-highlight {
	color: var(--color-accent);
}

.hiw-card__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-style: normal;
	font-size: var(--text-sm);
	color: #292524;
	flex-wrap: wrap;
}

.hiw-card__author-name {
	font-weight: var(--font-semibold);
}

.hiw-card__author-dot {
	color: #a6a09b;
}

.hiw-card__author-role {
	color: #292524;
}

.hiw-card__mark {
	display: grid;
	place-items: center;
	border-inline-start: 1px solid rgb(0 0 0 / 0.07);
	padding: 32px;
	color: rgb(0 0 0 / 0.08);

	@media (width <= 768px) {
		border-inline-start: none;
		border-block-start: 1px solid rgb(0 0 0 / 0.07);
		padding-block: 48px;
	}
}

.hiw-card__mark svg {
	inline-size: clamp(120px, 20vw, 320px);
	block-size: auto;
}