/* How it works (patterns/home-steps.php): a red band, three steps on one rail. Loaded after home.css on the
   homepage and in the editor. Owner: steps (round 3, 2026-10-25; round 4, 2026-10-26).

   The band is flat red. Black is structure (the giant numerals and the rail); white is text. Body text on this
   red reads at 5.1:1, black only at 3.8:1, so black is used for display sizes only.

   Round 4: the slash marks and the faint rail above the numerals are gone. The three numerals now stand on a
   solid black rule that runs from one edge of the screen to the other, at their exact baseline, and the titles,
   text and actions hang under it on shared rows. Saira Condensed's digits are .69em tall, its ascent 1.14em and
   descent .44em, so a line-height of .7 puts the baseline on the numeral's box bottom (and the digit's top on
   the box top): the rail is drawn at that bottom, nothing is eyeballed. The 2 and the 3 carry a side bearing
   the 1 lacks (.03em and .02em), pulled back so the three digits sit on their columns' left edges like the
   titles under them. Phones turn the rail vertical, on the content axis, the numerals beside it. */

.jkd-steps {
	--jkd-steps-pad: clamp(56px, 6vw, 128px);
	--jkd-steps-h2: clamp(40px, 3vw + 12px, 72px);
	--jkd-steps-h3: clamp(24px, 1vw + 12px, 34px);
	--jkd-steps-num: clamp(104px, 10vw + 6px, 240px);    /* 150 at 1440, 198 at 1920, 240 from 2340 */
	--jkd-steps-fs: clamp(16px, .3vw + 12.5px, 18px);
	--jkd-steps-gap: clamp(28px, 4vw, 72px);
	--jkd-steps-rail: 3px;                               /* the rail's thickness (2px on phones) */
	--jkd-steps-drop: clamp(24px, 2.2vw, 44px);          /* from the rail down to the titles' cap height */
	background: var(--jkd-red);
	color: #fff;
	padding: var(--jkd-steps-pad) 0;
	/* The rail runs edge to edge and is clipped here. `clip`, not `hidden`: hidden would make the band a scroll
	   container and the view timelines below would measure against it instead of the viewport. */
	overflow: hidden;
	overflow: clip;
}

@media (min-width: 2200px) { .jkd-steps { --jkd-steps-rail: 4px; } } /* under 240px numerals */

/* ------------------------------------------------------------------ Head: kicker and title left, the note on the third step's column, one baseline
   The head sits on the same three-column grid as the steps (the block's own flex layout is overridden), so the
   note's left edge is the third column's left edge at every width; its bottom stays on the headline's. */
