/*
 * Tuottolaskuri Theme – presentation styles.
 * Design tokens come from theme.json; this file maps them to short aliases
 * and styles the theme's own components (prefixed .tl-).
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
	--tl-bg: var(--wp--preset--color--background, #f5f8fc);
	--tl-surface: var(--wp--preset--color--surface, #fff);
	--tl-navy: var(--wp--preset--color--navy, #17365d);
	--tl-primary: var(--wp--preset--color--primary, #1769dd);
	--tl-primary-dark: var(--wp--preset--color--primary-dark, #0f55b8);
	--tl-primary-soft: var(--wp--preset--color--primary-soft, #eaf2fd);
	--tl-positive: var(--wp--preset--color--positive, #20a995);
	--tl-positive-text: var(--wp--preset--color--positive-text, #0e7c6b);
	--tl-muted: var(--wp--preset--color--secondary, #64748b);
	--tl-muted-strong: #52627a;
	--tl-text: #2a4365;
	--tl-border: var(--wp--preset--color--border, #dde6f1);
	--tl-border-hover: #b9cff0;
	--tl-radius-sm: var(--wp--custom--radius--sm, 8px);
	--tl-radius-md: var(--wp--custom--radius--md, 12px);
	--tl-radius-lg: var(--wp--custom--radius--lg, 16px);
	--tl-shadow-card: var(--wp--custom--shadow--card, 0 4px 16px rgba(23, 54, 93, .05));
	--tl-shadow-raised: var(--wp--custom--shadow--raised, 0 16px 40px rgba(23, 54, 93, .1));
	--tl-control-h: var(--wp--custom--control-height, 48px);
	--tl-ease: cubic-bezier(.2, .7, .3, 1);

	--tl-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--tl-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	--tl-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--tl-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Template parts sit flush; spacing is handled per component. */
.wp-site-blocks > * + * { margin-block-start: 0; }

img, svg { max-width: 100%; }

:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--tl-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Buttons: consistent height, arrow modifier, outline style. */
.wp-element-button,
.wp-block-button__link {
	min-height: var(--tl-control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	box-shadow: 0 1px 2px rgba(23, 54, 93, .08);
	transition: background-color .15s var(--tl-ease), border-color .15s var(--tl-ease), color .15s var(--tl-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: var(--tl-surface);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--tl-primary-dark);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--tl-border);
	padding: .8rem 1.5rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--tl-border-hover);
	background-color: #f7faff;
	color: var(--tl-primary-dark);
}

.tl-arrow .wp-block-button__link::after,
.tl-more-link a::after,
.tl-calc-card__cta::after {
	content: "";
	flex: none;
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--tl-i-arrow) center / contain no-repeat;
	mask: var(--tl-i-arrow) center / contain no-repeat;
	transition: transform .15s var(--tl-ease);
}

.tl-arrow .wp-block-button__link:hover::after,
.tl-more-link a:hover::after { transform: translateX(2px); }

.tl-more-link {
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
}

.tl-more-link a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding-block: .35rem;
}

.tl-more-link a:hover { text-decoration: none; }

/* Check lists */
ul.tl-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--tl-text);
	font-size: .9375rem;
}

ul.tl-checklist li {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

ul.tl-checklist li::before {
	content: "";
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	background-color: var(--tl-primary);
	-webkit-mask: var(--tl-i-check) center / contain no-repeat;
	mask: var(--tl-i-check) center / contain no-repeat;
}

ul.tl-checklist--inline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
}

/* Layout grids: children are placed by the grid, not by block-gap margins. */
.tl-grid,
.tl-hero__inner,
.tl-benefits,
.tl-about,
.tl-post-grid {
	display: grid;
}

.tl-grid > *,
.tl-hero__inner > *,
.tl-benefits > *,
.tl-about > *,
.tl-post-grid > *,
.tl-section__head > *,
.tl-header__inner > *,
.tl-footer__inner > * {
	margin-block: 0 !important;
}

/* Shared icon tile */
.tl-icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--tl-radius-md);
	background: var(--tl-primary-soft);
	color: var(--tl-primary);
}

.tl-icon svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ */
/* 3. Header & navigation                                              */
/* ------------------------------------------------------------------ */
.tl-header {
	background: var(--tl-surface);
	border-bottom: 1px solid #e8eef6;
	position: relative;
	z-index: 20;
}

.tl-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
}

.tl-logo { font-weight: 800; letter-spacing: -.02em; }
.tl-logo a { color: var(--tl-navy); }

.tl-header .tl-logo {
	margin: 0;
	flex: none;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem);
	line-height: 1;
}

.tl-header .tl-logo a { text-decoration: none; }

/*
 * Site Logo (Media Library). Since 0.1.11.3 the size comes from the Site Logo block's
 * width setting (rendered as the image's width/height attributes); height: auto keeps the
 * proportions and the attributes reserve the space (no layout shift). Caps: 240 px wide on
 * desktop, 160 px on mobile, 56 px high. If the height cap applies, object-fit keeps the
 * image undistorted inside its box.
 */
.tl-header .tl-site-logo {
	margin: 0;
	flex: none;
	line-height: 0;
}

.tl-header .tl-site-logo a { display: inline-block; }

.tl-header .tl-site-logo img {
	display: block;
	height: auto;
	max-width: min(240px, 55vw);
	max-height: 56px;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 599px) {
	.tl-header .tl-site-logo img { max-width: min(160px, 45vw); }
}

/* Site Editor: hide the text fallback when a logo is set (the front end removes it in PHP). */
.tl-header__inner:has(.wp-block-site-logo img) .tl-brand-fallback { display: none; }

.tl-header .tl-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.tl-nav .wp-block-navigation__container { gap: clamp(1rem, 2.6vw, 2.25rem); }

.tl-nav .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	padding-block: .6rem;
	color: var(--tl-navy);
	text-decoration: none;
}

.tl-nav .wp-block-navigation-item__content:hover {
	color: var(--tl-primary);
	text-decoration: none;
}

.tl-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--tl-primary);
	font-weight: 600;
}

.tl-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--tl-primary);
}

.tl-header__cta { flex: none; margin: 0; }

.tl-header__cta .wp-block-button__link {
	min-height: 44px;
	padding: .6rem 1.15rem;
	font-size: .9375rem;
}

/* Mobile overlay menu (native navigation block). */
.tl-nav .wp-block-navigation__responsive-container-open,
.tl-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
	color: var(--tl-navy);
	border-radius: var(--tl-radius-sm);
}

.tl-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--tl-surface);
	padding: 1rem clamp(1rem, 4vw, 2rem) 2rem;
}

.tl-nav .is-menu-open .wp-block-navigation__container {
	gap: .25rem;
	font-size: 1.25rem;
	padding-top: 1.5rem;
}

.tl-nav .is-menu-open .wp-block-navigation-item__content { padding-block: .65rem; }

@media (max-width: 959px) {
	/* 0.1.12.0: WordPress prints `body .is-layout-flex { display: flex; }` (specificity 0,1,1) in its global styles and
	   the Buttons block always has is-layout-flex, so the former `.tl-header__cta` rule (0,1,0) never applied.
	   Two classes of the header CTA block itself (0,2,0) win without touching any other Buttons block. */
	.wp-block-buttons.tl-header__cta { display: none; }
	.tl-header .tl-nav { justify-content: flex-end; }
}

/* ------------------------------------------------------------------ */
/* 4. Hero                                                             */
/* ------------------------------------------------------------------ */
.wp-block-group.tl-hero {
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 72%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .78) 0%, rgba(245, 248, 252, .6) 36%, rgba(245, 248, 252, .1) 64%, rgba(245, 248, 252, 0) 80%);
	--tl-hero-position: center 72%;
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.25rem, 4.5vw, 3.25rem);
	background-color: #e8f0fa;
}

/* Readability overlay: above the background image, below the content. */
.wp-block-group.tl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--tl-hero-overlay);
	pointer-events: none;
}

/*
 * Editable background: a native Image block (first child of the hero) stretched
 * behind the content. !important is limited to sizing so that block toolbar
 * settings (width, aspect ratio, alignment) cannot break the full-bleed layout.
 */
.wp-block-group.tl-hero > .tl-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
}

.wp-block-group.tl-hero > .tl-hero__bg img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: var(--tl-hero-position);
	border-radius: 0;
}

.wp-block-group.tl-hero > .tl-hero__bg figcaption { display: none; }

/* Site Editor only: the image resize handle wrapper must also fill the hero. */
.wp-block-group.tl-hero > .tl-hero__bg > .components-resizable-box__container {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}

/* The background image must not push the content down via block-gap margins. */
.wp-block-group.tl-hero > .tl-hero__bg + * { margin-block-start: 0; }

.tl-hero__inner {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.tl-hero__content > * { margin-block: 0; }
.tl-hero__content > * + * { margin-block-start: 1.25rem; }

.tl-hero .tl-hero__title {
	font-size: clamp(2rem, 1.2rem + 2.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -.028em;
	max-width: 15.5em;
	text-wrap: balance;
}

.tl-hero .tl-hero__lead {
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	line-height: 1.55;
	color: var(--tl-text);
	max-width: 34em;
}

.tl-hero__content > .tl-hero__actions {
	margin-block-start: 1.75rem;
	gap: .875rem;
}

.tl-hero__content > .tl-checklist { margin-block-start: 1.5rem; }

/* Dashboard preview (static illustration) */
.tl-dash {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(150px, .5fr);
	gap: .75rem;
	padding: .9rem;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(221, 230, 241, .9);
	border-radius: 20px;
	box-shadow: var(--tl-shadow-raised);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.tl-dash p,
.tl-dash ul { margin: 0; }

.tl-dash__chart {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: 14px;
	padding: 1rem 1.15rem .85rem;
	min-width: 0;
}

.tl-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}

.tl-dash__title { font-weight: 700; font-size: .9375rem; }

.tl-dash__legend {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 1rem;
	font-size: .75rem;
	color: var(--tl-muted);
}

.tl-dash__legend-item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.tl-dash__legend-item::before {
	content: "";
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--tl-primary);
}

.tl-dash__legend-item.is-invested::before { background: #a9c4ea; }

.tl-chart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: clamp(150px, 16vw, 190px) auto;
	column-gap: .6rem;
	row-gap: .5rem;
	font-size: .6875rem;
	color: var(--tl-muted);
	font-variant-numeric: tabular-nums;
}

.tl-chart ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tl-chart__y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: right;
	line-height: 1;
	margin-block: -.35em !important;
	white-space: nowrap;
}

.tl-chart__plot { position: relative; }

.tl-chart__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tl-chart__grid path {
	fill: none;
	stroke: #e9eff7;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.tl-chart__line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.tl-chart__line--value { stroke: var(--tl-primary); stroke-width: 2.75; }
.tl-chart__line--invested { stroke: #a9c4ea; stroke-width: 2.25; }

.tl-chart__point {
	position: absolute;
	right: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tl-primary);
	border: 2px solid #fff;
	box-shadow: 0 0 0 4px rgba(23, 105, 221, .18);
	transform: translate(50%, -50%);
}

.tl-chart__tip {
	position: absolute;
	right: 16px;
	transform: translateY(-50%);
	padding: .3rem .55rem;
	border-radius: 7px;
	background: var(--tl-primary);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(23, 105, 221, .3);
}

.tl-chart__x {
	grid-column: 2;
	display: flex;
	justify-content: space-between;
	line-height: 1;
}

.tl-dash__kpis {
	display: grid;
	gap: .75rem;
	align-content: stretch;
}

.tl-kpi {
	position: relative;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: 14px;
	padding: .85rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.tl-kpi__label {
	font-size: .8125rem;
	color: var(--tl-muted);
	padding-right: 2.5rem;
}

.tl-kpi__value {
	font-size: clamp(1.125rem, .95rem + .55vw, 1.375rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tl-kpi__value.is-positive { color: var(--tl-positive-text); }

.tl-kpi__delta,
.tl-example__result-delta {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--tl-positive-text);
}

.tl-kpi__delta::before,
.tl-example__result-delta::before {
	content: "";
	width: .9em;
	height: .9em;
	background-color: currentColor;
	-webkit-mask: var(--tl-i-up) center / contain no-repeat;
	mask: var(--tl-i-up) center / contain no-repeat;
}

.tl-kpi__icon {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--tl-primary-soft);
	color: var(--tl-primary);
}

.tl-kpi__icon svg { width: 19px; height: 19px; }

.tl-dash__note {
	grid-column: 1 / -1;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--tl-muted-strong);
	padding-inline: .25rem;
}

@media (max-width: 1023px) {
	.tl-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.tl-hero .tl-hero__title { max-width: 20em; }
	.wp-block-group.tl-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 80%, var(--tl-bg) 100%),
			linear-gradient(180deg, rgba(245, 248, 252, .9) 0%, rgba(245, 248, 252, .72) 45%, rgba(245, 248, 252, .55) 100%);
	}
}

@media (max-width: 639px) {
	.tl-dash { grid-template-columns: minmax(0, 1fr); padding: .65rem; }
	.tl-dash__chart { padding: .85rem .85rem .75rem; }
	.tl-dash__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.tl-kpi { padding: .7rem .75rem; }
	.tl-kpi__icon { display: none; }
	.tl-kpi__label { padding-right: 0; font-size: .75rem; }
	.tl-hero__actions .wp-block-button { flex: 1 1 100%; }
	.tl-hero__actions .wp-block-button__link { width: 100%; }
}

@media (max-width: 459px) {
	.tl-dash__kpis { grid-template-columns: minmax(0, 1fr); }
	.tl-kpi {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		column-gap: .75rem;
	}
	.tl-kpi__delta { flex-basis: 100%; justify-content: flex-end; }
}

/* ------------------------------------------------------------------ */
/* 5. Front page sections                                              */
/* ------------------------------------------------------------------ */
.tl-front > .tl-section,
.tl-front > .tl-benefits { margin-block-start: clamp(2rem, 4vw, 2.75rem); }

