/* ==========================================================================
   Team page: modules that win new partners (inc/team-kumppanit.php, assets/js/team-kumppanit.js).
   Loaded only where one of the modules renders. Same tokens as style.css.
   Motion: everything here is either a one-off entrance (JS adds .is-pre, then .is-in when in view) or the visitor's
   own game; style.css switches all transitions and animations off for prefers-reduced-motion.
     1. Tie Lahteen 2029      .efit-tl
     2. Mahdollista leiri     .efit-tkc
     3. Ampumahiihtopeli      .efit-shoot
     4. Partner wall: open slot .efit-logowall__invite
     5. Urheilijakortit       .efit-tka
     6. Mitä tukesi tekee     .efit-tks
     7. Kumppanuussovitin     .efit-tkm
   ========================================================================== */

/* shared: the three dark stages */
.efit-tl.efit-tl, .efit-shoot.efit-shoot, .efit-tka.efit-tka {
	--sp-btn-bg: var(--efit-yellow); --sp-btn-fg: var(--efit-navy); --sp-btn-ol: #fff; --sp-btn-hover: rgba(255, 255, 255, 0.14);
	position: relative; overflow: hidden; isolation: isolate; color: #fff;
	padding: 0; border-radius: var(--efit-radius); background-color: var(--efit-navy-dark);
}
:is(.efit-tl, .efit-shoot, .efit-tkc, .efit-tka, .efit-tks, .efit-tkm) :is(h2, h3, p, ul, ol, li, blockquote, fieldset) { margin: 0; }
:is(.efit-tl__eyebrow, .efit-shoot__eyebrow, .efit-tkc__eyebrow, .efit-tka__eyebrow, .efit-tks__eyebrow, .efit-tkm__eyebrow, .efit-tkm__rlabel) {
	align-self: flex-start; display: inline-flex; padding: 7px 14px; border-radius: 999px;
	background: var(--efit-yellow); color: var(--efit-navy);
	font: var(--efit-fw-ui-heavy) var(--efit-fs-xs)/1 var(--wp--preset--font-family--inter); letter-spacing: 0.12em; text-transform: uppercase;
}
:is(.efit-tl, .efit-shoot, .efit-tkc, .efit-tka, .efit-tks, .efit-tkm) :is(h2, h3, legend) { hyphens: manual; overflow-wrap: break-word; text-transform: none; }

/* ==========================================================================
   1. Tie Lahteen 2029: photo stage, the countdown, the four seasons as a ski track, the numbers, why it matters.
   ========================================================================== */
.efit-tl__app { position: relative; display: flex; flex-direction: column; gap: var(--efit-s5); padding: var(--efit-pad-y) var(--efit-pad-x); }
/* the photo fills the top of the stage and fades into navy below it; text side nearly solid, the team and the mountain
   show through behind the countdown */
.efit-tl__bg {
	position: absolute; inset: 0 0 auto 0; height: min(100%, 780px); z-index: -1;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}
.efit-tl__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 40%; }
.efit-tl__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(0, 23, 43, 0.95) 0%, rgba(0, 23, 43, 0.84) 40%, rgba(0, 33, 59, 0.5) 66%, rgba(0, 33, 59, 0.42) 100%);
}
@media (max-width: 899px) { .efit-tl__bg::after { background: rgba(0, 23, 43, 0.82); } }
.efit-tl__count { text-shadow: 0 2px 16px rgba(0, 23, 43, 0.7); }

