/* =========================================================
   Dla kogo Solofit

   Not a list any more. The section asks one question, "Kim
   jestes?", and the profiles are the answers: whole icons in
   a row under a thin rail of light. Picking one lights an
   angular lamp over it, its outline fills with solid yellow
   that lifts out of the outline, and the readout above the
   row finishes the lead's sentence for that profile.

   The profiles are native radio buttons: keyboard, screen
   readers and touch all work without any script. The lamp
   hangs off `.sfk__radio:checked + .sfk__lbl`, which every
   browser understands; the readout follows :has(), with a
   class set by script.js as a separate fallback. With neither
   the section falls back to a plain list with every
   description under its icon.
   ========================================================= */

.sfk {
	--sfk-bg: var(--e-gv-35cef91, #0D0D0D);
	--sfk-text: var(--e-gv-e561443, #f2f0eb);
	--sfk-accent: var(--e-gv-bdd69cf, #F2B705);
	--sfk-muted: var(--e-gv-17a1878, #8a8a85);
	--sfk-head: var(--e-gv-663f235, "Chakra Petch");
	--sfk-body: var(--e-gv-5a42bf5, "Barlow");

	--sfk-hair: rgba(242, 240, 235, .12);
	--sfk-on: var(--sfk-accent);
	--sfk-lbl: rgba(242, 240, 235, .62);
	--sfk-ico: 56px;
	--sfk-lift: 3px;
	--sfk-bar: 32px;
	--sfk-pt: 12px;
	--sfk-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	background: var(--sfk-bg);
	color: var(--sfk-text);
	-webkit-tap-highlight-color: transparent;
}

.sfk *,
.sfk *::before,
.sfk *::after {
	box-sizing: border-box;
}

.sfk ::selection {
	background: rgba(242, 183, 5, .26);
	color: var(--sfk-text);
}

.sfk__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 4rem 1.15rem;
}

/* ---------- head ---------- */

.sfk__top {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sfk__head {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	max-width: 36rem;
}

.sfk__eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--sfk-body), sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sfk-muted);
}

.sfk__dot {
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--sfk-accent);
}

.sfk__title {
	margin: 0;
	font-family: var(--sfk-head), sans-serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 8.8vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sfk-text);
	text-wrap: balance;
}

.sfk__title em {
	font-style: italic;
	color: var(--sfk-accent);
}

.sfk__lead {
	max-width: 34rem;
	margin: 0;
	font-family: var(--sfk-body), sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(242, 240, 235, .76);
}

.sfk__colon {
	font-family: var(--sfk-head), sans-serif;
	font-weight: 700;
	color: var(--sfk-on);
}

/* ---------- readout ----------
   Every profile's text is stacked in one grid cell, so the box is always as
   tall as the tallest one and switching never moves anything below it. */

.sfk__readout {
	position: relative;
	display: grid;
	padding-top: 12px;
}

.sfk__readout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--sfk-bar);
	height: 3px;
	background: var(--sfk-on);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
}

.sfk__say {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

.sfk__say-t {
	margin: 0 0 .375rem;
	font-family: var(--sfk-head), sans-serif;
	font-weight: 700;
	font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--sfk-text);
	text-wrap: balance;
}

.sfk__say-d {
	max-width: 34ch;
	margin: 0;
	font-family: var(--sfk-body), sans-serif;
	font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem);
	line-height: 1.5;
	color: rgba(242, 240, 235, .88);
	text-wrap: pretty;
}