.tl-front > .tl-hero + .tl-section { margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); }

.tl-section > * { margin-block: 0; }

.tl-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1.5rem;
	margin-bottom: 1rem !important;
}

.tl-section .tl-section__title {
	font-size: clamp(1.375rem, 1.15rem + .7vw, 1.625rem);
	letter-spacing: -.02em;
}

/* Cards: shared surface */
.tl-cat-card,
.tl-calc-card {
	position: relative;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	box-shadow: var(--tl-shadow-card);
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease), transform .15s var(--tl-ease);
}

.tl-cat-card:hover,
.tl-calc-card:hover {
	border-color: var(--tl-border-hover);
	box-shadow: 0 2px 4px rgba(23, 54, 93, .05), 0 10px 24px rgba(23, 105, 221, .09);
	transform: translateY(-1px);
}

/* Whole card is clickable through the heading link (one link per card). */
.tl-cat-card h3 a,
.tl-calc-card h3 a {
	color: var(--tl-navy);
	text-decoration: none;
}

.tl-cat-card h3 a::after,
.tl-calc-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

.tl-cat-card:hover h3 a,
.tl-calc-card:hover h3 a { color: var(--tl-primary-dark); }

@supports selector(:has(a)) {
	.tl-cat-card h3 a:focus-visible,
	.tl-calc-card h3 a:focus-visible { outline: none; }
	.tl-cat-card:has(a:focus-visible),
	.tl-calc-card:has(a:focus-visible) {
		outline: 3px solid var(--tl-primary);
		outline-offset: 2px;
	}
}

/* Category cards */
.tl-grid--categories {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.tl-cat-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 20px;
	grid-template-areas: "icon title chev" "icon desc chev";
	align-items: center;
	column-gap: .9rem;
	row-gap: .15rem;
	padding: 1rem 1rem 1rem 1.05rem;
}

.tl-cat-card > * { margin: 0 !important; }
.tl-cat-card > :first-child { grid-area: icon; }

.tl-cat-card::after {
	content: "";
	grid-area: chev;
	width: 20px;
	height: 20px;
	background-color: var(--tl-muted);
	-webkit-mask: var(--tl-i-chevron) center / contain no-repeat;
	mask: var(--tl-i-chevron) center / contain no-repeat;
	transition: transform .15s var(--tl-ease), background-color .15s var(--tl-ease);
}

.tl-cat-card:hover::after { transform: translateX(2px); background-color: var(--tl-primary); }

.tl-cat-card .tl-cat-card__title {
	grid-area: title;
	align-self: end;
	font-size: 1rem;
	letter-spacing: -.01em;
}

.tl-cat-card .tl-cat-card__desc {
	grid-area: desc;
	align-self: start;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--tl-muted);
}

/* Popular calculator cards */
.tl-grid--calculators {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.tl-calc-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "icon title" "icon desc" "cta cta";
	column-gap: .9rem;
	row-gap: .3rem;
	padding: 1rem 1rem 1rem;
}

.tl-calc-card > * { margin: 0 !important; }
.tl-calc-card > :first-child { grid-area: icon; align-self: start; }

.tl-calc-card .tl-calc-card__title {
	grid-area: title;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: -.01em;
	padding-top: .1rem;
}

.tl-calc-card .tl-calc-card__desc {
	grid-area: desc;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--tl-muted);
}

.tl-calc-card .tl-calc-card__cta {
	grid-area: cta;
	margin-top: .9rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 40px;
	border-radius: var(--tl-radius-sm);
	background: var(--tl-primary-soft);
	color: var(--tl-primary-dark);
	font-size: .9375rem;
	font-weight: 600;
	transition: background-color .15s var(--tl-ease);
}

.tl-calc-card:hover .tl-calc-card__cta { background: #dbe8fb; }

/* Benefits strip */
.tl-benefits {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: #ecf2fa;
	border: 1px solid #e1e9f4;
	border-radius: 14px;
	padding: 1.15rem 0;
}

.tl-benefit {
	display: grid;
	grid-template-columns: auto minmax(0, max-content);
	grid-template-areas: "icon title" "icon desc";
	justify-content: center;
	align-items: center;
	column-gap: 1.1rem;
	padding: .35rem 1.5rem;
}

.tl-benefit + .tl-benefit { border-left: 1px solid #d3deec; }
.tl-benefit > * { margin: 0 !important; }
.tl-benefit > :first-child { grid-area: icon; }

.tl-benefit__icon { display: inline-grid; color: var(--tl-primary); }
.tl-benefit__icon svg { width: 34px; height: 34px; }

.tl-benefit .tl-benefit__title { grid-area: title; font-weight: 700; align-self: end; }
.tl-benefit .tl-benefit__desc { grid-area: desc; font-size: .875rem; color: var(--tl-muted-strong); align-self: start; }

/* About + example calculator */
.tl-about {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.tl-about__text > * { margin-block: 0; }
.tl-about__text > * + * { margin-block-start: .9rem; }
.tl-about__text > .tl-checklist { margin-block-start: 1.25rem; }

.tl-about .tl-about__title {
	font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.125rem);
	letter-spacing: -.025em;
}

.tl-about__text p {
	font-size: 1.0625rem;
	color: var(--tl-text);
	max-width: 38em;
}

/* Example calculator (static preview) */
.tl-example {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	box-shadow: var(--tl-shadow-card);
	padding: 1.2rem 1.35rem 1.1rem;
}

.tl-example p,
.tl-example dl,
.tl-example dd,
.tl-example h2 { margin: 0; }

.tl-example__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
}

.tl-example .tl-example__title {
	font-size: 1.125rem;
	letter-spacing: -.01em;
}

.tl-example__context { font-size: .8125rem; color: var(--tl-muted); }

.tl-example__notice {
	display: inline-block;
	margin: .45rem 0 .9rem !important;
	padding: .15rem .65rem;
	border: 1px dashed #b8c8dd;
	border-radius: 999px;
	background: #f4f7fb;
	color: var(--tl-muted-strong);
	font-size: .75rem;
	font-weight: 600;
}

.tl-example__body {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
}

.tl-example__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .7rem .9rem;
	align-content: start;
}

.tl-example__field dt {
	font-size: .8125rem;
	color: var(--tl-muted);
	margin-bottom: .25rem;
}

.tl-example__field dd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	padding: .45rem .75rem;
	border-radius: var(--tl-radius-sm);
	background: #f3f6fa;
	border: 1px solid #e4eaf2;
	font-weight: 600;
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	cursor: default;
}

.tl-example__unit { color: var(--tl-muted); font-weight: 500; font-size: .8125rem; }

.tl-example__result {
	position: relative;
	padding: 1rem 1.1rem;
	border-radius: var(--tl-radius-md);
	background: linear-gradient(160deg, #eff5fe 0%, #e3edfb 100%);
	overflow: hidden;
}

.tl-example__result-label { font-size: .875rem; font-weight: 700; color: var(--tl-primary-dark); }

.tl-example__result-value {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tl-example__summary {
	position: relative;
	z-index: 1;
	margin-top: .75rem !important;
	padding-top: .6rem;
	border-top: 1px solid #cfdcf0;
	display: grid;
	gap: .2rem;
	font-size: .8125rem;
}

.tl-example__summary div { display: flex; justify-content: space-between; gap: .5rem; }
.tl-example__summary dt { color: var(--tl-muted-strong); }
.tl-example__summary dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tl-example__bars {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 46px;
	height: 34px;
	fill: #b6cdf0;
}

.tl-example__footnote {
	margin-top: .85rem !important;
	font-size: .75rem;
	color: var(--tl-muted);
}

/* Section responsiveness */
@media (max-width: 1099px) {
	.tl-grid--calculators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.tl-grid--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-about { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 781px) {
	.tl-benefits { grid-template-columns: minmax(0, 1fr); padding: .5rem 1.25rem; }
	.tl-benefit { justify-content: start; padding: .9rem 0; }
	.tl-benefit + .tl-benefit { border-left: 0; border-top: 1px solid #d3deec; }
}

@media (max-width: 639px) {
	.tl-grid--categories,
	.tl-grid--calculators { grid-template-columns: minmax(0, 1fr); }
	.tl-example { padding: 1rem; }
	.tl-example__body { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* 6. Footer                                                           */
/* ------------------------------------------------------------------ */
.wp-site-blocks > .tl-site-footer { margin-block-start: clamp(2.5rem, 5vw, 4rem); }

.tl-footer {
	background: #edf2f9;
	border-top: 1px solid #e1e9f4;
	padding-block: 1.25rem 1.5rem;
	font-size: .875rem;
}

.tl-footer > * { margin-block: 0 !important; }

.tl-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 2rem;
}

.tl-footer .tl-logo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
}

.tl-footer .tl-logo a { text-decoration: none; }

.tl-footer .wp-block-navigation { font-size: .8125rem; font-weight: 500; }
.tl-footer .wp-block-navigation__container { gap: .25rem 1.5rem; }

.tl-footer .wp-block-navigation-item__content {
	color: var(--tl-muted-strong);
	padding-block: .45rem;
	text-decoration: none;
}

.tl-footer .wp-block-navigation-item__content:hover { color: var(--tl-primary); text-decoration: none; }
.tl-footer .current-menu-item > .wp-block-navigation-item__content { color: var(--tl-navy); }

.tl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: 1rem !important;
	padding-top: 1rem;
	border-top: 1px solid #dde6f1;
	color: var(--tl-muted-strong);
	font-size: .8125rem;
}

.tl-footer__bottom > * { margin: 0 !important; }
.tl-footer__disclaimer { max-width: 52em; }

@media (max-width: 781px) {
	.tl-footer__inner { flex-direction: column; align-items: flex-start; }
	.tl-footer .tl-footer__legal { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ */
/* 7. Content pages, calculator & category templates                   */
/* ------------------------------------------------------------------ */
.tl-page { padding-block-start: clamp(2rem, 5vw, 3.5rem); }

.tl-page-header { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.tl-page-header > * { margin-block: 0; }
.tl-page-header > * + * { margin-block-start: .75rem; }

.tl-page-header .tl-page-header__title {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
	letter-spacing: -.028em;
	text-wrap: balance;
}

.tl-page-content { color: var(--tl-text); font-size: 1.0625rem; }
.tl-page-content > h2 { margin-block-start: 2.25rem; }
.tl-page-content > h3 { margin-block-start: 1.75rem; }

.tl-page-content a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.tl-page-content img { border-radius: var(--tl-radius-md); }

.tl-lead {
	font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
	line-height: 1.55;
	color: var(--tl-text);
}

.tl-notice {
	background: var(--tl-primary-soft);
	border: 1px solid #cfe0f7;
	border-left: 4px solid var(--tl-primary);
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

.tl-notice > * { margin: 0; }

.tl-related {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	padding: 1.25rem 1.5rem 1rem;
}

.tl-related > * { margin-block: 0; }
.tl-related > * + * { margin-block-start: .75rem; }
.tl-related .tl-related__title { font-size: 1.25rem; }

ul.tl-related__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .25rem 1.5rem;
}

ul.tl-related__list a { display: inline-block; padding-block: .35rem; font-weight: 600; }

.tl-page--category .wp-block-post-content + .tl-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ------------------------------------------------------------------ */
/* 8. Blog, search, archive, 404                                       */
/* ------------------------------------------------------------------ */
.tl-post-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1.25rem;
	list-style: none;
	padding: 0;
}

.tl-post-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	box-shadow: var(--tl-shadow-card);
	overflow: hidden;
}

.tl-post-card > * { margin: 0 !important; padding-inline: 1.15rem; }
.tl-post-card > .tl-post-card__image { padding: 0; }
.tl-post-card > .tl-post-card__image img { border-radius: 0; }
.tl-post-card > .tl-post-card__date { padding-top: 1rem; }
.tl-post-card > :first-child.tl-post-card__date { padding-top: 1.15rem; }
.tl-post-card .tl-post-card__title { font-size: 1.1875rem; margin-top: .3rem !important; }
.tl-post-card .tl-post-card__title a { color: var(--tl-navy); }
.tl-post-card .tl-post-card__excerpt { color: var(--tl-muted); font-size: .9375rem; padding-bottom: 1.15rem; margin-top: .5rem !important; }
.tl-post-card .wp-block-post-excerpt__excerpt { margin: 0; }

.tl-pagination { margin-top: 2rem !important; gap: .35rem; }

.tl-pagination a,
.tl-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 .75rem;
	border-radius: var(--tl-radius-sm);
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	text-decoration: none;
}

.tl-pagination .page-numbers.current { background: var(--tl-primary); border-color: var(--tl-primary); color: #fff; }

.tl-empty { color: var(--tl-muted); }

.tl-search { max-width: 560px; }

.tl-search .wp-block-search__input {
	min-height: var(--tl-control-h);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding-inline: 1rem;
	background: var(--tl-surface);
	color: var(--tl-navy);
	font-size: 1rem;
}

.tl-search .wp-block-search__inside-wrapper { gap: .5rem; }

.tl-article__date { margin: 0; }
.tl-article__image img { border-radius: var(--tl-radius-lg); }
.tl-article__terms { margin-top: 2rem; font-size: .875rem; color: var(--tl-muted); }

.tl-post-nav {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--tl-border);
	font-weight: 600;
}

.tl-404 { text-align: center; padding-block: clamp(2rem, 6vw, 4rem); }
.tl-404 > * { margin-inline: auto; }
.tl-404 .tl-404__actions { justify-content: center; margin-top: 1.5rem; }
.tl-404 .tl-search { margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* 9. Calculator directory (Laskurit page, v0.1.2)                     */
/* ------------------------------------------------------------------ */
.tl-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.tl-directory__content > .tl-dir-hero { margin-block-start: 0; }
.tl-directory__content > .tl-dir-section { margin-block-start: clamp(2.25rem, 5vw, 3.25rem); }
.tl-directory__content > .tl-dir-guide-band + .tl-dir-section { margin-block-start: clamp(2rem, 4.5vw, 3rem); }

.tl-dir-section .tl-section__title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	letter-spacing: -.02em;
}

.tl-dir-section > * { margin-block: 0; }

/* Hero */
.wp-block-group.tl-dir-hero {
	--tl-hero-position: right 6%;
	padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(2.75rem, 6vw, 4.5rem);
}

.tl-dir-hero__inner > * { margin-block: 0; }
.tl-dir-hero__inner > * + * { margin-block-start: 1rem; }

.tl-dir-hero .tl-eyebrow {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tl-primary);
}

.tl-dir-hero .tl-dir-hero__title {
	margin-block-start: .5rem;
	font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3rem);
	line-height: 1.1;
	letter-spacing: -.03em;
	max-width: 18em;
	text-wrap: balance;
}

.tl-dir-hero .tl-dir-hero__lead {
	max-width: 34em;
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	line-height: 1.55;
	color: var(--tl-text);
}

/* Search */
.tl-dir-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: 600px;
	margin: 1.75rem 0 0;
	padding: 6px 6px 6px 1rem;
	border: 1px solid var(--tl-border);
	border-radius: 14px;
	background: var(--tl-surface);
	box-shadow: var(--tl-shadow-raised);
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease);
}

