/* Round 4 — lead-owned: the home page's compact Mix & Match invitation.
   Built only on the existing Preview3 tokens. No new palette, no new type
   scale, no loops. Motion is transform/opacity with the shared easing. */

.boxinvite {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--s6);
	align-items: start;
	margin-top: var(--s6);
}

/* --- the three steps ------------------------------------------------------ */

.boxinvite-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s3);
}
.boxinvite-steps li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "n title" "n body";
	column-gap: var(--s4);
	row-gap: 2px;
	align-items: baseline;
	padding: var(--s4) var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.boxinvite-steps .bi-n {
	grid-area: n;
	align-self: center;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--accent);
}
.boxinvite-steps b {
	grid-area: title;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}
.boxinvite-steps span:not(.bi-n) {
	grid-area: body;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

/* --- rates + call to action ----------------------------------------------- */

.boxinvite-act {
	padding: var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-raised);
}
.boxinvite-rates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s3);
	margin: 0 0 var(--s5);
}
.boxinvite-rates > div {
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	text-align: center;
}
.boxinvite-rates dt {
	font-size: 13px;
	color: var(--muted);
}
.boxinvite-rates dd {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.boxinvite-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	width: 100%;
	min-height: 52px;
	text-align: center;
}
.boxinvite-note {
	margin: var(--s3) 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--quiet);
}

/* --- mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
	.boxinvite { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}
@media (max-width: 680px) {
	.boxinvite-steps li { padding: var(--s3) var(--s4); }
	.boxinvite-act { padding: var(--s4); }
}