/* tuner: borders.css rebuilds the border colour with a relative-colour alpha term that REPLACES the
   token's own alpha, so bdr_tp needs the CTA hairline's designed 0.3 restored here. */

/* ESCAPE HATCH (Contract §C) */

.stp.v7 {
	--bdr-clr-o: 0.3;

	--stp-v7-tile-h: 241; /* { min: 160, max: 360, step: 1, friendly: 'Collage Tile Height (desktop)', group: 'Spacing' } */
	--stp-v7-tile-h-mbl: 120; /* { min: 80, max: 240, step: 1, friendly: 'Collage Tile Height (mobile)', group: 'Spacing' } */
	--stp-v7-tile-h-clc: calc((var(--stp-v7-tile-h-mbl) * 1px) + (var(--stp-v7-tile-h) - var(--stp-v7-tile-h-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	/* class-scoped, NOT `.stp.v7 li` — StepsFeed's own step rows are <li> inside this same section. */
	.stp-v7-tile {
		height: var(--stp-v7-tile-h-clc);
	}
}

/* Landmark design (Figma 18723:21851, "Our Streamlined Process"): 100px #d1d1d1 number squares
   with a 40px Callout-style number, 24px between square and text, step copy at 80% opacity,
   32px between steps. StepsFeed is shared, so the treatment is scoped to this module. */
.stp.v7 {
	--stp-v7-num-s: 6.25rem;          /* 100px */

	.stp-num {
		width: var(--stp-v7-num-s);
		height: var(--stp-v7-num-s);
		background-color: #d1d1d1;
		color: var(--lt-txt);

		> span {
			font-family: var(--fnt-t-co-ff);
			font-size: var(--fnt-t-co-s);
			font-weight: var(--fnt-t-co-w);
			line-height: var(--fnt-t-co-lh);
			color: inherit;
		}
	}

	.stp-num + .ato {
		margin-inline-start: 1.5rem;
		margin-block-start: 0;
		row-gap: 0.5rem;
	}

	.stp-dsc {
		margin-block-start: 0;
		opacity: 0.8;
	}

	ul:has(> li > .stp-num) {
		row-gap: 2rem;
	}
}