/* ===========================================================================
 * Front page — "Three screens from catalogue to live feed."
 * Merged into main.css at the end of the pass.
 *
 * Was three alternating caption↔mockup rows: 2,244px at 1440, with a heading
 * band that filled most of a viewport and 150-250px of dead column under every
 * caption. Now one console — a stepped rail plus a single stage — so the
 * section reads as one product surface, and the mockups get more room, not
 * less. CSS-only: three same-name radios sit before the rail and the stage and
 * :checked + `~` drive both, so it works with no JS, never flashes the wrong
 * step, and is arrow-navigable for free (the focus ring is forwarded to the
 * row the visitor can actually see).
 *
 * Review pass (three art directors, verdict "still-generic"):
 *  - Tempo. This is the page's demo band, so it is now the one that breaks
 *    format horizontally: .sf-section--bleed widens the container from 1200 to
 *    1344 at 1440 while .sf-section--compact pulls the block padding from
 *    112px to 64px. Wider and tighter than its neighbours instead of the sixth
 *    112/112 band in a row.
 *  - The rail read as one open card plus two orphan links. Every row now shows
 *    a name, a one-line summary and a thematic glyph whether it is open or not,
 *    and the connector is a real 3px progress spine.
 *  - At 360 the mock window was a fixed 400px box over ~790px of content, so
 *    the admin form was hard-clipped mid-field. Below 600 the window sizes to
 *    its content instead, with the chrome tightened so it stays affordable.
 *  - One sizing rule now drives all three screens at every width, so the stage
 *    is dimensionally static and switching steps cannot jump.
 * ======================================================================== */

/* Head: heading left, lead right. Stacked it was ~360px of near-empty band. */
.sf-hiw__head {
	display: grid;
	gap: var(--sf-space-4);
	margin-bottom: var(--sf-space-6);
}
.sf-hiw__head .sf-eyebrow { margin-bottom: var(--sf-space-3); }
.sf-hiw__head .sf-lead { max-width: 46ch; }
@media (min-width: 900px) {
	.sf-hiw__head {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: end;
		column-gap: var(--sf-space-8);
		margin-bottom: var(--sf-space-7);
	}
	.sf-hiw__head .sf-h2 { max-width: 18ch; }
	.sf-hiw__head .sf-lead { padding-bottom: 6px; }
}
/* .sf-section--bleed is a wide-viewport gesture: below the point where there
   is slack outside the 1200px measure it only subtracts a gutter, which cost
   this band 32px of its 360px screen. Hand the normal container back under
   1024 so the modifier widens where it can and does nothing where it cannot. */
@media (max-width: 1023px) {
	.sf-hiw.sf-section--bleed > .sf-container { max-width: calc(var(--sf-max) + 2 * var(--sf-gutter)); }
}
/* The band is bleed, so the head would otherwise run to 1344px and the lead
   would sit 500px away from the heading it belongs to. Hold the head at the
   normal measure and let only the console use the extra width. */
@media (min-width: 1360px) {
	.sf-hiw__head { max-width: var(--sf-max); }
}

/* --- Console ------------------------------------------------------------- */
.sf-hiw__console {
	position: relative;
	display: grid;
	gap: var(--sf-space-6);
}

/* Real, focusable radios parked off-layout: opacity, not display:none, which
   would drop them out of the tab order. */
.sf-hiw__radio {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 1000px) {
	/* Top-aligned: the rail's first row and the window's title bar start on
	   the same line, so the two panels read as one console instead of a card
	   floating past the window on both ends (it used to sit 19px proud of the
	   window top AND bottom). */
	.sf-hiw__console {
		grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
		column-gap: var(--sf-space-7);
		align-items: start;
	}
	/* 1000-1199 the rail column is 390px and step 2's paragraph out-grows the
	   stage; reserving the tallest state stops the section jumping on that
	   click. Content sits at the top — the slack is below the last row. */
	.sf-hiw__rail { min-height: 600px; align-content: start; }
}
@media (min-width: 1200px) {
	.sf-hiw__console { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 72px; }
	/* At 420px wide every state fits inside the stage height, so the rail can
	   size to its rows: bottom whitespace inside the card never exceeds its own
	   padding, and the fixed stage keeps the section height constant. */
	.sf-hiw__rail { min-height: 0; }
}

/* --- Rail ---------------------------------------------------------------- */
/* Glass, not solid white: the rail is navigation, the admin screen is the
   subject, and two equal white cards would read as a two-column template. */