@supports selector(:has(*)) {
	.sfk:has(.sfk__opt:nth-child(1) > .sfk__radio:checked) .sfk__say:nth-child(1),
	.sfk:has(.sfk__opt:nth-child(2) > .sfk__radio:checked) .sfk__say:nth-child(2),
	.sfk:has(.sfk__opt:nth-child(3) > .sfk__radio:checked) .sfk__say:nth-child(3),
	.sfk:has(.sfk__opt:nth-child(4) > .sfk__radio:checked) .sfk__say:nth-child(4),
	.sfk:has(.sfk__opt:nth-child(5) > .sfk__radio:checked) .sfk__say:nth-child(5),
	.sfk:has(.sfk__opt:nth-child(6) > .sfk__radio:checked) .sfk__say:nth-child(6),
	.sfk:has(.sfk__opt:nth-child(7) > .sfk__radio:checked) .sfk__say:nth-child(7),
	.sfk:has(.sfk__opt:nth-child(8) > .sfk__radio:checked) .sfk__say:nth-child(8) {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Kept apart from the list above on purpose: a browser that does not know
   :has() drops that whole list, and this rule has to survive it. */
.sfk--js .sfk__say.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---------- the picker ----------
   Scoped with extra weight so the theme's form styles cannot reach the
   fieldset, legend, label or radio. */

.sfk .sfk__pick {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sfk .sfk__ask {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: 1.3;
	color: inherit;
}

.sfk__ask-q {
	font-family: var(--sfk-head), sans-serif;
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sfk-text);
}

.sfk__ask-hint {
	font-family: var(--sfk-body), sans-serif;
	font-size: .875rem;
	color: rgba(242, 240, 235, .55);
}

.sfk__opts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: .75rem;
	align-items: start;
}

.sfk__opt {
	position: relative;
	min-width: 0;
	touch-action: manipulation;
}

/* The whole cell is the radio: it sits over the option, invisible. */
.sfk .sfk__opt > input.sfk__radio[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.sfk .sfk__lbl {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: var(--sfk-pt) .25rem .5rem;
	border-top: 1px solid var(--sfk-hair);
	text-align: center;
	font-size: inherit;
	line-height: inherit;
	color: var(--sfk-lbl);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.sfk__name {
	position: relative;
	z-index: 1;
	max-width: 100%;
	font-family: var(--sfk-head), sans-serif;
	font-weight: 600;
	font-size: clamp(.875rem, 3.85vw, .9375rem);
	line-height: 1.25;
	color: inherit;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* The lamp: a beam falling from a short bar on the rail. It stops just below
   the icon and never reaches the name. */
.sfk__lbl::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: min(76%, calc(var(--sfk-ico) * 1.7));
	height: calc(var(--sfk-pt) + var(--sfk-ico) + 2px);
	transform: translateX(-50%);
	clip-path: polygon(calc(50% - var(--sfk-bar) / 2) 0, calc(50% + var(--sfk-bar) / 2) 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
	background:
		radial-gradient(50% 12% at 50% 94%, rgba(242, 183, 5, .16), rgba(242, 183, 5, 0)),
		linear-gradient(rgba(242, 183, 5, .2), rgba(242, 183, 5, 0) 88%);
	opacity: 0;
	pointer-events: none;
}

.sfk__lbl::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -1px;
	left: 50%;
	width: var(--sfk-bar);
	height: 3px;
	margin-left: calc(var(--sfk-bar) / -2);
	background: var(--sfk-on);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
	transform: scaleX(0);
}

/* ---------- icons ----------
   Two copies of each icon, whole, in a fixed square. The echo is the icon's
   outline and never moves; the face is the solid shape, shown only for the
   chosen profile, lifted up and right along 45 degrees out of its own
   outline so a sliver of outline reads as depth.

   The echo is stroked in a solid colour and dimmed as a whole with opacity.
   The uploaded icons contain some shapes twice, and a translucent stroke
   would add up where those overlap. */

.sfk__ico {
	position: relative;
	z-index: 1;
	flex: none;
	display: block;
	width: var(--sfk-ico);
	height: var(--sfk-ico);
}

.sfk__ico::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: radial-gradient(closest-side, rgba(242, 183, 5, .3), rgba(242, 183, 5, 0));
	opacity: 0;
}

.sfk__ico-echo,
.sfk__ico-face {
	position: absolute;
	inset: 0;
	display: block;
}

.sfk__ico .sf-ico {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sfk__ico-echo {
	--ico-ink: transparent;
	--ico-accent: transparent;
	--ico-paper: transparent;
	--ico-line: currentColor;
	--ico-line-w: 1.5px;
	color: var(--sfk-text);
	opacity: .42;
}

.sfk__ico-face {
	--ico-ink: currentColor;
	--ico-accent: currentColor;
	--ico-paper: currentColor;
	--ico-line: none;
	--ico-line-w: 0;
	color: var(--sfk-on);
	opacity: 0;
}

/* ---------- chosen ---------- */

.sfk__radio:checked + .sfk__lbl {
	color: var(--sfk-text);
}

.sfk__radio:checked + .sfk__lbl::before,
.sfk__radio:checked + .sfk__lbl .sfk__ico::before {
	opacity: 1;
}

.sfk__radio:checked + .sfk__lbl::after {
	transform: scaleX(1);
}

.sfk__radio:checked + .sfk__lbl .sfk__ico-echo {
	color: var(--sfk-on);
	opacity: .55;
}

.sfk__radio:checked + .sfk__lbl .sfk__ico-face {
	opacity: 1;
	transform: translate(var(--sfk-lift), calc(var(--sfk-lift) * -1));
}

/* Hover only brightens; it never chooses. */
@media (hover: hover) and (pointer: fine) {
	.sfk__opt:hover .sfk__lbl {
		color: var(--sfk-text);
	}

	.sfk__opt:hover .sfk__radio:not(:checked) + .sfk__lbl .sfk__ico-echo {
		opacity: .85;
	}
}

.sfk__radio:focus-visible + .sfk__lbl {
	outline: 2px solid var(--sfk-on);
	outline-offset: 4px;
	border-radius: 3px;
}

/* ---------- link ----------
   The colour is pinned on every state: the theme's reset turns links navy on
   hover and on tap, and that rule outranks a single class. */

.sfk__more {
	margin: 0;
}

.sfk .sfk__link,
.sfk .sfk__link:hover,
.sfk .sfk__link:focus,
.sfk .sfk__link:active,
.sfk .sfk__link:visited {
	color: var(--sfk-on);
}

.sfk__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	font-family: var(--sfk-head), sans-serif;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.sfk__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 1.6rem;
	bottom: .6rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.sfk__arrow {
	width: 1rem;
	height: 1rem;
}

@media (hover: hover) {
	.sfk__link:hover::after {
		opacity: 1;
	}

	.sfk__link:hover .sfk__arrow {
		transform: translateX(3px);
	}
}

.sfk__link:focus-visible {
	outline: 2px solid var(--sfk-on);
	outline-offset: 4px;
	border-radius: 3px;
}

/* ---------- plain-list fallback ---------- */

.sfk__desc {
	display: none;
	margin: .25rem 0 0;
	font-family: var(--sfk-body), sans-serif;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(242, 240, 235, .74);
	text-align: center;
	text-wrap: pretty;
}

@supports not selector(:has(*)) {
	.sfk:not(.sfk--js) .sfk__readout {
		display: none;
	}

	.sfk:not(.sfk--js) .sfk__desc {
		display: block;
	}
}

@media print {
	.sfk__readout {
		display: none;
	}

	.sfk__desc {
		display: block;
	}

	.sfk__lbl::before,
	.sfk__ico::before {
		display: none;
	}
}

/* ---------- sizes ---------- */

@media (max-width: 359.98px) {
	.sfk__opts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.sfk__inner {
		padding-inline: 2rem;
	}

	.sfk__head,
	.sfk__readout {
		max-width: 64%;
	}
}

/* One row of every profile from here up. */
@media (min-width: 820px) {
	.sfk {
		--sfk-ico: 72px;
		--sfk-bar: 40px;
		--sfk-pt: 20px;
	}

	.sfk__opts {
		grid-template-columns: repeat(var(--sfk-cols, 6), minmax(0, 13rem));
		column-gap: clamp(1rem, 1.8vw, 1.5rem);
		margin-top: .875rem;
	}

	.sfk__name {
		font-size: .9375rem;
	}
}

@media (min-width: 1025px) {
	.sfk {
		--sfk-ico: clamp(88px, 7.2vw, 112px);
		--sfk-lift: 4px;
		--sfk-bar: 44px;
		--sfk-pt: 28px;
	}

	/* Top and bottom room from the fixed screen height of snippet 10385, not
	   svh, so a phone's browser bars never change it. */
	.sfk__inner {
		gap: 2.25rem;
		padding: clamp(4rem, calc(var(--sf-screen, 820px) * .08), 6.5rem) 3rem;
	}

	.sfk__top {
		gap: 2rem;
	}

	.sfk__head {
		max-width: min(48rem, 60%);
	}

	.sfk__title {
		font-size: clamp(2.8rem, 4.2vw, 4rem);
	}

	.sfk__lead {
		font-size: 1.08rem;
	}

	.sfk__readout {
		max-width: min(40rem, 58%);
	}

	.sfk .sfk__lbl {
		gap: .875rem;
	}

	.sfk__name {
		font-size: 1.0625rem;
	}
}

/* ---------- motion ----------
   Only opacity, transform and colour ever move, and only when the visitor has
   not asked for less motion. */

@media (prefers-reduced-motion: no-preference) {
	.sfk .sfk__lbl {
		transition: color .18s ease;
	}

	.sfk__lbl::before,
	.sfk__ico::before {
		transition: opacity .24s ease;
	}

	.sfk__lbl::after {
		transition: transform .24s var(--sfk-ease);
	}

	.sfk__ico-echo {
		transition: color .18s ease, opacity .18s ease;
	}

	.sfk__ico-face {
		transition: opacity .16s ease-in, transform .2s ease-in;
	}

	.sfk__radio:checked + .sfk__lbl .sfk__ico-face {
		transition: opacity .24s ease .04s, transform .3s var(--sfk-ease) .04s;
	}

	.sfk__arrow {
		transition: transform .2s ease;
	}

	.sfk__link::after {
		transition: opacity .2s ease;
	}

	/* Leaving: fade out, then drop out of the accessibility tree. */
	.sfk__say {
		transition: opacity .16s ease-in, transform .16s ease-in, visibility 0s linear .16s;
	}

	/* Arriving: visible at once, then fade in. */
	.sfk--js .sfk__say.is-active {
		transition: opacity .24s var(--sfk-ease) .08s, transform .28s var(--sfk-ease) .08s, visibility 0s;
	}
}

@supports selector(:has(*)) {
	@media (prefers-reduced-motion: no-preference) {
		.sfk:has(.sfk__opt:nth-child(1) > .sfk__radio:checked) .sfk__say:nth-child(1),
		.sfk:has(.sfk__opt:nth-child(2) > .sfk__radio:checked) .sfk__say:nth-child(2),
		.sfk:has(.sfk__opt:nth-child(3) > .sfk__radio:checked) .sfk__say:nth-child(3),
		.sfk:has(.sfk__opt:nth-child(4) > .sfk__radio:checked) .sfk__say:nth-child(4),
		.sfk:has(.sfk__opt:nth-child(5) > .sfk__radio:checked) .sfk__say:nth-child(5),
		.sfk:has(.sfk__opt:nth-child(6) > .sfk__radio:checked) .sfk__say:nth-child(6),
		.sfk:has(.sfk__opt:nth-child(7) > .sfk__radio:checked) .sfk__say:nth-child(7),
		.sfk:has(.sfk__opt:nth-child(8) > .sfk__radio:checked) .sfk__say:nth-child(8) {
			transition: opacity .24s var(--sfk-ease) .08s, transform .28s var(--sfk-ease) .08s, visibility 0s;
		}
	}
}

/* ---------- forced colours ---------- */

@media (forced-colors: active) {
	.sfk__lbl::before,
	.sfk__ico::before {
		display: none;
	}

	.sfk__ico-echo {
		color: CanvasText;
		opacity: 1;
	}

	.sfk__ico-face,
	.sfk__radio:checked + .sfk__lbl .sfk__ico-echo {
		color: Highlight;
	}

	.sfk__lbl::after,
	.sfk__readout::before {
		forced-color-adjust: none;
		background: Highlight;
	}

	.sfk__radio:focus-visible + .sfk__lbl {
		outline-color: Highlight;
	}
}