.efit-tl__top { display: grid; gap: var(--efit-s4); align-items: end; }
@media (min-width: 900px) { .efit-tl__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.efit-tl__head { display: flex; flex-direction: column; gap: var(--efit-s3); max-width: 640px; }
h2.efit-tl__title, h2.efit-shoot__title {
	color: #fff; font: var(--efit-fw-display) var(--efit-fs-h1)/var(--efit-lh-tight) var(--efit-ff-display); letter-spacing: -0.01em;
}
:is(.efit-tl__lead, .efit-shoot__lead) { max-width: 56ch; color: rgba(255, 255, 255, 0.9); font-size: var(--efit-fs-lead); line-height: var(--efit-lh-lead); }

.efit-tl__count { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 900px) { .efit-tl__count { align-items: flex-end; text-align: right; } }
.efit-tl__num {
	font: var(--efit-fw-display) clamp(5.5rem, 2rem + 13vw, 13rem)/0.8 var(--efit-ff-display); letter-spacing: -0.03em;
	color: var(--efit-yellow); font-variant-numeric: tabular-nums; text-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}
.efit-tl__unit { color: #fff; font: var(--efit-fw-ui) var(--efit-fs-lead)/1.3 var(--wp--preset--font-family--inter); }
.efit-tl__sub { color: rgba(255, 255, 255, 0.82); font-size: var(--efit-fs-sm); }
.efit-tl__sub b { color: #fff; font: var(--efit-fw-display) 1.5em/1 var(--efit-ff-display); font-variant-numeric: tabular-nums; }

/* the track: two grooves like a classic ski track; the part already skied is yellow, the rest still unbroken */
.efit-tl__track { position: relative; padding-top: 34px; }
.efit-tl__marks { position: absolute; top: 0; left: 0; right: 0; height: 34px; }
p.efit-tl__mark {
	position: absolute; bottom: 10px; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap;
	color: rgba(255, 255, 255, 0.85); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); letter-spacing: 0.08em; text-transform: uppercase;
}
p.efit-tl__mark b { color: #fff; font-weight: var(--efit-fw-ui-heavy); }
p.efit-tl__mark i { font-style: normal; }
p.efit-tl__mark--now { transform: translateX(-9px); color: var(--efit-yellow); }
p.efit-tl__mark--og { transform: translateX(calc(-100% + 9px)); }
.efit-tl__yr { display: none; }
@media (min-width: 600px) { .efit-tl__yr { display: inline; } }
@media (max-width: 1199px) { p.efit-tl__mark i { display: none; } }

.efit-tl__rail { position: relative; height: 18px; }
.efit-tl__rail::before, .efit-tl__done {
	content: ""; position: absolute; left: 0; top: 3px; height: 8px;
	border-top: 2px dashed rgba(255, 255, 255, 0.3); border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
}
.efit-tl__rail::before { right: 0; }
.efit-tl__done {
	width: calc(var(--now) * 1%); border-top-style: solid; border-bottom-style: solid; border-color: var(--efit-yellow);
	filter: drop-shadow(0 0 8px rgba(241, 237, 15, 0.55)); transform-origin: 0 50%;
	transition: transform 1.6s cubic-bezier(0.22, 0.8, 0.24, 1) 0.2s;
}
.efit-tl__dot {
	position: absolute; top: 9px; left: calc(var(--now) * 1%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
	background: var(--efit-yellow); animation: efit-tl-pulse 2.4s ease-out infinite;
	transition: opacity 0.4s ease 1.6s, transform 0.4s ease 1.6s;
}
@keyframes efit-tl-pulse {
	0% { box-shadow: 0 0 0 0 rgba(241, 237, 15, 0.6); }
	100% { box-shadow: 0 0 0 20px rgba(241, 237, 15, 0); }
}
.efit-tl__pin { position: absolute; top: 9px; left: calc(var(--x) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16); }
.efit-tl__pin--og { background: var(--efit-sky); }
.efit-tl__app.is-pre .efit-tl__done { transform: scaleX(0); }
.efit-tl__app.is-pre .efit-tl__dot { opacity: 0; transform: scale(0.4); }

ol.efit-tl__seasons { position: relative; height: 30px; margin: 8px 0 0; padding: 0; list-style: none; }
.efit-tl__seasons li {
	position: absolute; top: 0; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); box-sizing: border-box;
	padding: 6px 0 0 6px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28); white-space: nowrap;
	color: rgba(255, 255, 255, 0.72); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter);
}
.efit-tl__seasons li.is-now { color: var(--efit-yellow); }
.efit-tl__slong { display: none; }
@media (min-width: 900px) { .efit-tl__slong { display: inline; } .efit-tl__sshort { display: none; } }

/* the numbers: glass tiles; the figure sizes itself to its tile (cqi), so "165 000 €" never overflows a narrow one */
ul.efit-tl__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--efit-s2); padding: 0; list-style: none; }
@media (min-width: 900px) { ul.efit-tl__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.efit-tl__facts li {
	container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: var(--efit-s3);
	border-radius: calc(var(--efit-radius) * 0.7); background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.efit-tl__facts b { color: #fff; font: var(--efit-fw-display) clamp(1.5rem, 19cqi, 3.2rem)/1 var(--efit-ff-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.efit-tl__facts li > span { color: rgba(255, 255, 255, 0.82); font-size: var(--efit-fs-sm); line-height: var(--efit-lh-snug); hyphens: manual; overflow-wrap: anywhere; } /* a squad's sentence form typed in WordPress has no soft hyphen: break it rather than clip it on phones */

.efit-tl__why { display: grid; gap: var(--efit-s3); padding-top: var(--efit-s4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
@media (min-width: 900px) {
	.efit-tl__why { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "quote because" "quote actions"; column-gap: var(--efit-s5); align-items: start; }
	.efit-tl__quote { grid-area: quote; }
	.efit-tl__because { grid-area: because; }
	.efit-tl__why .efit-actions { grid-area: actions; }
}
.efit-tl__quote { color: #fff; font: var(--efit-fw-display) var(--efit-fs-title)/var(--efit-lh-tight) var(--efit-ff-display); hyphens: manual; }
.efit-tl__because { max-width: 52ch; color: rgba(255, 255, 255, 0.88); }
.efit-tl__why .efit-actions { padding-top: 0; }

/* ==========================================================================
   2. Mahdollista leiri: per squad (tabs), the season's camp days as a meter, then the camps; upcoming ones are the big dark cards.
   ========================================================================== */
.efit-tkc.efit-tkc {
	padding: var(--efit-pad-y) var(--efit-pad-x); border-radius: var(--efit-radius); color: var(--efit-navy);
	background-color: var(--efit-mist);
	background-image: radial-gradient(80% 70% at 100% 0%, rgba(0, 119, 200, 0.14) 0%, rgba(0, 119, 200, 0) 60%);
}
.efit-tkc__app { display: flex; flex-direction: column; gap: var(--efit-s4); }
.efit-tkc__head { display: flex; flex-direction: column; gap: var(--efit-s3); max-width: 760px; }
h2.efit-tkc__title { color: inherit; font: var(--efit-fw-display) var(--efit-fs-h1)/var(--efit-lh-tight) var(--efit-ff-display); }
.efit-tkc__lead { max-width: 62ch; font-size: var(--efit-fs-lead); line-height: var(--efit-lh-lead); }

/* one panel per squad (cross-country, biathlon), as tabs with script; without it one under the other under its label */
.efit-tkc__panel { display: flex; flex-direction: column; gap: var(--efit-s4); }
.efit-tkc__panel[hidden], .efit-tkc__tabs[hidden] { display: none; }
.efit-tkc__panel + .efit-tkc__panel { padding-top: var(--efit-s4); border-top: 1px solid var(--efit-mist-2); }
.efit-tkc__group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: var(--efit-fw-title) var(--efit-fs-h3)/1.2 var(--efit-ff-title); }
.efit-tkc__group span { color: var(--efit-blue-deep); font: var(--efit-fw-ui) var(--efit-fs-sm)/1.3 var(--wp--preset--font-family--inter); }
.has-tabs .efit-tkc__group { display: none; }
.has-tabs .efit-tkc__panel + .efit-tkc__panel { padding-top: 0; border-top: 0; }
.efit-tkc__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: calc(var(--efit-s2) - var(--efit-s4)); }
.efit-tkc__tab {
	display: grid; gap: 3px; min-height: 48px; padding: 11px 20px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
	background: #fff; color: var(--efit-navy); box-shadow: inset 0 0 0 1px var(--efit-mist-2);
	font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter); transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.efit-tkc__tab span { color: var(--efit-blue-deep); font-size: var(--efit-fs-xs); font-weight: 400; }
.efit-tkc__tab:hover { box-shadow: inset 0 0 0 1px var(--efit-blue-deep); }
.efit-tkc__tab[aria-selected="true"] { background: var(--efit-navy); color: #fff; box-shadow: 0 10px 24px rgba(0, 23, 43, 0.18); }
.efit-tkc__tab[aria-selected="true"] span { color: var(--efit-sky); }
.efit-tkc__tab:focus-visible { outline: 3px solid var(--efit-blue); outline-offset: 2px; }
@media (max-width: 479px) { .efit-tkc__tab { flex: 1 1 0; padding-inline: 14px; } }

.efit-tkc__meter { display: grid; gap: 12px; }
.efit-tkc__meterlabel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-weight: var(--efit-fw-ui); }
.efit-tkc__big { font: var(--efit-fw-display) clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem)/0.9 var(--efit-ff-display); font-variant-numeric: tabular-nums; color: var(--efit-blue-deep); }
.efit-tkc__big b { color: var(--efit-navy); font-weight: inherit; }
.efit-tkc__next { color: var(--efit-blue-deep); font-weight: var(--efit-fw-ui); }
:is(.efit-tkc__next, .efit-tkc__more, .efit-tkc__soon, .efit-tkc__place) { hyphens: manual; }
.efit-tkc__next:empty { display: none; }
.efit-tkc__bar { display: flex; gap: 4px; height: 20px; }
.efit-tkc__seg { position: relative; flex: var(--d) 1 0; overflow: hidden; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--efit-mist-2); }
.efit-tkc__seg i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: linear-gradient(90deg, var(--efit-blue), var(--efit-blue-deep)); transition: width 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) calc(var(--i, 0) * 0.12s); }
.efit-tkc__seg.is-past { --fill: 100%; }
.efit-tkc__seg.is-now i { background: var(--efit-yellow); }
.efit-tkc__panel.is-pre .efit-tkc__seg i { width: 0; }