.sf-hiw__rail {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: grid;
	gap: 12px;
	background: var(--sf-glass);
	/* Violet-tinted hairline, not white-on-white: the card needs a visible
	   edge against the lavender ground to match the window's defined border. */
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e3);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
}
@media (prefers-reduced-transparency: reduce) {
	.sf-hiw__rail { background: var(--sf-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.sf-hiw__step {
	position: relative;
	padding: 12px 16px;
	border-radius: 18px;
	transition: background .22s var(--sf-ease), box-shadow .22s var(--sf-ease);
}

/* Progress spine: brand-filled for steps already passed, faint ahead, so the
   rail reads as a sequence rather than three unrelated links. It was a 2px
   hairline at .18 alpha, invisible at arm's length — three reviewers read the
   rail as three unconnected rows. 3px, opaque enough to survive the glass, and
   centred on the 40px marker (16px step padding + 20px marker radius = 36px). */
.sf-hiw__step::before {
	content: "";
	position: absolute;
	inset-inline-start: 34.5px;
	top: 56px;
	bottom: -20px;
	width: 3px;
	border-radius: 3px;
	background: rgba(79, 70, 229, .30);
}
.sf-hiw__step:last-child::before { display: none; }

/* Active spine: a 3px brand bar on the row's leading edge. The selected state
   used to be carried entirely by a heavy lavender wash; now the bar carries it
   and the wash can drop to a whisper. Painted at opacity 0 on every row so the
   selection change never shifts layout. */
.sf-hiw__step::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: 3px;
	background: var(--sf-grad-brand);
	opacity: 0;
	transition: opacity .22s var(--sf-ease);
}

/* The tab is the positioning context for the hit overlay, so the overlay
   tracks the header row's real height instead of a magic 64px that a
   two-line row would out-grow. */
.sf-hiw__tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
}

/* Row-wide hit target. A <label> cannot wrap an <h3> (phrasing content only),
   so the label stretches over the header row instead. It stops at the header
   so the body copy underneath stays selectable. */
.sf-hiw__tab label { cursor: pointer; }
.sf-hiw__tab label::after {
	content: "";
	position: absolute;
	inset: -12px -16px;
	border-radius: 18px;
}

.sf-hiw__marker {
	flex: none;
	display: grid;
	place-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sf-line-strong);
	background: var(--sf-surface);
	color: var(--sf-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: background .22s var(--sf-ease), border-color .22s var(--sf-ease), color .22s var(--sf-ease), box-shadow .22s var(--sf-ease);
}

.sf-hiw__tab-title {
	min-width: 0;
	font-family: var(--sf-font-display);
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--sf-ink-2);
	transition: color .22s var(--sf-ease);
}
.sf-hiw__tab-name { display: block; }
/* The one-line summary each title already carried after its em dash, set as a
   second line so a collapsed row is a real step and not a bare link. */
.sf-hiw__tab-sub {
	display: block;
	margin-top: 2px;
	font-family: var(--sf-font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--sf-muted);
	transition: color .22s var(--sf-ease);
}

/* Thematic glyph — destination, mapping, preview. The page had 35 SVGs and
   every one was a UI affordance; these are the first that describe something.
   Decorative (aria-hidden), so they carry no contrast requirement, but they
   are kept above the ambient tint so they read as drawn, not as noise. */
.sf-hiw__glyph {
	flex: none;
	display: grid;
	place-content: center;
	margin-inline-start: auto;
	color: rgba(79, 70, 229, .30);
	transition: color .22s var(--sf-ease), transform .3s var(--sf-ease);
}

/* Hover feedback is scoped to the header row so it matches the hit target. */
.sf-hiw__tab:hover .sf-hiw__tab-title { color: var(--sf-brand-hover); }
.sf-hiw__tab:hover .sf-hiw__marker { border-color: var(--sf-brand); color: var(--sf-brand-ink); }
.sf-hiw__tab:hover .sf-hiw__glyph { color: rgba(79, 70, 229, .55); }

/* Collapsed copy: 0fr→1fr animates height with no magic max-height, and
   visibility flips at the end of the collapse so assistive tech is never
   offered text that is not on screen. */
.sf-hiw__body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	opacity: 0;
	transition: grid-template-rows .34s var(--sf-ease), opacity .2s var(--sf-ease), visibility 0s linear .34s;
}
.sf-hiw__body-inner { overflow: hidden; min-height: 0; padding-inline-start: 54px; }
/* Stacked, the rail is full-container width and the copy ran to ~780px. */
@media (max-width: 999px) { .sf-hiw__body-inner { max-width: calc(60ch + 54px); } }
.sf-hiw__copy { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; color: var(--sf-ink-2); }
.sf-hiw__list { margin-top: var(--sf-space-3); }
.sf-hiw__list li { padding: 3px 0; }