.tl-dir-search:focus-within {
	border-color: var(--tl-primary);
	box-shadow: 0 0 0 3px rgba(23, 105, 221, .2), var(--tl-shadow-raised);
}

.tl-dir-search__icon { display: inline-grid; flex: none; color: var(--tl-muted); }
.tl-dir-search__icon svg { width: 22px; height: 22px; }

.tl-dir-search .tl-dir-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: 0 .25rem;
	border: 0;
	background: transparent;
	color: var(--tl-navy);
	font: inherit;
	font-size: 1.0625rem;
	box-shadow: none;
}

.tl-dir-search .tl-dir-search__input:focus { outline: none; }
.tl-dir-search .tl-dir-search__input::placeholder { color: #7b8aa0; opacity: 1; }

.tl-dir-search .tl-dir-search__button {
	flex: none;
	min-height: 48px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: 10px;
	background: var(--tl-primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s var(--tl-ease);
}

.tl-dir-search .tl-dir-search__button:hover { background: var(--tl-primary-dark); }

/* Calculator cards */
.tl-dir-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.tl-dir-popular > .tl-section__head { margin-bottom: 1.25rem !important; }

.tl-dir-card {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 36%;
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "icon title ." "icon desc ." "icon status .";
	isolation: isolate;
	column-gap: 1.1rem;
	min-height: 176px;
	padding: 1.5rem 0 1.4rem 1.5rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	background: linear-gradient(105deg, #fff 0%, #fff 48%, #eaf2fd 100%);
	box-shadow: var(--tl-shadow-card);
	overflow: hidden;
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease), transform .15s var(--tl-ease);
}

.tl-dir-card[hidden] { display: none !important; }
.tl-dir-card > * { margin: 0 !important; }
.tl-dir-card > :first-child { grid-area: icon; align-self: start; }

.tl-dir-card .tl-dir-card__icon {
	width: 52px;
	height: 52px;
	background: none;
	color: var(--tl-primary);
}

.tl-dir-card .tl-dir-card__icon svg { width: 40px; height: 40px; }

.tl-dir-card .tl-dir-card__title {
	grid-area: title;
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	line-height: 1.3;
	letter-spacing: -.01em;
	padding-top: .35rem;
}

.tl-dir-card .tl-dir-card__title a { color: var(--tl-navy); text-decoration: none; }

.tl-dir-card .tl-dir-card__desc {
	grid-area: desc;
	margin-top: .45rem !important;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--tl-muted-strong);
}

.tl-dir-card .tl-dir-status {
	grid-area: status;
	align-self: end;
	justify-self: start;
	margin-top: 1rem !important;
}

.tl-dir-card {
	--tl-art-width: 56%;
	--tl-art-position: 72% center;
	--tl-art-fade: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .5) 20%, rgba(0, 0, 0, .9) 40%, #000 52%);
}

/* Photo on the right, painted behind the text (z-index -1 inside the card's own stacking context)
   and faded towards the text with a mask, so the edge never looks rectangular. */
.tl-dir-card > .tl-dir-card__art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: var(--tl-art-width);
	max-width: none;
	margin: 0 !important;
	overflow: hidden;
	pointer-events: none;
}

.tl-dir-card > .tl-dir-card__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--tl-art-position);
	border-radius: 0;
	-webkit-mask-image: var(--tl-art-fade);
	mask-image: var(--tl-art-fade);
}

/* Per-image crops keep each photo's subject in view. */
.tl-dir-card:has(.tl-dir-art--savings) { --tl-art-position: 82% center; }
.tl-dir-card:has(.tl-dir-art--investment) { --tl-art-position: 60% 30%; }
.tl-dir-card:has(.tl-dir-art--dividend) { --tl-art-position: 80% center; }
.tl-dir-card:has(.tl-dir-art--apartment) { --tl-art-position: 78% 40%; }
.tl-dir-card:has(.tl-dir-art--solar) { --tl-art-position: 80% center; }
.tl-dir-card:has(.tl-dir-art--tractor) { --tl-art-position: 68% 60%; }

/* A card becomes clickable as soon as its title has a link (no extra settings). */
.tl-dir-card .tl-dir-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

.tl-dir-card:has(.tl-dir-card__title a)::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tl-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
	box-shadow: 0 6px 16px rgba(23, 105, 221, .3);
	transition: transform .15s var(--tl-ease);
}

.tl-dir-card:has(.tl-dir-card__title a):hover {
	border-color: var(--tl-border-hover);
	box-shadow: 0 2px 4px rgba(23, 54, 93, .05), 0 12px 28px rgba(23, 105, 221, .12);
	transform: translateY(-2px);
}

.tl-dir-card:has(.tl-dir-card__title a):hover::after { transform: translateX(2px); }
.tl-dir-card:has(.tl-dir-card__title a):hover .tl-dir-card__title a { color: var(--tl-primary-dark); }

.tl-dir-card:has(a:focus-visible) {
	outline: 3px solid var(--tl-primary);
	outline-offset: 2px;
}

.tl-dir-card .tl-dir-card__title a:focus-visible { outline: none; }

/* Status labels (Paragraph block styles "Tila: käytettävissä / tulossa") */
.tl-dir-status,
p.is-style-tl-status-available,
p.is-style-tl-status-upcoming {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	width: fit-content;
	padding: .3rem .75rem;
	border-radius: 999px;
	background: #eef2f7;
	color: var(--tl-muted-strong);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
}

p.is-style-tl-status-available { background: #e2f4ef; color: var(--tl-positive-text); }

p.is-style-tl-status-available::before,
p.is-style-tl-status-upcoming::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--tl-i-check) center / contain no-repeat;
	mask: var(--tl-i-check) center / contain no-repeat;
}

p.is-style-tl-status-upcoming::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

/* Empty search state */
.tl-dir-empty {
	margin-top: 1.25rem;
	padding: 1.75rem 1.5rem;
	border: 1px dashed #b8c8dd;
	border-radius: var(--tl-radius-lg);
	background: #f7faff;
	text-align: center;
}

.tl-dir-empty[hidden] { display: none; }
.tl-dir-empty__text { margin: 0 auto; max-width: 34em; color: var(--tl-text); }

.tl-dir-empty .tl-dir-empty__clear {
	margin-top: 1rem;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	background: var(--tl-surface);
	color: var(--tl-primary-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tl-dir-empty .tl-dir-empty__clear:hover { border-color: var(--tl-border-hover); background: #f2f7ff; }

/* Guide band */
.wp-block-group.tl-dir-guide-band {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	background: #edf3fb;
	border-block: 1px solid #e1e9f4;
}

.tl-dir-guide > * { margin-block: 0; }
.tl-dir-guide .tl-dir-guide__intro { margin-top: .6rem; max-width: 46em; color: var(--tl-text); font-size: 1.0625rem; }

.tl-dir-guide__grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.5rem !important;
}

.tl-dir-guide-card {
	padding: 1.25rem 1.15rem 1.35rem;
	border: 1px solid var(--tl-border);
	border-radius: 14px;
	background: var(--tl-surface);
	box-shadow: var(--tl-shadow-card);
}

.tl-dir-guide-card > * { margin: 0; }
.tl-dir-guide-card .tl-dir-guide-card__icon { display: inline-grid; color: var(--tl-primary); }
.tl-dir-guide-card .tl-dir-guide-card__icon svg { width: 34px; height: 34px; }

.tl-dir-guide-card .tl-dir-guide-card__title {
	margin-top: .75rem;
	font-size: 1rem;
	line-height: 1.3;
}

.tl-dir-guide-card .tl-dir-guide-card__text {
	margin-top: .45rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--tl-muted-strong);
}

/* Trust */
.tl-dir-trust__grid {
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	margin-top: 1.25rem !important;
}

.tl-dir-trust__main {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}

.tl-dir-trust__main > * { margin: 0 !important; }

.tl-dir-trust__main .tl-dir-trust__icon {
	width: 76px;
	height: 76px;
	border-radius: 16px;
}

.tl-dir-trust__main .tl-dir-trust__icon svg { width: 38px; height: 38px; }
.tl-dir-trust__text { font-size: 1.0625rem; line-height: 1.6; color: var(--tl-text); }

.tl-dir-trust__note {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-areas: "icon title" "icon text";
	column-gap: .85rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid #d9e6f6;
	border-radius: 14px;
	background: #f1f6fd;
}

.tl-dir-trust__note > * { margin: 0 !important; }
.tl-dir-trust__note > :first-child { grid-area: icon; }
.tl-dir-trust__note .tl-dir-trust__note-icon { display: inline-grid; color: var(--tl-primary); }
.tl-dir-trust__note .tl-dir-trust__note-icon svg { width: 26px; height: 26px; }
.tl-dir-trust__note .tl-dir-trust__note-title { grid-area: title; font-size: 1rem; padding-top: .1rem; }
.tl-dir-trust__note .tl-dir-trust__note-text { grid-area: text; margin-top: .35rem !important; font-size: .875rem; line-height: 1.55; color: var(--tl-muted-strong); }

/* Directory responsiveness */
@media (max-width: 1099px) {
	.tl-dir-guide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	.tl-dir-grid,
	.tl-dir-trust__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
	.tl-dir-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-dir-card {
		--tl-art-width: 40%;
		--tl-art-fade: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .85) 55%, #000 70%);
		grid-template-columns: 44px minmax(0, 1fr) 31%;
		column-gap: .85rem;
		min-height: 0;
		padding: 1.25rem 0 1.15rem 1.15rem;
	}
	.tl-dir-card .tl-dir-card__icon { width: 44px; height: 44px; }
	.tl-dir-card .tl-dir-card__icon svg { width: 34px; height: 34px; }
	.tl-dir-card .tl-dir-card__desc { font-size: .875rem; }
	.tl-dir-card:has(.tl-dir-card__title a)::after { right: .9rem; bottom: .9rem; width: 40px; height: 40px; }
	.tl-dir-trust__main { grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; align-items: start; }
	.tl-dir-trust__main .tl-dir-trust__icon { width: 56px; height: 56px; border-radius: 12px; }
	.tl-dir-trust__main .tl-dir-trust__icon svg { width: 30px; height: 30px; }
	.tl-dir-trust__text { font-size: 1rem; }
	.tl-dir-search { padding-left: .8rem; }
	.tl-dir-search .tl-dir-search__button { padding: 0 1.15rem; }
}

@media (max-width: 419px) {
	.tl-dir-guide__grid { grid-template-columns: minmax(0, 1fr); }
	.tl-dir-search__icon { display: none; }
}

/* ------------------------------------------------------------------ */
/* 9b. Calculator page template "Laskurisivu – täysleveä hero" (0.1.4) */
/* ------------------------------------------------------------------ */
/*
 * No page title and no page-header group: the calculator's own hero carries the H1.
 * The content area is full width (alignfull blocks can bleed to the edges) and centres
 * everything else at 1200 px. Only a small top gap below the site header.
 */
.wp-block-post-content.tl-calculator-page__content {
	padding-top: clamp(1rem, 2.2vw, 1.75rem);
}

@media (max-width: 599px) {
	.wp-block-post-content.tl-calculator-page__content { padding-top: 1rem; }
}

/* If the page starts with a full-width block (e.g. a future full-width calculator hero),
   it sits directly below the header like the homepage hero. */
.wp-block-post-content.tl-calculator-page__content:has(> .alignfull:first-child) { padding-top: 0; }

/* ------------------------------------------------------------------ */
/* 9c. Directory additions and Kategoriat page (0.1.5)                 */
/* ------------------------------------------------------------------ */
.tl-dir-card:has(.tl-dir-art--crypto) { --tl-art-position: 70% center; }
.tl-dir-card:has(.tl-dir-art--loan) { --tl-art-position: 62% 45%; }

/* Six guide cards: 3 + 3 (pages that still have five keep the old layout). */
@media (min-width: 900px) {
	.tl-dir-guide__grid:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Category filter notice (directory search, ?kategoria=) */
.tl-dir-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	border: 1px solid var(--tl-border);
	border-radius: 12px;
	background: #eef4fd;
}

.tl-dir-filter__text { margin: 0; font-weight: 600; color: var(--tl-navy); }

