/* Kourubotti remains the plugin owner; only geometry compatibility is scoped here. */
body.kouruset-kourubotti .content,
body.kouruset-kourubotti .content_inner,
body.kouruset-kourubotti .container,
body.kouruset-kourubotti .container_inner { min-width: 0; max-width: 100%; }
body.kouruset-kourubotti .nu { max-width: 100%; }

@media (max-width: 1000px) {
	body.kouruset-kourubotti .content,
	body.kouruset-kourubotti .content_inner,
	body.kouruset-kourubotti .container,
	body.kouruset-kourubotti .container_inner,
	body.kouruset-kourubotti form,
	body.kouruset-kourubotti fieldset { width: 100%; min-width: 0; max-width: 100%; }
	body.kouruset-kourubotti input:not([type="checkbox"]):not([type="radio"]),
	body.kouruset-kourubotti select,
	body.kouruset-kourubotti textarea { max-width: 100%; }
	body.kouruset-kourubotti .nu { display: flex; width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	body.kouruset-kourubotti .nu > li { flex: 1 1 0; min-width: 96px; }
	body.kouruset-kourubotti .nu a { white-space: normal; overflow-wrap: break-word; }
}


/* contain the plugin's legacy fixed-width flex children without taking
 * ownership of Kourubotti's calculations or interactions. */
body.kouruset-kourubotti #eimobiili,
body.kouruset-kourubotti #mobiili,
body.kouruset-kourubotti .harmaa_flex,
body.kouruset-kourubotti .flex_basic,
body.kouruset-kourubotti .flex_basic_toka,
body.kouruset-kourubotti .flex_basic_tuotteet,
body.kouruset-kourubotti .tuotewrap,
body.kouruset-kourubotti .flex_sarake,
body.kouruset-kourubotti .flex_sarake_kapea,
body.kouruset-kourubotti .flex_sarake_nowrap,
body.kouruset-kourubotti .flex_sarake_tuotteet,
body.kouruset-kourubotti .flex_sarake_tuotekuvaus,
body.kouruset-kourubotti .flex_sarake_alku,
body.kouruset-kourubotti .flex_sarake_alku2,
body.kouruset-kourubotti .flex_sarake_alku3,
body.kouruset-kourubotti .flex_sarake_alku_harmaa {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
body.kouruset-kourubotti .harmaa_flex > *,
body.kouruset-kourubotti .flex_basic > *,
body.kouruset-kourubotti .flex_basic_toka > *,
body.kouruset-kourubotti .flex_basic_tuotteet > * {
	min-width: 0;
}
body.kouruset-kourubotti table,
body.kouruset-kourubotti form,
body.kouruset-kourubotti fieldset,
body.kouruset-kourubotti input,
body.kouruset-kourubotti select,
body.kouruset-kourubotti textarea,
body.kouruset-kourubotti .alertti,
body.kouruset-kourubotti .butalertti {
	max-width: 100%;
	box-sizing: border-box;
}

/* Restore Bridge footer geometry inside all Kourubotti flow steps. */
body.kouruset-kourubotti footer,
body.kouruset-kourubotti .footer_inner,
body.kouruset-kourubotti .footer_top_holder,
body.kouruset-kourubotti .footer_top,
body.kouruset-kourubotti .footer_top .container,
body.kouruset-kourubotti .footer_top .container_inner {
	background: var(--kouruset-slate) !important;
	color: #fff !important;
}
body.kouruset-kourubotti .footer_top {
	padding: 70px 0 60px !important;
}
body.kouruset-kourubotti .footer_top .three_columns {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 50px !important;
	width: 100% !important;
}
body.kouruset-kourubotti .footer_top .three_columns > .column1,
body.kouruset-kourubotti .footer_top .three_columns > .column2,
body.kouruset-kourubotti .footer_top .three_columns > .column3 {
	float: none !important;
	width: 33.333% !important;
	min-width: 0 !important;
	background: transparent !important;
	color: #fff !important;
}
body.kouruset-kourubotti .footer_top .column_inner,
body.kouruset-kourubotti .footer_top .widget,
body.kouruset-kourubotti .footer_top .textwidget,
body.kouruset-kourubotti .footer_top p,
body.kouruset-kourubotti .footer_top h5,
body.kouruset-kourubotti .footer_top .widget_title,
body.kouruset-kourubotti .footer_top a,
body.kouruset-kourubotti .footer_top li {
	color: #fff !important;
	background: transparent !important;
}
body.kouruset-kourubotti .footer_bottom_holder,
body.kouruset-kourubotti .footer_bottom {
	background: var(--kouruset-slate) !important;
	color: #fff !important;
	text-align: center !important;
}
body.kouruset-kourubotti .footer_bottom {
	padding: 22px 0 !important;
}
body.kouruset-kourubotti .footer_bottom p {
	margin: 0 !important;
	color: #fff !important;
}

/* Front-page FAQ: preserve plugin semantics but make the desktop controls
 * readable and aligned. */
body.kouruset-kourubotti #eimobiili .rm,
body.kouruset-kourubotti #eimobiili .rmi {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	margin: 0 8px 10px 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--kouruset-red) !important;
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	vertical-align: top !important;
}
body.kouruset-kourubotti #eimobiili button.accordion {
	display: inline-block !important;
	width: calc(100% - 38px) !important;
	max-width: calc(100% - 38px) !important;
	min-height: 38px !important;
	padding: 8px 12px !important;
	border: 1px solid #9fa5ad !important;
	background: #fff !important;
	color: #111 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	text-transform: none !important;
	white-space: normal !important;
}

