/* Marketing (S17) and its quote form (S32): four-cell grids, ruled rows, the AI product card and the channel chips.
   Builds on ui-services-page.css (kinds, fsteps, fq, others) and ui-request.css (the form plate). */

/* four outcomes: four columns on wide screens, the two-column and one-column rules of ui-services-page.css below that */
@media (min-width: 1001px) {
	.kinds-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kinds-4 li:nth-child(3n) {
		border-inline-end: 0;
	}

	.kinds-4 li:nth-child(4n) {
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

	.fsteps-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* what we do: six ruled rows, a row slides and its rule fills on hover */
.mrows {
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--hairline) solid var(--ln-s);
}

.mrows li {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: baseline;
	gap: clamp(12px, 2vw, 32px);
	padding-block: clamp(18px, 2vw, 28px);
	border-block-end: var(--hairline) solid var(--ln-s);
	transition: padding-inline-start 0.5s var(--ease);
}

.mrows li::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(var(--hairline) * -1);
	block-size: var(--hairline);
	background: var(--hi);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--ease);
}

html[dir="rtl"] .mrows li::after {
	transform-origin: right;
}

.mrows li:hover,
.mrows li:focus-within {
	padding-inline-start: 14px;
}

.mrows li:hover::after,
.mrows li:focus-within::after {
	transform: scaleX(1);
}

.mrows i {
	color: var(--hi);
	font-style: normal;
}

.mrows h3 {
	font-size: clamp(20px, 1.9vw, 30px);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.mrows h3 strong {
	font-weight: 800;
}

.mrows p {
	max-inline-size: 44ch;
	color: var(--fg2);
	font-size: 15px;
}

html.rm .mrows li,
html.rm .mrows li::after {
	transition: none;
}

/* the section padding of the sheets this page adds */
.mrows-s,
.mres,
.mprod {
	padding-block: var(--sec);
}

/* AI marketing product, announced but not live: one hatched card with the waitlist */
.mcard {
	position: relative;
	margin-block-start: clamp(32px, 5vw, 64px);
	max-inline-size: 760px;
	background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--pa, var(--svc-violet)) 8%, transparent) 14px 15px);
}

.mcard-b {
	display: grid;
	gap: var(--sp-12);
	padding: clamp(var(--sp-16), 3vw, var(--sp-32));
}

.mcard-b h3 {
	font-size: clamp(24px, 2.6vw, 40px);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.mcard-b p {
	max-inline-size: 52ch;
	color: var(--fg2);
}

.mcard .wl {
	max-inline-size: 480px;
}

.mcard .wl-msg {
	min-block-size: 1.4em;
	color: var(--fg2);
}

/* channel chips of the quote form */
.rq-chan {
	display: grid;
	gap: var(--sp-12);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rq-chan .chips[hidden] {
	display: none;
}

.rq-chan legend {
	padding: 0;
	margin-block-end: var(--sp-8);
}

/* mobile: the description goes under the title */
@media (max-width: 700px) {
	.mrows li {
		grid-template-columns: 32px minmax(0, 1fr);
		row-gap: var(--sp-8);
	}

	.mrows p {
		grid-column: 2;
	}
}