.jkd-steps .jkd-steps__head {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	margin-bottom: clamp(48px, 5vw, 104px);
	row-gap: 20px;
	column-gap: var(--jkd-steps-gap);
}
.jkd-steps .jkd-steps__lede { grid-column: 1 / 3; gap: clamp(12px, 1.1vw, 20px); margin: 0; } /* Kadence's 2rem under every group would lift the title off the note's baseline */
.jkd-steps .jkd-kicker { color: #fff; }
.jkd-steps .jkd-head h2 {
	max-width: 9.6em;
	font-size: var(--jkd-steps-h2);
	line-height: .94;
	letter-spacing: -.005em;
	color: #fff;
	text-wrap: balance;
}
.jkd-steps .jkd-steps__note {
	grid-column: 3;
	max-width: 24em;
	margin: 0;
	font-size: var(--jkd-steps-fs);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

/* ------------------------------------------------------------------ The rail and the three steps
   The columns block is laid out as a grid of four shared rows (numeral, title, text, action) so the three
   steps share every line whatever the copy does. Browsers without subgrid get the same thing per column. */
.jkd-steps .jkd-steps__flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto auto;
	gap: 0 var(--jkd-steps-gap); /* the columns block's own 2em gap would open every row */
	margin: 0;
	padding: 0;
}
/* The rail: a black rule from one edge of the screen to the other, at the numerals' baseline (their row's bottom) */
.jkd-steps .jkd-steps__flow::before {
	content: "";
	position: absolute;
	top: calc(var(--jkd-steps-num) * .7);
	left: -50vw;
	right: -50vw;
	height: var(--jkd-steps-rail);
	background: var(--jkd-black);
}
.jkd-steps .jkd-steps__item {
	position: relative;
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	min-width: 0;
}
@supports not (grid-template-rows: subgrid) {
	.jkd-steps .jkd-steps__item { grid-template-rows: auto auto 1fr auto; }
}
/* The numeral: a box exactly digit height, standing on the rail */
.jkd-steps .jkd-steps__num {
	margin: 0;
	font: 800 var(--jkd-steps-num)/.7 var(--jkd-display);
	color: var(--jkd-black);
}
.jkd-steps .jkd-steps__item:nth-child(2) .jkd-steps__num { margin-left: calc(var(--jkd-steps-num) * -.03); }
.jkd-steps .jkd-steps__item:nth-child(3) .jkd-steps__num { margin-left: calc(var(--jkd-steps-num) * -.02); }
/* The title hangs under the rail: the drop is measured to its cap height (.19em of leading sits above the caps at this line-height) */
.jkd-steps .jkd-steps__title {
	max-width: 11em;
	margin: calc(var(--jkd-steps-rail) + var(--jkd-steps-drop) - .19em) 0 clamp(10px, .8vw, 14px);
	font: 700 var(--jkd-steps-h3)/1.05 var(--jkd-display);
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
}
.jkd-steps .jkd-steps__text {
	max-width: 26em;
	margin: 0 0 clamp(22px, 2vw, 34px);
	font-size: var(--jkd-steps-fs);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

/* One action per step, on the same bottom line across the three columns */
.jkd-steps .jkd-steps__link {
	align-self: end;
	margin: 0;
	font-size: var(--jkd-steps-fs);
	font-weight: 700;
	line-height: 1;
}
.jkd-steps .jkd-steps__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0; /* a 44px tap target without moving the text */
	margin: -14px 0;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(255, 255, 255, .45);
	transition: text-decoration-color .2s;
}
.jkd-steps .jkd-steps__link a::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	transition: transform .25s var(--jkd-ease);
}
.jkd-steps .jkd-steps__link a:hover { text-decoration-color: #fff; }
.jkd-steps .jkd-steps__link a:hover::after { transform: translateX(4px); }

/* Step 2 ends with the four ways to pay instead of a link, set as a spec line with slashes between.
   A slash never ends or starts a line, whatever wraps: every item carries its own slash on its left in a slot
   one `--jkd-steps-sep` wide and pulls itself left by that slot, and the list clips its left edge, so the slash
   of whichever item begins a line falls outside the box and is cut away. Between two items on one line the
   slot sits between them and the slash shows. */
.jkd-steps .jkd-steps__ways {
	--jkd-steps-sep: 1.2em;
	display: flex;
	flex-wrap: wrap;
	align-self: end;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font: 700 clamp(17px, .25vw + 13.5px, 19px)/1 var(--jkd-display); /* line-height 1, like the links, so the two share a baseline */
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
.jkd-steps .jkd-steps__ways li {
	position: relative;
	margin: 0 var(--jkd-steps-sep) 0 calc(-1 * var(--jkd-steps-sep));
	padding: 0 0 0 var(--jkd-steps-sep);
	white-space: nowrap;
}
.jkd-steps .jkd-steps__ways li::before {
	content: "/";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--jkd-steps-sep);
	text-align: center;
	font-weight: 800;
	color: var(--jkd-black);
}

/* Focus rings: the page's red ring would vanish on red, so here it's white */
.jkd-steps a:focus-visible,
.home .entry-content .jkd-steps a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ Motion: the rail draws in and the numerals settle onto it as the band scrolls into view.
   Scroll-driven, so there is no script and nothing runs when the visitor asks for less motion. Browsers without
   view timelines (and the screenshot tool, which forces reduced motion) show the finished state. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes jkd-steps-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		@keyframes jkd-steps-in { from { opacity: 0; transform: translateY(-.06em); } to { opacity: 1; transform: none; } }
		/* One timeline for the whole sequence: the steps grid entering the viewport (about 300px of scroll on a
		   desktop). The rail sweeps left to right over the first half; each numeral settles onto it as it passes. */
		.jkd-steps .jkd-steps__flow { view-timeline: --jkd-steps-flow block; }
		.jkd-steps .jkd-steps__flow::before {
			transform-origin: left;
			animation: jkd-steps-draw linear both;
			animation-timeline: --jkd-steps-flow;
			animation-range: entry 0% entry 45%;
		}
		.jkd-steps .jkd-steps__num {
			animation: jkd-steps-in linear both;
			animation-timeline: --jkd-steps-flow;
			animation-range: entry 10% entry 40%;
		}
		.jkd-steps .jkd-steps__item:nth-child(2) .jkd-steps__num { animation-range: entry 20% entry 50%; }
		.jkd-steps .jkd-steps__item:nth-child(3) .jkd-steps__num { animation-range: entry 30% entry 60%; }
	}
}