@media (max-width: 1000px) {
	body.kouruset-kourubotti .footer_top .three_columns {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	body.kouruset-kourubotti .footer_top .three_columns > .column1,
	body.kouruset-kourubotti .footer_top .three_columns > .column2,
	body.kouruset-kourubotti .footer_top .three_columns > .column3 {
		width: 100% !important;
	}
}

/* Kourubotti keeps full-width background/progress bands, while the
 * plugin's actual forms/calculation columns are centred inside a bounded
 * content rail. This fixes the desktop horizontal spill without touching the
 * calculator's state or event logic. */
body.kouruset-kourubotti #botam,
body.kouruset-kourubotti #eimobiili > .flex_basic,
body.kouruset-kourubotti #mobiili > .flex_basic,
body.kouruset-kourubotti .flex_basic_toka,
body.kouruset-kourubotti .harmaa_flex > .flex_basic_alku_harmaa,
body.kouruset-kourubotti .harmaa_flex > .flex_basic_tuotteet,
body.kouruset-kourubotti .harmaa_flex > .flex_basic_yhtvto_harmaa {
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.kouruset-kourubotti .harmaa_flex {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: clip;
}
body.kouruset-kourubotti .flex_basic_tuotteet {
	gap: 18px 28px;
	align-items: flex-start;
}
body.kouruset-kourubotti .flex_sarake_tuotteet,
body.kouruset-kourubotti .flex_sarake_tuotekuvaus {
	flex: 1 1 420px;
	width: auto !important;
	max-width: 100%;
}
body.kouruset-kourubotti .tuotewrap,
body.kouruset-kourubotti .tuotteet {
	width: 100% !important;
	max-width: 100% !important;
}
body.kouruset-kourubotti #erittely,
body.kouruset-kourubotti #erittely table,
body.kouruset-kourubotti #nosturi {
	width: min(500px, 100%) !important;
	max-width: 100% !important;
}
@media (max-width: 1000px) {
	body.kouruset-kourubotti #botam,
	body.kouruset-kourubotti #eimobiili > .flex_basic,
	body.kouruset-kourubotti #mobiili > .flex_basic,
	body.kouruset-kourubotti .flex_basic_toka,
	body.kouruset-kourubotti .harmaa_flex > .flex_basic_alku_harmaa,
	body.kouruset-kourubotti .harmaa_flex > .flex_basic_tuotteet,
	body.kouruset-kourubotti .harmaa_flex > .flex_basic_yhtvto_harmaa {
		width: calc(100% - 28px) !important;
	}
	body.kouruset-kourubotti .flex_sarake_tuotteet,
	body.kouruset-kourubotti .flex_sarake_tuotekuvaus,
	body.kouruset-kourubotti .flex_sarake,
	body.kouruset-kourubotti .flex_sarake_kapea {
		flex: 1 1 100%;
		width: 100% !important;
	}
}

/* the Kourubotti plugin has a global .active rule. Never let that state
 * bleed into Bridge's site navigation. The flow itself keeps its own active
 * progress styling outside header.page_header. */
body.kouruset-kourubotti header.page_header .active,
body.kouruset-kourubotti header.page_header li.active,
body.kouruset-kourubotti header.page_header li.active > a,
body.kouruset-kourubotti header.page_header li.active > a > span {
	background: transparent !important;
}
body.kouruset-kourubotti header.page_header nav.main_menu > ul > li > a,
body.kouruset-kourubotti header.page_header nav.main_menu > ul > li > a > span {
	color: var(--kouruset-ink) !important;
}
body.kouruset-kourubotti header.page_header nav.main_menu > ul > li > a:hover,
body.kouruset-kourubotti header.page_header nav.main_menu > ul > li > a:hover > span {
	color: var(--kouruset-red) !important;
}

/* Start page: keep the introductory penguin band full-width, but constrain the
 * actual Kourubotti card + FAQ to one ordinary site content rail. */
body.kouruset-kourubotti-start #eimobiili > .flex_basic {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: end !important;
	gap: 30px !important;
	min-height: 260px;
}
body.kouruset-kourubotti-start #eimobiili > .flex_basic > .flex_sarake {
	width: auto !important;
	min-width: 0 !important;
}
body.kouruset-kourubotti-start #eimobiili > .flex_basic > .flex_sarake:last-child {
	display: flex;
	justify-content: center;
	align-items: end;
}
body.kouruset-kourubotti-start #ping_etu {
	display: block;
	width: min(430px, 75%) !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
}
body.kouruset-kourubotti-start .harmaa_flex.alagappi {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	align-items: start !important;
	gap: 44px !important;
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin: 0 auto !important;
	padding: 56px 0 64px !important;
	background: #f4f4f4 !important;
	overflow: visible !important;
}
body.kouruset-kourubotti-start .harmaa_flex.alagappi > .flex_sarake {
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
}
body.kouruset-kourubotti-start #bottilaatikko {
	width: 100% !important;
	max-width: 560px !important;
	margin: -90px 0 0 !important;
	padding: 28px !important;
}
body.kouruset-kourubotti-start #bottilaatikko img {
	display: block;
	width: 100% !important;
	max-width: 470px !important;
	height: auto !important;
	margin: 0 auto 28px !important;
}
body.kouruset-kourubotti-start #kartta {
	display: block;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
}
body.kouruset-kourubotti-start .harmaa_flex.alagappi > .flex_sarake.pad {
	max-width: 560px;
	justify-self: end;
}
body.kouruset-kourubotti-start .harmaa_flex.alagappi > .flex_sarake.pad > .pad {
	padding: 0 !important;
}