.tl-dir-filter__clear {
	min-height: 40px;
	padding: .4rem .9rem;
	border: 1px solid var(--tl-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--tl-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tl-dir-filter__clear:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

/* Kategoriat hero */
.wp-block-group.tl-cats-hero { --tl-hero-position: right 35%; }

/* Category cards */
.tl-catx { margin-block-start: clamp(1.75rem, 4vw, 2.5rem) !important; }

.tl-catx-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.tl-catx-grid > * { margin: 0 !important; }

.wp-block-group.tl-catx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: .5rem .5rem 1.25rem;
	border: 1px solid var(--tl-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(23, 54, 93, .04), 0 8px 24px rgba(23, 54, 93, .06);
}

.tl-catx-card > * { margin-block: 0; }

.tl-catx-card > .tl-catx-card__img {
	aspect-ratio: 16 / 6;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 13px;
	background: #e9f0f9;
}

.tl-catx-card > .tl-catx-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

.tl-catx-img--savings img { object-position: 75% 60% !important; }
.tl-catx-img--investment img { object-position: 50% 35% !important; }
.tl-catx-img--apartment img { object-position: 60% 40% !important; }
.tl-catx-img--solar img { object-position: 50% 55% !important; }
.tl-catx-img--tractor img { object-position: 55% 60% !important; }
.tl-catx-img--crypto img { object-position: 60% 60% !important; }

.tl-catx-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: -30px 0 0 1rem !important;
	position: relative;
	z-index: 1;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(23, 54, 93, .14);
	color: var(--tl-primary);
}

.tl-catx-card__icon svg { width: 26px; height: 26px; }

.tl-catx-card .tl-catx-card__title {
	margin-top: .75rem !important;
	padding: 0 .75rem;
	font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
	line-height: 1.3;
	letter-spacing: -.01em;
}

.tl-catx-card__title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 44px;
	color: var(--tl-navy);
	text-decoration: none;
}

/* The arrow belongs to the title link (opens the Laskurit directory filtered to this category). */
.tl-catx-card__title a::after {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eaf2fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769dd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: transform .15s var(--tl-ease), background-color .15s var(--tl-ease);
}

.tl-catx-card__title a:hover { color: var(--tl-primary-dark); }
.tl-catx-card__title a:hover::after { transform: translateX(2px); background-color: #dbe9fc; }
.tl-catx-card__title a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 3px; border-radius: 8px; }

.tl-catx-card .tl-catx-card__desc {
	flex: 1 1 auto;
	margin-top: .4rem !important;
	padding: 0 .75rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--tl-text-muted, #5b6b80);
}

.tl-catx-card .tl-catx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem .75rem 0 !important;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tl-border);
	list-style: none;
}

.tl-catx-chips li { margin: 0; max-width: 100%; }

.tl-catx-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: .35rem .75rem;
	border: 1px solid #cfe0f6;
	border-radius: 9px;
	background: #f2f7fe;
	color: var(--tl-primary-dark, #0f56b8);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.tl-catx-chips a:hover { background: #e3eefc; border-color: #a9c8f0; }
.tl-catx-chips a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

/* Tutustu laskureihin */
.tl-explore {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 3fr);
	gap: 1.25rem 2rem;
	align-items: center;
	margin-block-end: clamp(2.5rem, 6vw, 4rem);
}

.tl-explore > * { margin: 0 !important; }
.tl-explore__head > * { margin-block: 0; }
.tl-explore__lead { margin-top: .5rem !important; color: var(--tl-text-muted, #5b6b80); }

.tl-explore__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.tl-explore__grid > * { margin: 0 !important; }

.wp-block-group.tl-explore-card {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 36px;
	column-gap: .85rem;
	align-items: center;
	padding: 1rem 1.1rem;
	border: 1px solid var(--tl-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(23, 54, 93, .04), 0 6px 18px rgba(23, 54, 93, .05);
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease);
}

.tl-explore-card > * { margin: 0 !important; }

.tl-explore-card__icon {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #eaf2fd;
	color: var(--tl-primary);
}

.tl-explore-card__icon svg { width: 24px; height: 24px; }
.tl-explore-card .tl-explore-card__title { grid-column: 2; font-size: 1rem; line-height: 1.3; }
.tl-explore-card .tl-explore-card__desc { grid-column: 2; font-size: .875rem; line-height: 1.45; color: var(--tl-text-muted, #5b6b80); }

.tl-explore-card__title a { color: var(--tl-navy); text-decoration: none; }

/* Whole card clickable through its only link; the arrow is drawn by the link. */
.tl-explore-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769dd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") right 1.1rem center / 18px no-repeat;
}

.tl-explore-card:has(a:hover) { border-color: var(--tl-border-hover); box-shadow: 0 2px 4px rgba(23, 54, 93, .05), 0 10px 24px rgba(23, 105, 221, .1); }
.tl-explore-card:has(a:focus-visible) { outline: 3px solid var(--tl-primary); outline-offset: 2px; }
.tl-explore-card__title a:focus-visible { outline: none; }

@media (max-width: 1099px) {
	.tl-explore { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 999px) {
	.tl-catx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-explore__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow screens: wide horizontal cards (photo left) as in the mobile design … */
@media (max-width: 699px) {
	.tl-catx-grid { grid-template-columns: minmax(0, 1fr); }
	.wp-block-group.tl-catx-card {
		display: grid;
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		grid-template-areas: "img title" "img desc" "chips chips";
		grid-template-rows: auto 1fr auto;
		column-gap: .9rem;
		padding: .5rem .5rem 1rem;
	}
	.tl-catx-card > .tl-catx-card__img { grid-area: img; aspect-ratio: 4 / 3; align-self: start; }
	.tl-catx-card__icon { grid-area: img; align-self: end; width: 40px; height: 40px; margin: 0 0 .5rem .5rem !important; border-radius: 11px; }
	.tl-catx-card__icon svg { width: 22px; height: 22px; }
	.tl-catx-card .tl-catx-card__title { grid-area: title; margin-top: .25rem !important; padding: 0; }
	.tl-catx-card .tl-catx-card__desc { grid-area: desc; align-self: start; padding: 0; }
	.tl-catx-card .tl-catx-chips { grid-area: chips; margin: .85rem .5rem 0 !important; padding-top: .85rem; }
}

/* … and photo above the text on the narrowest phones, so descriptions are not squeezed. */
@media (max-width: 459px) {
	.wp-block-group.tl-catx-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "title" "desc" "chips"; grid-template-rows: none; }
	.tl-catx-card > .tl-catx-card__img { aspect-ratio: 16 / 7; }
	.tl-catx-card__icon { margin: 0 0 .6rem .6rem !important; }
	.tl-catx-card .tl-catx-card__title { margin-top: .75rem !important; padding: 0 .5rem; }
	.tl-catx-card .tl-catx-card__desc { padding: 0 .5rem; }
	.wp-block-group.tl-explore-card { grid-template-columns: 44px minmax(0, 1fr) 28px; padding: .9rem; }
	.tl-explore-card__icon { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ */
/* 9d. Tietoa page (0.1.6)                                             */
/* ------------------------------------------------------------------ */
.wp-block-group.tl-about-hero { --tl-hero-position: right 40%; }
.tl-about-hero .tl-dir-hero__lead { max-width: 33em; }

.tl-aboutpage__content > .tl-about-note { margin-block-start: clamp(1.5rem, 3vw, 2rem); }
.tl-aboutpage__content > .tl-about-free { margin-block-end: clamp(2.5rem, 6vw, 4rem); }

/* Shared heading block: icon tile + title + lead */
.tl-about-head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 1.25rem;
	align-items: start;
}

.tl-about-head > * { grid-column: 2; margin-block: 0; }
.tl-about-head > .tl-aboutp__icon { grid-column: 1; grid-row: 1 / span 2; }

.tl-aboutp__icon,
.tl-about-note__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--tl-primary-soft);
	color: var(--tl-primary);
}

.tl-aboutp__icon svg { width: 28px; height: 28px; }

.tl-about-head .tl-aboutp__title {
	font-size: clamp(1.4rem, 1.15rem + .9vw, 1.75rem);
	line-height: 1.25;
	letter-spacing: -.02em;
}

.tl-about-head .tl-aboutp__lead {
	margin-top: .6rem !important;
	max-width: 46em;
	line-height: 1.65;
	color: var(--tl-text);
}

/* Photos */
.tl-aboutp__img { margin: 0 !important; overflow: hidden; border-radius: var(--tl-radius-lg); background: #e9f0f9; }
.tl-aboutp__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Miksi … on olemassa? */
.tl-about-why {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: center;
}

.tl-about-why > * { margin: 0 !important; }
.tl-about-why__img { aspect-ratio: 3 / 2; box-shadow: var(--tl-shadow-card); }
.tl-about-why__img img { object-position: 75% 60%; }
.tl-about-why__body > * { margin-block: 0; }

.tl-about-why .tl-about-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 1.5rem 0 0 !important;
	padding: 0;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	background: #f4f8fe;
	list-style: none;
}

.tl-about-benefits li {
	position: relative;
	margin: 0;
	padding: 1rem 1rem 1rem 3rem;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--tl-navy);
}

.tl-about-benefits li + li { border-left: 1px solid var(--tl-border); }

.tl-about-benefits li::before {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: 1rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tl-primary);
	-webkit-mask: none;
}

.tl-about-benefits li::after {
	content: "";
	position: absolute;
	top: calc(1.05rem + 5px);
	left: calc(1rem + 5px);
	width: 12px;
	height: 12px;
	background: #fff;
	-webkit-mask: var(--tl-i-check) center / contain no-repeat;
	mask: var(--tl-i-check) center / contain no-repeat;
}

/* Mitä palvelussa voi laskea? */
.wp-block-group.tl-about-band {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	background: #edf3fb;
	border-block: 1px solid #e1e9f4;
}

.tl-about-calcs > * { margin-block: 0; }

.tl-about-calc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.75rem !important;
}

.tl-about-calc-grid > * { margin: 0 !important; }

.wp-block-group.tl-about-calc {
	position: relative;
	padding: 1.15rem 1.15rem 1.25rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease), transform .15s var(--tl-ease);
}

.tl-about-calc > * { margin-block: 0; }

/* Decorative arrow: the whole card is the title link (see below). */
.tl-about-calc::before {
	content: "";
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tl-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769dd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.tl-about-calc__icon { display: inline-flex; color: var(--tl-primary); }
.tl-about-calc__icon svg { width: 30px; height: 30px; }

.tl-about-calc .tl-about-calc__title {
	margin-top: .85rem !important;
	padding-right: 2.25rem;
	font-size: 1rem;
	line-height: 1.3;
}

.tl-about-calc__title a { color: var(--tl-navy); text-decoration: none; }
.tl-about-calc__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tl-about-calc .tl-about-calc__desc { margin-top: .4rem !important; font-size: .875rem; line-height: 1.5; color: var(--tl-muted-strong); }

.tl-about-calc:has(a:hover) { border-color: var(--tl-border-hover); box-shadow: 0 2px 4px rgba(23, 54, 93, .05), 0 12px 28px rgba(23, 105, 221, .12); transform: translateY(-2px); }
.tl-about-calc:has(a:hover) .tl-about-calc__title a { color: var(--tl-primary-dark); }
.tl-about-calc:has(a:focus-visible) { outline: 3px solid var(--tl-primary); outline-offset: 2px; }
.tl-about-calc__title a:focus-visible { outline: none; }

/* Miten laskurit toimivat? */
.tl-about-how {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: center;
}

.tl-about-how > * { margin: 0 !important; }
.tl-about-how__body > * { margin-block: 0; }
.tl-about-how__img { aspect-ratio: 4 / 3; box-shadow: var(--tl-shadow-card); }
.tl-about-how__img img { object-position: 55% 40%; }

.tl-about-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .85rem;
	margin-top: 1.5rem !important;
}

.tl-about-steps > * { margin: 0 !important; }

.wp-block-group.tl-about-step {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: .75rem;
	padding: 1rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
}

.tl-about-step > * { grid-column: 2; margin-block: 0; }
.tl-about-step > .tl-about-step__icon { grid-column: 1; grid-row: 1 / span 2; color: var(--tl-primary); }
.tl-about-step__icon svg { width: 28px; height: 28px; }
.tl-about-step .tl-about-step__title { font-size: .9375rem; line-height: 1.3; }
.tl-about-step .tl-about-step__desc { margin-top: .3rem !important; font-size: .8125rem; line-height: 1.5; color: var(--tl-muted-strong); }

/* Hyvä tietää */
.wp-block-group.tl-about-note {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.15rem 1.35rem;
	border: 1px solid #d4e3f7;
	border-radius: var(--tl-radius-md);
	background: #eef4fd;
}

.tl-about-note > * { margin: 0 !important; }
.tl-about-note__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: transparent; }
.tl-about-note__icon svg { width: 34px; height: 34px; }
.tl-about-note__body > * { margin-block: 0; }
.tl-about-note .tl-about-note__title { font-size: 1rem; }
.tl-about-note .tl-about-note__text { margin-top: .3rem !important; font-size: .9375rem; line-height: 1.6; color: var(--tl-text); }

/* Maksuton palvelu ja palaute */
.tl-about-free {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: center;
}

.tl-about-free > * { margin: 0 !important; }
.tl-about-free__body > * { margin-block: 0; }
.tl-about-free__img { aspect-ratio: 5 / 3; box-shadow: var(--tl-shadow-card); }
.tl-about-free__img img { object-position: 40% 40%; }
.tl-about-free .tl-about-free__actions { gap: .75rem; margin: 1.5rem 0 0 calc(56px + 1.25rem) !important; }

@media (max-width: 1099px) {
	.tl-about-calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-about-how { grid-template-columns: minmax(0, 1fr); }
	.tl-about-how__img { aspect-ratio: 21 / 9; }
}

@media (max-width: 899px) {
	.tl-about-why { grid-template-columns: minmax(0, 1fr); }
	.tl-about-why__img { aspect-ratio: 21 / 9; }
	.tl-about-free { grid-template-columns: minmax(0, 1fr); }
	.tl-about-free__img { aspect-ratio: 21 / 9; }
}