/* --- Selected / passed states -------------------------------------------- */
/* nth-of-type counts among the inputs, so none of this depends on the ids. */
/* Selected row: a whisper of tint held in by a crisp 1px ring (inset, so no
   layout shift), with the accent bar doing the talking. The old borderless
   .085-alpha wash read as a slab against the two bare rows beside it. */
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1),
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2),
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) {
	background: linear-gradient(135deg, rgba(79, 70, 229, .05), rgba(124, 58, 237, .025));
	box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .14);
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1)::after,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2)::after,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3)::after {
	opacity: 1;
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__tab-title,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2) .sf-hiw__tab-title,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) .sf-hiw__tab-title {
	color: var(--sf-ink);
	font-weight: 700;
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__tab-sub,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2) .sf-hiw__tab-sub,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) .sf-hiw__tab-sub {
	color: var(--sf-ink-2);
	font-weight: 500;
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__glyph,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2) .sf-hiw__glyph,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) .sf-hiw__glyph {
	color: var(--sf-brand);
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__marker,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2) .sf-hiw__marker,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) .sf-hiw__marker {
	background: var(--sf-grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 0 0 4px rgba(79, 70, 229, .13), 0 8px 18px -8px rgba(79, 70, 229, .6);
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__body,
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2) .sf-hiw__body,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) .sf-hiw__body {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	transition: grid-template-rows .34s var(--sf-ease), opacity .3s var(--sf-ease) .06s, visibility 0s linear 0s;
}

/* Steps already passed: brand-tinted marker, filled spine. */
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1) .sf-hiw__marker,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(-n+2) .sf-hiw__marker {
	background: var(--sf-brand-tint);
	border-color: rgba(79, 70, 229, .45);
	color: var(--sf-brand-ink);
}
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1)::before,
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__rail > .sf-hiw__step:nth-child(-n+2)::before {
	background: linear-gradient(180deg, var(--sf-brand), var(--sf-violet));
}

/* Focus lands on an invisible radio; forward the ring to its row. */
.sf-hiw__radio:nth-of-type(1):focus-visible ~ .sf-hiw__rail > .sf-hiw__step:nth-child(1),
.sf-hiw__radio:nth-of-type(2):focus-visible ~ .sf-hiw__rail > .sf-hiw__step:nth-child(2),
.sf-hiw__radio:nth-of-type(3):focus-visible ~ .sf-hiw__rail > .sf-hiw__step:nth-child(3) {
	outline: 2px solid var(--sf-focus);
	outline-offset: 1px;
}

/* --- Stage --------------------------------------------------------------- */
/* All three screens share one grid cell, so the stage never changes height
   between steps and the inactive ones cost nothing to assistive tech. */
.sf-hiw__stage {
	position: relative;
	display: grid;
	isolation: isolate;
	min-width: 0;
}
/* The .sf-window--stage glow, applied from here so the graphic partials stay
   untouched (the Features page renders the same three windows). */
.sf-hiw__stage::before {
	content: "";
	position: absolute;
	inset: 6% -6% -10% -6%;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(58% 62% at 42% 46%, rgba(124, 92, 255, .30), transparent 70%),
		radial-gradient(52% 58% at 78% 78%, rgba(79, 140, 255, .22), transparent 72%);
	filter: blur(72px);
	pointer-events: none;
}

/* ONE sizing rule for all three screens.
   The screens used to measure 317×423 / 313×418 / 313×418 — the difference was
   the resting scale(.99) on the two hidden ones, which made the stage look
   like it re-sized on every click and would have become a real difference the
   moment the windows were allowed to size to content. The stage cell is now
   the only thing that decides the box: each screen is a grid that its window
   fills, and each window is a grid whose body takes the remaining row. Every
   screen is therefore byte-identical in size at every breakpoint, and the
   entrance animation is a pure translate with no scale left to measure. */
.sf-hiw__screen {
	grid-area: 1 / 1;
	display: grid;
	min-width: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .38s var(--sf-ease), transform .42s var(--sf-ease), visibility 0s linear .42s;
}
.sf-hiw__screen > .sf-window {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: 100%;
}
.sf-hiw__radio:nth-of-type(1):checked ~ .sf-hiw__stage > .sf-hiw__screen:nth-child(1),
.sf-hiw__radio:nth-of-type(2):checked ~ .sf-hiw__stage > .sf-hiw__screen:nth-child(2),
.sf-hiw__radio:nth-of-type(3):checked ~ .sf-hiw__stage > .sf-hiw__screen:nth-child(3) {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .38s var(--sf-ease), transform .42s var(--sf-ease), visibility 0s linear 0s;
}