/* Summary: the legacy .harmaa_flex children were free to spread across the
 * entire browser. Make the calculation/form the primary column and the crane
 * note the secondary column inside one bounded rail. */
body.kouruset-kourubotti-summary > .wrapper .content .flex_basic:first-of-type,
body.kouruset-kourubotti-summary .content_inner > .flex_basic:first-of-type,
body.kouruset-kourubotti-summary .flex_basic:has(#otsikko_alku) {
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.kouruset-kourubotti-summary .harmaa_flex {
	display: grid !important;
	grid-template-columns: minmax(0, 700px) minmax(260px, 360px) !important;
	grid-template-areas:
		"main crane"
		"form crane" !important;
	justify-content: center !important;
	align-items: start !important;
	gap: 28px 36px !important;
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin: 0 auto !important;
	padding: 34px 0 !important;
	overflow: visible !important;
}
body.kouruset-kourubotti-summary .harmaa_flex > .flex_basic_yhtvto_harmaa {
	grid-area: main;
	display: block !important;
	width: 100% !important;
	max-width: 700px !important;
	margin: 0 !important;
}
body.kouruset-kourubotti-summary .harmaa_flex > #nosturi {
	grid-area: crane;
	width: 100% !important;
	max-width: 360px !important;
	margin: 0 !important;
}
body.kouruset-kourubotti-summary .harmaa_flex > #tilauslomake {
	grid-area: form;
	display: block !important;
	width: 100% !important;
	max-width: 700px !important;
	margin: 0 !important;
}
body.kouruset-kourubotti-summary #yhteenveto-form,
body.kouruset-kourubotti-summary #erittely,
body.kouruset-kourubotti-summary #erittely table,
body.kouruset-kourubotti-summary #hinta,
body.kouruset-kourubotti-summary #hinta table {
	width: 100% !important;
	max-width: 100% !important;
}
body.kouruset-kourubotti-summary #loppunappi {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	width: min(700px, calc(100% - 40px)) !important;
	max-width: 700px !important;
	margin: 20px auto !important;
	padding: 12px !important;
	position: relative;
	z-index: 2;
}
body.kouruset-kourubotti-summary #loppunappi button,
body.kouruset-kourubotti-summary #tilaan,
body.kouruset-kourubotti-calc #tulosta,
body.kouruset-kourubotti button.seuraava {
	min-height: 40px;
	padding: 9px 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--kouruset-red) !important;
	color: #fff !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}