@media (max-width: 699px) {
	.wp-block-group.tl-about-hero { --tl-hero-position: 92% 40%; }
	.tl-about-head { grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem; }
	.tl-aboutp__icon { width: 44px; height: 44px; border-radius: 12px; }
	.tl-aboutp__icon svg { width: 24px; height: 24px; }
	.tl-about-why .tl-about-benefits { grid-template-columns: minmax(0, 1fr); }
	.tl-about-benefits li + li { border-left: 0; border-top: 1px solid var(--tl-border); }
	.tl-about-steps { grid-template-columns: minmax(0, 1fr); }
	.tl-about-free .tl-about-free__actions { margin-left: 0 !important; flex-direction: column; align-items: stretch; }
	.tl-about-free__actions .wp-block-button { width: 100%; }
	.tl-about-free__actions .wp-block-button__link { width: 100%; justify-content: center; }
	/* Compact horizontal calculator cards, one per row */
	.tl-about-calc-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
	.wp-block-group.tl-about-calc {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		column-gap: .85rem;
		padding: .9rem 3.4rem .9rem 1rem;
	}
	.tl-about-calc > * { grid-column: 2; }
	.tl-about-calc > .tl-about-calc__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
	.tl-about-calc .tl-about-calc__title { margin-top: 0 !important; padding-right: 0; }
	.tl-about-calc::before { top: 50%; transform: translateY(-50%); }
	.tl-about-why__img,
	.tl-about-how__img,
	.tl-about-free__img { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------------ */
/* 9e. Hero image visibility: Laskurit, Kategoriat, Tietoa (0.1.6.1)   */
/* ------------------------------------------------------------------ */
/*
 * Scoped to .tl-dir-hero (used only by these three page patterns; the homepage hero and the
 * calculator heroes are not affected). Images are unchanged; only presentation:
 *  - shorter bottom fade (starts at 86 % instead of 72 % of the hero height),
 *  - per-photo vertical position so the lower subjects are inside the visible window,
 *  - Kategoriat hero slightly taller on wide screens (it has no search box),
 *  - lighter readability veil on tablets/phones (the shared veil hid most of the photo).
 */
.wp-block-group.tl-dir-hero {
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 86%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .84) 0%, rgba(245, 248, 252, .72) 38%, rgba(245, 248, 252, .3) 58%, rgba(245, 248, 252, 0) 76%);
}

.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) { --tl-hero-position: right 20%; }
.wp-block-group.tl-dir-hero.tl-cats-hero { --tl-hero-position: right 65%; }
.wp-block-group.tl-dir-hero.tl-about-hero { --tl-hero-position: right 65%; }

@media (min-width: 1024px) {
	.wp-block-group.tl-dir-hero.tl-cats-hero { padding-block-end: clamp(4.75rem, 7vw, 6rem); }
}

@media (max-width: 699px) {
	.wp-block-group.tl-dir-hero.tl-about-hero { --tl-hero-position: 92% 40%; }
}

/* Tietoa: on narrower desktops and tablets the laptop reaches the text column. */
@media (min-width: 640px) and (max-width: 1199px) {
	.wp-block-group.tl-dir-hero.tl-about-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 86%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .9) 0%, rgba(245, 248, 252, .84) 50%, rgba(245, 248, 252, .4) 72%, rgba(245, 248, 252, 0) 88%);
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.wp-block-group.tl-dir-hero.tl-about-hero { --tl-hero-position: right 40%; }
}

@media (max-width: 1023px) {
	.wp-block-group.tl-dir-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .86) 0%, rgba(245, 248, 252, .72) 50%, rgba(245, 248, 252, .25) 78%, rgba(245, 248, 252, .05) 100%);
	}
}

@media (max-width: 639px) {
	.wp-block-group.tl-dir-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(180deg, rgba(245, 248, 252, .88) 0%, rgba(245, 248, 252, .76) 55%, rgba(245, 248, 252, .45) 100%);
	}
}

/* ------------------------------------------------------------------ */
/* 9f. Laskurit hero: rocks and pines in view (0.1.6.3)                */
/* ------------------------------------------------------------------ */
/*
 * Laskurit only (the directory hero is the .tl-dir-hero without the Kategoriat/Tietoa modifiers).
 * Wide screens: the photo box covers the right 70 % of the hero (soft mask towards the text),
 * so the cover-scaled photo shows almost its full height: the arrow at the top and the rocks at
 * the bottom fit together. The bottom fade starts at 90 % of the hero height.
 */
.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) {
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .84) 0%, rgba(245, 248, 252, .72) 38%, rgba(245, 248, 252, .3) 58%, rgba(245, 248, 252, 0) 76%);
}

@media (min-width: 1024px) {
	.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) { --tl-hero-position: right 80%; }
	.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) > .tl-hero__bg {
		left: auto;
		right: 0;
		width: min(70%, 1040px) !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
	}
}

@media (max-width: 1023px) {
	.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .86) 0%, rgba(245, 248, 252, .72) 50%, rgba(245, 248, 252, .25) 78%, rgba(245, 248, 252, .05) 100%);
	}
}

@media (max-width: 639px) {
	.wp-block-group.tl-dir-hero:not(.tl-cats-hero):not(.tl-about-hero) {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 90%, var(--tl-bg) 100%),
			linear-gradient(180deg, rgba(245, 248, 252, .88) 0%, rgba(245, 248, 252, .76) 55%, rgba(245, 248, 252, .45) 100%);
	}
}

/* ------------------------------------------------------------------ */
/* 9g. Käyttöehdot page (0.1.8)                                        */
/* ------------------------------------------------------------------ */
.tl-terms__content > .tl-terms-hero { margin-block-start: 0; }
.tl-terms__content > .tl-terms-layout { margin-block-end: clamp(2.5rem, 6vw, 4rem); }

/* Hero: text left, decorative SVG illustration right (no photo). */
.wp-block-group.tl-terms-hero {
	padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 3.75rem);
	background: radial-gradient(120% 140% at 85% 30%, #dceafc 0%, #e8f1fc 45%, var(--tl-bg) 100%);
}

.tl-terms-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 2rem;
	align-items: center;
}

.tl-terms-hero__inner > * { margin: 0 !important; }
.tl-terms-hero__text > * { margin-block: 0; }
.tl-terms-hero .tl-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-primary); }
.tl-terms-hero .tl-terms-hero__title { margin-top: .5rem !important; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.tl-terms-hero .tl-terms-hero__lead { margin-top: 1rem !important; max-width: 36em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.6; color: var(--tl-text); }
.tl-terms-hero__art { display: flex; justify-content: flex-end; }
.tl-terms-hero__art svg { width: 100%; max-width: 460px; height: auto; }

/* Two-column content */
.tl-terms-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: start;
}

.tl-terms-layout > * { margin: 0 !important; }
.tl-terms-main > *,
.tl-terms-aside > * { margin: 0 !important; }
.tl-terms-main { display: grid; gap: 1rem; }
.tl-terms-aside { display: grid; gap: 1rem; }

.wp-block-group.tl-terms-toc,
.wp-block-group.tl-terms-card,
.wp-block-group.tl-terms-side {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
}

/* Card heads (icon + title) */
.tl-terms-side__head { display: flex; align-items: center; gap: .85rem; }
.tl-terms-side__head > * { margin: 0 !important; }

.tl-terms-side__icon,
.tl-terms-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--tl-primary-soft);
	color: var(--tl-primary);
}

.tl-terms-side__icon svg,
.tl-terms-card__icon svg { width: 22px; height: 22px; }

.tl-terms-toc .tl-terms-toc__title,
.tl-terms-side .tl-terms-side__title { font-size: 1.125rem; line-height: 1.3; }

/* Table of contents */
.tl-terms-toc .tl-terms-toc__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .35rem 1.25rem;
	margin: 1rem 0 0 !important;
	padding: 0;
	list-style: none;
	counter-reset: tl-terms;
}

.tl-terms-toc__list li { counter-increment: tl-terms; margin: 0; }

.tl-terms-toc__list a {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 40px;
	color: var(--tl-text);
	font-size: .9375rem;
	text-decoration: none;
}

.tl-terms-toc__list a::before {
	content: counter(tl-terms);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tl-primary-soft);
	color: var(--tl-primary);
	font-size: .8125rem;
	font-weight: 700;
}

.tl-terms-toc__list a:hover { color: var(--tl-primary-dark); text-decoration: underline; }
.tl-terms-toc__list a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; border-radius: 6px; }

/* Content cards */
.wp-block-group.tl-terms-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 1.1rem;
	scroll-margin-top: 1.5rem;
}

.tl-terms-card > * { margin: 0 !important; }
.tl-terms-card__body > * { margin-block: 0; }
.tl-terms-card__body > * + * { margin-block-start: .75rem; }
.tl-terms-card .tl-terms-card__title { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.3; padding-top: .55rem; }
.tl-terms-card__body p,
.tl-terms-card__body li { font-size: .9688rem; line-height: 1.65; color: var(--tl-text); }
.tl-terms-card__body a { color: var(--tl-primary-dark); }

.tl-terms-card .tl-terms-list { margin: 0; padding-left: 1.25rem; }
.tl-terms-list li { margin: .15rem 0; }
.tl-terms-list li::marker { color: var(--tl-primary); }

.tl-terms-more { font-weight: 600; text-decoration: none; }
.tl-terms-more:hover { text-decoration: underline; }
.tl-terms-card .tl-terms-updated { padding: .6rem .85rem; border-radius: 10px; background: #f4f8fe; font-size: .9375rem; }

/* Highlighted note (section 4) */
.wp-block-group.tl-terms-note {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 1.15rem;
	border: 1px solid #d4e3f7;
	border-radius: var(--tl-radius-md);
	background: #eef4fd;
}

.tl-terms-note > * { margin: 0 !important; }
.tl-terms-note__icon { flex: none; display: inline-flex; color: var(--tl-primary); }
.tl-terms-note__icon svg { width: 32px; height: 32px; }
.tl-terms-note__body > * { margin-block: 0; }
.tl-terms-note .tl-terms-note__title { font-size: 1rem; line-height: 1.35; }
.tl-terms-note__body p { margin-top: .35rem !important; }

/* Sidebar */
.tl-terms-side > * + * { margin-block-start: .85rem; }
.tl-terms-side p { font-size: .9375rem; line-height: 1.6; color: var(--tl-text); }
.tl-terms-side a { color: var(--tl-primary-dark); }

.tl-terms-side .tl-terms-checks { margin: .85rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.tl-terms-checks li { position: relative; margin: 0; padding-left: 2rem; font-size: .9375rem; line-height: 1.5; color: var(--tl-navy); }
.tl-terms-checks li strong { font-weight: 600; }
.tl-terms-checks li::before { content: ""; position: absolute; top: .1rem; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tl-primary); }
.tl-terms-checks li::after { content: ""; position: absolute; top: calc(.1rem + 5px); left: 5px; width: 12px; height: 12px; background: #fff; -webkit-mask: var(--tl-i-check) center / contain no-repeat; mask: var(--tl-i-check) center / contain no-repeat; }

.tl-terms-side .tl-terms-links { margin: .85rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.tl-terms-links li { margin: 0; }

.tl-terms-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: .5rem .85rem;
	border: 1px solid var(--tl-border);
	border-radius: 10px;
	background: #f7faff;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}

.tl-terms-links a::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--tl-i-chevron) center / contain no-repeat; mask: var(--tl-i-chevron) center / contain no-repeat; }
.tl-terms-links a:hover { border-color: var(--tl-border-hover); background: #eef4fd; }
.tl-terms-links a:focus-visible,
.tl-terms-side a:focus-visible,
.tl-terms-card__body a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

@media (max-width: 1023px) {
	.tl-terms-layout { grid-template-columns: minmax(0, 1fr); }
	.tl-terms-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-terms-toc .tl-terms-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.tl-terms-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.tl-terms-hero__art { justify-content: center; }
	.tl-terms-hero__art svg { max-width: 300px; }
	.tl-terms-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
	.wp-block-group.tl-terms-toc,
	.wp-block-group.tl-terms-card,
	.wp-block-group.tl-terms-side { padding: 1.05rem 1rem; }
	.wp-block-group.tl-terms-card { grid-template-columns: 38px minmax(0, 1fr); column-gap: .8rem; }
	.tl-terms-card__icon { width: 38px; height: 38px; border-radius: 10px; }
	.tl-terms-card .tl-terms-card__title { padding-top: .4rem; }
	.tl-terms-toc .tl-terms-toc__list { grid-template-columns: minmax(0, 1fr); }
	.tl-terms-hero__art { display: none; }
}

/* ------------------------------------------------------------------ */
/* 9h. Tietosuojaseloste page (0.1.9)                                  */
/* ------------------------------------------------------------------ */
/* Content cards, contents list and sidebar reuse the Käyttöehdot (9g) components. */
.tl-privacy__content > .tl-privacy-hero { margin-block-start: 0; }

.wp-block-group.tl-privacy-hero {
	--tl-hero-position: 70% 50%;
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .7) 0%, rgba(245, 248, 252, .45) 38%, rgba(245, 248, 252, 0) 55%);
	padding-block: clamp(2.5rem, 5.5vw, 4rem) clamp(2.75rem, 6vw, 4.5rem);
	background-color: #eaf2fd;
}

.tl-privacy-hero__inner > * { margin-block: 0; }
.tl-privacy-hero .tl-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-primary); }
.tl-privacy-hero .tl-privacy-hero__title { margin-top: .5rem !important; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.tl-privacy-hero .tl-privacy-hero__lead { margin-top: 1rem !important; max-width: 31em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.6; color: var(--tl-text); }

.tl-terms-card .tl-privacy-sub { margin-top: 1rem !important; font-size: 1rem; line-height: 1.35; color: var(--tl-navy); }
.tl-terms-card__body > .tl-privacy-sub:first-of-type { margin-top: .5rem !important; }
.tl-privacy-consent .tl-privacy-consent__text { font-size: .9375rem; }

/* Tablets: keep the illustration on the right, readable text on the left. */
@media (max-width: 1023px) {
	.wp-block-group.tl-privacy-hero {
		--tl-hero-position: 75% 50%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .8) 0%, rgba(245, 248, 252, .6) 45%, rgba(245, 248, 252, 0) 65%);
	}
	.wp-block-group.tl-privacy-hero > .tl-privacy-hero__inner { max-width: 47% !important; margin-left: 0 !important; }
}