/* Fixed column counts (never auto-fit): past camps are small tiles, the running and upcoming ones big cards on a row of
   their own. Phone 2 cols (tile 1, card 2), tablet 6 (2 / 3), desktop 10 (2 / 5): a season's five past camps fill one row. */
ol.efit-tkc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--efit-s2); align-items: start; padding: 0; list-style: none; }
.efit-tkc__camp:is(.is-now, .is-next) { grid-column: span 2; }
@media (min-width: 700px) {
	ol.efit-tkc__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.efit-tkc__camp.is-past { grid-column: span 2; }
	.efit-tkc__camp:is(.is-now, .is-next) { grid-column: span 3; }
}
@media (min-width: 1100px) {
	ol.efit-tkc__list { grid-template-columns: repeat(10, minmax(0, 1fr)); }
	.efit-tkc__camp:is(.is-now, .is-next) { grid-column: span 5; }
}
.efit-tkc__camp {
	position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: var(--efit-s3);
	border-radius: calc(var(--efit-radius) * 0.7); background: #fff; box-shadow: inset 0 0 0 1px var(--efit-mist-2);
}
.efit-tkc__camp.is-past { background: rgba(255, 255, 255, 0.55); }
.efit-tkc__camp:is(.is-now, .is-next) {
	align-self: stretch; gap: 8px; color: #fff; background-color: var(--efit-navy);
	background-image: radial-gradient(90% 80% at 100% 0%, rgba(0, 119, 200, 0.6) 0%, rgba(0, 119, 200, 0) 65%);
	box-shadow: 0 18px 40px rgba(0, 23, 43, 0.2);
}
.efit-tkc__date { color: var(--efit-blue-deep); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.3 var(--wp--preset--font-family--inter); letter-spacing: 0.03em; }
h3.efit-tkc__name { color: inherit; font: var(--efit-fw-title) var(--efit-fs-h3)/1.1 var(--efit-ff-title); }
.efit-tkc__place { color: rgba(0, 33, 59, 0.78); font-size: var(--efit-fs-sm); line-height: 1.3; }
.efit-tkc__days { margin-top: auto; font-size: var(--efit-fs-sm); }
.efit-tkc__days b { font: var(--efit-fw-display) 1.7em/1 var(--efit-ff-display); }
.efit-tkc__camp:is(.is-now, .is-next) .efit-tkc__date { color: var(--efit-sky); }
.efit-tkc__camp:is(.is-now, .is-next) h3.efit-tkc__name { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); font-family: var(--efit-ff-display); font-weight: var(--efit-fw-display); }
.efit-tkc__camp:is(.is-now, .is-next) .efit-tkc__place { color: rgba(255, 255, 255, 0.8); }
.efit-tkc__camp:is(.is-now, .is-next) .efit-tkc__days { margin-top: 0; }
.efit-tkc__soon { color: var(--efit-yellow); font-weight: var(--efit-fw-ui); font-size: var(--efit-fs-sm); }

.efit-tkc__s { display: none; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); }
.is-past .efit-tkc__s--past, .is-now .efit-tkc__s--now, .is-next .efit-tkc__s--next, .has-by .efit-tkc__s--by { display: inline-flex; }
.has-by.is-past .efit-tkc__s--past { display: none; }
.efit-tkc__s--past { background: var(--efit-mist-2); color: var(--efit-navy); }
.efit-tkc__s--past::before { content: "✓"; font-weight: var(--efit-fw-ui-heavy); }
.efit-tkc__s--now { background: var(--efit-yellow); color: var(--efit-navy); }
.efit-tkc__s--now::before, .efit-tkc__s--next::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.efit-tkc__s--now::before { animation: efit-tkc-blink 1.4s ease-in-out infinite; }
@keyframes efit-tkc-blink { 50% { opacity: 0.25; } }
.efit-tkc__s--next { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); color: #fff; }
.efit-tkc__s--next::before { background: var(--efit-yellow); }
.efit-tkc__s--by { background: var(--efit-mist-2); color: var(--efit-navy); }
.efit-tkc__state { display: flex; }

.efit-tkc__cta {
	display: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 6px; padding: 12px 18px;
	border-radius: 6px; background: var(--efit-yellow); color: var(--efit-navy); text-decoration: none;
	font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.efit-tkc__cta::after { content: "→"; font-size: 1.2em; transition: transform 0.2s ease; }
.efit-tkc__camp:is(.is-now, .is-next) .efit-tkc__cta { display: flex; }
.efit-tkc__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); color: var(--efit-navy); }
.efit-tkc__cta:hover::after { transform: translateX(4px); }
.efit-tkc__cta:focus-visible { outline-color: var(--efit-yellow); }
.efit-tkc__more { font-size: var(--efit-fs-sm); }
.efit-tkc__more a { color: var(--efit-blue-deep); font-weight: var(--efit-fw-ui); }