body.kouruset-kourubotti-summary #loppunappi button:hover,
body.kouruset-kourubotti-summary #tilaan:not(:disabled):hover,
body.kouruset-kourubotti-calc #tulosta:hover,
body.kouruset-kourubotti button.seuraava:not(:disabled):hover {
	background: var(--kouruset-red-dark) !important;
	color: #fff !important;
}
body.kouruset-kourubotti-summary #tilaan:disabled,
body.kouruset-kourubotti button.seuraava:disabled,
body.kouruset-kourubotti-summary #loppunappi button:disabled {
	background: #9da2aa !important;
	color: #fff !important;
	cursor: not-allowed !important;
	opacity: .72;
}

@media (max-width: 1000px) {
	body.kouruset-kourubotti-start #eimobiili > .flex_basic,
	body.kouruset-kourubotti-start .harmaa_flex.alagappi,
	body.kouruset-kourubotti-summary .harmaa_flex {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: none !important;
		width: calc(100% - 28px) !important;
		gap: 24px !important;
	}
	body.kouruset-kourubotti-start #bottilaatikko {
		margin-top: -40px !important;
	}
	body.kouruset-kourubotti-summary .harmaa_flex > .flex_basic_yhtvto_harmaa,
	body.kouruset-kourubotti-summary .harmaa_flex > #nosturi,
	body.kouruset-kourubotti-summary .harmaa_flex > #tilauslomake {
		grid-area: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* customer-reference wrappers were exactly viewport-wide on desktop. */