/* Phones (as in the mobile design): illustration in the right part, text column on the left. */
@media (max-width: 639px) {
	.wp-block-group.tl-privacy-hero {
		--tl-hero-position: 73% 52%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .55) 0%, rgba(245, 248, 252, .35) 55%, rgba(245, 248, 252, 0) 70%);
		padding-block: 1.75rem 2rem;
	}
	.wp-block-group.tl-privacy-hero > .tl-hero__bg {
		left: auto;
		right: 0;
		width: 58% !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
		mask-image: linear-gradient(90deg, transparent 0, #000 28%);
	}
	.wp-block-group.tl-privacy-hero > .tl-privacy-hero__inner { max-width: 60% !important; margin-left: 0 !important; }
	.wp-block-group.tl-privacy-hero > .tl-hero__bg { width: 56% !important; }
	.tl-privacy-hero .tl-privacy-hero__title { font-size: clamp(1.625rem, 1.2rem + 2vw, 2rem); }
	.tl-privacy-hero .tl-privacy-hero__lead { font-size: .9375rem; line-height: 1.5; }
}

@media (max-width: 379px) {
	.wp-block-group.tl-privacy-hero { --tl-hero-position: 66% 52%; }
	.tl-privacy-hero .tl-privacy-hero__title { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* 9i. Yhteystiedot page (0.1.10)                                      */
/* ------------------------------------------------------------------ */
/* Cards and sidebar reuse the Käyttöehdot components (9g); hero follows the Tietosuojaseloste hero. */
.tl-contact__content > .tl-contact-hero { margin-block-start: 0; }

.wp-block-group.tl-contact-hero {
	--tl-hero-position: 70% 28%;
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .7) 0%, rgba(245, 248, 252, .45) 38%, rgba(245, 248, 252, 0) 55%);
	padding-block: clamp(2.5rem, 5.5vw, 4rem) clamp(2.75rem, 6vw, 4.5rem);
	background-color: #eef4fd;
}

.tl-contact-hero__inner > * { margin-block: 0; }
.tl-contact-hero .tl-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-primary); }
.tl-contact-hero .tl-contact-hero__title { margin-top: .5rem !important; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.tl-contact-hero .tl-contact-hero__lead { margin-top: 1rem !important; max-width: 31em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.6; color: var(--tl-text); }

/* Contact details */
.tl-terms-card__body > .tl-contact-details {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .35rem 1.25rem;
	align-items: baseline;
	margin-top: 1rem;
	padding: 1rem 1.15rem;
	border: 1px solid #d4e3f7;
	border-radius: var(--tl-radius-md);
	background: #f4f8fe;
}

.tl-contact-details > * { margin: 0 !important; }
.tl-contact-details .tl-contact-details__label { font-size: .875rem; font-weight: 600; color: var(--tl-muted-strong); }
.tl-contact-details .tl-contact-details__email { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.tl-contact-details .tl-contact-details__email a { color: var(--tl-primary-dark); }
.tl-contact-details .tl-contact-details__value { font-size: 1rem; font-weight: 600; color: var(--tl-navy); }

/* Form area: placeholder now, Ninja Forms shortcode later (see README) */
.tl-terms-card__body > .tl-contact-form { margin-top: 1rem; }
.tl-contact-form > * { margin-block: 0; }
.tl-contact-form .tl-contact-form__actions { margin: 0 !important; }
.tl-terms-card__body .tl-contact-form .wp-block-button__link,
.tl-terms-card__body .tl-contact-form .wp-block-button__link:hover,
.tl-terms-card__body .tl-contact-form .wp-block-button__link:visited { color: #fff; }
.tl-terms-card__body .tl-contact-form__hint { font-size: .875rem; color: var(--tl-muted-strong); }

.tl-contact-form .nf-form-cont { font: inherit; color: var(--tl-text); }
.tl-contact-form .nf-form-fields-required { margin-bottom: 1rem; font-size: .875rem; color: var(--tl-muted-strong); }
.tl-contact-form .nf-field-container { margin-bottom: 1rem; }
.tl-contact-form .nf-field-label label { margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; color: var(--tl-navy); }
.tl-contact-form .ninja-forms-req-symbol { color: #c62828; }
.tl-contact-form .nf-field-element input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.tl-contact-form .nf-field-element select,
.tl-contact-form .nf-field-element textarea {
	width: 100%;
	min-height: 46px;
	padding: .6rem .85rem;
	border: 1px solid #c9d8ec;
	border-radius: 10px;
	background: #fff;
	color: var(--tl-text);
	font: inherit;
	font-size: 1rem;
}
.tl-contact-form .nf-field-element textarea { min-height: 150px; resize: vertical; }
.tl-contact-form .nf-field-element input:focus,
.tl-contact-form .nf-field-element select:focus,
.tl-contact-form .nf-field-element textarea:focus { outline: 3px solid rgba(23, 105, 221, .35); outline-offset: 0; border-color: var(--tl-primary); }
.tl-contact-form .nf-field-element input[type="submit"],
.tl-contact-form .nf-field-element input[type="button"] {
	min-height: 48px;
	padding: .7rem 1.5rem;
	border: 0;
	border-radius: 10px;
	background: var(--tl-primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.tl-contact-form .nf-field-element input[type="submit"]:hover { background: var(--tl-primary-dark); }
.tl-contact-form .nf-error-msg,
.tl-contact-form .nf-error .nf-error-msg { color: #b3261e; font-size: .875rem; }
.tl-contact-form .nf-response-msg { padding: .85rem 1rem; border-radius: 10px; background: #e8f6f2; color: #0e5c50; }

/* Topics */
.tl-terms-card__body > .tl-contact-topics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin-top: 1rem;
}

.tl-contact-topics > * { margin: 0 !important; }

.wp-block-group.tl-contact-topic {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: .75rem;
	padding: .9rem 1rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-md);
	background: #f8fbff;
}

.tl-contact-topic > * { grid-column: 2; margin: 0 !important; }
.tl-contact-topic > .tl-contact-topic__icon { grid-column: 1; grid-row: 1 / span 2; color: var(--tl-primary); }
.tl-contact-topic__icon svg { width: 26px; height: 26px; }
.tl-contact-topic .tl-contact-topic__title { font-size: .9688rem; line-height: 1.35; }
.tl-terms-card__body .tl-contact-topic .tl-contact-topic__text { margin-top: .25rem !important; font-size: .9063rem; line-height: 1.5; color: var(--tl-muted-strong); }

@media (max-width: 1023px) {
	.wp-block-group.tl-contact-hero {
		--tl-hero-position: 78% 40%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .8) 0%, rgba(245, 248, 252, .6) 45%, rgba(245, 248, 252, 0) 65%);
	}
	.wp-block-group.tl-contact-hero > .tl-contact-hero__inner { max-width: 50% !important; margin-left: 0 !important; }
}

@media (max-width: 639px) {
	.wp-block-group.tl-contact-hero {
		--tl-hero-position: 97% 40%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 88%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .55) 0%, rgba(245, 248, 252, .35) 55%, rgba(245, 248, 252, 0) 70%);
		padding-block: 1.75rem 2rem;
	}
	.wp-block-group.tl-contact-hero > .tl-hero__bg {
		left: auto;
		right: 0;
		width: 46% !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
		mask-image: linear-gradient(90deg, transparent 0, #000 22%);
	}
	.wp-block-group.tl-contact-hero > .tl-contact-hero__inner { max-width: 56% !important; }
	.tl-contact-hero .tl-contact-hero__title { font-size: 1.75rem; }
	.tl-contact-hero .tl-contact-hero__lead { font-size: .9375rem; line-height: 1.5; }
	.tl-terms-card__body > .tl-contact-topics { grid-template-columns: minmax(0, 1fr); }
	.tl-terms-card__body > .tl-contact-details { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
	.tl-contact-details .tl-contact-details__label:not(:first-child) { margin-top: .6rem !important; }
	.tl-contact-form__actions .wp-block-button,
	.tl-contact-form__actions .wp-block-button__link { width: 100%; justify-content: center; }
}

@media (max-width: 379px) {
	.tl-contact-hero .tl-contact-hero__title { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* 9j. Yhteystiedot hero: keyboard visible (0.1.10.1)                  */
/* ------------------------------------------------------------------ */
/*
 * On wide screens the photo filled the full width (object-fit: cover), so only the upper
 * ~40-55 % of its height fitted into the low hero and the keyboard was cut off; the bottom
 * fade (from 88 %) covered the rest. Now the photo box covers the right 76 % of the hero
 * (max 1200 px) with a soft left mask, which shows almost the full laptop; the bottom fade
 * starts at 92 %. Scoped to the Yhteystiedot hero only.
 */
.wp-block-group.tl-contact-hero {
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .7) 0%, rgba(245, 248, 252, .45) 38%, rgba(245, 248, 252, 0) 55%);
}

@media (min-width: 1024px) {
	.wp-block-group.tl-contact-hero { --tl-hero-position: 70% 42%; }
	.wp-block-group.tl-contact-hero > .tl-hero__bg {
		left: auto;
		right: 0;
		width: min(76%, 1200px) !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
	}
}

@media (max-width: 1023px) {
	.wp-block-group.tl-contact-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .8) 0%, rgba(245, 248, 252, .6) 45%, rgba(245, 248, 252, 0) 65%);
	}
}

@media (max-width: 639px) {
	.wp-block-group.tl-contact-hero {
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .55) 0%, rgba(245, 248, 252, .35) 55%, rgba(245, 248, 252, 0) 70%);
	}
}

/* ------------------------------------------------------------------ */
/* 9k. Blog: listings, archives, search, single article (0.1.11)       */
/* ------------------------------------------------------------------ */
.tl-blog__content > .tl-blog-hero,
.tl-blog__content > .tl-blog-archive-hero { margin-block-start: 0; }
.tl-blog__content > .tl-blog-layout { margin-block-end: clamp(2.5rem, 6vw, 4rem); }
.tl-blog .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Blog hero (follows the Yhteystiedot hero, 0.1.10.1) */
.wp-block-group.tl-blog-hero {
	--tl-hero-position: 70% 60%;
	--tl-hero-overlay:
		linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
		linear-gradient(90deg, rgba(245, 248, 252, .7) 0%, rgba(245, 248, 252, .45) 38%, rgba(245, 248, 252, 0) 55%);
	padding-block: clamp(2.5rem, 5.5vw, 4rem) clamp(2.75rem, 6vw, 4.5rem);
	background-color: #eef4fd;
}

.tl-blog-hero__inner > * { margin-block: 0; }
.tl-blog .tl-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-primary); }
.tl-blog-hero .tl-blog-hero__title { margin-top: .5rem !important; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.tl-blog-hero .tl-blog-hero__lead { margin-top: 1rem !important; max-width: 31em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.6; color: var(--tl-text); }

@media (min-width: 1024px) {
	.wp-block-group.tl-blog-hero > .tl-hero__bg {
		left: auto;
		right: 0;
		width: min(76%, 1200px) !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.tl-blog-hero .tl-blog-hero__lead { max-width: 25em; }
}

@media (max-width: 1023px) {
	.wp-block-group.tl-blog-hero {
		--tl-hero-position: 80% 50%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .8) 0%, rgba(245, 248, 252, .6) 45%, rgba(245, 248, 252, 0) 65%);
	}
	.wp-block-group.tl-blog-hero > .tl-blog-hero__inner { max-width: 50% !important; margin-left: 0 !important; }
}

@media (max-width: 639px) {
	.wp-block-group.tl-blog-hero {
		--tl-hero-position: 94% 50%;
		--tl-hero-overlay:
			linear-gradient(180deg, rgba(245, 248, 252, 0) 92%, var(--tl-bg) 100%),
			linear-gradient(90deg, rgba(245, 248, 252, .55) 0%, rgba(245, 248, 252, .35) 55%, rgba(245, 248, 252, 0) 70%);
		padding-block: 1.75rem 2rem;
	}
	.wp-block-group.tl-blog-hero > .tl-hero__bg {
		left: auto;
		right: 0;
		width: 46% !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
		mask-image: linear-gradient(90deg, transparent 0, #000 22%);
	}
	.wp-block-group.tl-blog-hero > .tl-blog-hero__inner { max-width: 56% !important; }
	.tl-blog-hero .tl-blog-hero__title { font-size: 2rem; }
	.tl-blog-hero .tl-blog-hero__lead { font-size: .9375rem; line-height: 1.5; }
}

/* Archive / search header */
.wp-block-group.tl-blog-archive-hero {
	padding-block: clamp(2rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem);
	background: radial-gradient(120% 140% at 85% 20%, #dceafc 0%, #e8f1fc 45%, var(--tl-bg) 100%);
}

.tl-blog-archive-hero__inner > * { margin-block: 0; }
.tl-blog-archive-hero .tl-blog-archive__title { margin-top: .4rem !important; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; }
.tl-blog-archive-hero .tl-blog-archive__desc { margin-top: .75rem !important; max-width: 46em; color: var(--tl-text); }
.tl-blog-archive-hero .tl-blog-archive__desc p { margin: 0; }

/* Layout and section title */
.tl-blog-main > * { margin-block: 0; }
.tl-blog-main > * + * { margin-block-start: 1rem; }
.tl-blog .tl-blog-section-title { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.25; }

/* Post cards */
.tl-blog .tl-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-blog .tl-blog-grid > li { margin: 0; min-width: 0; }

.wp-block-group.tl-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
	transition: border-color .15s var(--tl-ease), box-shadow .15s var(--tl-ease), transform .15s var(--tl-ease);
}

.tl-blog-card > * { margin: 0 !important; }
.tl-blog-card > .tl-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: #e9f0f9; }
.tl-blog-card > .tl-blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tl-blog-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1rem 1.1rem 1.15rem; }
.tl-blog-card__body > * { margin-block: 0; }
.tl-blog-card__body > * + * { margin-block-start: .5rem; }
.tl-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; }
.tl-blog-card__meta > * { margin: 0 !important; }
.tl-blog .tl-blog-card__date,
.tl-blog .tl-blog-mini__date { font-size: .8125rem; color: var(--tl-muted-strong); }
.tl-blog .tl-blog-card__title { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; }
.tl-blog-card__title a { color: var(--tl-navy); text-decoration: none; }
.tl-blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tl-blog .tl-blog-card__excerpt { flex: 1 1 auto; font-size: .9063rem; line-height: 1.55; color: var(--tl-text); }
.tl-blog-card__excerpt p { margin: 0; }
.tl-blog .tl-blog-card__more { align-self: flex-start; margin-top: .75rem !important; font-size: .9375rem; font-weight: 700; color: var(--tl-primary-dark); text-decoration: none; }
.tl-blog-card__more::after { content: " →"; }
.tl-blog-card:has(.tl-blog-card__title a:hover) { border-color: var(--tl-border-hover); box-shadow: 0 2px 4px rgba(23, 54, 93, .05), 0 12px 28px rgba(23, 105, 221, .12); transform: translateY(-2px); }
.tl-blog-card:has(.tl-blog-card__title a:focus-visible) { outline: 3px solid var(--tl-primary); outline-offset: 2px; }
.tl-blog-card__title a:focus-visible { outline: none; }
.tl-blog-card__more:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; border-radius: 4px; }

