/*
 * doc-order.css — the Asiakirjatilaukset page.
 *
 * The page carries the document vendor's verbatim copy, so the design does the
 * only job left to it: give three sentences a hierarchy the vendor's own screen
 * does not have. The promise sits in the photo band, the two things you need to
 * have ready sit here as notes, and the button is the last thing on the page.
 *
 * The notes reuse the site's existing mark — a short green bar over a hairline,
 * the same one the positioning section uses — rather than introducing a new
 * device for one page.
 */

.doc-order {
	max-width: 68ch;
}

.doc-order__notes {
	display: grid;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	max-width: none; /* opt out of the global prose measure: this is layout, not prose */
	list-style: none;
}

.doc-order__note {
	position: relative;
	margin: 0;
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.doc-order__note::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 28px;
	height: 2px;
	background: var(--koivu);
}

.doc-order__note p {
	margin: 0;
	color: var(--text-muted);
}

.doc-order__actions {
	margin: var(--s-12) 0 0;
	max-width: none;
}

/*
 * Two short notes read better side by side than as one thin column, but only
 * once there is room for both to keep a sane line length.
 */
@media (min-width: 768px) {
	.doc-order {
		max-width: none;
	}

	.doc-order__notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-12);
		max-width: 72rem;
	}
}