body.kouruset-kourubotti-start .kourubotti-asiakaskokemukset {
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
}
body.kouruset-kourubotti-start .kourubotti-asiakaskokemukset > .asiakaskok,
body.kouruset-kourubotti-start .kourubotti-asiakaskokemukset .asiakaskok {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* One explicit summary form-field contract. */
body.kouruset-kourubotti-summary #tilaaja_yritys,
body.kouruset-kourubotti-summary #tilaaja_y_tunnus,
body.kouruset-kourubotti-summary #tilaaja_nimi,
body.kouruset-kourubotti-summary #tilaaja_laskutus,
body.kouruset-kourubotti-summary #tilaaja_posti,
body.kouruset-kourubotti-summary #tilaaja_puhno,
body.kouruset-kourubotti-summary #tilaaja_sapo,
body.kouruset-kourubotti-summary textarea {
	box-sizing: border-box !important;
	min-height: 38px !important;
	padding: 8px 10px !important;
	border: 1px solid #9fa5ad !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #111 !important;
	box-shadow: none !important;
}
body.kouruset-kourubotti-summary #tilaaja_nimi:focus,
body.kouruset-kourubotti-summary #tilaaja_laskutus:focus,
body.kouruset-kourubotti-summary #tilaaja_posti:focus,
body.kouruset-kourubotti-summary #tilaaja_puhno:focus,
body.kouruset-kourubotti-summary #tilaaja_sapo:focus,
body.kouruset-kourubotti-summary #tilaaja_yritys:focus,
body.kouruset-kourubotti-summary #tilaaja_y_tunnus:focus,
body.kouruset-kourubotti-summary textarea:focus {
	border-color: var(--kouruset-red) !important;
	outline: 2px solid rgba(215,25,32,.16) !important;
	outline-offset: 0 !important;
}
@media (max-width: 1000px) {
	body.kouruset-kourubotti-start .kourubotti-asiakaskokemukset { width: calc(100% - 28px) !important; }
}


/* stable gutter for Kourubotti start FAQ icon + question controls. */
body.kouruset-kourubotti-start #eimobiili .rm,
body.kouruset-kourubotti-start #eimobiili .rmi,
body.kouruset-kourubotti-start #mobiili .rm,
body.kouruset-kourubotti-start #mobiili .rmi {
	float: left !important;
	position: relative !important;
	z-index: 2 !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	margin: 10px -34px 0 10px !important;
	box-sizing: border-box !important;
}
body.kouruset-kourubotti-start #eimobiili button.accordion,
body.kouruset-kourubotti-start #mobiili button.accordion {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px !important;
	margin: 8px 0 0 !important;
	padding: 10px 14px 10px 46px !important;
	box-sizing: border-box !important;
	line-height: 1.3 !important;
	vertical-align: top !important;
}
body.kouruset-kourubotti-start #eimobiili button.accordion + .panel,
body.kouruset-kourubotti-start #mobiili button.accordion + .panel {
	clear: both !important;
	margin: 0 0 10px !important;
	box-sizing: border-box !important;
}

/* readable Kourubotti phase rail on phones. Four long labels do not fit
 * meaningfully in ~402px; make the stepper an intentional snap-scroller rather
 * than shrinking every phase to character-width text. */
@media (max-width: 700px) {
	body.kouruset-kourubotti .nu {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 2px !important;
		margin: 0 !important;
		padding: 0 14px !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 14px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.kouruset-kourubotti .nu::-webkit-scrollbar { display: none; }
	body.kouruset-kourubotti .nu > li {
		flex: 0 0 138px !important;
		width: 138px !important;
		min-width: 138px !important;
		max-width: 138px !important;
		margin: 0 !important;
		scroll-snap-align: start;
		box-sizing: border-box !important;
	}
	body.kouruset-kourubotti .nu > li > a,
	body.kouruset-kourubotti .nu a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 7px 10px !important;
		box-sizing: border-box !important;
		font-size: 10.5px !important;
		line-height: 1.15 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}
}

/* Kourubotti plugin CSS must never resize or pad the shared mobile utility
 * widgets. This scoped guard fixes the overlap reported only on bot pages. */
@media (max-width: 1000px) {
	body.kouruset-kourubotti header.page_header .header_top .header-widget,
	body.kouruset-kourubotti header.page_header .header_top .textwidget,
	body.kouruset-kourubotti header.page_header .header_top p,
	body.kouruset-kourubotti header.page_header .header_top a,
	body.kouruset-kourubotti header.page_header .header_top span {
		max-width: 100% !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 1.2 !important;
	}
}

/* customer-experience heading must not visually collide with the block
 * above it on the Kourubotti start page. */
body.kouruset-kourubotti-start .kourubotti-asiakaskokemukset,
body.kouruset-kourubotti-start .start-stories,
body.kouruset-kourubotti-start .stories,
body.kouruset-kourubotti-start .asiakaskok {
	margin-top: 38px !important;
}