.sf-hiw__screen .sf-window__bar { background: linear-gradient(180deg, #FFFFFF 0%, var(--sf-surface-2) 100%); }
.sf-hiw__screen .sf-window {
	border-color: rgba(79, 70, 229, .16);
	box-shadow: var(--sf-e4);
}

/* One viewport for all three screens from 600 up. The heights are picked so
   the shortest screen (Preview) ends above the fade and is never cut; the two
   longer ones fade at the cut, which is how the real admin screen behaves when
   it scrolls. Below 600 the window sizes to its content instead — see the
   phone block below. */
@media (min-width: 600px) {
	.sf-hiw__screen .sf-window__body {
		height: 510px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
	}
}
/* 528, not 524: the stage must out-measure the rail's tallest state (step 2
   open, 564px at a 420px rail) or the section jumps 2px on that click. The
   extra 4px sits inside the bottom mask fade, so no more mockup is revealed. */
@media (min-width: 1000px) { .sf-hiw__screen .sf-window__body { height: 528px; } }

/* --- Phones -------------------------------------------------------------- */
/* At 360 the window was a fixed 400px box with overflow:hidden wrapped around
   789px of admin form, so it stopped dead just after the COUNTRY select, on
   the word "TYP". A mockup that is cut mid-field reads as a bug, not as a
   scroll. Below 600 the body sizes to its content and the mask comes off — and
   the chrome tightens by roughly a third so the honest full screen still costs
   less than the dishonest cropped one did plus a caption. */
@media (max-width: 599px) {
	.sf-hiw__screen .sf-window__body {
		height: auto;
		padding: 12px;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
		/* All three screens share one box (see the sizing rule above), so the
		   shorter two carry slack. It is given to the window, not to the
		   panel: a short wp-admin page ends in white below its last panel,
		   whereas a panel stretched to fill just looks like a component that
		   failed. */
		display: flex;
		flex-direction: column;
	}
	.sf-hiw__screen .sf-mock-panel { margin-top: 10px; padding: 12px; }
	/* Fields is the tallest of the three and therefore sets the shared box.
	   Tightening its ten mapping rows pulls ~40px off all three screens. */
	.sf-hiw__screen .sf-mock-map { gap: 2px; }
	.sf-hiw__screen .sf-mock-map .sf-mock-row { padding: 2px 0; }
	.sf-hiw__screen .sf-mock-card,
	.sf-hiw__screen .sf-mock-disclosure,
	.sf-hiw__screen .sf-mock-preview,
	.sf-hiw__screen .sf-mock-selects,
	.sf-hiw__screen .sf-mock-group,
	.sf-hiw__screen .sf-mock-gen,
	.sf-hiw__screen .sf-mock-footer { margin-top: 10px; }
	.sf-hiw__screen .sf-mock-card { padding: 12px; }
	.sf-hiw__screen .sf-mock-card--split,
	.sf-hiw__screen .sf-mock-preview { gap: 10px; }
	.sf-hiw__screen .sf-mock-gen,
	.sf-hiw__screen .sf-mock-footer { padding-top: 10px; }
	.sf-hiw__screen .sf-mock-h { margin-top: 8px; }

	/* "Preview" was breaking mid-word into "Previe / w" in the third step tab:
	   the 1fr column left ~44px for a ~48px label. keep-all makes a mid-word
	   break impossible in any language, and the tighter chrome buys the ~12px
	   the label needed, so the sub-label and the numbered circle both survive. */
	.sf-hiw__screen .sf-mock-steps { gap: 4px; }
	.sf-hiw__screen .sf-mock-steps__item { gap: 6px; padding: 7px 8px; }
	.sf-hiw__screen .sf-mock-steps__num { width: 18px; height: 18px; }
}
.sf-hiw__screen .sf-mock-steps__item,
.sf-hiw__screen .sf-mock-steps__title {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* At 360 the body copy was indented 54px under the number badge, leaving a
   264px column inside a 328px container — 30-character lines in a ribbon.
   Below 640 the badge stays inline with the title and the copy runs the full
   width; the spine shrinks to the connector between two rows so it never
   crosses the text it used to sit beside. */
@media (max-width: 639px) {
	.sf-hiw__rail { gap: 16px; padding: 8px; }
	.sf-hiw__step { padding: 12px 14px; }
	.sf-hiw__body-inner { padding-inline-start: 0; max-width: none; }
	.sf-hiw__step::before {
		inset-inline-start: 32.5px;
		top: auto;
		bottom: -30px;
		height: 30px;
		width: 4px;
	}
	.sf-hiw__tab { gap: 12px; }
	.sf-hiw__tab-title { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-hiw__step, .sf-hiw__step::after, .sf-hiw__marker, .sf-hiw__tab-title,
	.sf-hiw__tab-sub, .sf-hiw__glyph, .sf-hiw__body, .sf-hiw__screen { transition: none; }
	.sf-hiw__screen, .sf-hiw__glyph { transform: none; }
}