/*
 * Collection layout 3, Field guide (parts/collection/layout-guide.php), the owners' pick,
 * set out like the chosen product page below its fold (owners' meeting, 2026-10-20): a
 * cool grey ground, every part an orderly white box or card, square corners (0 to 2 px),
 * calm space, no section numbers and no jump row. Thin ink line icons over a soft yellow
 * spot, the product page's below the fold icon (hdc_collection_spot()).
 *
 * Order: one of four tops (?top=1|2|3|4 on staging; 4 Numbers, the default, is a short
 * title block on the ground), the type cards (ink cards, a level above the white model
 * cards), the key number boxes and Where it works, the models with the filters in a side
 * sheet, side by side, the guide, questions. Rules in collection.css are shared.
 */

@layer tokens {
	body.hdc-col--guide {
		--g-ground: #eef1f5;
		--g-hair: #e2e6eb;
		--g-spot: #ffdb5c;
		/* 5.0:1 on the ground, 5.8:1 on white. */
		--g-mute: #5b6571;
		--g-r: 2px;
		--g-pad: 1.25rem;
		--g-gap: 0.75rem;
		--g-space: 3rem;
	}

	@media (min-width: 48rem) {
		body.hdc-col--guide {
			--g-pad: 1.75rem;
			--g-gap: 1rem;
			--g-space: 4rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-col--guide {
			--g-pad: 2.25rem;
			--g-space: 4.5rem;
		}
	}
}

@layer components {
	/* ---------------------------------------------------------------- Ground */
	.hdc-col--guide .hdc-collection {
		background: var(--g-ground);
	}

	.hdc-col--guide .hdc-collection-h2 {
		font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	}

	/* Spot icons: thin ink lines over one soft yellow dot. */
	.hdc-col--guide .hdc-collection-spot {
		flex: none;
		width: 2.25rem;
		height: 2.25rem;
		overflow: visible;
		color: var(--ink);
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.hdc-col--guide .hdc-collection-spot__line * {
		vector-effect: non-scaling-stroke;
	}

	.hdc-col--guide .hdc-collection-spot__dot {
		fill: var(--g-spot);
		stroke: none;
	}

	/* ---------------------------------------------------------------- Tops */
	/* Every top: the breadcrumb, a large sentence-case h1, the summary and the actions. */
	.hdc-col--guide .hdc-collection-top {
		padding-block: 1rem 2.5rem;
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-top__head {
		display: grid;
		gap: 1rem;
		align-content: start;
	}

	.hdc-col--guide .hdc-collection-top__h1 {
		margin-top: 0.75rem;
		color: var(--ink);
		font-size: clamp(3rem, 1.9rem + 5.6vw, 7.5rem);
		font-stretch: 75%;
		font-weight: 800;
		letter-spacing: -0.01em;
		line-height: 0.9;
		text-wrap: balance;
	}

	.hdc-col--guide .hdc-collection-top__intro {
		display: grid;
		gap: 1.25rem;
		margin-top: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__intro {
		margin-bottom: 2.5rem;
	}

	.hdc-col--guide .hdc-collection-top__summary {
		max-width: 40rem;
		margin: 0;
		color: var(--body);
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.hdc-col--guide .hdc-collection-top .hdc-collection-actions {
		max-width: 34rem;
	}

	.hdc-col--guide .hdc-collection-top__lead {
		display: grid;
		gap: 1.25rem;
		margin-top: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-top__grid > .hdc-collection-top__lead {
		margin-top: 0;
	}

	.hdc-col--guide .hdc-collection-top__lead > .hdc-collection-top__intro {
		margin-top: 0;
	}

	/* Phones: each top's picture comes right under the h1, the words and actions after it. */
	@media (max-width: 63.99rem) {
		.hdc-col--guide .hdc-collection-top--lineup {
			display: flex;
			flex-direction: column;
		}

		.hdc-col--guide .hdc-collection-top--lineup .hdc-collection-top__head {
			order: 1;
		}

		.hdc-col--guide .hdc-collection-top--lineup .hdc-collection-lineup {
			order: 2;
			margin-top: 1.5rem;
		}

		.hdc-col--guide .hdc-collection-top--lineup .hdc-collection-top__lead {
			order: 3;
			padding-block: 1.5rem 2.5rem;
		}

		.hdc-col--guide .hdc-collection-top--range .hdc-collection-range {
			order: 2;
		}

		.hdc-col--guide .hdc-collection-top--range .hdc-collection-top__lead {
			order: 3;
		}
	}

	/* Top 1, Lineup: the machines on one floor line over their capacities. */
	.hdc-col--guide .hdc-collection-top--lineup {
		padding-bottom: 0;
	}

	.hdc-col--guide .hdc-collection-lineup {
		--stage: 9.5rem;
		margin-top: 2.5rem;
		padding-block: 1.25rem 2rem;
		background: var(--panel);
	}

	.hdc-col--guide .hdc-collection-lineup__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 2.75rem;
	}

	.hdc-col--guide .hdc-collection-lineup__label {
		margin: 0;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-col--guide .hdc-collection-lineup__controls {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.hdc-col--guide .hdc-collection-lineup__controls[hidden] {
		display: none;
	}

	.hdc-col--guide .hdc-collection-lineup__stage {
		display: flex;
		overflow-x: auto;
		margin: 0.5rem calc(-1 * var(--gutter)) 0;
		padding: 0 var(--gutter);
		list-style: none;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.hdc-col--guide .hdc-collection-lineup__stop {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}

	.hdc-col--guide .hdc-collection-lineup__link {
		display: grid;
		position: relative;
		grid-template-rows: var(--stage) auto auto;
		height: 100%;
		color: var(--ink);
		text-decoration: none;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	/* The floor: one ink line under every machine, with a tick at each stop. */
	.hdc-col--guide .hdc-collection-lineup__photo {
		display: flex;
		position: relative;
		align-items: flex-end;
		justify-content: center;
		padding: 0 0.5rem;
		border-bottom: 2px solid var(--ink);
	}

	.hdc-col--guide .hdc-collection-lineup__photo::after {
		content: "";
		position: absolute;
		bottom: -0.625rem;
		left: 50%;
		width: 2px;
		height: 0.5rem;
		background: var(--ink);
	}

	.hdc-col--guide .hdc-collection-lineup__img {
		width: auto;
		max-width: 100%;
		height: calc(100% * var(--scale));
		object-fit: contain;
		object-position: bottom;
		mix-blend-mode: multiply;
		transition: transform 0.2s ease-out;
	}

	.hdc-col--guide .hdc-collection-lineup__value {
		margin-top: 1rem;
		font-size: 1.75rem;
		font-stretch: 75%;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		text-align: center;
	}

	.hdc-col--guide .hdc-collection-lineup__count {
		margin-top: 0.25rem;
		color: var(--steel);
		font-size: 0.875rem;
		text-align: center;
	}

	.hdc-col--guide .hdc-collection-lineup__link:hover .hdc-collection-lineup__img {
		transform: translateY(-0.375rem);
	}

	.hdc-col--guide .hdc-collection-lineup__link:hover .hdc-collection-lineup__value {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.15em;
	}

	/* Top 2, Range chart: a bar per type on one capacity scale. */
	.hdc-col--guide .hdc-collection-top__grid {
		display: grid;
		gap: 2.5rem;
	}

	.hdc-col--guide .hdc-collection-range {
		--lead: 0rem;
		--tail: 0rem;
		position: relative;
		margin: 0;
		padding-top: 1rem;
		overflow: hidden;
		border-top: 2px solid var(--ink);
	}

	.hdc-col--guide .hdc-collection-range__label,
	.hdc-col--guide .hdc-collection-range__title {
		margin: 0;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-col--guide .hdc-collection-range__title {
		margin-top: 0.75rem;
		font-weight: 400;
		text-align: right;
	}

	.hdc-col--guide .hdc-collection-range__axis {
		position: relative;
		height: 1.5rem;
		margin: 1rem var(--tail) 0 var(--lead);
	}

	.hdc-col--guide .hdc-collection-range__tick {
		position: absolute;
		left: var(--at);
		color: var(--steel);
		font-size: 0.75rem;
		font-variant-numeric: tabular-nums;
		transform: translateX(-50%);
	}

	/* Gridlines run down from each tick through the rows (the figure clips them). */
	.hdc-col--guide .hdc-collection-range__tick::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		left: 50%;
		width: 1px;
		height: 60rem;
		background: var(--line);
	}

	.hdc-col--guide .hdc-collection-range__rows {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-col--guide .hdc-collection-range__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name count"
			"track track"
			"span span";
		gap: 0.25rem 1rem;
		padding: 0.875rem 0;
		border-bottom: 1px solid var(--line);
		color: var(--ink);
		text-decoration: none;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-col--guide .hdc-collection-range__name {
		grid-area: name;
		font-size: 1.125rem;
		font-stretch: 85%;
		font-weight: 750;
	}

	.hdc-col--guide .hdc-collection-range__count {
		grid-area: count;
		align-self: center;
		color: var(--steel);
		font-size: 0.875rem;
	}

	.hdc-col--guide .hdc-collection-range__track {
		display: block;
		grid-area: track;
		position: relative;
		height: 1.75rem;
		margin-inline: var(--lead-track, 0) 0;
	}

	.hdc-col--guide .hdc-collection-range__bar {
		position: absolute;
		top: 50%;
		left: var(--from);
		width: max(0.875rem, calc(var(--to) - var(--from)));
		height: 0.875rem;
		background: var(--ink);
		transform: translateY(-50%);
		transition: background-color 0.15s;
	}

	.hdc-col--guide .hdc-collection-range__dot {
		position: absolute;
		top: 50%;
		left: var(--at);
		width: 0.625rem;
		height: 0.625rem;
		border: 2px solid var(--ink);
		background: var(--white);
		transform: translate(-50%, -50%);
	}

	.hdc-col--guide .hdc-collection-range__span {
		grid-area: span;
		color: var(--body);
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col--guide .hdc-collection-range__row:hover .hdc-collection-range__bar {
		outline: 1px solid var(--ink);
		background: var(--accent);
	}

	.hdc-col--guide .hdc-collection-range__row:hover .hdc-collection-range__name {
		text-decoration: underline;
	}

	/* Top 3, Drawing: a sheet on the blueprint ground with balloons and a title block. */
	.hdc-col--guide .hdc-collection-top--sheet {
		background-color: var(--c-ground);
		background-image:
			linear-gradient(var(--c-rule) 1px, transparent 1px),
			linear-gradient(90deg, var(--c-rule) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
		background-position: -1px -1px;
	}

	.hdc-col--guide .hdc-collection-sheet {
		display: grid;
		grid-template-areas:
			"title"
			"figure"
			"rows"
			"summary"
			"actions";
		position: relative;
		margin-top: 1rem;
		border: 1px solid var(--c-rule);
		background: var(--white);
	}

	/* The inner frame line of a drawing sheet. */
	.hdc-col--guide .hdc-collection-sheet::before {
		content: "";
		position: absolute;
		inset: 0.375rem;
		border: 1px solid var(--ink);
		pointer-events: none;
	}

	.hdc-col--guide .hdc-collection-sheet__block {
		display: contents;
	}

	.hdc-col--guide .hdc-collection-sheet__figure {
		grid-area: figure;
		margin: 0;
		padding: 1.5rem 1.25rem 1rem;
	}

	.hdc-col--guide .hdc-collection-sheet__art {
		display: block;
		position: relative;
		max-width: 44rem;
		margin-inline: auto;
	}

	.hdc-col--guide .hdc-collection-sheet__img {
		width: 100%;
		height: 100%;
	}

	.hdc-col--guide .hdc-collection-sheet__balloon {
		display: flex;
		position: absolute;
		top: var(--y);
		left: var(--x);
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border: 2px solid var(--ink);
		border-radius: 50%;
		background: var(--accent);
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 800;
		transform: translate(-50%, -50%);
	}

	.hdc-col--guide .hdc-collection-sheet__title {
		grid-area: title;
		padding: 1.25rem 1.25rem 1rem;
		border-bottom: 1px solid var(--line);
	}

	.hdc-col--guide .hdc-collection-sheet__kicker {
		margin: 0;
		color: var(--steel);
		font-size: 0.8125rem;
		font-weight: 700;
	}

	.hdc-col--guide .hdc-collection-sheet .hdc-collection-top__h1 {
		margin-top: 0.25rem;
		font-size: clamp(2.75rem, 2rem + 3.6vw, 5.5rem);
	}

	.hdc-col--guide .hdc-collection-sheet__rows {
		grid-area: rows;
		margin: 0;
		border-top: 1px solid var(--line);
	}

	.hdc-col--guide .hdc-collection-sheet__row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 1rem;
		padding: 0.75rem 1.25rem;
		border-bottom: 1px solid var(--line);
	}

	.hdc-col--guide .hdc-collection-sheet__row dt {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-col--guide .hdc-collection-sheet__row dd {
		margin: 0;
		color: var(--ink);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col--guide .hdc-collection-sheet__key {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 1.375rem;
		height: 1.375rem;
		border: 1.5px solid var(--ink);
		border-radius: 50%;
		background: var(--accent);
		color: var(--ink);
		font-size: 0.75rem;
		font-weight: 800;
	}

	.hdc-col--guide .hdc-collection-sheet__summary {
		grid-area: summary;
		margin: 0;
		padding: 1rem 1.25rem 0;
		color: var(--body);
		line-height: 1.55;
	}

	.hdc-col--guide .hdc-collection-sheet .hdc-collection-actions {
		grid-area: actions;
		max-width: none;
		padding: 1.25rem;
	}

	/* Top 4, Numbers (the default): a short title block on the ground, the cards right under it. */
	.hdc-col--guide .hdc-collection-top--numbers {
		padding-block: 0.25rem 1.25rem;
		background: none;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__intro {
		display: grid;
		gap: 1.25rem;
		margin: 0.25rem 0 0;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__h1 {
		margin: 0;
		font-size: clamp(2.375rem, 1.6rem + 3.2vw, 4.25rem);
		line-height: 0.95;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__summary {
		max-width: 48rem;
		margin-top: 0.75rem;
		font-size: 1rem;
		line-height: 1.55;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-actions {
		gap: 0.625rem;
	}

	.hdc-col--guide .hdc-collection-top--numbers .hdc-b-btn {
		min-height: 3rem;
		border-radius: var(--g-r);
	}

	/* ---------------------------------------------------------------- Type tiles */
	/* Under the model grid, a level above the model cards in another format (Tanzeel,
	 * 2026-10-21: lighter, under the model grid): a wide white tile with an ink top rule, the
	 * photo on the light ground at its side, the name large, the type's capacity range,
	 * the model count and a quiet arrow square. The rule turns yellow and the square ink
	 * on hover. */
	.hdc-col--guide .hdc-collection-types {
		padding: var(--g-space) 0 0;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__head {
		margin-bottom: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--g-gap);
		margin: 0;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		align-items: stretch;
		gap: 1rem;
		padding: 0.75rem;
		border: 0;
		border-top: 3px solid var(--ink);
		border-radius: var(--g-r);
		background: var(--white);
		color: var(--ink);
		transition: border-color 0.15s;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__photo {
		align-self: center;
		aspect-ratio: 1;
		padding: 0.5rem;
		border-radius: 1px;
		background: var(--g-ground);
	}

	/* The photos are cut out on white: multiply drops the white onto the light ground. */
	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__img {
		mix-blend-mode: multiply;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__bar {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name name"
			"range range"
			"count go";
		align-content: center;
		align-items: center;
		gap: 0.25rem 0.75rem;
		margin: 0;
		padding: 0;
		background: none;
		color: var(--ink);
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__name {
		display: block;
		grid-area: name;
		min-height: 0;
		color: var(--ink);
		font-size: 1.375rem;
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__range {
		grid-area: range;
		color: var(--body);
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
		line-height: 1.35;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__count {
		grid-area: count;
		grid-row: auto;
		margin-top: 0.5rem;
		color: var(--g-mute);
		font-size: 0.875rem;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__go {
		grid-area: go;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		margin-top: 0.5rem;
		border: 1px solid var(--g-hair);
		border-radius: var(--g-r);
		color: var(--ink);
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card:hover {
		border-top-color: var(--accent);
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card:hover .hdc-collection-types__img {
		transform: scale(1.04);
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card:hover .hdc-collection-types__name {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.15em;
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card:hover .hdc-collection-types__go {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card:hover .hdc-collection-types__arrow {
		color: var(--white);
	}

	@media (min-width: 48rem) {
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n1 {
			grid-template-columns: minmax(0, 1fr);
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card {
			grid-template-columns: 11rem minmax(0, 1fr);
			gap: 1.5rem;
			padding: 1rem 1.5rem 1rem 1rem;
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__name {
			font-size: 1.75rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n3,
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n5 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n3 .hdc-collection-types__card,
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n5 .hdc-collection-types__card {
			grid-template-columns: 8.5rem minmax(0, 1fr);
			gap: 1.25rem;
		}
	}

	@media (min-width: 80rem) {
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n1 .hdc-collection-types__card,
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n2 .hdc-collection-types__card {
			grid-template-columns: 13rem minmax(0, 1fr);
		}

		/* Four types sit in one compact row. */
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n4 {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n4 .hdc-collection-types__card {
			grid-template-columns: 6.5rem minmax(0, 1fr);
			gap: 1rem;
			padding: 0.75rem 1rem 0.75rem 0.75rem;
		}

		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__list--n4 .hdc-collection-types__name {
			font-size: 1.375rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__card,
		.hdc-col--guide .hdc-collection-types--plates .hdc-collection-types__go {
			transition: none;
		}
	}

	/* ---------------------------------------------------------------- Key numbers and Where it works */
	/* Right under the short top: a small gap, the top already ends in its own space. */
	.hdc-col--guide .hdc-collection-glance {
		padding-top: 0.5rem;
	}

	.hdc-col--guide .hdc-collection-bubbles {
		--n: 2;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--g-gap);
		margin: 0;
	}

	.hdc-col--guide .hdc-collection-bubbles__item {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		min-width: 0;
		padding: 1rem;
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-bubbles__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.hdc-col--guide .hdc-collection-bubbles__label {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		color: var(--g-mute);
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.25;
	}

	.hdc-col--guide .hdc-collection-bubbles__value {
		margin: 0;
		color: var(--ink);
		font-size: 1.5rem;
		font-stretch: 75%;
		font-variant-numeric: tabular-nums;
		font-weight: 800;
		line-height: 1.05;
		overflow-wrap: break-word;
	}

	.hdc-col--guide .hdc-collection-bubbles__value--words {
		font-size: 1.0625rem;
		font-stretch: 85%;
		font-weight: 750;
		line-height: 1.25;
	}

	/* Where it works: one compact white box, the uses side by side. */
	.hdc-col--guide .hdc-collection-uses--box {
		margin-top: var(--g-gap);
		padding: var(--g-pad);
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__grid {
		gap: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-h2 {
		font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 1rem;
		border-top: 0;
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__item {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0;
		border: 0;
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__icon {
		width: 2.25rem;
		height: 2.25rem;
		margin-bottom: 0.375rem;
		padding: 0;
		border: 0;
		background: none;
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__title {
		font-size: 1.0625rem;
	}

	.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__text {
		color: var(--g-mute);
		font-size: 0.9375rem;
		line-height: 1.45;
	}

	/* ---------------------------------------------------------------- Models */
	.hdc-col--guide .hdc-collection-models {
		padding-top: var(--g-space);
	}

	/* A leaf list (no types): the models follow the title block at once. */
	.hdc-col--guide .hdc-collection-top--numbers + .hdc-collection-models {
		padding-top: 0.75rem;
	}

	.hdc-col--guide .hdc-collection-models__head {
		display: grid;
		gap: 1rem;
		margin-bottom: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-toolbar__filters {
		border-color: var(--ink);
		border-radius: var(--g-r);
		background: var(--ink);
		color: var(--white);
	}

	/* The sort menu keeps "Recommended" whole beside Filters at 320 px. */
	.hdc-col--guide .hdc-collection-toolbar__sort select {
		padding-inline: 0.625rem 0.375rem;
		border-color: var(--g-hair);
		border-radius: var(--g-r);
		font-size: 0.9375rem;
	}

	.hdc-col--guide .hdc-collection-cards--big {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--g-gap);
	}

	.hdc-col--guide .hdc-collection-card {
		overflow: hidden;
		border-color: var(--white);
		border-radius: var(--g-r);
	}

	.hdc-col--guide .hdc-collection-card:hover {
		border-color: var(--control);
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__photo {
		aspect-ratio: 4 / 3;
		padding: 1.25rem;
		border-bottom-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__body {
		gap: 0.875rem;
		padding: 1.25rem;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__name {
		font-size: 1.25rem;
		font-stretch: 85%;
		font-weight: 750;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__cap-value {
		font-size: 2.5rem;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__cap-label {
		color: var(--g-mute);
		font-size: 0.875rem;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__specs {
		gap: 0.875rem 1rem;
		padding-top: 0.875rem;
		border-top-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__spec dt {
		color: var(--g-mute);
		font-size: 0.875rem;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__spec dd {
		font-size: 1.0625rem;
	}

	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__view,
	.hdc-col--guide .hdc-collection-cards--big .hdc-collection-card__quote {
		min-height: 3rem;
		border-radius: var(--g-r);
	}

	.hdc-col--guide .hdc-collection-empty {
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-gone {
		margin-top: var(--g-gap);
		padding-inline: var(--g-pad);
		border: 0;
		border-radius: var(--g-r);
		background: var(--white);
	}

	/* ---------------------------------------------------------------- Side by side */
	.hdc-col--guide .hdc-collection-matrix {
		padding-block: var(--g-space) 0;
		background: none;
	}

	.hdc-col--guide .hdc-collection-matrix__frame {
		border: 0;
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-matrix__table th,
	.hdc-col--guide .hdc-collection-matrix__table td {
		border-bottom-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-matrix__corner,
	.hdc-col--guide .hdc-collection-matrix__spec {
		border-right-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-matrix__spec {
		color: var(--g-mute);
	}

	.hdc-col--guide .hdc-collection-matrix__table tr:last-child > * {
		border-bottom: 0;
	}

	/* ---------------------------------------------------------------- Guide */
	.hdc-col--guide .hdc-collection-guide {
		padding-block: var(--g-space) 0;
		border-top: 0;
	}

	.hdc-col--guide .hdc-collection-guide__grid {
		padding: var(--g-pad);
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-guide__label {
		font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	}

	/* The contents list without numbers. */
	.hdc-col--guide .hdc-collection-guide__toc ol,
	.hdc-col--guide .hdc-collection-guide__toc li,
	.hdc-col--guide .hdc-collection-guide__part + .hdc-collection-guide__part {
		border-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-guide__toc a {
		grid-template-columns: minmax(0, 1fr);
	}

	.hdc-col--guide .hdc-collection-guide__toc a::before {
		content: none;
	}

	/* ---------------------------------------------------------------- Questions */
	.hdc-col--guide .hdc-collection-questions {
		padding-block: var(--g-space);
		background: none;
	}

	.hdc-col--guide .hdc-collection-questions .hdc-b-title {
		font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
		font-stretch: 75%;
		line-height: 1;
	}

	.hdc-col--guide .hdc-collection-questions .hdc-b-faq {
		padding-inline: var(--g-pad);
		border-radius: var(--g-r);
		background: var(--white);
	}

	.hdc-col--guide .hdc-collection-questions .hdc-b-faq__item {
		border-top-color: var(--g-hair);
	}

	.hdc-col--guide .hdc-collection-questions .hdc-b-faq__item:first-child {
		border-top: 0;
	}

	.hdc-col--guide .hdc-collection-questions .hdc-b-faq__item:last-child {
		border-bottom: 0;
	}

	/* Quote links land just below the header's bar. */
	.hdc-col--guide details[data-hdc-b-form] {
		scroll-margin-top: calc(var(--sticky) + 1rem);
	}

	/* ---------------------------------------------------------------- Wider */
	@media (min-width: 40rem) {
		.hdc-col--guide .hdc-collection-lineup__stop {
			flex-basis: 30%;
		}

		.hdc-col--guide .hdc-collection-bubbles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-col--guide .hdc-collection-bubbles__item:last-child:nth-child(odd) {
			grid-column: auto;
		}

		.hdc-col--guide .hdc-collection-bubbles__item:last-child:nth-child(3n+2) {
			grid-column: span 2;
		}

		.hdc-col--guide .hdc-collection-cards--big {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 48rem) {
		.hdc-col--guide .hdc-collection-bubbles__item {
			padding: 1.25rem;
		}

		.hdc-col--guide .hdc-collection-bubbles__value {
			font-size: 1.875rem;
		}

		.hdc-col--guide .hdc-collection-bubbles__value--words {
			font-size: 1.125rem;
		}

		.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__item {
			display: grid;
			grid-template-columns: 2.25rem minmax(0, 1fr);
			gap: 0.125rem 0.875rem;
		}

		.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__icon {
			grid-row: 1 / span 2;
			margin: 0;
		}
	}

	@media (min-width: 64rem) {
		.hdc-col--guide .hdc-collection-top {
			padding-block: 1.5rem 3.5rem;
		}

		.hdc-col--guide .hdc-collection-top__intro {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			align-items: end;
			gap: 3rem;
		}

		.hdc-col--guide .hdc-collection-top__intro .hdc-collection-actions {
			justify-self: end;
			width: 100%;
		}

		.hdc-col--guide .hdc-collection-top--lineup {
			padding-bottom: 0;
		}

		.hdc-col--guide .hdc-collection-lineup {
			--stage: 15rem;
			padding-block: 1.5rem 2.5rem;
		}

		.hdc-col--guide .hdc-collection-lineup__stage {
			overflow: visible;
			margin-inline: 0;
			padding-inline: 0;
		}

		.hdc-col--guide .hdc-collection-lineup__stop {
			flex: 1 1 0;
		}

		.hdc-col--guide .hdc-collection-top__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			grid-template-areas:
				"head chart"
				"lead chart";
			align-items: end;
			gap: 1.25rem 4rem;
		}

		.hdc-col--guide .hdc-collection-top__grid > .hdc-collection-top__head {
			grid-area: head;
		}

		.hdc-col--guide .hdc-collection-top__grid > .hdc-collection-top__lead {
			grid-area: lead;
			align-self: start;
		}

		.hdc-col--guide .hdc-collection-top__grid > .hdc-collection-range {
			grid-area: chart;
		}

		.hdc-col--guide .hdc-collection-top__lead > .hdc-collection-top__intro {
			margin-top: 0;
		}

		.hdc-col--guide .hdc-collection-range {
			--lead: 12rem;
			--tail: 9.5rem;
		}

		.hdc-col--guide .hdc-collection-range__row {
			grid-template-columns: var(--lead) minmax(0, 1fr) var(--tail);
			grid-template-areas:
				"name track span"
				"count track span";
			gap: 0 0;
			padding: 0.75rem 0;
		}

		.hdc-col--guide .hdc-collection-range__count {
			align-self: start;
		}

		.hdc-col--guide .hdc-collection-range__track {
			align-self: center;
			height: 2.5rem;
		}

		.hdc-col--guide .hdc-collection-range__span {
			align-self: center;
			padding-left: 1.25rem;
		}

		.hdc-col--guide .hdc-collection-sheet {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			grid-template-rows: auto auto 1fr auto;
			grid-template-areas:
				"figure title"
				"figure rows"
				"figure summary"
				"figure actions";
			margin-top: 1.5rem;
		}

		.hdc-col--guide .hdc-collection-sheet__figure {
			align-self: center;
			padding: 3rem 2.5rem;
		}

		.hdc-col--guide .hdc-collection-sheet__title,
		.hdc-col--guide .hdc-collection-sheet__rows,
		.hdc-col--guide .hdc-collection-sheet__summary,
		.hdc-col--guide .hdc-collection-sheet .hdc-collection-actions {
			border-left: 1px solid var(--ink);
		}

		.hdc-col--guide .hdc-collection-sheet__title {
			padding: 2rem 1.75rem 1.25rem;
		}

		.hdc-col--guide .hdc-collection-sheet__row {
			padding-inline: 1.75rem;
		}

		.hdc-col--guide .hdc-collection-sheet__summary {
			padding: 1.25rem 1.75rem 0;
		}

		.hdc-col--guide .hdc-collection-sheet .hdc-collection-actions {
			padding: 1.5rem 1.75rem 2rem;
		}

		.hdc-col--guide .hdc-collection-top--numbers {
			padding-block: 0.5rem 1.75rem;
		}

		/* The words on the left, Call and the quote beside them at the foot. */
		.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__intro {
			grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
			align-items: end;
			gap: 3rem;
		}

		.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-top__summary {
			font-size: 1.0625rem;
		}

		.hdc-col--guide .hdc-collection-top--numbers .hdc-collection-actions > * {
			flex-basis: 12rem;
		}

		/* One row of boxes, as many columns as numbers. */
		.hdc-col--guide .hdc-collection-bubbles {
			grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		}

		.hdc-col--guide .hdc-collection-bubbles--n3 {
			--n: 3;
		}

		.hdc-col--guide .hdc-collection-bubbles--n4 {
			--n: 4;
		}

		.hdc-col--guide .hdc-collection-bubbles--n5 {
			--n: 5;
		}

		.hdc-col--guide .hdc-collection-bubbles--n6 {
			--n: 6;
		}

		.hdc-col--guide .hdc-collection-bubbles__item:last-child:nth-child(n) {
			grid-column: auto;
		}

		.hdc-col--guide .hdc-collection-bubbles__item {
			padding: 1.375rem 1.5rem 1.5rem;
		}

		/* Six boxes (lifts): a little narrower type, so "300 to 135,000 lb" keeps one line. */
		.hdc-col--guide .hdc-collection-bubbles--n6 .hdc-collection-bubbles__item {
			padding-inline: 1.25rem;
		}

		.hdc-col--guide .hdc-collection-bubbles--n6 .hdc-collection-bubbles__value:not(.hdc-collection-bubbles__value--words) {
			font-size: 1.5rem;
		}

		/* Where it works: the title at the left, the uses in one row. */
		.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__grid {
			grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
			align-items: start;
			gap: 2rem;
		}

		.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__list {
			grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
			gap: 1.25rem 2rem;
		}

		.hdc-col--guide .hdc-collection-uses--box .hdc-collection-uses__item:nth-child(-n+2) {
			border-top: 0;
		}

		.hdc-col--guide .hdc-collection-models__head {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: end;
			gap: 2rem;
		}

		.hdc-col--guide .hdc-collection-cards--big {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-col--guide .hdc-collection-lineup__img {
			transition: none;
		}
	}
}