/* Category chips (links stay clickable above the card link) */
.tl-blog .tl-blog-chip,
.tl-blog .tl-blog-card__cat { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .3rem; font-size: 0; }
.tl-blog .tl-blog-chip a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: .1rem .55rem;
	border-radius: 7px;
	background: var(--tl-primary-soft);
	color: var(--tl-primary-dark);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
}
.tl-blog .tl-blog-chip a:hover { background: #dbe9fc; }
.tl-blog .tl-blog-card__cat a { font-size: .8125rem; color: var(--tl-muted-strong); text-decoration: none; }
.tl-blog .wp-block-post-terms__separator { display: none; }

/* Pagination */
.tl-blog .tl-blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 1.75rem !important; }
.tl-blog .tl-blog-pagination .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-blog .tl-blog-pagination a,
.tl-blog .tl-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--tl-border);
	border-radius: 10px;
	background: #fff;
	color: var(--tl-navy);
	font-weight: 600;
	text-decoration: none;
}
.tl-blog .tl-blog-pagination .page-numbers.current { border-color: var(--tl-primary); background: var(--tl-primary); color: #fff; }
.tl-blog .tl-blog-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.tl-blog .tl-blog-pagination a:hover { border-color: var(--tl-border-hover); background: #eef4fd; }
.tl-blog .tl-blog-pagination a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

/* Empty state */
.wp-block-group.tl-blog-empty {
	padding: 2rem 1.5rem;
	border: 1px dashed #b9cff0;
	border-radius: var(--tl-radius-lg);
	background: #fff;
	text-align: center;
}
.tl-blog .tl-blog-empty__title { font-size: 1.0625rem; font-weight: 600; color: var(--tl-navy); }

/* Sidebar */
.wp-block-query.tl-blog-more {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
}
.wp-block-query.tl-blog-more > * { margin-block: 0; }
.tl-blog-search__form { display: flex; gap: .5rem; margin-top: .85rem; }
.tl-blog-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: .55rem .85rem;
	border: 1px solid #c9d8ec;
	border-radius: 10px;
	background: #fff;
	color: var(--tl-text);
	font: inherit;
}
.tl-blog-search__input:focus { outline: 3px solid rgba(23, 105, 221, .35); border-color: var(--tl-primary); }
.tl-blog-search__button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 10px; background: var(--tl-primary); color: #fff; cursor: pointer; }
.tl-blog-search__button:hover { background: var(--tl-primary-dark); }
.tl-blog-search__button:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

.tl-blog-cats .wp-block-categories-list,
.tl-blog-cats ul.tl-blog-cats__list { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.tl-blog-cats li { margin: 0; }
.tl-blog-cats li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: .3rem .75rem;
	border: 1px solid #cfe0f6;
	border-radius: 9px;
	background: #f2f7fe;
	color: var(--tl-primary-dark);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}
.tl-blog-cats li a:hover,
.tl-blog-cats li.current-cat a { border-color: var(--tl-primary); background: #e3eefc; }
.tl-blog-cats li a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }

.tl-blog-more .tl-blog-mini-list { display: grid; gap: .1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.tl-blog-more .tl-blog-mini-list > li { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--tl-border); }
.tl-blog-more .tl-blog-mini-list > li:last-child { border-bottom: 0; }
.tl-blog-mini > * { margin: 0 !important; }
.tl-blog .tl-blog-mini__title { font-size: .9375rem; line-height: 1.35; }
.tl-blog-mini__title a { color: var(--tl-navy); text-decoration: none; }
.tl-blog-mini__title a:hover { color: var(--tl-primary-dark); text-decoration: underline; }

/* Single article */
.tl-article > * { margin-block: 0; }
.tl-article > * + * { margin-block-start: 1.25rem; }
.tl-blog--single .tl-blog__content > .tl-article { margin-block-start: clamp(1.25rem, 3vw, 2rem); }
.tl-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--tl-muted-strong); }
.tl-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.tl-breadcrumbs li + li::before { content: "›"; color: var(--tl-muted); }
.tl-breadcrumbs a { color: var(--tl-primary-dark); text-decoration: none; }
.tl-breadcrumbs a:hover { text-decoration: underline; }
.tl-breadcrumbs [aria-current] { overflow-wrap: anywhere; }

.tl-article__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: center;
}
.tl-article__head > * { margin: 0 !important; }
.tl-article__head:not(:has(.tl-article__image)) { grid-template-columns: minmax(0, 1fr); }
.tl-article__intro > * { margin-block: 0; }
.tl-article__intro > * + * { margin-block-start: .85rem; }
.tl-blog .tl-article__title { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.625rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: break-word; }
.tl-blog .tl-article__lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--tl-text); }
.tl-article__lead p { margin: 0; }
.tl-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .9063rem; color: var(--tl-muted-strong); }
.tl-article__meta > * { margin: 0 !important; }
.tl-article__meta .tl-article__date::before,
.tl-article__meta .tl-reading-time::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: .4rem; vertical-align: -3px; background: currentColor; }
.tl-article__meta .tl-article__date::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%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 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.tl-article__meta .tl-reading-time::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%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 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.tl-article__head > .tl-article__image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tl-radius-lg); box-shadow: var(--tl-shadow-card); }
.tl-article__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.tl-article__layout { margin-top: clamp(1.5rem, 3vw, 2rem) !important; }
.tl-article__main > * { margin-block: 0; }
.tl-article__main > * + * { margin-block-start: 1.25rem; }
.tl-article__aside { position: sticky; top: 1.25rem; }
.tl-article__aside > .tl-toc--side + .tl-terms-side,
.tl-article__aside > * + * { margin-block-start: 1rem !important; }