/* ==========================================================================
   3. Ampumahiihtopeli: HUD (heart rate + ECG, time, the five-target plate), then one panel at a time. All panels share
   one grid cell (inactive = visibility: hidden), so the game never changes height between phases.
   ========================================================================== */
.efit-shoot.efit-shoot {
	padding: var(--efit-pad-y) var(--efit-pad-x);
	background-image:
		radial-gradient(70% 60% at 88% 8%, rgba(0, 119, 200, 0.5) 0%, rgba(0, 119, 200, 0) 60%),
		radial-gradient(55% 55% at 0% 100%, rgba(163, 206, 235, 0.14) 0%, rgba(163, 206, 235, 0) 60%),
		linear-gradient(165deg, var(--efit-navy) 0%, var(--efit-navy-dark) 100%);
}
.efit-shoot__app { display: grid; gap: var(--efit-s4); }
@media (min-width: 1000px) { .efit-shoot__app { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; column-gap: var(--efit-s5); } }
.efit-shoot__head { display: flex; flex-direction: column; gap: var(--efit-s3); }

.efit-shoot__game {
	--hr-c: #fff;
	position: relative; display: flex; flex-direction: column; gap: var(--efit-s3); padding: var(--efit-s3);
	border-radius: calc(var(--efit-radius) * 0.8); background: rgba(0, 23, 43, 0.6);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px rgba(0, 0, 0, 0.35);
}
.efit-shoot__hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "hr ecg time" "plate plate plate"; align-items: center; gap: 12px 16px; }
.efit-shoot__stat { display: flex; align-items: baseline; gap: 6px; }
.efit-shoot__stat--hr { grid-area: hr; }
.efit-shoot__stat--time { grid-area: time; justify-content: flex-end; }
.efit-shoot__stat b { min-width: 2.1ch; color: #fff; font: var(--efit-fw-display) clamp(2rem, 1.3rem + 2vw, 3rem)/1 var(--efit-ff-display); font-variant-numeric: tabular-nums; }
.efit-shoot__stat--hr b { color: var(--hr-c); transition: color 0.3s ease; }
.efit-shoot__stat small { color: rgba(255, 255, 255, 0.72); font: var(--efit-fw-ui) var(--efit-fs-xs)/1 var(--wp--preset--font-family--inter); letter-spacing: 0.1em; text-transform: uppercase; }
.efit-shoot__heart {
	align-self: center; width: 22px; height: 20px; background: var(--hr-c); transition: transform 0.08s ease-out, background-color 0.3s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.4 2.9-.5 6.6-.5c2.1 0 4.1 1 5.4 2.5C13.3.5 15.3-.5 17.4-.5 21.1-.5 24 2.4 24 6.1c0 4.6-4.2 8.4-10.3 13.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.4 2.9-.5 6.6-.5c2.1 0 4.1 1 5.4 2.5C13.3.5 15.3-.5 17.4-.5 21.1-.5 24 2.4 24 6.1c0 4.6-4.2 8.4-10.3 13.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.efit-shoot__heart.is-beat { transform: scale(1.3); }
.efit-shoot__ecg { grid-area: ecg; display: block; width: 100%; height: 48px; }
.efit-shoot__plate { grid-area: plate; display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 16px); padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 -3px 0 var(--efit-mist-2); }
.efit-shoot__t { width: clamp(22px, 6vw, 30px); aspect-ratio: 1; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--efit-mist-2); transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.efit-shoot__t.is-hit { background: #fff; box-shadow: inset 0 0 0 3px var(--efit-mist-2), 0 0 0 3px #fff, 0 0 0 4px var(--efit-mist-2); transform: scale(1.08); }
.efit-shoot__t.is-miss { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ed3008; }

.efit-shoot__stage { display: grid; }
.efit-shoot__panel {
	grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--efit-s3);
	min-width: 0; text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.efit-shoot__game.is-intro .efit-shoot__panel--intro,
.efit-shoot__game.is-ski .efit-shoot__panel--ski,
.efit-shoot__game.is-shoot .efit-shoot__panel--shoot,
.efit-shoot__game.is-result .efit-shoot__panel--result { visibility: visible; opacity: 1; transition-delay: 0s; }

ol.efit-shoot__steps { display: grid; gap: 14px; max-width: 46ch; padding: 0; list-style: none; counter-reset: sh; text-align: left; }
.efit-shoot__steps li { position: relative; padding-left: 44px; color: rgba(255, 255, 255, 0.88); font-size: var(--efit-fs-sm); line-height: var(--efit-lh-body); counter-increment: sh; }
.efit-shoot__steps li::before {
	content: counter(sh); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: var(--efit-yellow);
	font: var(--efit-fw-display) 1rem/1 var(--efit-ff-display);
}
.efit-shoot__steps b { color: #fff; font-weight: var(--efit-fw-ui); }
.efit-shoot__nojs { color: var(--efit-yellow); }

.efit-shoot__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 36px; border: 0; border-radius: 6px;
	background: var(--efit-yellow); color: var(--efit-navy); cursor: pointer;
	font: var(--efit-fw-ui) var(--efit-fs-base)/1.2 var(--wp--preset--font-family--inter);
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.efit-shoot__btn:hover { box-shadow: 0 10px 26px rgba(241, 237, 15, 0.28); }
.efit-shoot__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.efit-shoot__btn--hold { width: min(100%, 440px); min-height: 76px; font-size: var(--efit-fs-lead); touch-action: none; }
.efit-shoot__game.is-pushing .efit-shoot__btn--hold { transform: scale(0.97); background: #fff; box-shadow: 0 0 0 6px rgba(241, 237, 15, 0.35), 0 0 40px rgba(241, 237, 15, 0.4); }
.efit-shoot__btn--fire { width: min(100%, 360px); min-height: 64px; }

/* ski phase: the double track to the range, the skier, speed lines while pushing */
.efit-shoot__course { --dist: 0; position: relative; width: 100%; height: 72px; }
.efit-shoot__lane {
	position: absolute; left: 0; right: 96px; top: 50%; height: 10px; margin-top: -5px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(255, 255, 255, 0.3);
}
.efit-shoot__lane::after {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--dist) * 1%);
	box-shadow: inset 0 2px 0 var(--efit-yellow), inset 0 -2px 0 var(--efit-yellow); filter: drop-shadow(0 0 6px rgba(241, 237, 15, 0.6));
}
.efit-shoot__game.is-pushing .efit-shoot__lane { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, 0.16) 22px 26px); background-size: 26px 100%; animation: efit-sh-run 0.35s linear infinite; }
@keyframes efit-sh-run { to { background-position: -26px 0; } }
.efit-shoot__skier {
	position: absolute; top: 50%; left: calc((100% - 96px) * var(--dist) / 100); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
	background: var(--efit-yellow); box-shadow: 0 0 0 6px rgba(241, 237, 15, 0.2), 0 0 24px rgba(241, 237, 15, 0.7);
}
/* the range at the end of the track: a mini target plate, its name underneath */
.efit-shoot__range {
	position: absolute; right: 0; top: 50%; display: flex; gap: 3px; transform: translateY(-50%); padding: 7px 8px; border-radius: 6px;
	background: #fff; box-shadow: inset 0 -2px 0 var(--efit-mist-2);
}
.efit-shoot__range i { width: 11px; height: 11px; border-radius: 50%; background: #000; }
.efit-shoot__range small {
	position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap;
	color: rgba(255, 255, 255, 0.78); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter);
}
.efit-shoot__dist { color: rgba(255, 255, 255, 0.85); font-size: var(--efit-fs-sm); }
.efit-shoot__dist b { color: #fff; font: var(--efit-fw-display) 1.6em/1 var(--efit-ff-display); font-variant-numeric: tabular-nums; }

/* shooting phase: the sight is fixed, the world moves with the heart rate */
.efit-shoot__scopewrap { position: relative; width: min(100%, 340px); aspect-ratio: 1; cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.efit-shoot__scope { display: block; width: 100%; height: 100%; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.5)); }
.efit-shoot__tgt { fill: #000; transition: fill 0.2s ease; }
.efit-shoot__tgt.is-hit { fill: #fff; stroke: var(--efit-mist-2); stroke-width: 3; }
p.efit-shoot__flash {
	position: absolute; left: 50%; bottom: 14%; padding: 8px 18px; border-radius: 999px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
	background: #fff; color: var(--efit-navy); font: var(--efit-fw-ui-heavy) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter); white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: opacity 0.2s ease, transform 0.2s ease;
}
p.efit-shoot__flash.is-show { opacity: 1; transform: translate(-50%, 0); }
p.efit-shoot__flash.is-hit { background: var(--efit-yellow); }
p.efit-shoot__flash.is-miss { box-shadow: inset 5px 0 0 #ed3008, 0 10px 30px rgba(0, 0, 0, 0.35); }

/* result */
.efit-shoot__panel--result { gap: var(--efit-s2); }
.efit-shoot__score { display: flex; align-items: baseline; gap: 12px; }
.efit-shoot__score b { color: var(--efit-yellow); font: var(--efit-fw-display) clamp(3.6rem, 2rem + 6vw, 6rem)/0.9 var(--efit-ff-display); }
.efit-shoot__score span { font: var(--efit-fw-ui) var(--efit-fs-lead)/1 var(--wp--preset--font-family--inter); }
.efit-shoot__score:focus { outline: none; }
.efit-shoot__total { color: rgba(255, 255, 255, 0.88); font-size: var(--efit-fs-sm); }
.efit-shoot__total b { color: #fff; }
.efit-shoot__verdict { max-width: 40ch; color: #fff; font: var(--efit-fw-title) var(--efit-fs-h3)/1.25 var(--efit-ff-title); }
.efit-shoot__lesson { max-width: 48ch; color: rgba(255, 255, 255, 0.84); font-size: var(--efit-fs-sm); line-height: var(--efit-lh-body); }
.efit-shoot__panel--result .efit-actions { justify-content: center; padding-top: 6px; }
.efit-shoot__again { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--efit-focus); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter); }
.efit-shoot__again:hover { color: #fff; }

.efit-shoot__short { display: none; }
.efit-shoot__panel--result :is(p, .efit-shoot__verdict) { hyphens: manual; }
@media (max-width: 599px) {
	/* phone: heart rate and time on one row, the ECG under them, then the plate */
	.efit-shoot__game { padding: var(--efit-s2); }
	.efit-shoot__hud { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hr time" "ecg ecg" "plate plate"; }
	.efit-shoot__ecg { height: 36px; }
	.efit-shoot__long { display: none; }
	.efit-shoot__short { display: inline; }
}

/* ==========================================================================
   4. Partner wall: the open slot at the end of the partners' row ("Teidän logonne tähän?").
   ========================================================================== */
.efit-logowall p.efit-logowall__invite { margin: 0; }
.efit-logowall__invite a {
	display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 22px; border-radius: 12px;
	outline: 2px dashed var(--efit-focus); outline-offset: -2px; background: rgba(238, 245, 251, 0.6);
	color: var(--efit-blue-deep); text-decoration: none; font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.efit-logowall__invite a::before {
	content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: var(--efit-yellow); color: var(--efit-navy); font: var(--efit-fw-ui-heavy) 1.2rem/1 var(--wp--preset--font-family--inter);
}
.efit-logowall__invite a:hover { background: var(--efit-mist); transform: translateY(-2px); color: var(--efit-navy); }
.efit-logowall__invite a:focus-visible { outline: 3px solid var(--efit-navy); outline-offset: 3px; }

/* ==========================================================================
   5. Urheilijakortit: the season's team as people. Monogram (person photos are off site-wide, P-61), name, sport, goal,
   their own words with the source; example texts (not the athlete's words yet) wear a dashed frame and a yellow label.
   ========================================================================== */
.efit-tka.efit-tka {
	padding: var(--efit-pad-y) var(--efit-pad-x);
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(0, 119, 200, 0.45) 0%, rgba(0, 119, 200, 0) 60%),
		linear-gradient(165deg, var(--efit-navy) 0%, var(--efit-navy-dark) 100%);
}
.efit-tka.efit-tka::after {   /* the Electrofit "e" as a faint watermark, like the roster it replaces */
	content: ""; position: absolute; z-index: -1; right: -6%; top: -8%; width: clamp(280px, 46vw, 720px); aspect-ratio: 655 / 507;
	background: url("../images/logo-e.svg") center / contain no-repeat; opacity: 0.06; pointer-events: none;
}
.efit-tka__app { display: flex; flex-direction: column; gap: var(--efit-s5); }
.efit-tka__head { display: flex; flex-direction: column; gap: var(--efit-s3); max-width: 780px; }
h2.efit-tka__title { color: #fff; font: var(--efit-fw-display) var(--efit-fs-h1)/var(--efit-lh-tight) var(--efit-ff-display); }
.efit-tka__lead { color: rgba(255, 255, 255, 0.9); font-size: var(--efit-fs-lead); line-height: var(--efit-lh-lead); }
.efit-tka__head .efit-actions { padding-top: 6px; }

.efit-tka__group { display: flex; flex-direction: column; gap: var(--efit-s3); }
.efit-tka__group--yellow { --acc: var(--efit-yellow); }
.efit-tka__group--sky { --acc: var(--efit-sky); }
p.efit-tka__glabel {
	display: flex; align-items: center; gap: 12px; color: #fff;
	font: var(--efit-fw-ui-heavy) var(--efit-fs-sm)/1 var(--wp--preset--font-family--inter); letter-spacing: 0.14em; text-transform: uppercase;
}
.efit-tka__glabel::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.efit-tka__count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--acc); color: var(--efit-navy); letter-spacing: 0; }

ul.efit-tka__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--efit-s2); padding: 0; list-style: none; }
@media (min-width: 640px) { ul.efit-tka__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { ul.efit-tka__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { ul.efit-tka__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.efit-tka__card {
	position: relative; display: flex; flex-direction: column; gap: 16px; padding: var(--efit-s3); border-radius: calc(var(--efit-radius) * 0.7);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.efit-tka__card::before { content: ""; position: absolute; left: var(--efit-s3); top: 0; width: 36px; height: 4px; border-radius: 0 0 3px 3px; background: var(--acc); }
.efit-tka__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 18px 40px rgba(0, 0, 0, 0.25); }
.efit-tka__id { display: flex; align-items: center; gap: 14px; }
.efit-tka__id > div { min-width: 0; }
.efit-tka__mono {
	flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
	background: linear-gradient(135deg, var(--acc) 0%, #fff 130%); color: var(--efit-navy);
	font: var(--efit-fw-display) 1.4rem/1 var(--efit-ff-display); letter-spacing: 0.02em;
}
h3.efit-tka__name { color: #fff; font: var(--efit-fw-display) clamp(1.45rem, 1.15rem + 0.9vw, 1.9rem)/1.02 var(--efit-ff-display); }
h3.efit-tka__name span { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.82); font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter); }
.efit-tka__sport { margin-top: 6px !important; color: var(--acc); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); letter-spacing: 0.1em; text-transform: uppercase; }
.efit-tka__goal { display: flex; flex-direction: column; gap: 5px; color: #fff; font: var(--efit-fw-title) var(--efit-fs-base)/1.35 var(--efit-ff-title); hyphens: manual; }
.efit-tka__label { color: rgba(255, 255, 255, 0.68); font: var(--efit-fw-ui) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); letter-spacing: 0.1em; text-transform: uppercase; }
:is(.efit-tka__goal small, .efit-tka__words cite) { color: rgba(255, 255, 255, 0.66); font: normal var(--efit-fs-xs)/1.3 var(--wp--preset--font-family--inter); }
blockquote.efit-tka__words { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 2px 16px; border: 0; box-shadow: inset 3px 0 0 var(--acc); }
.efit-tka__words p { color: rgba(255, 255, 255, 0.94); font-size: var(--efit-fs-sm); line-height: 1.55; font-style: italic; hyphens: manual; }
.efit-tka__cta {
	margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); color: #fff; text-decoration: none;
	font: var(--efit-fw-ui) var(--efit-fs-sm)/1.2 var(--wp--preset--font-family--inter); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.efit-tka__cta::after { content: "→"; transition: transform 0.2s ease; }
.efit-tka__cta:hover { background: var(--efit-yellow); color: var(--efit-navy); box-shadow: none; }
.efit-tka__cta:hover::after { transform: translateX(3px); }
.efit-tka__cta:focus-visible { outline: 3px solid var(--efit-yellow); outline-offset: 2px; }

.efit-tka__staff { display: flex; flex-direction: column; gap: var(--efit-s3); }
.efit-tka__staff .efit-tka__glabel { --acc: #fff; }
ul.efit-tka__stafflist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--efit-s2); padding: 0; list-style: none; }
@media (min-width: 760px) { ul.efit-tka__stafflist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.efit-tka__stafflist li { display: flex; }
.efit-tka__stafflist a {
	box-sizing: border-box; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px;
	padding: 12px var(--efit-s3); border-radius: calc(var(--efit-radius) * 0.7); background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; transition: background-color 0.2s ease;
}
.efit-tka__stafflist a:hover { background: rgba(255, 255, 255, 0.12); }
.efit-tka__stafflist a:focus-visible { outline: 3px solid var(--efit-focus); outline-offset: 2px; }
.efit-tka__stafflist strong { font: var(--efit-fw-title) var(--efit-fs-base)/1.2 var(--efit-ff-title); }
.efit-tka__stafflist span { color: rgba(255, 255, 255, 0.78); font-size: var(--efit-fs-sm); }

/* ==========================================================================
   6. Mitä tukesi tekee: the amount on the left (one index slider: fine steps for small sums), what it buys on the right
   as three navy tiles; the camp-day tile draws the days as squares.
   ========================================================================== */
.efit-tks.efit-tks {
	--sp-btn-bg: var(--efit-navy); padding: var(--efit-pad-y) var(--efit-pad-x); border-radius: var(--efit-radius); color: var(--efit-navy);
	background-color: #fff; box-shadow: inset 0 0 0 1px var(--efit-mist-2);
	background-image: radial-gradient(60% 70% at 0% 100%, rgba(241, 237, 15, 0.12) 0%, rgba(241, 237, 15, 0) 60%);
}
.efit-tks__app { display: flex; flex-direction: column; gap: var(--efit-s4); }
.efit-tks__head { display: flex; flex-direction: column; gap: var(--efit-s3); max-width: 760px; }
h2.efit-tks__title, h2.efit-tkm__title { color: inherit; font: var(--efit-fw-display) var(--efit-fs-h1)/var(--efit-lh-tight) var(--efit-ff-display); }
:is(.efit-tks__lead, .efit-tkm__lead) { max-width: 62ch; font-size: var(--efit-fs-lead); line-height: var(--efit-lh-lead); }
.efit-tks__grid { display: grid; gap: var(--efit-s4); align-items: center; }
@media (min-width: 1000px) { .efit-tks__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.efit-tks__control { display: flex; flex-direction: column; gap: 14px; }
.efit-tks__label { color: var(--efit-blue-deep); font: var(--efit-fw-ui-heavy) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); letter-spacing: 0.12em; text-transform: uppercase; }
.efit-tks__amount { color: var(--efit-navy); font: var(--efit-fw-display) clamp(3.4rem, 2rem + 5vw, 6.2rem)/0.9 var(--efit-ff-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.efit-tks__range { --p: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.efit-tks__range::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--efit-blue) 0 var(--p), var(--efit-mist-2) var(--p) 100%); }
.efit-tks__range::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--efit-blue) 0 var(--p), var(--efit-mist-2) var(--p) 100%); }
.efit-tks__range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 36px; height: 36px; margin-top: -12px; border: 0; border-radius: 50%;
	background: var(--efit-yellow); box-shadow: 0 0 0 5px #fff, 0 4px 16px rgba(0, 23, 43, 0.35); transition: transform 0.15s ease;
}
.efit-tks__range::-moz-range-thumb { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--efit-yellow); box-shadow: 0 0 0 5px #fff, 0 4px 16px rgba(0, 23, 43, 0.35); }
.efit-tks__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.efit-tks__range:focus-visible { outline: 3px solid var(--efit-blue-deep); outline-offset: 4px; border-radius: 999px; }
.efit-tks__scale { display: flex; justify-content: space-between; color: rgba(0, 33, 59, 0.72); font-size: var(--efit-fs-xs); }
.efit-tks__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.efit-tks__chip {
	min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--efit-mist); box-shadow: inset 0 0 0 1px var(--efit-mist-2);
	color: var(--efit-navy); cursor: pointer; font: var(--efit-fw-ui) var(--efit-fs-sm)/1 var(--wp--preset--font-family--inter); transition: background-color 0.2s ease, color 0.2s ease;
}
.efit-tks__chip:hover { background: var(--efit-mist-2); }
.efit-tks__chip.is-on { background: var(--efit-navy); color: #fff; box-shadow: none; }
.efit-tks__chip:focus-visible { outline: 3px solid var(--efit-blue-deep); outline-offset: 2px; }

ul.efit-tks__equals { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--efit-s2); padding: 0; list-style: none; }
@media (min-width: 600px) { ul.efit-tks__equals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.efit-tks__eq {
	container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: var(--efit-s3); border-radius: calc(var(--efit-radius) * 0.7);
	background-color: var(--efit-navy); color: #fff;
	background-image: radial-gradient(90% 80% at 100% 0%, rgba(0, 119, 200, 0.55) 0%, rgba(0, 119, 200, 0) 65%);
}
.efit-tks__eq b { color: var(--efit-yellow); font: var(--efit-fw-display) clamp(2rem, 24cqi, 3.8rem)/1 var(--efit-ff-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.efit-tks__eq > span:not([class]) { color: rgba(255, 255, 255, 0.88); font-size: var(--efit-fs-sm); line-height: var(--efit-lh-snug); hyphens: manual; }
.efit-tks__dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: 6px; }
.efit-tks__dots i { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.14); transition: background-color 0.2s ease; }
.efit-tks__dots i.is-on { background: var(--efit-yellow); }
.efit-tks__dots i.is-part { background: linear-gradient(90deg, var(--efit-yellow) 0 var(--f), rgba(255, 255, 255, 0.14) var(--f) 100%); }
.efit-tks__bar { display: block; height: 8px; margin-top: auto; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.efit-tks__bar i { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; background: var(--efit-yellow); transition: width 0.3s ease; }
.efit-tks__milestone { min-height: 1.3em; color: var(--efit-navy); font: var(--efit-fw-title) var(--efit-fs-h3)/1.25 var(--efit-ff-title); hyphens: manual; }
.efit-tks__milestone.is-year { color: var(--efit-blue-deep); }
.efit-tks__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 90ch; color: rgba(0, 33, 59, 0.8); font-size: var(--efit-fs-xs); line-height: 1.5; }
.efit-tks__proto { padding: 3px 9px; border-radius: 999px; background: var(--efit-yellow); color: var(--efit-navy); font: var(--efit-fw-ui-heavy) var(--efit-fs-xs)/1.2 var(--wp--preset--font-family--inter); white-space: nowrap; }
.efit-tks__app > .efit-actions { padding-top: 0; }

/* ==========================================================================
   7. Kumppanuussovitin: questions one at a time (with JS; all visible without), the suggestion as a navy card, and the
   site's own contact form beside it, its message written as the visitor answers.
   ========================================================================== */
.efit-tkm.efit-tkm {
	padding: var(--efit-pad-y) var(--efit-pad-x); border-radius: var(--efit-radius); color: var(--efit-navy); background-color: var(--efit-mist);
	background-image: radial-gradient(80% 70% at 100% 0%, rgba(0, 119, 200, 0.14) 0%, rgba(0, 119, 200, 0) 60%);
}
.efit-tkm__app { display: flex; flex-direction: column; gap: var(--efit-s4); }
.efit-tkm__head { display: flex; flex-direction: column; gap: var(--efit-s3); max-width: 760px; }
.efit-tkm__grid { display: grid; gap: var(--efit-s3); align-items: start; }
@media (min-width: 1000px) { .efit-tkm__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.efit-tkm__quiz, .efit-tkm__formbox {
	display: flex; flex-direction: column; gap: var(--efit-s3); padding: var(--efit-s4); border-radius: calc(var(--efit-radius) * 0.8);
	background: #fff; box-shadow: inset 0 0 0 1px var(--efit-mist-2), 0 18px 40px rgba(0, 23, 43, 0.07);
}
.efit-tkm__progress { display: flex; gap: 6px; }
.efit-tkm__progress span { flex: 1; height: 6px; border-radius: 999px; background: var(--efit-mist-2); transition: background-color 0.3s ease; }
.efit-tkm__progress span.is-done { background: var(--efit-blue); }
.efit-tkm__progress span.is-now { background: var(--efit-yellow); }
fieldset.efit-tkm__q { display: flex; flex-direction: column; gap: var(--efit-s2); min-width: 0; padding: 0; border: 0; }
.efit-tkm__q legend { padding: 0; margin-bottom: var(--efit-s2); color: var(--efit-navy); font: var(--efit-fw-display) clamp(1.4rem, 1rem + 1.3vw, 2rem)/1.15 var(--efit-ff-display); }
.efit-tkm__step {
	display: inline-grid; place-items: center; min-width: 44px; height: 28px; margin-right: 8px; padding: 0 8px; border-radius: 999px; vertical-align: 0.2em;
	background: var(--efit-yellow); color: var(--efit-navy); font: var(--efit-fw-ui-heavy) var(--efit-fs-xs)/1 var(--wp--preset--font-family--inter);
}
.efit-tkm__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .efit-tkm__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.efit-tkm__opt { position: relative; display: flex; cursor: pointer; }
.efit-tkm__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.efit-tkm__opt > span {
	flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 16px; border-radius: 10px;
	background: var(--efit-mist); box-shadow: inset 0 0 0 1px var(--efit-mist-2); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.efit-tkm__opt b { color: var(--efit-navy); font: var(--efit-fw-title) var(--efit-fs-base)/1.2 var(--efit-ff-title); }
.efit-tkm__opt small { color: rgba(0, 33, 59, 0.78); font-size: var(--efit-fs-xs); line-height: 1.3; }
.efit-tkm__opt:hover > span { box-shadow: inset 0 0 0 2px var(--efit-blue); }
.efit-tkm__opt input:checked + span { background: var(--efit-navy); box-shadow: 0 10px 24px rgba(0, 23, 43, 0.2); transform: translateY(-2px); }
.efit-tkm__opt input:checked + span :is(b, small) { color: #fff; }
.efit-tkm__opt input:focus-visible + span { outline: 3px solid var(--efit-blue-deep); outline-offset: 2px; }
.efit-tkm__nav { display: none; justify-content: space-between; gap: 10px; }
.efit-tkm__quiz.is-js .efit-tkm__nav { display: flex; }
.efit-tkm__quiz.is-js .efit-tkm__q:not(.is-active) { display: none; }
:is(.efit-tkm__next, .efit-tkm__back, .efit-tkm__again) {
	min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px; cursor: pointer; font: var(--efit-fw-ui) var(--efit-fs-sm)/1 var(--wp--preset--font-family--inter);
}
.efit-tkm__next { margin-left: auto; background: var(--efit-navy); color: #fff; }
.efit-tkm__next[disabled] { opacity: 0.4; cursor: default; }
.efit-tkm__back { background: transparent; color: var(--efit-blue-deep); text-decoration: underline; text-underline-offset: 4px; }
:is(.efit-tkm__next, .efit-tkm__back):focus-visible { outline: 3px solid var(--efit-blue-deep); outline-offset: 2px; }

.efit-tkm__result {
	display: flex; flex-direction: column; gap: var(--efit-s2); padding: var(--efit-s3); border-radius: calc(var(--efit-radius) * 0.7); color: #fff;
	background-color: var(--efit-navy); background-image: radial-gradient(90% 80% at 100% 0%, rgba(0, 119, 200, 0.6) 0%, rgba(0, 119, 200, 0) 65%);
}
.efit-tkm__result[hidden] { display: none; }
.efit-tkm__result:focus { outline: none; }
.efit-tkm__result.is-new { animation: efit-tkm-in 0.5s cubic-bezier(0.22, 0.8, 0.24, 1); }
@keyframes efit-tkm-in { from { opacity: 0; transform: translateY(14px); } }
h3.efit-tkm__rtitle { color: #fff; font: var(--efit-fw-display) clamp(1.8rem, 1.2rem + 2vw, 2.8rem)/1.05 var(--efit-ff-display); }
.efit-tkm__rwhy { color: rgba(255, 255, 255, 0.9); }
ul.efit-tkm__ritems { display: grid; gap: 8px; padding: 0; list-style: none; }
.efit-tkm__ritems li { position: relative; padding-left: 28px; color: #fff; }
.efit-tkm__ritems li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--efit-yellow); font-weight: var(--efit-fw-ui-heavy); }
.efit-tkm__ralt { color: rgba(255, 255, 255, 0.84); font-size: var(--efit-fs-sm); }
.efit-tkm__ralt b { color: #fff; }
.efit-tkm__proto { color: rgba(255, 255, 255, 0.7); font-size: var(--efit-fs-xs); }
.efit-tkm__again { align-self: flex-start; padding: 0; background: transparent; color: var(--efit-yellow); text-decoration: underline; text-underline-offset: 4px; }
.efit-tkm__again:focus-visible { outline: 3px solid var(--efit-yellow); outline-offset: 2px; }
.efit-tkm__formtitle { color: var(--efit-navy); font: var(--efit-fw-display) clamp(1.4rem, 1rem + 1.3vw, 2rem)/1.15 var(--efit-ff-display); }
.efit-tkm__form textarea { min-height: 230px; hyphens: manual; transition: box-shadow 0.4s ease; }
.efit-tkm__form textarea.is-filled { box-shadow: 0 0 0 4px rgba(241, 237, 15, 0.75); }