/* ------------------------------------------------------------------ Phones and small tablets: the rail turns vertical, on the content axis, the numerals beside it */
@media (max-width: 781px) {
	.jkd-steps {
		--jkd-steps-num: 72px;
		--jkd-steps-numcol: 58px;                         /* the rail, a 12px gap and the widest digit */
		--jkd-steps-rail: 2px;
		--jkd-steps-pad: clamp(56px, 12vw, 80px);
	}
	.jkd-steps .jkd-steps__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; row-gap: 18px; }
	.jkd-steps .jkd-steps__lede,
	.jkd-steps .jkd-steps__note { grid-column: auto; }
	.jkd-steps .jkd-steps__note { max-width: 30em; }
	.jkd-steps .jkd-steps__flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
	.jkd-steps .jkd-steps__flow::before { display: none; }
	.jkd-steps .jkd-steps__item {
		grid-row: auto;
		grid-template-columns: var(--jkd-steps-numcol) minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 16px;
		padding-bottom: 40px;
	}
	.jkd-steps .jkd-steps__item:last-child { padding-bottom: 0; }
	/* The rail: from the top of the 1 to the foot of the 3, each step drawing its own stretch */
	.jkd-steps .jkd-steps__item::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: var(--jkd-steps-rail);
		background: var(--jkd-black);
	}
	.jkd-steps .jkd-steps__item:last-child::after { bottom: auto; height: calc(var(--jkd-steps-num) * .7); }
	.jkd-steps .jkd-steps__num {
		grid-row: 1 / span 3;
		grid-column: 1;
		align-self: start;
		margin: 0;
		padding-left: calc(var(--jkd-steps-rail) + 12px);
	}
	.jkd-steps .jkd-steps__item:nth-child(2) .jkd-steps__num { margin-left: calc(var(--jkd-steps-num) * -.03); }
	.jkd-steps .jkd-steps__item:nth-child(3) .jkd-steps__num { margin-left: calc(var(--jkd-steps-num) * -.02); }
	.jkd-steps .jkd-steps__title,
	.jkd-steps .jkd-steps__text,
	.jkd-steps .jkd-steps__link,
	.jkd-steps .jkd-steps__ways { grid-column: 2; }
	/* The title's caps share the numeral's top: .19em of leading sits above them, the digit's top .01em under its box top */
	.jkd-steps .jkd-steps__title { margin: calc(-.19em + var(--jkd-steps-num) * .01) 0 8px; }
	.jkd-steps .jkd-steps__text { margin-bottom: 18px; }
	.jkd-steps .jkd-steps__link,
	.jkd-steps .jkd-steps__ways { align-self: start; }
	.jkd-steps .jkd-steps__link a { padding: 14px 0; margin: -14px 0; }
}