/* Table of contents */
.tl-toc { padding: 1.15rem 1.3rem; border: 1px solid #d4e3f7; border-radius: var(--tl-radius-lg); background: #eef4fd; }
.tl-toc__title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tl-navy); }
.tl-toc__list { margin: 0; padding-left: 1.4rem; display: grid; gap: .15rem; }
.tl-toc__list li { margin: 0; padding-left: .2rem; color: var(--tl-primary); font-size: .9375rem; line-height: 1.45; }
.tl-toc__list a { display: inline-block; padding: .25rem 0; color: var(--tl-primary-dark); text-decoration: none; }
.tl-toc__list a:hover { text-decoration: underline; }
.tl-toc__list a:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; border-radius: 4px; }
.tl-toc--side { background: #fff; box-shadow: var(--tl-shadow-card); border-color: var(--tl-border); }
@media (min-width: 1024px) { .tl-toc--inline { display: none; } }
@media (max-width: 1023px) { .tl-toc--side { display: none; } .tl-article__aside { position: static; } }

/* Article content */
.tl-article__content {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-lg);
	background: #fff;
	box-shadow: var(--tl-shadow-card);
	font-size: 1.0313rem;
	line-height: 1.7;
	color: var(--tl-text);
	overflow-wrap: break-word;
}
.tl-article__content > * { max-width: 100%; margin-block: 0; }
.tl-article__content > * + * { margin-block-start: 1.1rem; }
.tl-article__content > h2 { margin-block-start: 2rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.3; scroll-margin-top: 1.5rem; }
.tl-article__content > h2:first-child { margin-block-start: 0; }
.tl-article__content > h3 { margin-block-start: 1.5rem; font-size: 1.1875rem; line-height: 1.35; scroll-margin-top: 1.5rem; }
.tl-article__content a:not(.wp-element-button) { color: var(--tl-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.tl-article__content ul,
.tl-article__content ol { padding-left: 1.4rem; }
.tl-article__content li + li { margin-top: .3rem; }
.tl-article__content li::marker { color: var(--tl-primary); }
.tl-article__content .is-style-tl-checks { padding-left: 0; list-style: none; }
.tl-article__content .is-style-tl-checks li { position: relative; padding-left: 2rem; }
.tl-article__content .is-style-tl-checks li::before { content: ""; position: absolute; top: .2rem; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tl-primary); }
.tl-article__content .is-style-tl-checks li::after { content: ""; position: absolute; top: calc(.2rem + 5px); left: 5px; width: 12px; height: 12px; background: #fff; -webkit-mask: var(--tl-i-check) center / contain no-repeat; mask: var(--tl-i-check) center / contain no-repeat; }
.tl-article__content figure { margin-inline: 0; }
.tl-article__content img { max-width: 100%; height: auto; border-radius: var(--tl-radius-md); }
.tl-article__content .wp-block-table { overflow-x: auto; }
.tl-article__content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tl-article__content .wp-block-table th,
.tl-article__content .wp-block-table td { padding: .6rem .8rem; border: 1px solid var(--tl-border); text-align: left; }
.tl-article__content .wp-block-table thead th { background: #eef4fd; color: var(--tl-navy); }
.tl-article__content .wp-block-table figcaption { margin-top: .5rem; font-size: .875rem; color: var(--tl-muted-strong); }
.tl-article__content blockquote { margin-inline: 0; padding: .75rem 1.1rem; border-left: 4px solid var(--tl-primary); border-radius: 0 10px 10px 0; background: #f4f8fe; }
.tl-article__content hr { border: 0; border-top: 1px solid var(--tl-border); }
.tl-article__content .wp-block-group.is-style-tl-highlight { padding: 1rem 1.2rem; border: 1px solid #d4e3f7; border-radius: var(--tl-radius-md); background: #eef4fd; }
.tl-article__content .wp-block-group.is-style-tl-tip { padding: 1rem 1.2rem; border: 1px solid #c4e8de; border-radius: var(--tl-radius-md); background: #e8f6f2; }
.tl-article__content .is-style-tl-highlight > * + *,
.tl-article__content .is-style-tl-tip > * + * { margin-top: .5rem; }

/* Calculator prompt (pattern "Laskurikehote") */
.wp-block-group.tl-cta {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
	padding: 1.15rem 1.25rem;
	border: 1px solid #d4e3f7;
	border-radius: var(--tl-radius-lg);
	background: linear-gradient(135deg, #eef4fd 0%, #f7faff 100%);
}
.tl-cta > * { margin: 0 !important; }
.tl-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; color: var(--tl-primary); box-shadow: 0 4px 14px rgba(23, 54, 93, .1); }
.tl-cta__icon svg { width: 28px; height: 28px; }
.tl-cta__body > * { margin-block: 0 !important; }
.tl-cta__body > * + * { margin-block-start: .35rem !important; }
.tl-cta .tl-cta__title { font-size: 1.0625rem; line-height: 1.35; color: var(--tl-navy); }
.tl-cta .tl-cta__text { font-size: .9375rem; line-height: 1.5; color: var(--tl-text); }
.tl-cta .tl-cta__actions { margin-block-start: .85rem !important; }
.tl-article__content .tl-cta .wp-block-button__link { color: #fff; text-decoration: none; }

/* Share */
.tl-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tl-share__title { margin: 0; font-weight: 700; color: var(--tl-navy); }
.tl-share__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tl-share__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--tl-border); border-radius: 10px; background: #fff; color: var(--tl-primary-dark); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.tl-share__link:hover { border-color: var(--tl-border-hover); background: #eef4fd; }
.tl-share__link:focus-visible { outline: 3px solid var(--tl-primary); outline-offset: 2px; }
.tl-share__status { width: 100%; margin: 0; font-size: .875rem; color: var(--tl-positive-text); }
.tl-share__status:empty { display: none; }

/* Article info card */
.tl-article-info > * + * { margin-block-start: 0 !important; }
.tl-article-info__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--tl-border); }
.tl-article-info__row:last-child { border-bottom: 0; }
.tl-article-info__row > * { margin: 0 !important; }
.tl-blog .tl-article-info__label { font-size: .875rem; color: var(--tl-muted-strong); }
.tl-blog .tl-article-info__value,
.tl-article-info__row .tl-reading-time { font-size: .9063rem; font-weight: 600; color: var(--tl-navy); text-align: right; }
.tl-article-info__value a { color: var(--tl-primary-dark); text-decoration: none; }

/* Related posts */
.tl-blog-related > * { margin-block: 0; }
.tl-blog-related .tl-blog-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tl-blog-related .tl-blog-related__list > li { margin: 0; min-width: 0; }
.wp-block-group.tl-blog-card--row { flex-direction: row; align-items: stretch; }
.tl-blog-card--row > .tl-blog-card__image { flex: 0 0 38%; aspect-ratio: auto; min-height: 110px; }
.tl-blog-card--row .tl-blog-card__body { padding: .85rem 1rem; }
.tl-blog-card--row .tl-blog-card__title { font-size: .9688rem; }
.tl-blog--single .tl-blog__content > .tl-blog-related { margin-block: clamp(2rem, 5vw, 3rem); }

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

@media (max-width: 1023px) {
	.tl-blog-related .tl-blog-related__list { grid-template-columns: minmax(0, 1fr); }
	.tl-blog-card--row > .tl-blog-card__image { flex-basis: 30%; }
}

@media (max-width: 767px) {
	.tl-article__head { grid-template-columns: minmax(0, 1fr); }
	.tl-article__head > .tl-article__image { order: -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 639px) {
	.tl-blog .tl-blog-grid { grid-template-columns: minmax(0, 1fr); }
	.wp-block-group.tl-cta { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; padding: 1rem; }
	.tl-cta__icon { width: 44px; height: 44px; border-radius: 12px; }
	.tl-cta__icon svg { width: 24px; height: 24px; }
	.tl-cta .tl-cta__actions .wp-block-button,
	.tl-cta .tl-cta__actions .wp-block-button__link { width: 100%; justify-content: center; }
	.tl-article__content { padding: 1.1rem 1rem; }
}

/* ------------------------------------------------------------------ */
/* 9l. Editorial single article (0.1.11.1)                             */
/* ------------------------------------------------------------------ */
/* Single posts only (.tl-editorial). Listing pages keep 9k. */
.tl-editorial .tl-blog__content > .tl-editorial__crumbs { margin-block-start: clamp(1rem, 2.5vw, 1.5rem); }
.tl-editorial .tl-blog__content > .tl-editorial__article { margin-block: .9rem clamp(2.5rem, 6vw, 4rem); }

.wp-block-group.tl-editorial__article {
	max-width: 1120px !important;
	overflow: hidden;
	border: 1px solid var(--tl-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(23, 54, 93, .04), 0 12px 32px rgba(23, 54, 93, .06);
}

.tl-editorial__article > * { margin: 0 !important; }

/* Wide cover image (the post's featured image, or the theme fallback) */
.tl-editorial__article > .tl-editorial__cover { aspect-ratio: 3 / 1; overflow: hidden; background: #e9f0f9; }
.tl-editorial__cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.tl-editorial__body { padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem); }
.tl-editorial__body > * { margin-block: 0; }
.tl-editorial__body > * + * { margin-block-start: 1.5rem; }

.tl-editorial__header > * { margin-block: 0; }
.tl-editorial__header > * + * { margin-block-start: .85rem; }
.tl-blog .tl-editorial__title { font-size: clamp(1.875rem, 1.15rem + 2.5vw, 2.75rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: break-word; }
.tl-blog .tl-editorial__lead { max-width: 780px; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--tl-text); }
.tl-editorial__lead p { margin: 0; }

/* Table of contents (shown only with 3+ H2 headings) */
.tl-toc--editorial { max-width: 780px; }
.tl-toc--editorial .tl-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }

/* Article text: comfortable column, wide elements may use the full body width */
.tl-editorial .tl-article__content.tl-editorial__content {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.0625rem;
	line-height: 1.75;
}
.tl-editorial__content::after { content: ""; display: table; clear: both; }
.tl-editorial__content > * { max-width: 780px; }
.tl-editorial__content > .alignwide,
.tl-editorial__content > .alignfull,
.tl-editorial__content > .wp-block-table,
.tl-editorial__content > .tl-cta,
.tl-editorial__content > .is-style-tl-wide,
.tl-editorial__content > .is-style-tl-highlight,
.tl-editorial__content > .is-style-tl-tip { max-width: 100%; }
.tl-editorial__content > h2 { margin-block-start: 2.25rem; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); letter-spacing: -.015em; }
.tl-editorial__content > h3 { margin-block-start: 1.75rem; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }

/* Article images (Image block): normal = text width, "Leveä artikkelikuva" style or Wide alignment = full body width */
:where(.tl-editorial__content, .is-root-container) .wp-block-image { margin-block: 1.75rem; }
:where(.tl-editorial__content, .is-root-container) .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 54, 93, .06); }
:where(.tl-editorial__content, .is-root-container) .wp-block-image figcaption,
:where(.tl-editorial__content, .is-root-container) .wp-block-table figcaption { margin-top: .6rem; font-size: .875rem; line-height: 1.5; color: var(--tl-muted-strong); text-align: left; }
.tl-editorial__content > .wp-block-image.alignright,
.tl-editorial__content > figure.alignright { float: right; width: min(40%, 380px); max-width: 380px; margin: .35rem 0 1.25rem 2rem; }
.tl-editorial__content > .wp-block-image.alignleft,
.tl-editorial__content > figure.alignleft { float: left; width: min(40%, 380px); max-width: 380px; margin: .35rem 2rem 1.25rem 0; }
.tl-editorial__content > .wp-block-image.aligncenter { margin-inline: auto; }
.tl-editorial__content > h2,
.tl-editorial__content > .wp-block-table,
.tl-editorial__content > .tl-cta,
.tl-editorial__content > .alignwide,
.tl-editorial__content > .is-style-tl-wide { clear: both; }

/* Tables */
:where(.tl-editorial__content, .is-root-container) .wp-block-table { overflow-x: auto; border: 1px solid var(--tl-border); border-radius: 14px; -webkit-overflow-scrolling: touch; }
:where(.tl-editorial__content, .is-root-container) .wp-block-table table { width: 100%; min-width: 420px; margin: 0; border-collapse: collapse; font-size: .9688rem; font-variant-numeric: tabular-nums; }
:where(.tl-editorial__content, .is-root-container) .wp-block-table th,
:where(.tl-editorial__content, .is-root-container) .wp-block-table td { padding: .7rem 1rem; border: 0; border-bottom: 1px solid var(--tl-border); text-align: left; }
:where(.tl-editorial__content, .is-root-container) .wp-block-table th + th,
:where(.tl-editorial__content, .is-root-container) .wp-block-table td + td { border-left: 1px solid var(--tl-border); }
:where(.tl-editorial__content, .is-root-container) .wp-block-table tbody tr:last-child td { border-bottom: 0; }
:where(.tl-editorial__content, .is-root-container) .wp-block-table thead th { background: #eaf2fd; color: var(--tl-navy); font-weight: 700; }
:where(.tl-editorial__content, .is-root-container) .wp-block-table tbody tr:nth-child(even) td { background: #fafcff; }
.tl-editorial__content > .wp-block-table figcaption { padding: 0 1rem .75rem; }

/* Calculator prompt: horizontal card, button on the right (desktop) */
.tl-editorial__content > .wp-block-group.tl-cta,
.is-root-container .wp-block-group.tl-cta {
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	margin-block: 2rem;
	padding: 1.5rem 1.75rem;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, #e8f1fd 0%, #f3f8ff 100%);
}
.tl-editorial__content .tl-cta__icon { width: 72px; height: 72px; border-radius: 50%; }
.tl-editorial__content .tl-cta__icon svg { width: 34px; height: 34px; }
.tl-editorial__content .tl-cta__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; }
.tl-editorial__content .tl-cta__body > .tl-cta__title,
.tl-editorial__content .tl-cta__body > .tl-cta__text { grid-column: 1; }
.tl-editorial__content .tl-cta__body > .tl-cta__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
.tl-editorial__content .tl-cta .tl-cta__title { font-size: 1.25rem; }

/* Boxes */
.tl-editorial__content > .wp-block-group.is-style-tl-highlight,
.tl-editorial__content > .wp-block-group.is-style-tl-tip,
.is-root-container .wp-block-group.is-style-tl-highlight,
.is-root-container .wp-block-group.is-style-tl-tip { position: relative; padding: 1.1rem 1.25rem 1.1rem 3.4rem; border-radius: 14px; }
.is-root-container .wp-block-group.is-style-tl-highlight { border: 1px solid #d4e3f7; background: #eef4fd; }
.is-root-container .wp-block-group.is-style-tl-tip { border: 1px solid #c4e8de; background: #e8f6f2; }
.tl-editorial__content > .is-style-tl-highlight::before,
.tl-editorial__content > .is-style-tl-tip::before,
.is-root-container .is-style-tl-highlight::before,
.is-root-container .is-style-tl-tip::before { content: ""; position: absolute; top: 1.15rem; left: 1.15rem; width: 22px; height: 22px; background: var(--tl-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%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 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.tl-editorial__content > .is-style-tl-tip::before,
.is-root-container .is-style-tl-tip::before { background: var(--tl-positive-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/%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 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Share row (wider than the text column) */
.tl-editorial__body > .tl-share { justify-content: space-between; margin-block-start: 2.25rem; padding: 1rem 1.25rem; border-radius: 14px; background: #f3f7fd; }
.tl-editorial .tl-share__link--facebook { border-color: #1769dd; background: #1769dd; color: #fff; }
.tl-editorial .tl-share__link--linkedin { border-color: #0a66c2; background: #0a66c2; color: #fff; }
.tl-editorial .tl-share__link--facebook:hover,
.tl-editorial .tl-share__link--linkedin:hover { filter: brightness(1.08); }

/* More reading (inside the article card) */
.tl-editorial__article > .tl-editorial__related { padding: 0 clamp(1.25rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem) !important; }
.tl-editorial__related .tl-blog-card--row { box-shadow: 0 1px 2px rgba(23, 54, 93, .04), 0 6px 18px rgba(23, 54, 93, .05); }

@media (max-width: 767px) {
	.tl-editorial__article > .tl-editorial__cover { aspect-ratio: 2 / 1; }
	.tl-toc--editorial .tl-toc__list { grid-template-columns: minmax(0, 1fr); }
	.tl-editorial__content > .wp-block-image.alignright,
	.tl-editorial__content > .wp-block-image.alignleft,
	.tl-editorial__content > figure.alignright,
	.tl-editorial__content > figure.alignleft { float: none; width: auto; max-width: 100%; margin: 1.5rem 0; }
	.tl-editorial__content .tl-cta__body { grid-template-columns: minmax(0, 1fr); }
	.tl-editorial__content .tl-cta__body > .tl-cta__actions { grid-column: 1; grid-row: auto; margin-top: .85rem !important; }
}

@media (max-width: 639px) {
	.wp-block-group.tl-editorial__article { border-radius: 16px; }
	.tl-editorial__content > .wp-block-group.tl-cta { grid-template-columns: minmax(0, 1fr); padding: 1.15rem; }
	.tl-editorial__content .tl-cta__icon { width: 52px; height: 52px; }
	.tl-editorial__content .tl-cta__icon svg { width: 26px; height: 26px; }
	.tl-editorial__body > .tl-share { padding: .9rem; }
}

/* ------------------------------------------------------------------ */
/* 10. Motion preferences                                               */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.tl-cat-card:hover,
	.tl-calc-card:hover,
	.tl-dir-card:hover { transform: none !important; }
}

/* ---------------- 0.1.11.5: new calculators and "Takaisin ylös" ---------------- */

/* Front page: five or six cards in two even rows of three on wide screens (instead of 4 + 2).
   0.1.12.0: four cards (and seven or more in a customised grid) use the base four columns. */
@media (min-width: 1100px) {
	.tl-grid--calculators:has(> .tl-calc-card:nth-child(5)):not(:has(> .tl-calc-card:nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Tietoa page: nine or ten calculators in two rows of five; 0.1.12.0: eleven or more in rows of four (12 = 4 × 3). */
	.tl-about-calc-grid:has(> :nth-child(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.tl-about-calc-grid:has(> :nth-child(11)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Long calculator names wrap at word boundaries; the new long title has soft hyphens
   ("Lämmitys­muotojen kannattavuus­laskuri") for narrow cards. break-word is only a last-resort safety net. */
.tl-calc-card .tl-calc-card__title,
.tl-dir-card .tl-dir-card__title,
.tl-about-calc__title { overflow-wrap: break-word; }

/* Directory photo crops for the new cards. */
.tl-dir-card:has(.tl-dir-art--ev) { --tl-art-position: 80% 62%; }
.tl-dir-card:has(.tl-dir-art--heating) { --tl-art-position: 76% 45%; }
/* 0.1.12.0: finance calculators (crops of the calculators' own hero photos). */
.tl-dir-card:has(.tl-dir-art--vehiclefinance) { --tl-art-position: 62% 60%; }
.tl-dir-card:has(.tl-dir-art--machinefinance) { --tl-art-position: 66% 58%; }

/* "Takaisin ylös" – floating, hidden until the page has been scrolled. */
.tl-back-to-top {
	position: fixed;
	right: max(1.25rem, env(safe-area-inset-right, 0px) + .75rem);
	bottom: max(1.25rem, env(safe-area-inset-bottom, 0px) + .75rem);
	z-index: 90;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: var(--tl-primary);
	color: #fff;
	box-shadow: 0 6px 18px rgba(23, 54, 93, .22);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease, box-shadow .15s ease;
}
.tl-back-to-top[hidden] { display: none; }
.tl-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .15s ease, box-shadow .15s ease;
}
.tl-back-to-top:hover { background: var(--tl-primary-dark); box-shadow: 0 8px 22px rgba(23, 54, 93, .3); }
.tl-back-to-top:focus-visible { outline: 3px solid var(--tl-navy); outline-offset: 3px; }
.tl-back-to-top svg { display: block; }
@media (max-width: 599px) {
	.tl-back-to-top { width: 44px; height: 44px; right: max(.85rem, env(safe-area-inset-right, 0px) + .5rem); bottom: max(.85rem, env(safe-area-inset-bottom, 0px) + .5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.tl-back-to-top, .tl-back-to-top.is-visible { transition: none; transform: none; }
}
@media print {
	.tl-back-to-top { display: none !important; }
}