/*!
 * kutri-landing.css — TT25 landing-page element library (.kc-lp-*)
 * ----------------------------------------------------------------------------
 * Generated BY HAND from research/tt25-patterns/01-foundation-contract.md
 * (the authoritative contract) + the chosen-variant look in
 * research/landing-fragments/el-*.html. The fragments' .c-* / var(--cat-*)
 * vocabulary does NOT exist in production — every rule here is rewritten
 * against the real tokens (kutri-tokens.css) and consumes the colour-modifier
 * var layer (--kc-lp-*) that the five colour block-style variations set.
 *
 * CONTRACT (do not break):
 *   - RUCSS-safe: every selector starts with `.kc-` (safelist /^\.kc-/).
 *   - Reuse existing primitives from kutri-components.css
 *     (.kc-wrap / .kc-h2 / .kc-eyebrow / .kc-lead / .kc-card / .kc-grid /
 *      .kc-rating / .kc-price / .kc-divbar …). This file only ADDS .kc-lp-*.
 *   - Icons: regular Phosphor face only via `.kc-icon.kc-ic-<name>` — NEVER
 *     `.ph-*`, never `ph-bold`/`ph-fill` (separate woff2 we do not ship).
 *   - Rouhea/rohkea + Swiss: NO box-shadow (borders instead), NO gradients,
 *     NO 100vw (width:100%), NO 1px hairline accent borders / asymmetric thick
 *     edges — separation = solid fills + whitespace + thick SYMMETRIC borders
 *     (3–10px) or thick top/bottom bars. radius = var(--radius) (6px).
 *   - Colours: brand tokens only (no green). Text on a band = var(--kc-lp-on).
 *   - a11y: keltainen never carries white text (baked into §colour variations);
 *     secondary text may use --text-secondary #23485c, headings/primary stay
 *     laivasto/black.
 *
 * Dep: kutri-components (front-end), enqueued conditionally on landing markup.
 * ============================================================================ */


/* ============================================================================
 * 1. .kc-lp-sec — the ONE new primitive: a var-driven full-bleed band.
 *    Re-establishes the consumer-scope vars the reused .kc-* library needs
 *    (they were defined only on .kutri-canvas-inner, which renders on no TT25
 *    page) AND paints the swappable band + owns H/V padding. (Contract C1.)
 * ========================================================================== */
.kc-lp-sec {
	/* re-establish the consumer-scope vars the .kc-* library needs */
	--kc-border: 1px solid rgba(9, 79, 124, .18);
	--kc-max: 1200px;
	--kc-max-narrow: 920px;
	--kc-fs-body: 1.0625rem;
	--kc-fs-h1: 2.5rem;
	--kc-fs-h2: 2rem;
	--kc-fs-h3: 1.25rem;
	--kc-fs-price: 1.5rem;
	--kc-fs-stat: 2.5rem;
	--kc-fs-small: .875rem;
	--kc-fs-eyebrow: .8125rem;

	/* default colour-modifier values (overridden by the colour variations).
	   These keep an un-styled landing section legible (white band, dark text). */
	--kc-lp-accent: var(--color-petrooli);
	--kc-lp-accent-deep: var(--color-laivasto);
	--kc-lp-on: var(--color-laivasto);
	--kc-lp-tint: var(--surface-1);
	--kc-lp-star: var(--color-keltaoranssi);
	--kc-lp-marker: var(--color-keltaoranssi);
	--kc-lp-cta-bg: var(--color-petrooli);
	--kc-lp-cta-text: var(--color-valkoinen);

	/* the band itself: default white; per-element band-mode rule overrides */
	--kc-lp-bg: var(--color-valkoinen);
	background: var(--kc-lp-bg);
	color: var(--kc-lp-on);
	width: auto;
	padding: var(--space-8) clamp(1.125rem, .5rem + 3vw, 2rem); /* band owns H+V padding */
}

/* The reused .kc-wrap owns the inner max-width constrain (now --kc-max resolves).
   The band already owns horizontal padding, so the wrap adds none. */

/* Defensive placeholder: empty-src / src-less images in a band render a neutral
   box, not the browser's broken-image glyph. Katri's real media overrides it.
   min-height keeps the layout CLS-safe before media is attached. */
.kc-lp-sec img[src=""], .kc-lp-sec img:not([src]) { min-height: 8rem; background: var(--color-bg-sininen); }
/* Generic inline icon+text row: wraps a kutri/icon block + its paragraph so the
 * icon stays OUT of the paragraph's RichText (a block can't live inside another
 * block's text — the editor would hoist it). The wrapped paragraph keeps its own
 * class/styling; this handles only layout. For eyebrows, trust/price/plus lines. */
.kc-lp-iconrow { display: flex; align-items: flex-start; gap: .5em; flex-wrap: nowrap; }
.kc-lp-iconrow > .kc-icon { flex: none; line-height: 1.5; }
.kc-lp-iconrow > p { margin: 0; flex: 1; min-width: 0; }


/* ============================================================================
 * 2. Five colour style-variations (register_block_style on core/group).
 *    Each SETS the --kc-lp-* var layer consumed by every element below.
 *    Anchored on .kc-lp-sec → starts with .kc- (RUCSS) + scoped to landings.
 *    Table verbatim from contract §3.
 * ========================================================================== */
.kc-lp-sec.is-style-kc-lp-petrooli {
	--kc-lp-accent: var(--color-petrooli);
	--kc-lp-accent-deep: var(--color-laivasto);
	--kc-lp-on: var(--color-valkoinen);
	--kc-lp-tint: var(--color-bg-sininen);
	--kc-lp-star: var(--color-keltaoranssi);
	--kc-lp-cta-bg: var(--color-keltaoranssi);
	--kc-lp-cta-text: var(--color-laivasto);
}

/* Keltainen contrast rule baked in: on = laivasto (yellow+white fails WCAG),
   star = petrooli (keltaoranssi star on a keltaoranssi band is invisible),
   cta = petrooli (yellow CTA on a yellow band would vanish). */
.kc-lp-sec.is-style-kc-lp-keltainen {
	--kc-lp-accent: var(--color-keltaoranssi);
	--kc-lp-accent-deep: var(--color-laivasto);
	--kc-lp-on: var(--color-laivasto);
	--kc-lp-tint: var(--color-bg-oranssi);
	--kc-lp-star: var(--color-petrooli);
	--kc-lp-cta-bg: var(--color-petrooli);
	--kc-lp-cta-text: var(--color-valkoinen);
}

.kc-lp-sec.is-style-kc-lp-vaaleansininen {
	--kc-lp-accent: var(--color-keskisininen);
	--kc-lp-accent-deep: var(--color-petrooli);
	--kc-lp-on: var(--color-valkoinen);
	--kc-lp-tint: var(--color-bg-sininen);
	--kc-lp-star: var(--color-keltaoranssi);
	--kc-lp-cta-bg: var(--color-keltaoranssi);
	--kc-lp-cta-text: var(--color-laivasto);
}

.kc-lp-sec.is-style-kc-lp-valkoinen {
	--kc-lp-accent: var(--color-petrooli);
	--kc-lp-accent-deep: var(--color-laivasto);
	--kc-lp-on: var(--color-laivasto);
	--kc-lp-tint: var(--surface-1);
	--kc-lp-star: var(--color-keltaoranssi);
	--kc-lp-cta-bg: var(--color-petrooli);
	--kc-lp-cta-text: var(--color-valkoinen);
}

.kc-lp-sec.is-style-kc-lp-pinkki {
	--kc-lp-accent: var(--color-petrooli);
	--kc-lp-accent-deep: var(--color-laivasto);
	--kc-lp-on: var(--color-laivasto);
	--kc-lp-tint: var(--color-bg-pinkki);
	--kc-lp-star: var(--color-petrooli);
	--kc-lp-cta-bg: var(--color-petrooli);
	--kc-lp-cta-text: var(--color-valkoinen);
}

/* --kc-lp-marker is keltaoranssi for every colour EXCEPT keltainen, where it
   flips to petrooli (a keltaoranssi marker on a keltaoranssi band is invisible —
   same contrast rule already applied to --kc-lp-star). */
.kc-lp-sec[class*="is-style-kc-lp-"] {
	--kc-lp-marker: var(--color-keltaoranssi);
}
.kc-lp-sec.is-style-kc-lp-keltainen {
	--kc-lp-marker: var(--color-petrooli);
}


/* ============================================================================
 * 3. Shared landing helpers (reused across many elements; all .kc-lp-*).
 * ========================================================================== */

/* When the band is in accent or accent-deep mode, reused .kc-* primitives must
   read as on-band: headings/eyebrow/lead inherit --kc-lp-on. These rules ride
   the .kc-lp-sec scope so they never leak to the canvas library. */
.kc-lp-sec.kc-lp-on-band .kc-h2,
.kc-lp-sec.kc-lp-on-band .kc-eyebrow,
.kc-lp-sec.kc-lp-on-band .kc-lead { color: var(--kc-lp-on); }
.kc-lp-sec.kc-lp-on-band .kc-lead { opacity: .92; }

/* Section eyebrow icon spacing inside landing sections. */
.kc-lp-sec .kc-eyebrow .kc-icon { font-size: 1em; margin-right: .35em; vertical-align: -.08em; }
/* Eyebrow rendered as kutri/icon-row (pikastartti, pricing): the row's own gap
   already spaces the icon — the inline margin-right above would double it. */
.kc-lp-sec .kc-lp-iconrow.kc-eyebrow > .kc-icon { margin-right: 0; }

/* SINGLE SOURCE OF TRUTH for band↔CTA pairing. Every primary (non-outline) button
   in a landing section reads the band's --kc-lp-cta-* pair (set per colour in §2),
   so a petrooli band gets a keltaoranssi CTA, keltainen flips to petrooli, etc.
   :hover/:focus pinned so the colour can't flash back. Outline buttons stay
   outline: transparent fill, on-band text + border. Note: pattern-level WP preset
   colour classes (e.g. .has-petrooli-color on outline buttons) carry !important and
   still win where present — intentional, see report. */
.kc-lp-sec .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.kc-lp-sec .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.kc-lp-sec .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--kc-lp-cta-bg);
	color: var(--kc-lp-cta-text);
}
.kc-lp-sec .wp-block-button.is-style-outline .wp-block-button__link,
.kc-lp-sec .wp-block-button.is-style-outline .wp-block-button__link:hover,
.kc-lp-sec .wp-block-button.is-style-outline .wp-block-button__link:focus {
	color: var(--kc-lp-on);
	/* img-14: currentColor, NOT var(--kc-lp-on) — outline buttons that carry a WP
	   preset text colour (has-*-color wins with !important) must get a border in
	   that SAME colour; a fixed on-colour border mismatched the text. */
	border-color: currentColor;
}

/* ---- 3.1 rating (kutri/rating block) — shared star rating ----------------
 * Markup is server-rendered by kutri-core includes/blocks/rating/render.php
 * (contract: .kc-lp-rating > .kc-lp-rating-track > .kc-lp-rating-fill, plus an
 * optional .kc-lp-rating-num when showNumber). Reused across landing patterns
 * (xsell, testimonials, …). Track = dim/empty star layer; fill = colour layer
 * absolutely overlaid and clipped to width:% for fractional stars. Track + fill
 * share identical font metrics/letter-spacing so the overlay lines up
 * glyph-for-glyph. Colour comes from the --c-* variant class; size from
 * --s/--m/--l (m ≈ the old .kc-lp-xsell-stars 1.2rem). */
.kc-lp-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.kc-lp-rating-track {
	position: relative;
	display: inline-block;
	letter-spacing: .12em;
	color: rgba(9, 79, 124, .22); /* muted empty-star layer (petrooli dim, matches --kc-border) */
}
.kc-lp-rating-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: inherit; /* identical metrics → glyph-for-glyph overlay */
}
/* Fill colour by variant class (--c-auto is band-aware via --kc-lp-star). */
.kc-lp-rating--c-auto .kc-lp-rating-fill { color: var(--kc-lp-star); }
.kc-lp-rating--c-keltaoranssi .kc-lp-rating-fill { color: var(--color-keltaoranssi); }
.kc-lp-rating--c-petrooli .kc-lp-rating-fill { color: var(--color-petrooli); }
.kc-lp-rating--c-valkoinen .kc-lp-rating-fill { color: var(--color-valkoinen); }
/* Sizes (type tokens from kutri-tokens.css). */
.kc-lp-rating--s { font-size: var(--text-base); }
.kc-lp-rating--m { font-size: var(--text-xl); }
.kc-lp-rating--l { font-size: var(--text-3xl); }
.kc-lp-rating-num { font-weight: var(--weight-bold); color: var(--color-laivasto); }
/* Number typography overrides (kutri/rating 0.2.0 numSize/numWeight): the
 * default stays the old look (star-size + bold); these only fire when the
 * editor picks something else. */
.kc-lp-rating-num--s { font-size: var(--text-sm); }
.kc-lp-rating-num--m { font-size: var(--text-base); }
.kc-lp-rating-num--l { font-size: var(--text-xl); }
.kc-lp-rating-num--norm { font-weight: var(--weight-normal); }
/* Review count "(11 arviota)" — calm and small next to the stars; inherits the
 * surrounding text colour so it stays readable on every band. */
.kc-lp-rating-count { font-size: var(--text-sm); font-weight: var(--weight-normal); color: inherit; white-space: nowrap; }


/* ============================================================================
 * 4. ELEMENT FAMILIES (contract C10). One element = one class family.
 *    Per-element BAND-MODE rule (contract C5) sets --kc-lp-bg deterministically.
 * ========================================================================== */

/* ---- 4.1 trust-bar (accent band) — the worked-example template ----------- */
.kc-lp-trust.is-style-kc-lp-petrooli,
.kc-lp-trust.is-style-kc-lp-keltainen,
.kc-lp-trust.is-style-kc-lp-vaaleansininen,
.kc-lp-trust.is-style-kc-lp-valkoinen,
.kc-lp-trust.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-trust { padding-block: var(--space-6); }
.kc-lp-trust-row {
	display: flex;
	gap: var(--space-3) var(--space-6);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.kc-lp-trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	color: var(--kc-lp-on);
	font-weight: var(--weight-semibold);
	line-height: 1.3;
}
.kc-lp-trust-item p { margin: 0; color: var(--kc-lp-on); }
.kc-lp-trust-item .kc-icon { font-size: 1.4em; flex: none; }
.kc-lp-trust-item .kc-ic-star { color: var(--kc-lp-star); }
/* keltainen: the star must not be keltaoranssi-on-keltaoranssi (already handled
   by --kc-lp-star = petrooli for keltainen). */


/* ---- 4.2 hero (tint band) — H1, keltainen CTA baked, one .kutri-marker --- */
.kc-lp-hero.is-style-kc-lp-petrooli,
.kc-lp-hero.is-style-kc-lp-keltainen,
.kc-lp-hero.is-style-kc-lp-vaaleansininen,
.kc-lp-hero.is-style-kc-lp-valkoinen,
.kc-lp-hero.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-hero { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-hero-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.kc-lp-hero-text h1,
.kc-lp-hero-text .kc-h1 {
	font-size: var(--text-6xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--color-laivasto);
	margin: 0;
	max-width: 20ch;
}
.kc-lp-hero-benefits {
	margin: var(--space-5) 0 0;
	display: grid;
	gap: var(--space-3);
	max-width: 46ch;
	color: var(--color-laivasto);
}
.kc-lp-hero-benefit {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	line-height: 1.45;
}
.kc-lp-hero-benefit p { margin: 0; flex: 1; min-width: 0; }
/* img-2: icon line-height matches the text line so flex-start centres the glyph on
   the first line (was align:baseline → icon poked above the cap). */
.kc-lp-hero-benefits .kc-icon { flex: none; font-size: 1.15em; line-height: 1.45; color: var(--kc-lp-accent); }
.kc-lp-hero-cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-5);
}
/* img-2: equal-width CTA buttons (were 262 vs 334px). flex:1 1 0 → both share the
   row equally; on wrap each is full-width. Link fills + centres its label. */
.kc-lp-hero-cta .wp-block-button { flex: 1 1 0; }
.kc-lp-hero-cta .wp-block-button__link { width: 100%; text-align: center; }
.kc-lp-hero-trust {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-laivasto);
	display: inline-flex;
	gap: var(--space-2);
	align-items: baseline;
}
.kc-lp-hero-trust .kc-icon { flex: none; color: var(--kc-lp-accent); }
/* media facade for the split layout */
.kc-lp-hero-media {
	aspect-ratio: 4 / 3;
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-5);
}
.kc-lp-hero-media .kc-icon { font-size: clamp(3rem, 7vw, 5rem); }
.kc-lp-hero-media-label { font-weight: var(--weight-semibold); font-size: var(--text-base); }


/* ---- 4.3 authority (logo bar) — tint band; petrooli drops cell borders --- */
.kc-lp-authority.is-style-kc-lp-petrooli,
.kc-lp-authority.is-style-kc-lp-keltainen,
.kc-lp-authority.is-style-kc-lp-vaaleansininen,
.kc-lp-authority.is-style-kc-lp-valkoinen,
.kc-lp-authority.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-authority { padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.kc-lp-authority-title {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--weight-bold);
	color: var(--text-secondary);
	margin: 0 0 var(--space-4);
}
.kc-lp-authority-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: stretch;
}
.kc-lp-authority-item {
	flex: 1 1 9rem;
	min-width: 9rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: var(--space-3) var(--space-4);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent);
	border-radius: var(--radius);
}
.kc-lp-authority-item .kc-icon {
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: .2rem;
	color: var(--kc-lp-accent-deep);
}
.kc-lp-authority-name { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.15; }
.kc-lp-authority-sub { font-size: var(--text-sm); line-height: 1.25; color: var(--text-secondary); }
/* All five colour styles share the boxed variant (Phase 1b). The borderless inline
   line-list look moves to a dedicated lp-authority-inline pattern in Phase 3. */

/* ---- 4.3b authority-inline — the borderless sibling (Phase 3) ------------- */
/* Same tint band as lp-authority (dark text on a light tint — no on-band). The
   inline pattern reuses .kc-lp-authority-title for its heading; only the list +
   its rows are a new family. Every signal is a laatikoton one-line pill: icon
   BESIDE the text (the removed petrooli deviation — transparent bg, border 0,
   centred, sub hidden). */
.kc-lp-authority-inline.is-style-kc-lp-petrooli,
.kc-lp-authority-inline.is-style-kc-lp-keltainen,
.kc-lp-authority-inline.is-style-kc-lp-vaaleansininen,
.kc-lp-authority-inline.is-style-kc-lp-valkoinen,
.kc-lp-authority-inline.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-authority-inline { padding-block: clamp(1.6rem, 4vw, 2.4rem); }
/* the list centres its rows and wraps onto more lines on narrow screens */
.kc-lp-authority-inline-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-4);
}
/* each row is also .kc-lp-iconrow (layout) — this strips the box: no bg, no
   border, size to content so the pills read as one centred band */
.kc-lp-authority-inline-list .kc-lp-iconrow {
	flex: none;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0;
}
.kc-lp-authority-inline-list .kc-lp-iconrow > .kc-icon { font-size: 1.5rem; line-height: 1; color: var(--kc-lp-accent); }
.kc-lp-authority-inline-list .kc-lp-iconrow > p { flex: none; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.15; color: var(--color-laivasto); }


/* ---- 4.4 pain-points (white band) — keskitie look: white cards, thick border */
.kc-lp-pain { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-pain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-pain-card {
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-pain-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius);
	font-size: 1.5rem;
	margin-bottom: .9rem;
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-pain-h { font-size: var(--text-lg); line-height: 1.3; margin: 0 0 .4rem; font-weight: var(--weight-semibold); }
.kc-lp-pain-h strong { font-weight: var(--weight-bold); }
.kc-lp-pain-p { margin: 0; line-height: 1.5; font-size: var(--text-base); color: var(--text-secondary); }
.kc-lp-pain-close {
	margin-top: var(--space-6);
	font-weight: var(--weight-semibold);
	font-size: var(--text-lg);
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	color: var(--color-laivasto);
}
.kc-lp-pain-close .kc-icon { color: var(--kc-lp-marker); flex: none; }


/* ---- 4.5 tabs (self-segmentation) — tint band; kutri/tabs block ---------- */
.kc-lp-tabs-sec.is-style-kc-lp-petrooli,
.kc-lp-tabs-sec.is-style-kc-lp-keltainen,
.kc-lp-tabs-sec.is-style-kc-lp-vaaleansininen,
.kc-lp-tabs-sec.is-style-kc-lp-valkoinen,
.kc-lp-tabs-sec.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-tabs-sec { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-tabs { margin-top: var(--space-6); }
.kc-lp-tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}
.kc-lp-tabs-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	padding: .5rem 1.1rem;
	border: var(--border-2) solid var(--kc-lp-accent);
	border-radius: var(--radius-full);
	font-family: inherit;
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	line-height: 1.2;
	color: var(--kc-lp-accent-deep);
	background: var(--color-valkoinen);
	cursor: pointer;
}
.kc-lp-tabs-chip .kc-icon { font-size: 1.1em; flex: none; }
.kc-lp-tabs-chip[aria-selected="true"] {
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	border-color: var(--kc-lp-accent);
}
.kc-lp-tabs-chip:focus-visible {
	outline: 3px solid var(--kc-lp-accent-deep);
	outline-offset: 2px;
}
.kc-lp-tabs-panel {
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent);
	border-radius: var(--radius);
	padding: clamp(1.2rem, 3vw, 1.6rem);
}
.kc-lp-tabs-panel[hidden] { display: none; }
.kc-lp-tabs-quote {
	margin: 0 0 var(--space-5);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--kc-lp-accent-deep);
}
.kc-lp-tabs-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-5) var(--space-6);
}
.kc-lp-tabs-colhead { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-laivasto); }
.kc-lp-tabs-list-ul { margin: 0; padding-left: 1.2rem; }
.kc-lp-tabs-list-ul li { margin-bottom: var(--space-2); line-height: 1.5; }

/* Numbered chip badge (chipStyle="number"): a filled accent circle, NOT a
   rounded underline. Inverts on the selected chip's accent fill. */
.kc-lp-tabs-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.7em;
	block-size: 1.7em;
	flex: none;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-size: .85em;
	font-weight: var(--weight-bold);
	line-height: 1;
}
.kc-lp-tabs-chip[aria-selected="true"] .kc-lp-tabs-num {
	background: var(--color-valkoinen);
	color: var(--kc-lp-accent-deep);
}

/* Media layout (layout="media"): 3:4 image left, size-adjustable text right. */
.kc-lp-tabs-panel--media {
	display: grid;
	grid-template-columns: 1fr;          /* mobile: stack, image on top */
	gap: var(--space-5);
	align-items: start;
}
@media (min-width: 640px) {
	/* Positive selectors only — RUCSS tree-shakes :not() even when .kc- is
	   safelisted (feedback-rucss-landing-css-deploy). The --noimg reset comes
	   AFTER --media so it wins at equal specificity for panels carrying both. */
	.kc-lp-tabs-panel--media {
		grid-template-columns: clamp(160px, 34%, 300px) 1fr;
		gap: var(--space-6);
	}
	.kc-lp-tabs-panel--noimg { grid-template-columns: 1fr; }  /* no image → text full width */
}
.kc-lp-tabs-media {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-sininen);
}
.kc-lp-tabs-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* Editor-only placeholder box when no image is chosen yet. */
.kc-lp-tabs-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	border: 2px dashed var(--kc-lp-accent);
	color: var(--kc-lp-accent-deep);
	text-align: center;
	font-size: var(--text-sm);
	line-height: 1.4;
}
.kc-lp-tabs-body { min-inline-size: 0; }
.kc-lp-tabs-bhead {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}
.kc-lp-tabs-bname { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-laivasto); }
/* Description body — italic quote look, accent-deep, NO left accent bar (border ban). */
.kc-lp-tabs-btext { font-style: italic; color: var(--kc-lp-accent-deep); }
.kc-lp-tabs-btext > :first-child { margin-top: 0; }
.kc-lp-tabs-btext > :last-child { margin-bottom: 0; }
.kc-lp-tabs-btext.kc-ts-s  { font-size: var(--text-base); }
.kc-lp-tabs-btext.kc-ts-m  { font-size: var(--text-lg); }
.kc-lp-tabs-btext.kc-ts-l  { font-size: var(--text-xl); }
.kc-lp-tabs-btext.kc-ts-xl { font-size: var(--text-2xl); }


/* ---- 4.6 use-cases (white band) — featured demo + numbered cards --------- */
.kc-lp-usecases { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-usecases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
	align-items: start;
}
.kc-lp-usecases-demo {
	background: var(--color-laivasto);
	color: var(--color-valkoinen);
	border-radius: var(--radius);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.kc-lp-usecases-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	font-weight: var(--weight-bold);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	padding: .35rem .7rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-marker);
	color: var(--color-laivasto);
}
.kc-lp-usecases-row { display: flex; flex-direction: column; gap: var(--space-2); }
.kc-lp-usecases-row--ai { padding-top: var(--space-4); border-top: var(--border-3) solid currentColor; }
.kc-lp-usecases-label {
	font-weight: var(--weight-bold);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-title);
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	opacity: .9;
}
.kc-lp-usecases-you,
.kc-lp-usecases-ai { margin: 0; font-size: var(--text-base); line-height: 1.5; }
.kc-lp-usecases-ai { font-style: italic; }
.kc-lp-usecases-note { margin: 0; font-size: var(--text-sm); opacity: .9; }
.kc-lp-usecases-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-4);
}
.kc-lp-usecases-card {
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-tint);
	border-radius: var(--radius);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.kc-lp-usecases-card p { margin: 0; }
.kc-lp-usecases-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-size: 1.5rem;
}
.kc-lp-usecases-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
}
.kc-lp-usecases-cardh {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.kc-lp-usecases-cardh .kc-icon { color: var(--kc-lp-accent-deep); font-size: 1.25em; flex: none; }
.kc-lp-usecases-cardp { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); }
.kc-lp-usecases-teaser {
	margin-top: var(--space-6);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-laivasto);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.kc-lp-usecases-teaser a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 3px;
	text-decoration-color: var(--kc-lp-accent);
}


/* ---- 4.7 qualifier (accent band) — kyllä/ei boxes ------------------------ */
.kc-lp-qualifier.is-style-kc-lp-petrooli,
.kc-lp-qualifier.is-style-kc-lp-keltainen,
.kc-lp-qualifier.is-style-kc-lp-vaaleansininen,
.kc-lp-qualifier.is-style-kc-lp-valkoinen,
.kc-lp-qualifier.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-qualifier { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-qualifier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
}
.kc-lp-qualifier-box {
	border-radius: var(--radius);
	padding: var(--space-5);
}
/* "kyllä" box: vaaleansininen-leaning bright fill (keskisininen-a11y) so it
   dominates and reads on the accent band; on-text white. */
.kc-lp-qualifier-box--yes {
	background: var(--color-keskisininen-a11y);
	color: var(--color-valkoinen);
}
/* "ei" box: white, thick symmetric laivasto border. */
.kc-lp-qualifier-box--no {
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--color-laivasto);
}
.kc-lp-qualifier-head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	margin: 0 0 var(--space-4);
	line-height: 1.25;
}
.kc-lp-qualifier-head .kc-icon { font-size: 1.5em; flex: none; }
.kc-lp-qualifier-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.kc-lp-qualifier-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	line-height: 1.45;
}
.kc-lp-qualifier-item p { margin: 0; flex: 1; min-width: 0; }
.kc-lp-qualifier-list .kc-icon { font-size: 1.2em; flex: none; margin-top: .1rem; }
.kc-lp-qualifier-affirm {
	margin-top: var(--space-5);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	max-width: 60ch;
	color: var(--kc-lp-on);
}
.kc-lp-qualifier-offramp { margin-top: var(--space-2); }
.kc-lp-qualifier-offramp a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	font-weight: var(--weight-semibold);
	color: var(--kc-lp-on);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ---- 4.8 course-contents (tint band) — 3-asiaa summary bigger ----------- */
.kc-lp-contents.is-style-kc-lp-petrooli,
.kc-lp-contents.is-style-kc-lp-keltainen,
.kc-lp-contents.is-style-kc-lp-vaaleansininen,
.kc-lp-contents.is-style-kc-lp-valkoinen,
.kc-lp-contents.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-contents { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-contents-sumlabel {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	letter-spacing: var(--ls-title);
	margin: var(--space-5) 0 var(--space-3);
	color: var(--color-laivasto);
}
/* "3 asiaa" summary — deliberately bigger per the plan tweak. */
.kc-lp-contents-summary {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.kc-lp-contents-sumitem {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-lg);
	line-height: 1.5;
	color: var(--color-laivasto);
}
.kc-lp-contents-sumitem p { margin: 0; color: inherit; flex: 1; min-width: 0; }
.kc-lp-contents-summary .kc-icon { flex: none; font-size: 1.5em; color: var(--kc-lp-accent-deep); }
.kc-lp-contents-fulltitle {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	margin: var(--space-7) 0 var(--space-5);
	color: var(--color-laivasto);
}
.kc-lp-contents-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
}
.kc-lp-contents-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: var(--color-valkoinen);
	border: var(--border-3) solid var(--kc-lp-tint);
	border-radius: var(--radius);
	padding: var(--space-5);
}
.kc-lp-contents-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-size: 1.5rem;
}
.kc-lp-contents-body { flex: 1; min-width: 0; }
.kc-lp-contents-h { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1.35; margin: 0 0 .25rem; color: var(--color-laivasto); }
.kc-lp-contents-item p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); }
/* meta pill — selector beats the generic `.kc-lp-contents-item p` (more classes) */
.kc-lp-contents-item .kc-lp-contents-val {
	display: inline-block;
	margin: 0 0 .35rem;
	padding: .12rem .55rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	white-space: nowrap;
}
.kc-lp-contents-plus {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.5;
	color: var(--color-laivasto);
}
.kc-lp-contents-plus p { margin: 0; color: inherit; flex: 1; min-width: 0; }
.kc-lp-contents-plus .kc-icon { flex: none; font-size: 1.4em; color: var(--kc-lp-accent-deep); }


/* ---- 4.9 curriculum (white band) — numbered <details> modules ----------- */
/* Modules = native core/details (className .kc-lp-curriculum-mod → renders as
   .wp-block-details.kc-lp-curriculum-mod) inside a kutri/lista container. The
   <summary> holds only the plain module title: the 01–06 number is a CSS
   counter on .kc-lp-curriculum-list (auto-renumbers on add/remove/reorder) and
   the +/× toggle glyph is a CSS pseudo-element on the summary. Body = real
   core/paragraph + core/list blocks (no wrapper div). The legacy
   .kc-lp-curriculum-summary/-num/-title/-glyph/-body/-sub rules further down are
   TRANSITIONAL — saved test pages still carry the old raw-<details> markup until
   the Phase 6 regen; remove them once no saved page uses them. */
.kc-lp-curriculum { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-curriculum-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--space-5);
	counter-reset: kc-lp-curriculum;
}
.kc-lp-curriculum-mod {
	border-bottom: var(--border-3) solid var(--color-laivasto);
	border-radius: 0;
}
.kc-lp-curriculum-mod:first-child { border-top: var(--border-3) solid var(--color-laivasto); }
.kc-lp-curriculum-mod > summary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	cursor: pointer;
	list-style: none;
	min-height: var(--touch-min);
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	color: var(--color-laivasto);
}
.kc-lp-curriculum-mod > summary::-webkit-details-marker { display: none; }
/* img-13: Chrome paints a focus ring around a CLICKED <summary> even though
   :focus-visible is false (verified on live 2026-07-02) — the whole row looked
   "selected". Kill the pointer ring only; KEYBOARD focus keeps the global
   two-tone :focus-visible ring from kutri-base.css. Applies to both accordion
   families (curriculum + faq share the recipe). */
.kc-lp-curriculum-mod > summary:focus:not(:focus-visible),
.kc-lp-faq-item > summary:focus:not(:focus-visible) { outline: none; }
/* Number: CSS counter, styled like the old .kc-lp-curriculum-num. */
.kc-lp-curriculum-mod > summary::before {
	counter-increment: kc-lp-curriculum;
	content: counter(kc-lp-curriculum, decimal-leading-zero);
	flex: none;
	font-weight: var(--weight-bold);
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	line-height: 1;
	min-width: 2.4ch;
	color: var(--color-petrooli); /* C5: petrooli + full opacity (curriculum band is always white) */
}
/* +/× toggle: pushed to the far right; rotates on open (matches old glyph). */
.kc-lp-curriculum-mod > summary::after {
	content: "+";
	flex: none;
	margin-left: auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	font-weight: var(--weight-bold);
	font-size: 2rem;
	line-height: 1;
	color: var(--color-petrooli); /* C5: petrooli (was --kc-lp-accent = yellow on white band) */
	transition: transform .2s var(--ease-standard);
}
.kc-lp-curriculum-mod[open] > summary::after { transform: rotate(45deg); }
/* Body blocks: core/paragraph + core/list, scoped to the details children. */
.kc-lp-curriculum-mod > p { margin: 0 0 var(--space-3); max-width: 62ch; line-height: 1.55; color: var(--color-laivasto); }
.kc-lp-curriculum-mod > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.kc-lp-curriculum-mod > ul > li { position: relative; padding-left: 1.5rem; line-height: 1.45; color: var(--color-laivasto); }
.kc-lp-curriculum-mod > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
}
.kc-lp-curriculum-mod > :last-child { margin-bottom: var(--space-5); }

/* TRANSITIONAL: legacy raw-<details> markup on saved test pages (pre-Phase-6). */
.kc-lp-curriculum-summary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	cursor: pointer;
	list-style: none;
	min-height: var(--touch-min);
}
.kc-lp-curriculum-summary::-webkit-details-marker { display: none; }
.kc-lp-curriculum-num {
	flex: none;
	font-weight: var(--weight-bold);
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	line-height: 1;
	min-width: 2.4ch;
	color: var(--color-petrooli); /* C5: petrooli + full opacity (curriculum band is always white) */
	opacity: 1;
}
.kc-lp-curriculum-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	color: var(--color-laivasto);
}
.kc-lp-curriculum-glyph {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	font-weight: var(--weight-bold);
	font-size: 2rem;
	line-height: 1;
	color: var(--color-petrooli); /* C5: petrooli (was --kc-lp-accent = yellow on white band) */
	transition: transform .2s var(--ease-standard);
}
.kc-lp-curriculum-glyph::before { content: "+"; }
.kc-lp-curriculum-mod[open] .kc-lp-curriculum-glyph { transform: rotate(45deg); }
.kc-lp-curriculum-body { padding: 0 0 var(--space-5); }
.kc-lp-curriculum-body > p { margin: 0 0 var(--space-3); max-width: 62ch; line-height: 1.55; color: var(--color-laivasto); }
.kc-lp-curriculum-sub {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.kc-lp-curriculum-sub li { position: relative; padding-left: 1.5rem; line-height: 1.45; color: var(--color-laivasto); }
.kc-lp-curriculum-sub li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
}
/* img-6: intro lead + outro note span the full block width (= the divider lines). */
.kc-lp-curriculum .kc-lead { max-width: none; }
.kc-lp-curriculum-note { margin-top: var(--space-5); font-weight: var(--weight-semibold); max-width: none; color: var(--color-laivasto); }


/* ---- 4.10 pikastartti (tint band) — flex 2-col; image-left vs image-right */
.kc-lp-pikastartti.is-style-kc-lp-petrooli,
.kc-lp-pikastartti.is-style-kc-lp-keltainen,
.kc-lp-pikastartti.is-style-kc-lp-vaaleansininen,
.kc-lp-pikastartti.is-style-kc-lp-valkoinen,
.kc-lp-pikastartti.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-pikastartti { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-pikastartti-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
/* image (shot) and text are siblings; default = image first (kuva-vasen). */
.kc-lp-pikastartti-shot { flex: 1 1 18rem; min-width: min(100%, 18rem); order: 0; }
.kc-lp-pikastartti-text { flex: 1 1 22rem; min-width: min(100%, 22rem); order: 1; }
/* kuva-oikea modifier flips the order (text leads, shot trails). The two
   patterns differ ONLY by this class. On mobile both stack with shot first. */
.kc-lp-pikastartti--kuva-oikea .kc-lp-pikastartti-shot { order: 1; }
.kc-lp-pikastartti--kuva-oikea .kc-lp-pikastartti-text { order: 0; }
.kc-lp-pikastartti-shot-box {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-valkoinen);
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-pikastartti-chrome {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: .7rem 1rem;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-pikastartti-shot-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-4);
	color: var(--kc-lp-accent-deep);
}
.kc-lp-pikastartti-shot-body .kc-icon { font-size: clamp(2.6rem, 6vw, 4rem); }
.kc-lp-pikastartti-steps {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
	max-width: 46ch;
}
.kc-lp-pikastartti-steps li { display: flex; gap: var(--space-3); align-items: baseline; line-height: 1.45; color: var(--color-laivasto); }
.kc-lp-pikastartti-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: var(--radius);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	transform: translateY(.1rem);
}
.kc-lp-pikastartti-note {
	margin-top: var(--space-5);
	font-size: var(--text-sm);
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	max-width: 52ch;
	color: var(--color-laivasto);
}
.kc-lp-pikastartti-note .kc-icon { flex: none; color: var(--kc-lp-accent-deep); }


/* ---- 4.11 app-spotlight (accent band) — screenshots + features + stats --- */
.kc-lp-app.is-style-kc-lp-petrooli,
.kc-lp-app.is-style-kc-lp-keltainen,
.kc-lp-app.is-style-kc-lp-vaaleansininen,
.kc-lp-app.is-style-kc-lp-valkoinen,
.kc-lp-app.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-app { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-app-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
	align-items: start; /* #1a: aspect-ratio frames define own height, tops align */
}
.kc-lp-app-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.kc-lp-app-shot-frame {
	aspect-ratio: 9 / 16;
	background: var(--color-laivasto);
	color: var(--color-valkoinen);
	border: var(--border-3) solid var(--color-vaaleaturkoosi);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-5);
}
.kc-lp-app-shot-frame .kc-icon { font-size: clamp(2.6rem, 6vw, 3.6rem); }
.kc-lp-app-shot-label { font-weight: var(--weight-bold); font-size: var(--text-base); }
.kc-lp-app-shot-cap { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--kc-lp-on); opacity: .92; }
.kc-lp-app-feats {
	margin: var(--space-6) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-3) var(--space-6);
}
.kc-lp-app-feat {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--kc-lp-on);
}
.kc-lp-app-feat p { margin: 0; flex: 1; min-width: 0; }
.kc-lp-app-feat .kc-icon { font-size: 1.4em; flex: none; color: var(--kc-lp-marker); }
/* Privacy row — emphasized dark companion tile (this is on an accent band). */
.kc-lp-app-privacy {
	margin: var(--space-6) 0 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	line-height: 1.4;
	background: var(--color-laivasto);
	color: var(--color-valkoinen);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
}
.kc-lp-app-privacy .kc-icon { font-size: 1.5em; flex: none; }
/* Numbers strip — LIGHT tile cells on an accent band (never dark-stat trap):
   white box, accent text. */
.kc-lp-app-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-1);
	margin-top: var(--space-5);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--kc-lp-on);
}
.kc-lp-app-stat {
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	padding: var(--space-5) var(--space-4);
	display: flex;
	flex-direction: column;
	height: 100%; /* #1b: equalize stat-cell heights (a wrapping label, not the number, made cell 1 taller) */
	align-items: center;
	justify-content: center;
	gap: .3rem;
	text-align: center;
}
/* #1b: zero the WP flow-layout block-gap margin (margin-block-start) the parent's
   is-layout-flow puts on cells 2+; with it the cells offset ~21px (the "white at
   first square" notch). Removing it aligns all cells top+bottom so the dark
   --kc-lp-on separator reads as one continuous bar; the horizontal grid
   `gap: var(--space-1)` still draws the thin separators (incl. on mobile stack). */
.kc-lp-app-stats > .kc-lp-app-stat { margin-block-start: 0; }
.kc-lp-app-stat-num { font-weight: var(--weight-bold); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; white-space: nowrap; color: var(--kc-lp-accent-deep); }
.kc-lp-app-stat-num .kc-icon { font-size: 1.1em; }
.kc-lp-app-stat-lab { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.kc-lp-app-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }


/* ---- 4.12 results-stats (accent BAND, but light stat boxes) -------------- */
.kc-lp-stats-sec.is-style-kc-lp-petrooli,
.kc-lp-stats-sec.is-style-kc-lp-keltainen,
.kc-lp-stats-sec.is-style-kc-lp-vaaleansininen,
.kc-lp-stats-sec.is-style-kc-lp-valkoinen,
.kc-lp-stats-sec.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-stats-sec { padding-block: clamp(3rem, 6vw, 5rem); }
/* img-17: lead spans the full stat-grid width and is a touch bolder (Lexend is variable). */
.kc-lp-stats-sec .kc-lead { max-width: none; font-weight: var(--weight-medium); }
.kc-lp-stats-grid {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--space-4);
}
/* NEVER dark stat boxes: white cells with thick accent border, dark numbers. */
.kc-lp-stats-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: .45rem;
	padding: var(--space-5) var(--space-4);
	border-radius: var(--radius);
	min-height: var(--touch-min);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent-deep);
}
/* img-17: the icons render as .kc-icon (kutri/icon), NOT .kc-lp-stats-ic — the old
   selector never matched, so they were tiny. Target the real class + enlarge. */
.kc-lp-stats-box .kc-icon { font-size: 2.4rem; line-height: 1; color: var(--kc-lp-accent-deep); }
.kc-lp-stats-num {
	font-weight: var(--weight-bold);
	line-height: 1.1;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem); /* img-17: smaller; no nowrap so long values wrap instead of overflowing */
	letter-spacing: var(--ls-display);
	color: var(--color-laivasto);
}
/* C11: small "YLI" pre-line above the big number (markup adds the span). */
.kc-lp-stats-pre {
	display: block;
	font-size: .42em;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-laivasto); /* img-17: no gray */
}
.kc-lp-stats-unit { font-size: .55em; font-weight: var(--weight-bold); color: var(--color-keltaoranssi); } /* img-17: keltainen star */
.kc-lp-stats-label { font-weight: var(--weight-semibold); line-height: 1.35; font-size: var(--text-base); max-width: 22ch; color: var(--color-laivasto); } /* img-17: no gray */


/* ---- 4.13 compare (×3) — CSS grid, never <table> (contract C8) ----------- */
/* band-mode: rohkea/hillitty = white, keskitie = tint. Coloured CARDS, not band. */
.kc-lp-compare--keskitie.is-style-kc-lp-petrooli,
.kc-lp-compare--keskitie.is-style-kc-lp-keltainen,
.kc-lp-compare--keskitie.is-style-kc-lp-vaaleansininen,
.kc-lp-compare--keskitie.is-style-kc-lp-valkoinen,
.kc-lp-compare--keskitie.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-compare { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
	align-items: stretch; /* #3: within-row equalize (was start) — NO grid-auto-rows (mobile-safe) */
}
/* rohkea/keskitie = bordered card. (hillitty borderless-column variant removed
   2026-07-17 — its 10px top-bar was the banned "content-box top edge" form.) */
.kc-lp-compare-card {
	display: flex;
	flex-direction: column;
	height: 100%; /* #3: fill the stretched cell so both columns + CTAs align */
	position: relative; /* img-12: anchor the absolute "Suosituin" badge */
	border-radius: var(--radius);
	padding: var(--space-5);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
}
.kc-lp-compare-card--paid { border: var(--border-3) solid var(--kc-lp-accent); }
.kc-lp-compare-card--free { border: var(--border-3) solid var(--color-laivasto); }
.kc-lp-compare-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	margin: 0 0 .9rem;
	padding: .3rem .8rem;
	border-radius: var(--radius-full);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	background: var(--color-keltaoranssi);
	color: var(--color-laivasto);
}
/* img-12: lift the "Suosituin" badge out of flow so the paid card/column's title +
   feature rows line up with the free one (badge was pushing them down ~54px). Covers
   both the card variants (rohkea/keskitie) and the borderless hillitty columns. */
.kc-lp-compare-card .kc-lp-compare-badge {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	margin: 0;
	z-index: 1;
}
.kc-lp-compare-title { margin: 0 0 .3rem; font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-laivasto); }
/* img-12: reserve room for the absolute "Suosituin" badge (paid card/column only). */
.kc-lp-compare-card--paid .kc-lp-compare-title { padding-right: 6.5rem; }
.kc-lp-compare-price { margin: 0 0 var(--space-5); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-laivasto); }
/* .kc-hinta-note = the same small line under a price, emitted by the dynamic
   kutri/hinta block instead of being typed into the pattern. */
.kc-lp-compare-price-note,
.kc-hinta-note { display: block; font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-secondary); margin-top: .2rem; }
.kc-lp-compare-list {
	margin: 0 0 var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1 1 auto;
}
/* img-14: baseline (not flex-start) — the smaller bold KYLLÄ/EI must sit on the
   same text baseline as the feature text, not float above it. */
.kc-lp-compare-row { display: flex; align-items: baseline; gap: var(--space-2); line-height: 1.4; font-size: var(--text-base); }
.kc-lp-compare-row p { margin: 0; }
/* TEXT "Kyllä"/"Ei" carries meaning (not colour/icon only); min-width aligns.
   The ✓/— glyph is a CSS ::before on the yn paragraph (icon block dropped). */
.kc-lp-compare-yn {
	font-weight: var(--weight-bold);
	flex: none;
	min-width: 3.2em;
	font-size: var(--text-xs);
	letter-spacing: var(--ls-title);
	text-transform: uppercase;
	color: var(--color-laivasto);
}
.kc-lp-compare-yn--yes::before {
	font-family: "Phosphor";
	content: "\e182";
	margin-right: .4em;
	color: var(--kc-lp-accent);
}
.kc-lp-compare-yn--no::before {
	font-family: "Phosphor";
	content: "\e32a";
	margin-right: .4em;
	color: var(--text-secondary);
}
.kc-lp-compare-yn--no { color: var(--text-secondary); }
.kc-lp-compare-feat { flex: 1 1 0; min-width: 0; }
.kc-lp-compare-feat.is-off { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-secondary); }
.kc-lp-compare-cta { margin-top: auto; align-self: stretch; justify-content: center; }
/* img-12: the free/secondary outline CTA looked weak — WP's 2px outline was thinner
   than the compare cards' border-3. Match the card border weight (scoped to compare). */
.kc-lp-compare-cta .wp-block-button.is-style-outline .wp-block-button__link { border-width: var(--border-3); }
/* The compare CARD is always white (see .kc-lp-compare-card), so the band's
   --kc-lp-on can be the wrong colour on a dark band. Petrooli here replaces the
   per-pattern textColor="petrooli" the CTAs used to hardcode — the pairing
   contract stays the single source of truth for every OTHER button. */
.kc-lp-compare-card .wp-block-button.is-style-outline .wp-block-button__link { color: var(--color-petrooli); }
/* recommendation row after the grid — light bg-sininen tile, no border (img-12).
   Uniform across all three compare variants. */
.kc-lp-compare-reco {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	background: var(--color-bg-sininen);
	color: var(--color-laivasto);
	font-weight: var(--weight-semibold);
	font-size: var(--text-lg);
	max-width: 68ch;
	line-height: 1.5;
}
.kc-lp-compare-reco .kc-icon { font-size: 1.4em; flex: none; margin-top: .05rem; color: var(--kc-lp-accent); }


/* ---- 4.14 testimonials (tint band) -------------------------------------- */
.kc-lp-testimonials.is-style-kc-lp-petrooli,
.kc-lp-testimonials.is-style-kc-lp-keltainen,
.kc-lp-testimonials.is-style-kc-lp-vaaleansininen,
.kc-lp-testimonials.is-style-kc-lp-valkoinen,
.kc-lp-testimonials.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-testimonials { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-testimonials-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent);
}
/* TRANSITIONAL: the pattern now emits a kutri/rating block (§3.1 .kc-lp-rating).
   These -stars rules are retained only so the OLD saved markup on pre-Phase-6
   test pages keeps its look; safe to drop after page regen. */
.kc-lp-testimonials-stars {
	display: flex;
	gap: .15rem;
	font-size: 1.05rem;
	color: var(--color-keltaoranssi); /* stars stay keltaoranssi (semantic, aria-hidden) */
	line-height: 1;
}
.kc-lp-testimonials-stars .kc-icon { color: inherit; }
.kc-lp-testimonials-quote { margin: 0; font-size: var(--text-lg); line-height: 1.45; font-weight: var(--weight-medium); }
.kc-lp-testimonials-card--feat .kc-lp-testimonials-quote { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
/* img-16: pin name + course/date to the BOTTOM of the (equal-height) card. */
.kc-lp-testimonials-cite { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin-top: auto; padding-top: var(--space-4); }
.kc-lp-testimonials-avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: var(--radius-full);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	letter-spacing: var(--ls-title);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-testimonials-name { display: block; font-weight: var(--weight-bold); font-size: var(--text-base); }
.kc-lp-testimonials-role { display: block; font-size: var(--text-sm); color: var(--color-laivasto); } /* img-16: laivasto, not gray */
/* (img-16: the closing "Opinnäytetyökurssi 5,0★ …" summary line was removed from the
   markup, so its .kc-lp-testimonials-close rules were dropped here too.) */


/* ---- 4.15 instructor (white band) — photo + bio 2-col → stack ----------- */
.kc-lp-instructor { padding-block: clamp(3.5rem, 7vw, 6rem); }
.kc-lp-instructor-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-top: var(--space-5);
}
/* photo first in DOM → leads on mobile naturally. */
.kc-lp-instructor-photo {
	aspect-ratio: 4 / 5;
	max-width: 22rem;
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-5);
	background: var(--kc-lp-tint);
	color: var(--kc-lp-accent);
}
.kc-lp-instructor-photo .kc-icon { font-size: clamp(3.5rem, 9vw, 5.5rem); line-height: 1; }
.kc-lp-instructor-photo-name { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-laivasto); }
.kc-lp-instructor-bio { margin: 0 0 var(--space-4); line-height: 1.6; max-width: 54ch; font-size: var(--text-lg); color: var(--color-laivasto); }
.kc-lp-instructor-creds {
	margin: var(--space-5) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-3) var(--space-6);
}
.kc-lp-instructor-cred { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.45; color: var(--color-laivasto); }
.kc-lp-instructor-cred p { margin: 0; flex: 1; min-width: 0; }
.kc-lp-instructor-creds .kc-icon { flex: none; font-size: 1.3em; margin-top: .05rem; color: var(--kc-lp-accent); }
.kc-lp-instructor-quote {
	margin: var(--space-8) auto 0; /* C8: bigger gap above the "Opetan sitä…" quote */
	max-width: 60ch;
	text-align: center;
}
.kc-lp-instructor-quote p { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.45; font-weight: var(--weight-semibold); color: var(--color-laivasto); }
.kc-lp-instructor-quote cite { display: block; margin-top: .9rem; font-style: normal; font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-secondary); }
.kc-lp-instructor-quotemark { display: block; margin: 0 auto .4rem; font-size: 1.8rem; color: var(--kc-lp-accent); }
.kc-lp-instructor-video {
	margin: var(--space-6) auto 0;
	max-width: 48rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	padding: var(--space-5);
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
}
.kc-lp-instructor-play {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-instructor-play .kc-icon { font-size: 1.9rem; }
.kc-lp-instructor-video-label { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.kc-lp-instructor-more { margin-top: var(--space-5); text-align: center; }
.kc-lp-instructor-more a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	font-weight: var(--weight-semibold);
	color: var(--color-petrooli);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ---- 4.16 bonus-stack (tint band) — repeatable bonus items, €-anchor ----- */
.kc-lp-bonus.is-style-kc-lp-petrooli,
.kc-lp-bonus.is-style-kc-lp-keltainen,
.kc-lp-bonus.is-style-kc-lp-vaaleansininen,
.kc-lp-bonus.is-style-kc-lp-valkoinen,
.kc-lp-bonus.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-bonus { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-bonus-list {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
}
/* Repeatable bonus card — bonuses "pop" more: white card, thick accent-deep
   border, gift badge, big €-pill anchor. */
.kc-lp-bonus-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent-deep);
	border-radius: var(--radius);
	padding: var(--space-5);
}
.kc-lp-bonus-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-size: 1.5rem;
}
.kc-lp-bonus-body { flex: 1 1 auto; }
.kc-lp-bonus-h { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.35; margin: 0 0 .3rem; color: var(--color-laivasto); }
.kc-lp-bonus-item p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); }
.kc-lp-bonus-price {
	align-self: flex-start;
	display: inline-block;
	padding: .35rem .9rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	white-space: nowrap;
}
.kc-lp-bonus-extra {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: 1.5;
	color: var(--color-laivasto);
}
.kc-lp-bonus-extra .kc-icon { flex: none; font-size: 1.35em; color: var(--kc-lp-accent-deep); }
/* total anchor — thick symmetric divider bars top + bottom, €-value big. */
.kc-lp-bonus-total {
	margin-top: var(--space-6);
	border-top: 10px solid var(--kc-lp-accent);
	border-bottom: 10px solid var(--kc-lp-accent);
	padding: var(--space-5) 0;
	color: var(--color-laivasto);
}
.kc-lp-bonus-total-label { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.kc-lp-bonus-total-sum { margin: .2rem 0 .4rem; font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: var(--weight-bold); line-height: 1.05; color: var(--kc-lp-accent-deep); }
.kc-lp-bonus-total-line { margin: 0; font-size: var(--text-lg); line-height: 1.5; max-width: 42ch; }
.kc-lp-bonus-cta { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.kc-lp-bonus-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.kc-lp-bonus-note .kc-icon { color: var(--kc-lp-accent-deep); }


/* ---- 4.17 video (white band) — 16:9 facade + play overlay (contract) ----- */
.kc-lp-video { padding-block: clamp(3.5rem, 7vw, 6rem); }
.kc-lp-video-facade {
	position: relative;
	margin: var(--space-6) auto 0;
	max-width: 48rem;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-video-poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--kc-lp-tint);
	color: var(--kc-lp-accent-deep);
}
.kc-lp-video-poster-bg { font-size: clamp(3.5rem, 12vw, 7rem); line-height: 1; opacity: .28; }
.kc-lp-video-poster-label { font-weight: var(--weight-semibold); font-size: clamp(.95rem, 2vw, 1.1rem); }
.kc-lp-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(64px, 12vw, 84px);
	height: clamp(64px, 12vw, 84px);
	border-radius: var(--radius-full);
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-video-play .kc-icon { font-size: clamp(1.8rem, 4vw, 2.4rem); transform: translateX(.08em); }
.kc-lp-video-play:focus-visible { outline: 3px solid var(--kc-lp-accent-deep); outline-offset: 3px; }
.kc-lp-video-duration {
	position: absolute;
	right: .9rem;
	bottom: .9rem;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: .35rem .7rem;
	border-radius: var(--radius-full);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	line-height: 1;
	background: var(--color-laivasto);
	color: var(--color-valkoinen);
}
/* img-14: the caption row aligns with the video and is at least as wide (48rem). */
.kc-lp-video .kc-wrap > .kc-lp-iconrow { max-width: 48rem; margin: var(--space-4) auto 0; }
.kc-lp-video-caption {
	margin: 0;
	max-width: none;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.45;
}
.kc-lp-video-caption .kc-icon { flex: none; }


/* ---- 4.18 pricing (accent band + WHITE price card) ----------------------- */
.kc-lp-pricing.is-style-kc-lp-petrooli,
.kc-lp-pricing.is-style-kc-lp-keltainen,
.kc-lp-pricing.is-style-kc-lp-vaaleansininen,
.kc-lp-pricing.is-style-kc-lp-valkoinen,
.kc-lp-pricing.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-pricing { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-pricing-head { margin-bottom: var(--space-5); }
/* WHITE price card on the accent band — thick symmetric accent-deep border. */
.kc-lp-pricing-card {
	max-width: 36rem;
	margin: var(--space-5) auto 0;
	padding: clamp(1.6rem, 4vw, 2.4rem);
	border-radius: var(--radius);
	text-align: center;
	position: relative;
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent-deep);
}
.kc-lp-pricing-ribbon {
	position: absolute;
	top: -1rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: .45rem 1rem;
	border-radius: var(--radius-full);
	background: var(--color-keltaoranssi); /* C10: yellow ribbon */
	color: var(--color-laivasto);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	letter-spacing: var(--ls-title);
	white-space: nowrap;
}
/* No .kc-icon colour override: the ribbon icon inherits the pill's laivasto text colour. A --kc-lp-star fill would be keltaoranssi-on-keltaoranssi (invisible) on 3 of 5 styles, since the pill bg is hardcoded keltaoranssi. */
.kc-lp-pricing-price { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: .4rem 0 var(--space-5); }
.kc-lp-pricing-was { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: line-through; text-decoration-thickness: 2px; }
.kc-lp-pricing-now { font-size: clamp(3rem, 9vw, 4.5rem); font-weight: var(--weight-bold); line-height: 1; color: var(--kc-lp-accent-deep); }
.kc-lp-pricing-note { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-top: .3rem; }
.kc-lp-pricing-line {
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	justify-content: center;
	text-align: left;
	max-width: 46ch;
	margin: 0 auto .8rem;
	line-height: 1.5;
	font-size: var(--text-base);
	color: var(--color-laivasto);
}
.kc-lp-pricing-line .kc-icon { flex: none; color: var(--kc-lp-accent-deep); }
.kc-lp-pricing-cta { width: 100%; margin-top: var(--space-5); justify-content: center; }
.kc-lp-pricing-cta-ghost { width: 100%; margin-top: var(--space-3); justify-content: center; }
.kc-lp-pricing-pay {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	display: flex;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	color: var(--color-laivasto);
}
.kc-lp-pricing-pay .kc-icon { color: var(--kc-lp-accent-deep); }
/* icon-row form: the generic .kc-lp-iconrow > p {flex:1} would fill the row and
   strand the icon at the card edge — shrink the <p> so justify-content:center
   centres icon + text as one unit. */
.kc-lp-iconrow.kc-lp-pricing-pay > p { flex: 0 1 auto; }
/* risk-reversal tile — info-blue companion on the accent band. */
.kc-lp-pricing-risk {
	max-width: 36rem;
	margin: var(--space-5) auto 0;
	padding: clamp(1.2rem, 3vw, 1.6rem);
	border-radius: var(--radius);
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent-deep);
}
.kc-lp-pricing-risk .kc-icon { flex: none; font-size: 2.2rem; line-height: 1; color: var(--kc-lp-accent-deep); }
.kc-lp-pricing-risk-title { margin: 0 0 .35rem; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.25; color: var(--color-laivasto); }
.kc-lp-pricing-risk-text { margin: 0; line-height: 1.55; font-size: var(--text-base); color: var(--color-laivasto); }
/* honest dated urgency — warm warning tile (oranssi border on the band). */
.kc-lp-pricing-urgency {
	max-width: 36rem;
	margin: var(--space-5) auto 0;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	line-height: 1.5;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	background: var(--color-bg-oranssi);
	color: var(--text-primary);
	border: var(--border-3) solid var(--color-oranssi);
}
.kc-lp-pricing-urgency .kc-icon { flex: none; color: var(--color-oranssi); }


/* ---- 4.19 final-cta (accent band) — bookend ----------------------------- */
.kc-lp-finalcta.is-style-kc-lp-petrooli,
.kc-lp-finalcta.is-style-kc-lp-keltainen,
.kc-lp-finalcta.is-style-kc-lp-vaaleansininen,
.kc-lp-finalcta.is-style-kc-lp-valkoinen,
.kc-lp-finalcta.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-finalcta { padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.kc-lp-finalcta h1,
.kc-lp-finalcta .kc-lp-finalcta-h {
	max-width: 24ch;
	margin: 0 auto;
	font-size: var(--text-6xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-display);
	color: var(--kc-lp-on);
}
.kc-lp-finalcta-sub { max-width: 56ch; margin: var(--space-4) auto 0; color: var(--kc-lp-on); opacity: .92; }
.kc-lp-finalcta-proof {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-5) auto 0;
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
	line-height: 1.4;
	color: var(--kc-lp-on);
}
.kc-lp-finalcta-proof .kc-icon { font-size: 1.2em; flex: none; }
.kc-lp-finalcta-cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: var(--space-6);
}
.kc-lp-finalcta-trust {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
	color: var(--kc-lp-on);
	opacity: .88;
}
/* C6: center the proof/trust icon-rows (band is text-align:center but a flex row
   doesn't inherit it; the generic `.kc-lp-iconrow > p {flex:1}` fills the row,
   so the pair must shrink-to-content for justify-content:center to bite). */
.kc-lp-finalcta .kc-lp-iconrow { justify-content: center; }
.kc-lp-finalcta .kc-lp-iconrow > p { flex: 0 1 auto; }
/* img-5: the trust line's shield sat on its own line because margin-top lived on the
   <p> INSIDE the flex iconrow (proof's is zeroed by .kc-lp-iconrow>p; these style
   overrides beat it). Move the spacing to the ROW so shield + text stay inline. */
.kc-lp-finalcta-cta + .kc-lp-iconrow { margin-top: var(--space-4); }
.kc-lp-finalcta.is-style-kc-lp-petrooli .kc-lp-finalcta-cta + .kc-lp-iconrow { margin-top: var(--space-6); }
.kc-lp-finalcta.is-style-kc-lp-keltainen .kc-lp-finalcta-cta + .kc-lp-iconrow { margin-top: var(--space-2); }


/* ---- 4.20 sticky-cta (×3) — position:sticky bottom, desktop-hidden ------- */
/* bar bg via the 3 variant classes (rohkea accent / keskitie tint+6px /
   hillitty white+3px). Contract C7: always-visible, no-JS, no slide-in. */
.kc-lp-stickycta {
	position: sticky;
	bottom: 0;
	z-index: var(--z-sticky, 500);
	width: auto; /* A1: sticky bar IS alignfull too — let breakout margins reach the edge */
	margin-block-start: var(--space-7); /* reserve page-end space above footer */
	/* the band's --space-8 block padding (.kc-lp-sec) would turn the strip into
	 * a 190px banner — the -inner owns ALL spacing (contract C7: 56px bar). */
	padding-block: 0;
}
.kc-lp-stickycta-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.kc-lp-stickycta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	max-width: var(--kc-max, 1200px);
	margin: 0 auto;
	min-height: 56px;
	padding: .7rem clamp(1rem, 4vw, 2rem);
}
.kc-lp-stickycta-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kc-lp-stickycta-name {
	font-weight: var(--weight-semibold);
	font-size: clamp(.95rem, 1.8vw, 1.1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kc-lp-stickycta-price { font-weight: var(--weight-bold); font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.kc-lp-stickycta-btn { flex: none; min-height: var(--touch-min); white-space: nowrap; }
/* rohkea: full-colour accent bar. */
.kc-lp-stickycta--rohkea { background: var(--kc-lp-accent); color: var(--kc-lp-on); }
.kc-lp-stickycta--rohkea .kc-lp-stickycta-name,
.kc-lp-stickycta--rohkea .kc-lp-stickycta-title,
.kc-lp-stickycta--rohkea .kc-lp-stickycta-note,
.kc-lp-stickycta--rohkea .kc-lp-stickycta-price { color: var(--kc-lp-on); }
/* keskitie: tint bar + thick symmetric 6px accent top bar. */
.kc-lp-stickycta--keskitie { background: var(--kc-lp-tint); color: var(--color-laivasto); border-top: 6px solid var(--kc-lp-accent); }
.kc-lp-stickycta--keskitie .kc-lp-stickycta-name,
.kc-lp-stickycta--keskitie .kc-lp-stickycta-title,
.kc-lp-stickycta--keskitie .kc-lp-stickycta-note,
.kc-lp-stickycta--keskitie .kc-lp-stickycta-price { color: var(--color-laivasto); }
/* hillitty: white bar + thin 3px accent top bar. */
.kc-lp-stickycta--hillitty { background: var(--color-valkoinen); color: var(--color-laivasto); border-top: 3px solid var(--kc-lp-accent); }
.kc-lp-stickycta--hillitty .kc-lp-stickycta-name,
.kc-lp-stickycta--hillitty .kc-lp-stickycta-title,
.kc-lp-stickycta--hillitty .kc-lp-stickycta-note { color: var(--color-laivasto); }
.kc-lp-stickycta--hillitty .kc-lp-stickycta-price { color: var(--kc-lp-accent-deep); }
/* Desktop-hidden: TT25 header suffices on desktop (contract C7). The --iso
 * purchase bar is the exception — it is desktop-visible by design. */
@media (min-width: 881px) {
	.kc-lp-stickycta:not(.kc-lp-stickycta--iso) { display: none; }
}
@media (max-width: 420px) {
	.kc-lp-stickycta-inner { gap: .65rem; }
	.kc-lp-stickycta-name { font-size: .92rem; }
	.kc-lp-stickycta-btn { padding-inline: 1rem; }
}

/* --iso: the desktop-visible PURCHASE bar (lp-sticky-cta-iso pattern) — an h3
 * pitch line + a small guarantee note + one big CTA. Composable with the three
 * colour modifiers above (--rohkea / --keskitie / --hillitty own the bar bg and
 * text colours; the CTA button reads the band's --kc-lp-cta-* pair as usual).
 * The heading needs its own colour hook (-title) because global heading rules
 * would otherwise paint it laivasto on a dark bar. Same no-JS position:sticky
 * mechanics as the base bar: pinned to the viewport bottom, docks into its
 * natural place at page end so it never covers the footer. */
/* Deliberately FLAT (Katri 2026-07-02): one slim strip, never a banner —
 * pitch line ~1.05rem with the note tucked right under it, compact button.
 * Desktop total ≈ 44px, mobile ≈ 55px (single row on every viewport, no
 * column stacking, no full-width button). */
.kc-lp-stickycta--iso .kc-lp-stickycta-inner { min-height: 0; padding-block: .55rem; }
.kc-lp-stickycta--iso .kc-lp-stickycta-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.25;
}
.kc-lp-stickycta--iso .kc-lp-stickycta-note {
	margin: 0;
	font-size: .72rem;
	line-height: 1.25;
	opacity: .88;
}
.kc-lp-stickycta--iso .kc-lp-stickycta-info { gap: 0; }
.kc-lp-stickycta--iso .kc-lp-stickycta-btn .wp-block-button__link {
	font-size: 1rem;
	font-weight: var(--weight-bold);
	padding: .45em 1.6em;
}
/* narrow screens: same single row, everything a notch smaller. */
@media (max-width: 720px) {
	.kc-lp-stickycta--iso .kc-lp-stickycta-inner { gap: var(--space-3); padding-block: .25rem; }
	.kc-lp-stickycta--iso .kc-lp-stickycta-title { font-size: .85rem; line-height: 1.2; }
	.kc-lp-stickycta--iso .kc-lp-stickycta-note { font-size: .68rem; }
	.kc-lp-stickycta--iso .kc-lp-stickycta-btn .wp-block-button__link {
		font-size: .9rem;
		padding: .4em 1.1em;
		white-space: nowrap;
	}
}


/* ---- 4.20b liity-modal (kutri/liity-nappi) — native <dialog> holding the
 * kutri-register signup form. Top-layer element, so sticky-bar ancestry never
 * clips it. The form brings its own styles (register.css); this only shapes
 * the shell: white card, dimmed laivasto backdrop, × in the corner. ------- */
.kc-liity-dialog {
	border: 0;
	border-radius: var(--radius);
	padding: 0;
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100dvh - 3rem);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	/* INHERITANCE FIREWALL. The <dialog> is markup-nested inside the button
	   wrapper that opened it, so text-flow properties set for a one-line CTA
	   cascade straight into the form even though the dialog paints in the top
	   layer. .kc-lp-stickycta-btn sets white-space: nowrap → the consent line
	   ("Hyväksyn Kutri.netin käyttöehdot…") ran off the frame instead of
	   wrapping onto 2–3 lines, and the bar's centring reflowed every label.
	   Reset them here, once, for every placement. */
	white-space: normal;
	text-align: start;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.6;
}
.kc-liity-dialog::backdrop { background: rgba(9, 30, 51, .6); }
.kc-liity-dialog-inner {
	position: relative;
	padding: var(--space-6) var(--space-5) var(--space-5);
	overflow: auto;
	max-height: inherit;
}
.kc-liity-close {
	position: absolute;
	top: .4rem;
	right: .4rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	padding: .35rem .55rem;
	cursor: pointer;
	color: var(--color-laivasto);
}
.kc-liity-close:hover,
.kc-liity-close:focus { color: var(--color-petrooli); }

/* ---- 4.21 optin (tint band) — wraps a form; .field/.input/.checkbox ----- */
.kc-lp-optin.is-style-kc-lp-petrooli,
.kc-lp-optin.is-style-kc-lp-keltainen,
.kc-lp-optin.is-style-kc-lp-vaaleansininen,
.kc-lp-optin.is-style-kc-lp-valkoinen,
.kc-lp-optin.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-optin { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.kc-lp-optin-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
	font-size: 2rem;
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
}
.kc-lp-optin-promise { max-width: 54ch; margin: .9rem auto 0; color: var(--color-laivasto); }
/* The form is wrapped in .kc-lp-optin so .field/.input/.checkbox scoped under
   it ride the .kc- safelist (RUCSS keeps the rules). */
.kc-lp-optin .field { margin: 0; }
.kc-lp-optin .input {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: .75rem 1rem;
	font: inherit;
	font-size: var(--text-base);
	color: var(--color-laivasto);
	background: var(--color-valkoinen);
	border: var(--border-3) solid var(--color-laivasto);
	border-radius: var(--radius);
}
.kc-lp-optin .input::placeholder { color: var(--text-secondary); }
.kc-lp-optin .input:focus-visible { outline: 3px solid var(--kc-lp-accent); outline-offset: 2px; }
.kc-lp-optin .checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	line-height: 1.45;
	color: var(--color-laivasto);
	cursor: pointer;
}
/* explicit laivasto like .checkbox/.kc-lp-optin-promise above — without it the
   row inherits the section's on-colour (white on the tint band = invisible). */
.kc-lp-optin-privacy { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-laivasto); }
.kc-lp-optin-privacy a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	color: var(--color-laivasto);
	text-decoration: underline;
	text-underline-offset: .2em;
	font-weight: var(--weight-semibold);
}


/* ============================================================================
 * 5. Reduced-motion guard (one central rule).
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.kc-lp-curriculum-mod > summary::after,
	.kc-lp-curriculum-glyph,
	.kc-lp-video-play { transition: none; }
}


/* ============================================================================
 * 6. Equal-height card grids (#1b stats strip excluded — see app-stats inline).
 *    Symptom "first box bigger" = CROSS-ROW height variation in wrapping
 *    auto-fit grids (within-row is already stretch). critic-1 synthesis:
 *    equalize rows on desktop ONLY so a single-column mobile grid never balloons
 *    short cards to the tallest; keep height:100% unconditional (resolves to
 *    content height at 1 col = no balloon, fills the 1fr cell at ≥2 col).
 *    compare (#3, within-row) + app-stats (#1, nowrap) handled inline above.
 * ========================================================================== */
@media (min-width: 768px) {
	.kc-lp-pain-grid,
	.kc-lp-usecases-cards,
	.kc-lp-contents-grid,
	.kc-lp-stats-grid,
	.kc-lp-testimonials-grid,
	.kc-lp-bonus-list,
	/* new landing patterns 2026-06-29 — grids folded from batch A–E snippets */
	.kc-lp-learnlist-cols,
	.kc-lp-qualgrid-grid,
	.kc-lp-instrfeat-cards,
	.kc-lp-xsell-grid,
	.kc-lp-topics-grid,
	.kc-lp-membership-grid,
	.kc-lp-coursepack-grid,
	.kc-lp-ucgrid-grid,
	.kc-lp-quotes-grid,
	/* 2026-06-30 review: equalise howto steps too (were uneven on live).
	 * NOT .kc-lp-usecases-grid — its cards have intentionally variable height
	 * (AI demos, 572 vs 1094px); align-items:start top-aligns them on purpose. */
	.kc-lp-howto-steps { grid-auto-rows: 1fr; }
}
.kc-lp-pain-card,
.kc-lp-usecases-card,
.kc-lp-contents-item,
.kc-lp-stats-box,
.kc-lp-testimonials-card,
.kc-lp-bonus-item,
/* new landing patterns 2026-06-29 — cards folded from batch C/D/E snippets */
.kc-lp-topics-cat,
.kc-lp-membership-card,
.kc-lp-coursepack-card,
.kc-lp-offer-card,
.kc-lp-ucgrid-card,
.kc-lp-quotes-card,
.kc-lp-howto-step { height: 100%; }


/* ============================================================================
 * ===== NEW LANDING PATTERNS 2026-06-29 =====
 * 18 new lp-* patterns (batches A–E). Families appended below verbatim from the
 * css-snippets/ build artifacts, EXCEPT: each batch's equal-height-only
 * @media(min-width:768px){grid-auto-rows:1fr} + card height:100% rules were
 * FOLDED into the central §6 equal-height block above (no duplicate media query).
 * Shared helpers (.kc-lp-sec, .kc-lp-sec img[src=""], .kc-lp-iconrow) are reused,
 * not redefined. Batch-A's minimal-hairline switch + batch-D's max-width column
 * breakpoints are kept as their own appended rules (not equal-height).
 * ========================================================================== */

/*!
 * batch-a.css — BATCH A landing patterns (checklists + qualifier grid)
 * ----------------------------------------------------------------------------
 * Integration target: append to kutri-landing.css §4 (the integration step
 * concatenates this verbatim). Do NOT pre-merge here.
 *
 * Families added: .kc-lp-outcomes, .kc-lp-learnlist (+ --minimal treatment),
 * .kc-lp-qualgrid. All white band-mode → NO band-mode rule (the .kc-lp-sec
 * default keeps --kc-lp-bg = white). Default colours: outcomes/qualgrid =
 * valkoinen, learnlist = vaaleansininen, learnlist--minimal = valkoinen.
 *
 * Reuses (does NOT redefine): .kc-wrap .kc-h2 .kc-lead .kc-eyebrow,
 * .kc-lp-iconrow (kutri-landing.css L79-81), the empty-src placeholder
 * (L74), and the @media(min-width:768px) equal-height block (L1773) — see
 * build-note-a.md for the grid classes to add to that block.
 *
 * Colour-swap safety: every fill container sets an EXPLICIT laivasto text
 * colour. The tint fill (--kc-lp-tint) is light for all 5 colours, so bare <p>
 * inside must NOT inherit the band's --kc-lp-on (white on petrooli/vaaleansininen
 * → white-on-light). Icons use --kc-lp-accent (decorative, aria-hidden).
 * Every selector starts with `.kc-` (RUCSS safelist /^\.kc-/).
 * ============================================================================ */


/* ---- 4.A1 outcomes (white band) — single-column result checklist --------- */
.kc-lp-outcomes { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-outcomes-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-5);
}
/* each row is also .kc-lp-iconrow (layout) — this adds the tinted-box treatment */
.kc-lp-outcomes-item {
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
}
.kc-lp-outcomes-item > .kc-icon { color: var(--kc-lp-accent); font-size: 1.6em; margin-top: .05rem; }
.kc-lp-outcomes-item p { font-size: var(--text-lg); line-height: 1.5; }
.kc-lp-outcomes-note { margin-top: var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }


/* ---- 4.A2 learnlist (white band) — two equal tinted boxes + footer ------- */
.kc-lp-learnlist { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-learnlist-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
}
/* BOTH boxes share --kc-lp-tint so a colour-swap keeps them identical. */
.kc-lp-learnlist-box {
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
	border-radius: var(--radius);
	padding: var(--space-5);
	height: 100%; /* equalises with the sibling box; grid joins the 768px block */
}
.kc-lp-learnlist-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kc-lp-learnlist-list .kc-icon { color: var(--kc-lp-accent); font-size: 1.4em; flex: none; margin-top: .1rem; }
.kc-lp-learnlist-list p { font-size: var(--text-base); line-height: 1.5; }
.kc-lp-learnlist-foot { margin-top: var(--space-5); max-width: 74ch; line-height: 1.6; color: var(--color-laivasto); }

/* ---- 4.A2b learnlist · MINIMALISTINEN — hairline 2-col, no fills --------- */
.kc-lp-learnlist--minimal .kc-lp-learnlist-cols { gap: 0; margin-top: var(--space-6); }
.kc-lp-learnlist--minimal .kc-lp-learnlist-box {
	background: transparent;
	border-radius: 0;
	padding: 0;
	height: auto;
}
.kc-lp-learnlist--minimal .kc-lp-learnlist-list { gap: var(--space-4); }
/* mobile divider: second box gets a hairline on top */
.kc-lp-learnlist--minimal .kc-lp-learnlist-box + .kc-lp-learnlist-box {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: var(--kc-border);
}
.kc-lp-learnlist--minimal .kc-lp-learnlist-foot { border-top: var(--kc-border); padding-top: var(--space-5); }
/* desktop divider: switch the hairline to the left edge between columns */
@media (min-width: 768px) {
	.kc-lp-learnlist--minimal .kc-lp-learnlist-box + .kc-lp-learnlist-box {
		margin-top: 0;
		padding-top: 0;
		padding-left: var(--space-6);
		border-top: 0;
		border-left: var(--kc-border);
	}
}


/* ---- 4.A3 qualgrid (white band) — "Tämä on sinulle, jos…" 6 tiles -------- */
/* Element class kc-lp-qualgrid (NOT kc-lp-qualifier-*) to avoid colliding with
   the existing lp-qualifier kyllä/ei family. */
.kc-lp-qualgrid { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-qualgrid .kc-h2 { text-align: center; max-width: 24ch; margin-inline: auto; }
.kc-lp-qualgrid-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-qualgrid-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
	border-radius: var(--radius);
	padding: var(--space-5);
	height: 100%; /* equal-height tiles; grid joins the 768px block */
}
.kc-lp-qualgrid-tile .kc-icon { color: var(--kc-lp-accent); font-size: 2.3em; }
.kc-lp-qualgrid-tile p { margin: 0; line-height: 1.5; }


/* ============================================================================
 * BATCH B — image-heavy landing patterns (2026-06-29)
 *   Snippet for the integration step to APPEND into kutri-landing.css §4.
 *   Families: kc-lp-instrfeat, kc-lp-herosplit, kc-lp-xsell.
 *
 *   Reuses the shared primitives already in kutri-landing.css — do NOT let the
 *   integrator re-add them from here:
 *     .kc-lp-sec, .kc-wrap, .kc-eyebrow, .kc-h2, .kc-lead   (band + library)
 *     .kc-lp-sec img[src=""]                                 (placeholder box, ~L74)
 *     .kc-lp-iconrow + > .kc-icon + > p                      (icon-row, ~L79)
 *   This file ONLY adds the three new .kc-lp-<element>-* families (+ two NEW
 *   @media equal-height blocks scoped to the new grids — they do not touch the
 *   central equal-height block ~L1773).
 *
 *   Colour-swap safety: inner fills use var(--kc-lp-accent); text/icons ON a
 *   fill use var(--kc-lp-on); stars use var(--kc-lp-star); any dark text-on-white
 *   that must survive the keltainen swap uses var(--kc-lp-accent-deep) or a
 *   stable laivasto (never keltaoranssi text, never white-on-yellow).
 * ========================================================================== */


/* ---- 4.B1 instrfeat (white band) — one big 16:9 image + 2 instructor bios -
 *   White band-mode: NO band-mode rule (default --kc-lp-bg = white). Colour
 *   swap only re-tints the card border + name; band stays white. */
.kc-lp-instrfeat { padding-block: clamp(3.5rem, 7vw, 6rem); }
.kc-lp-instrfeat-media {
	max-width: 60rem;
	margin: var(--space-5) auto 0;
	border-radius: var(--radius);
	overflow: hidden;
}
.kc-lp-instrfeat-img { margin: 0; }
.kc-lp-instrfeat-cards {
	margin-top: var(--space-6);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
}
.kc-lp-instrfeat-card {
	height: 100%;
	border: var(--border-1) solid var(--kc-lp-accent);
	border-radius: var(--radius);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.kc-lp-instrfeat-name {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	color: var(--kc-lp-accent);
}
/* keltainen: name must not be keltaoranssi-on-white (fails WCAG) → laivasto. */
.kc-lp-instrfeat.is-style-kc-lp-keltainen .kc-lp-instrfeat-name { color: var(--color-laivasto); }
.kc-lp-instrfeat-role {
	margin: 0;
	font-weight: var(--weight-semibold);
	color: var(--text-secondary);
}
.kc-lp-instrfeat-bio {
	margin: 0;
	line-height: 1.6;
	color: var(--color-laivasto);
}


/* ---- 4.B2 herosplit (tint band) — copy left + 16:9 media card right ------
 *   Tint band-mode: light band, dark laivasto text. ONE .kutri-marker page-wide. */
.kc-lp-herosplit.is-style-kc-lp-petrooli,
.kc-lp-herosplit.is-style-kc-lp-keltainen,
.kc-lp-herosplit.is-style-kc-lp-vaaleansininen,
.kc-lp-herosplit.is-style-kc-lp-valkoinen,
.kc-lp-herosplit.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-herosplit { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-herosplit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: stretch; /* media column fills the row height so its own Stack
	                         "Justification" (top / center / bottom) decides where
	                         the video sits — per-instance, from the editor. */
}
/* badge + pill = inline highlight chips. Override the generic .kc-lp-iconrow
   (display:flex full-width / >p flex:1) to shrink-to-content. */
.kc-lp-herosplit-badge,
.kc-lp-herosplit-pill {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: 100%;
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: 1.3;
}
.kc-lp-herosplit-badge > p,
.kc-lp-herosplit-pill > p { flex: 0 1 auto; }
/* badge = stable dark chip → white text. Fixed to tumma-petrooli (not the band's
   accent-deep) so it reads the same tumma-petrooli on every colour style (Katri). */
.kc-lp-herosplit-badge { background: var(--color-tumma-petrooli); color: var(--color-valkoinen); }
.kc-lp-herosplit-badge .kc-icon { color: var(--color-keltaoranssi); }
/* pill = white chip; text uses accent-deep so it survives the keltainen swap. */
.kc-lp-herosplit-pill {
	background: var(--color-valkoinen);
	color: var(--kc-lp-accent-deep);
	border: var(--border-1) solid var(--kc-lp-accent);
}
.kc-lp-herosplit-pill .kc-icon { color: var(--kc-lp-accent-deep); }
.kc-lp-herosplit-h1 {
	font-size: var(--text-6xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--color-laivasto);
	margin: 0 0 var(--space-4);
	max-width: 18ch;
}
.kc-lp-herosplit-feats {
	margin: var(--space-5) 0 0;
	display: grid;
	gap: var(--space-3);
	max-width: 48ch;
}
.kc-lp-herosplit-feats .kc-icon { flex: none; font-size: 1.2em; color: var(--kc-lp-accent); }
.kc-lp-herosplit-feats p { color: var(--color-laivasto); }
.kc-lp-herosplit-cta { margin-top: var(--space-5); }
.kc-lp-herosplit-subcta {
	display: inline-flex;
	width: auto;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.kc-lp-herosplit-subcta > p { flex: 0 1 auto; }
.kc-lp-herosplit-subcta .kc-icon { color: var(--kc-lp-accent); }
/* right-hand media card */
.kc-lp-herosplit-media {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.kc-lp-herosplit-img {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-herosplit-caption {
	display: inline-flex;
	width: auto;
	margin: 0 auto;
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.kc-lp-herosplit-caption > p { flex: 0 1 auto; }
.kc-lp-herosplit-caption .kc-icon { color: var(--kc-lp-accent); }
/* video / oEmbed swapped into the media card (in place of the core/image).
   A raw Vimeo/YouTube embed renders at a FIXED iframe size (e.g. 500×281) and
   inherits none of the card framing, so it never fills the column. Give any
   embed here a full-width 16:9 frame matching .kc-lp-herosplit-img, and OWN the
   aspect ratio via the modern property so height no longer depends on core's
   .wp-block-embed__wrapper::before padding-hack — that hack collapses to zero
   height inside this vertical-flex column (the "video disappears when Resize
   for smaller devices is on" symptom). Works whether or not that toggle is on. */
.kc-lp-herosplit-media .wp-block-embed { margin: 0; width: 100%; }
.kc-lp-herosplit-media .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-herosplit-media .wp-block-embed__wrapper::before { display: none; }
.kc-lp-herosplit-media .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}


/* ---- 4.B3 xsell (white band, ROHKEA) — 2 cross-sell cards ----------------
 *   White band-mode: NO band-mode rule. Rohkea = accent-filled card head +
 *   3px accent border. Head fill = var(--kc-lp-accent), head text/icon =
 *   var(--kc-lp-on) → keltainen auto-flips to laivasto-on-keltainen. */
.kc-lp-xsell { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-xsell-grid {
	margin-top: var(--space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
}
.kc-lp-xsell-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-valkoinen);
	border: var(--border-3) solid var(--kc-lp-accent);
	border-radius: var(--radius);
	overflow: hidden;
}
.kc-lp-xsell-head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	background: var(--kc-lp-accent);
}
.kc-lp-xsell-head .kc-icon { flex: none; font-size: 1.5em; color: var(--kc-lp-on); }
.kc-lp-xsell-title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	color: var(--kc-lp-on);
}
.kc-lp-xsell-img { margin: 0; }
/* img-11: card images always reserve the 16:9 slot (even with an empty/placeholder
   src) so both cards stay equal height and there is visible "space for the image". */
.kc-lp-xsell-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kc-lp-sec .kc-lp-xsell-img img[src=""] { min-height: 0; background: var(--color-bg-sininen); }
.kc-lp-xsell-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
}
/* TRANSITIONAL: the pattern now emits a kutri/rating block (§3.1 .kc-lp-rating).
   These -rating/-stars/-ratenum rules are retained only so the OLD saved markup
   on pre-Phase-6 test pages keeps its look; safe to drop after page regen. */
.kc-lp-xsell-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.kc-lp-xsell-stars { letter-spacing: .12em; font-size: 1.2rem; color: var(--kc-lp-star); }
.kc-lp-xsell-ratenum { font-weight: var(--weight-bold); color: var(--color-laivasto); }
.kc-lp-xsell-desc { margin: 0; line-height: 1.5; color: var(--color-laivasto); }
.kc-lp-xsell-price {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-laivasto);
}
.kc-lp-xsell-link { margin: var(--space-2) 0 0; }
.kc-lp-xsell-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-min);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
	color: var(--kc-lp-on);
	font-weight: var(--weight-bold);
	text-decoration: none;
}
.kc-lp-xsell-link a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================================
 * batch-c.css — BATCH C (dense/accordion/matrix) element families.
 * Append target: assets/css/kutri-landing.css §4 (integration step concatenates).
 * Families: kc-lp-topics (white), kc-lp-faq (white), kc-lp-membership (accent).
 * Reuses shared helpers (.kc-lp-sec / .kc-wrap / .kc-eyebrow / .kc-h2 / .kc-lead /
 * .kc-lp-iconrow / colour-var layer) — does NOT redefine them.
 * RUCSS: every selector starts with `.kc-`. No box-shadow, no gradient, no viewport-width hacks,
 * no 1px hairline accent borders (separation = tint fills + whitespace + thick
 * symmetric 3px borders). NBSP before € lives in markup, not here.
 * ========================================================================== */


/* ---- 4.C1 topics — aihekatalogi (WHITE band) ----------------------------- */
/* White band-mode: no is-style band rule (band stays white on every colour swap;
   only --kc-lp-* accents change). Category cards = light --kc-lp-tint fills
   (borderless, D6); icon + title = --kc-lp-accent-deep so they stay dark/readable
   on any swap. The bottom CTA bar is a STABLE petrooli tile (white text,
   keltaoranssi icon), not driven by --kc-lp-* (keltainen-swap safe). */
.kc-lp-topics { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-topics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-topics-cat {
	background: var(--kc-lp-tint);
	border-radius: var(--radius);
	padding: var(--space-5);
}
.kc-lp-topics-cat-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.kc-lp-topics-cat-head .kc-icon { flex: none; font-size: 1.7rem; line-height: 1; color: var(--kc-lp-accent-deep); }
.kc-lp-topics-cat-title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	color: var(--kc-lp-accent-deep);
}
.kc-lp-topics-tags { margin: 0; line-height: 1.6; font-size: var(--text-base); color: var(--text-primary); }
/* Bottom CTA bar — STABLE dark petrooli tile (independent of the colour swap). */
.kc-lp-topics-cta {
	margin-top: var(--space-6);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	background: var(--color-petrooli);
	color: var(--color-valkoinen);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	line-height: 1.4;
}
.kc-lp-topics-cta .kc-icon { flex: none; font-size: 1.6rem; line-height: 1; color: var(--color-keltaoranssi); }
.kc-lp-topics-cta p { margin: 0; color: var(--color-valkoinen); }


/* ---- 4.C2 faq — usein kysyttyä, natiivi core/details (WHITE band) -------- */
/* White band-mode: no is-style band rule. Each row = core/details (.wp-block-details
   .kc-lp-faq-item). <summary> text is plain; the +/× glyph is a CSS pseudo-element
   on the summary (no icon block inside <summary>). Separators = thick SYMMETRIC
   borders (var(--border-3) --kc-lp-accent-deep), never 1px hairlines. */
.kc-lp-faq { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* img-3: widen the FAQ section (was --narrow 920 → full 1200) + block-width answer. */
.kc-lp-faq .kc-wrap--narrow { max-width: var(--kc-max); }
.kc-lp-faq-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-5); }
.kc-lp-faq-item { border-bottom: var(--border-3) solid var(--kc-lp-accent-deep); border-radius: 0; }
.kc-lp-faq-item:first-child { border-top: var(--border-3) solid var(--kc-lp-accent-deep); }
.kc-lp-faq-item > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	cursor: pointer;
	list-style: none;
	min-height: var(--touch-min);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.35;
	color: var(--color-laivasto);
}
.kc-lp-faq-item > summary::-webkit-details-marker { display: none; }
.kc-lp-faq-item > summary::after {
	content: "+";
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	font-size: 2rem;
	font-weight: var(--weight-bold);
	line-height: 1;
	color: var(--kc-lp-accent-deep);
	transition: transform .2s var(--ease-standard);
}
.kc-lp-faq-item[open] > summary::after { transform: rotate(45deg); }
.kc-lp-faq-item > p {
	margin: 0;
	padding: var(--space-2) 0 var(--space-5);
	max-width: none;
	line-height: 1.65;
	color: var(--color-laivasto);
}
@media (prefers-reduced-motion: reduce) {
	.kc-lp-faq-item > summary::after { transition: none; }
}


/* ---- 4.C3 membership — 4 kvadranttia + hinta (ACCENT band) --------------- */
/* Accent band-mode: --kc-lp-bg = --kc-lp-accent (default petrooli). Section text
   reads on-band via .kc-lp-on-band. The 4 quadrant cards are WHITE tiles with a
   thick symmetric --kc-lp-accent-deep border + dark text — universally readable on
   every colour swap (never hardcoded white fill / white text). */
.kc-lp-membership.is-style-kc-lp-petrooli,
.kc-lp-membership.is-style-kc-lp-keltainen,
.kc-lp-membership.is-style-kc-lp-vaaleansininen,
.kc-lp-membership.is-style-kc-lp-valkoinen,
.kc-lp-membership.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-membership { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-membership-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}
.kc-lp-membership-card {
	display: flex;
	flex-direction: column;
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent-deep);
	border-radius: var(--radius);
	padding: var(--space-5);
}
.kc-lp-membership-cat-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kc-lp-membership-cat-head .kc-icon { flex: none; font-size: 1.5rem; line-height: 1; color: var(--kc-lp-accent-deep); }
.kc-lp-membership-cat-title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	letter-spacing: var(--ls-title);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--kc-lp-accent-deep);
}
.kc-lp-membership-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kc-lp-membership-card .kc-lp-iconrow > .kc-icon { font-size: 1.2em; margin-top: .06em; color: var(--kc-lp-accent-deep); }
.kc-lp-membership-card .kc-lp-iconrow > p { font-size: var(--text-base); line-height: 1.45; color: var(--color-laivasto); }
/* Price anchor + CTA — on the accent band, so price text reads on-band. */
.kc-lp-membership-price-block { margin-top: var(--space-7); text-align: center; }
.kc-lp-membership-price {
	margin: 0 0 .4rem;
	font-size: clamp(2rem, 5vw, 2.8rem);
	font-weight: var(--weight-bold);
	line-height: 1.1;
	color: var(--kc-lp-on);
}
.kc-lp-membership-unit { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--kc-lp-on); }
.kc-lp-membership-sub { margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: 1.5; color: var(--kc-lp-on); opacity: .9; }
.kc-lp-membership-cta { justify-content: center; }


/* ============================================================================
 * BATCH D — steps / cards. APPEND to kutri-landing.css §4 at the integration step.
 *   4.D1 howto      — how-it-works, 5 numbered steps. Two treatment siblings:
 *                     lp-howto (white band, normaali) + lp-howto--rohkea (accent
 *                     band). ONE CSS family; they differ only by .kc-lp-howto--rohkea.
 *   4.D2 coursepack — course pack: 4 icon cards + a STABLE bg-oranssi bonus box
 *                     (lp-course-pack, white band, normaali).
 *
 * REUSES (do NOT redefine at integration): the .kc-lp-sec consumer scope, the
 * colour var layer (--kc-lp-accent/-accent-deep/-on/-tint/-star), .kc-eyebrow /
 * .kc-h2 / .kc-lead, .kc-wrap, and the @media(min-width:768px) equal-height family
 * (~L1773). Number circles are NOT icons — styled paragraphs. Every selector is .kc-.
 * No hardcoded white on a fill: accent discs use --kc-lp-accent/--kc-lp-star + a
 * keltainen/pinkki override so the colour swap stays WCAG-safe.
 * ========================================================================== */


/* ---- 4.D1 howto (white-band normaali + accent-band rohkea) --------------- */

/* Band-mode: rohkea paints the whole band the accent colour; normaali OMITS the
   rule (stays white). */
.kc-lp-howto--rohkea.is-style-kc-lp-petrooli,
.kc-lp-howto--rohkea.is-style-kc-lp-keltainen,
.kc-lp-howto--rohkea.is-style-kc-lp-vaaleansininen,
.kc-lp-howto--rohkea.is-style-kc-lp-valkoinen,
.kc-lp-howto--rohkea.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-howto { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Eyebrow row: the rocket-launch icon is kept OUT of the .kc-eyebrow paragraph
   (a block can't live inside another block's RichText). accent-deep is always dark
   → readable on every white-band colour; rohkea flips it on-band below. */
.kc-lp-howto-eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.kc-lp-howto-eyebrow .kc-icon { flex: none; font-size: 1.15em; color: var(--kc-lp-accent-deep); }

/* Keep the reused .kc-h2 dark on the white band in ALL colour styles (don't let it
   inherit --kc-lp-on, which is white for petrooli/vaaleansininen). on-band wins for
   rohkea (3 classes > 2). */
.kc-lp-howto .kc-h2 { color: var(--color-laivasto); }

/* 5-step grid → 2 cols ≤880 → 1 col ≤640. Steps are borderless columns, so no
   equal-height needed (top-aligned). */
.kc-lp-howto-steps {
	margin: var(--space-6) 0 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-5);
	align-items: start;
}
@media (max-width: 880px) { .kc-lp-howto-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-lp-howto-steps { grid-template-columns: 1fr; } }

.kc-lp-howto-step { display: flex; flex-direction: column; gap: var(--space-3); }

/* Number circle — a styled paragraph, NOT an icon. White-band normaali: accent disc
   + white number; keltainen has a LIGHT accent so its number flips to laivasto. */
.kc-lp-howto-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	margin: 0;
	border-radius: var(--radius-full);
	background: var(--kc-lp-accent);
	color: var(--color-valkoinen);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1;
}
.kc-lp-howto.is-style-kc-lp-keltainen .kc-lp-howto-num { color: var(--color-laivasto); }

/* Step title — accent (petrooli on the valkoinen default); keltainen accent is
   unreadable on white → laivasto. */
.kc-lp-howto-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: 1.25;
	color: var(--kc-lp-accent);
}
.kc-lp-howto.is-style-kc-lp-keltainen .kc-lp-howto-title { color: var(--color-laivasto); }

.kc-lp-howto-body {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--text-primary);
}

/* ROHKEA modifier: full colour band → eyebrow icon, title, body read on-band. */
.kc-lp-howto--rohkea .kc-lp-howto-eyebrow .kc-icon,
.kc-lp-howto--rohkea .kc-lp-howto-title,
.kc-lp-howto--rohkea .kc-lp-howto-body { color: var(--kc-lp-on); }

/* Number circles pop off the band: --kc-lp-star = keltaoranssi on petrooli /
   vaaleansininen / valkoinen, petrooli on keltainen. Bigger discs for the bold look. */
.kc-lp-howto--rohkea .kc-lp-howto-num {
	background: var(--kc-lp-star);
	color: var(--color-laivasto);
	width: 3.8rem;
	height: 3.8rem;
	font-size: var(--text-3xl);
}
/* keltainen rohkea: star = petrooli (dark disc) → white number (beats the base
   keltainen rule by source order). */
.kc-lp-howto--rohkea.is-style-kc-lp-keltainen .kc-lp-howto-num { color: var(--color-valkoinen); }
/* pinkki rohkea: band = petrooli AND star = petrooli → collision; force a
   keltaoranssi disc so the circles stay visible. */
.kc-lp-howto--rohkea.is-style-kc-lp-pinkki .kc-lp-howto-num { background: var(--color-keltaoranssi); color: var(--color-laivasto); }


/* ---- 4.D2 coursepack (white band) — 4 icon cards + bonus box ------------- */
.kc-lp-coursepack { padding-block: clamp(2.5rem, 5vw, 4rem); }

.kc-lp-coursepack-eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.kc-lp-coursepack-eyebrow .kc-icon { flex: none; font-size: 1.15em; color: var(--kc-lp-accent-deep); }

/* Keep the reused .kc-h2 dark on the white band in ALL colour styles. */
.kc-lp-coursepack .kc-h2 { color: var(--color-laivasto); }

/* 2-col card grid → 1 col ≤640. Cards are bordered boxes → equal-height per row
   (the @media(min-width:768px) family handles grid-auto-rows; see below). */
.kc-lp-coursepack-grid {
	margin: var(--space-6) 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
@media (max-width: 640px) { .kc-lp-coursepack-grid { grid-template-columns: 1fr; } }

.kc-lp-coursepack-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--color-valkoinen);
	border: var(--border-2) solid var(--kc-lp-accent);
	border-radius: var(--radius);
	padding: var(--space-5);
}
/* Icon badge — accent disc + white glyph; keltainen accent is light → laivasto glyph. */
.kc-lp-coursepack-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--kc-lp-accent);
	color: var(--color-valkoinen);
	font-size: 1.5rem;
}
.kc-lp-coursepack.is-style-kc-lp-keltainen .kc-lp-coursepack-badge { color: var(--color-laivasto); }
.kc-lp-coursepack-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	color: var(--kc-lp-accent);
}
.kc-lp-coursepack.is-style-kc-lp-keltainen .kc-lp-coursepack-title { color: var(--color-laivasto); }
.kc-lp-coursepack-card p { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); }

/* Bonus box — a STABLE bg-oranssi callout: it keeps the same warm surface no matter
   which colour the section uses (matches the model's "kaupan päälle" highlight). */
.kc-lp-coursepack-bonus {
	margin: var(--space-6) 0 0;
	background: var(--color-bg-oranssi);
	color: var(--color-laivasto);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.kc-lp-coursepack-bonushead { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.kc-lp-coursepack-bonusbadge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--color-oranssi);
	color: var(--color-laivasto);
	font-size: 1.5rem;
}
.kc-lp-coursepack-bonustitle { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.3; color: var(--color-laivasto); }
.kc-lp-coursepack-bonuslist {
	--kc-lp-bonus-number-bg: var(--color-keltaoranssi);
	--kc-lp-bonus-number-text: var(--color-tumma-petrooli);
	list-style: none;
	margin: 0;
	/* img-9: indent the numbered list under the title text (clear of the gift badge). */
	padding: 0 0 0 calc(48px + var(--space-3));
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.kc-lp-coursepack-bonuslist.is-style-kc-lp-bonus-keltainen {
	--kc-lp-bonus-number-bg: var(--color-keltaoranssi);
	--kc-lp-bonus-number-text: var(--color-tumma-petrooli);
}
.kc-lp-coursepack-bonuslist.is-style-kc-lp-bonus-petrooli {
	--kc-lp-bonus-number-bg: var(--color-petrooli);
	--kc-lp-bonus-number-text: var(--color-valkoinen);
}
.kc-lp-coursepack-bonuslist.is-style-kc-lp-bonus-vaaleansininen {
	--kc-lp-bonus-number-bg: var(--color-bg-sininen);
	--kc-lp-bonus-number-text: var(--color-tumma-petrooli);
}
.kc-lp-coursepack-bonuslist > li {
	display: list-item;
	position: relative;
	min-height: 1.75rem;
	padding-inline-start: calc(1.75rem + var(--space-3));
	line-height: 1.5;
	color: var(--color-laivasto);
}
.kc-lp-coursepack-bonuslist > li::before {
	content: counter(list-item);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	background: var(--kc-lp-bonus-number-bg);
	color: var(--kc-lp-bonus-number-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: 1;
}


/*!
 * batch-e.css — BATCH E landing-pattern CSS (cards / quotes / redesign)
 * ----------------------------------------------------------------------------
 * Append-only snippet for the ONE integration step (concatenated into
 * kutri-landing.css §4 + §6). NO agent edits kutri-landing.css directly.
 * Every selector starts with `.kc-` (RUCSS safelist /^\.kc-/).
 *
 * Patterns: lp-vip, lp-offer-compare, lp-use-cases-grid, lp-quotes,
 *           lp-quotes--minimal.
 *
 * REUSES (do NOT redefine in the merge): .kc-lp-sec (band + consumer-scope vars),
 *   .kc-lp-sec img[src=""] placeholder (~L74), .kc-lp-iconrow (~L79), the colour
 *   style-variations (§2), .kc-wrap/.kc-h2/.kc-eyebrow/.kc-lead primitives, and
 *   the existing @media(min-width:768px) equal-height block (~L1773) — the new
 *   grids below are ADDED in a separate, additive @media block at the end (not a
 *   redefinition). All tokens (--space-*, --border-3, --weight-*, --text-*,
 *   --ls-title, --radius/-full, --kc-border) already resolve in this stylesheet.
 *
 * Colour-swap safety: inner fills/icons consume --kc-lp-accent/-accent-deep/-tint;
 *   text on light bands is hardcoded laivasto (dark, stable on every tint — never
 *   white, which fails on keltainen). Coloured-fill chips ("Paras diili",
 *   "Suosituin") use the STABLE keltaoranssi+laivasto pair (a chip cannot follow
 *   --kc-lp-on: it would go laivasto-on-petrooli on valkoinen/pinkki).
 * ============================================================================ */


/* ---- 4.E1 vip (TINT band — full pinkki fill on the pinkki default) -------- */
/* tint band-mode: the WHOLE band paints --kc-lp-tint (pinkki default = #ffdeeb). */
.kc-lp-vip.is-style-kc-lp-petrooli,
.kc-lp-vip.is-style-kc-lp-keltainen,
.kc-lp-vip.is-style-kc-lp-vaaleansininen,
.kc-lp-vip.is-style-kc-lp-valkoinen,
.kc-lp-vip.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-tint); }

.kc-lp-vip { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-vip-card {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: clamp(1.8rem, 4vw, 2.6rem);
	border-radius: var(--radius);
	border: var(--border-3) solid var(--kc-lp-accent); /* petrooli frame on pink */
}
.kc-lp-vip-crown .kc-icon { font-size: 3rem; line-height: 1; color: var(--kc-lp-accent); }
.kc-lp-vip-titlerow { gap: var(--space-3); }
.kc-lp-vip-title {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: var(--weight-bold);
	line-height: 1.1;
	color: var(--color-laivasto);
}
.kc-lp-vip-badge {
	margin: 0;
	align-self: center;
	padding: .32rem .8rem;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--ls-title);
	text-transform: uppercase;
	background: var(--color-keltaoranssi); /* STABLE chip pair */
	color: var(--color-laivasto);
}
.kc-lp-vip-body { margin: 0; max-width: 52ch; font-size: var(--text-lg); line-height: 1.6; color: var(--color-laivasto); }
.kc-lp-vip-price { margin: 0; font-size: clamp(2.2rem, 6vw, 3rem); font-weight: var(--weight-bold); line-height: 1; color: var(--color-laivasto); }
.kc-lp-vip-cta { justify-content: center; }


/* ---- 4.E2 offer-compare (white band) — 2 image cards, clean petrooli ----- */
.kc-lp-offer { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
	align-items: stretch; /* 2 cards never wrap on desktop → within-row stretch equalises */
}
.kc-lp-offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: var(--border-3) solid var(--kc-lp-accent);
}
.kc-lp-offer-img { margin: 0; }
.kc-lp-offer-img img { display: block; width: 100%; }
.kc-lp-offer-badge { /* the ONLY colour pop — keltainen "Suosituin" over the image */
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	margin: 0;
	padding: .3rem .75rem;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--ls-title);
	text-transform: uppercase;
	background: var(--color-keltaoranssi); /* STABLE chip pair */
	color: var(--color-laivasto);
}
.kc-lp-offer-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1 1 auto;
	padding: var(--space-5);
}
.kc-lp-offer-name { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.25; color: var(--color-laivasto); }
.kc-lp-offer-price { margin: 0; font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: var(--weight-bold); line-height: 1; color: var(--color-laivasto); }
.kc-lp-offer-sub { margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--text-secondary); }
.kc-lp-offer-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; flex: 1 1 auto; }
.kc-lp-offer-list .kc-lp-iconrow > .kc-icon { color: var(--kc-lp-accent); font-size: 1.2em; margin-top: .1em; }
.kc-lp-offer-list .kc-lp-iconrow > p { font-size: var(--text-base); line-height: 1.5; color: var(--color-laivasto); }
.kc-lp-offer-cta { margin-top: auto; align-self: stretch; justify-content: center; }


/* ---- 4.E3 use-cases-grid (white band) — 6 icon cards, DARK text ---------- */
.kc-lp-ucgrid { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-ucgrid-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-ucgrid-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--kc-lp-tint); /* borderless tinted fill — swaps colour cleanly */
	color: var(--color-laivasto);
}
.kc-lp-ucgrid-card > .kc-icon { font-size: 2rem; line-height: 1; flex: none; color: var(--kc-lp-accent); }
.kc-lp-ucgrid-cardh { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.3; color: var(--color-laivasto); }
/* Katri: darker body text, NOT --text-secondary grey. */
.kc-lp-ucgrid-cardp { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-laivasto); }
.kc-lp-ucgrid-foot { margin-top: var(--space-6); align-items: flex-start; max-width: 66ch; }
.kc-lp-ucgrid-foot > .kc-icon { font-size: 1.4em; margin-top: .1em; color: var(--kc-lp-accent); }
.kc-lp-ucgrid-foot > p { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.6; color: var(--color-laivasto); }


/* ---- 4.E4 quotes (white band, tinted cards) + --minimal modifier --------- */
.kc-lp-quotes { padding-block: clamp(3rem, 6vw, 5rem); }
.kc-lp-quotes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.kc-lp-quotes-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--kc-lp-tint);
	color: var(--color-laivasto);
}
.kc-lp-quotes-mark .kc-icon { font-size: 2.4rem; line-height: 1; color: var(--kc-lp-accent); }
.kc-lp-quotes-quote { margin: 0; font-size: var(--text-lg); line-height: 1.5; font-weight: var(--weight-medium); color: var(--color-laivasto); }
.kc-lp-quotes-cite { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--kc-lp-accent-deep); }

/* minimalistinen: narrow centred stack, hairline separators, no fill, big mark */
.kc-lp-quotes--minimal .kc-h2 { text-align: center; }
.kc-lp-quotes--minimal .kc-lp-quotes-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 46rem;
	margin-inline: auto;
}
.kc-lp-quotes--minimal .kc-lp-quotes-card {
	background: transparent;
	border-radius: 0;
	padding: var(--space-6) 0;
	gap: var(--space-4);
	height: auto; /* override the equal-height rule — stacked, not a grid */
}
.kc-lp-quotes--minimal .kc-lp-quotes-card + .kc-lp-quotes-card { border-top: var(--kc-border); }
.kc-lp-quotes--minimal .kc-lp-quotes-mark .kc-icon { font-size: 2.8rem; color: var(--kc-lp-accent); }
.kc-lp-quotes--minimal .kc-lp-quotes-quote { font-size: var(--text-xl); font-weight: var(--weight-normal); }
.kc-lp-quotes--minimal .kc-lp-quotes-cite { color: var(--text-secondary); }


/* ============================================================================
 * ===== PATTERN QUALITY FIX 2026-06-30 (types A-H) =====
 * Source: 3 annotated screenshots (bonus-stack, offer-compare, course-pack) +
 * live DOM measurements at 1253px on pages 46786 / 46894. Every issue confirmed
 * on the LIVE front end (not editor-only). Scoped to .kc-lp-sec; every selector
 * starts with .kc- (RUCSS safelist /^\.kc-/). The served CSS has ZERO !important
 * and no rule beats these on specificity, so no !important is needed.
 * Plan: plans/2026-06-30-tt25-pattern-laatukorjaus.md
 * ========================================================================== */

/* A + C — header-stack colours. POSITIVE selectors (no `:not()`): WP Rocket RUCSS
 * tree-shakes `:not()`-based rules out of the per-page used-css (confirmed live
 * 2026-06-30 — the `:not(.kc-lp-on-band)` version was silently dropped). Dark
 * bands are handled by the EXISTING higher-specificity on-band rule
 * `.kc-lp-sec.kc-lp-on-band .kc-eyebrow / .kc-lead` (0,3,0) at L146-147, which
 * overrides these (0,2,0). */
.kc-lp-sec .kc-eyebrow { color: var(--color-petrooli); }
.kc-lp-sec .kc-lead    { color: var(--text-primary); }

/* B + D — eyebrow / h2 / lead vertical rhythm. The base primitives set
 * `margin:0`, so the only gap was line-height (too tight). These (0,2,0) win. */
.kc-lp-sec .kc-eyebrow { margin-bottom: var(--space-4); }
.kc-lp-sec .kc-lead    { margin-top: var(--space-5); }

/* E — neutralise the WP flow-layout top margin (~1.2em) that WP injects on every
 * grid/row child except :first-child. That margin made the first card sit higher
 * and the rest staggered. Every container listed spaces with `gap`, so clearing
 * margin-block is safe. (0,2,0) + `> *` beats WP's :where() block-gap rule. */
.kc-lp-sec .kc-lp-stats-grid > *,
.kc-lp-sec .kc-lp-bonus-list > *,
.kc-lp-sec .kc-lp-contents-grid > *,
.kc-lp-sec .kc-lp-coursepack-grid > *,
.kc-lp-sec .kc-lp-pain-grid > *,
.kc-lp-sec .kc-lp-testimonials-grid > *,
.kc-lp-sec .kc-lp-usecases-cards > *,
.kc-lp-sec .kc-lp-usecases-grid > *,
.kc-lp-sec .kc-lp-qualgrid-grid > *,
.kc-lp-sec .kc-lp-qualifier-grid > *,
.kc-lp-sec .kc-lp-ucgrid-grid > *,
.kc-lp-sec .kc-lp-topics-grid > *,
.kc-lp-sec .kc-lp-xsell-grid > *,
.kc-lp-sec .kc-lp-membership-grid > *,
.kc-lp-sec .kc-lp-instrfeat-cards > *,
.kc-lp-sec .kc-lp-learnlist-cols > *,
.kc-lp-sec .kc-lp-quotes-grid > *,
.kc-lp-sec .kc-lp-offer-grid > *,
.kc-lp-sec .kc-lp-herosplit-grid > *,
.kc-lp-sec .kc-lp-howto-steps > *,
.kc-lp-sec .kc-lp-compare-grid > *,
.kc-lp-sec .kc-lp-authority-row > *,
.kc-lp-sec .kc-lp-trust-row > *,
.kc-lp-sec .kc-lp-pikastartti-row > *,
.kc-lp-sec .kc-lp-pikastartti-steps > *,
.kc-lp-sec .kc-lp-usecases-row > *,
.kc-lp-sec .kc-lp-compare-row > *,
.kc-lp-sec .kc-lp-hero-split > * { margin-block: 0; }

/* F — the chip already wants the variant-paired on-accent colour (var(--kc-lp-on),
 * same as .kc-lp-bonus-badge), but `.kc-lp-bonus-item p` (0,1,1) overrode the
 * chip's own (0,1,0) rule, leaving #23485c on the accent chip (~1.0). Raising
 * specificity to (0,2,0) restores the intended colour — variant-safe (white on
 * petrooli, dark on keltaoranssi), not hardcoded. */
.kc-lp-sec .kc-lp-bonus-price { color: var(--kc-lp-on); }

/* G — clear separation before closing footer notes (were ~1.5rem or block-gap). */
.kc-lp-sec .kc-lp-bonus-extra,
.kc-lp-sec .kc-lp-pikastartti-note,
.kc-lp-sec .kc-lp-learnlist-foot,
.kc-lp-sec .kc-lp-usecases-note,
.kc-lp-sec .kc-lp-ucgrid-foot,
.kc-lp-sec .kc-lp-pricing-note,
.kc-lp-sec .kc-lp-outcomes-note,
.kc-lp-sec .kc-lp-curriculum-note { margin-top: var(--space-7); }

/* H — NOT fixed in CSS: the only real per-card CTA stagger was on offer/compare,
 * whose cards already anchor via `flex:1` body + `margin-top:auto` in a stretched
 * grid cell (correct on the live front end; the misalignment in the screenshot was
 * the EDITOR not applying the >=768px equal-height). membership has ONE shared CTA
 * below the grid (not per-card) and vip is a single content-height card, so there
 * is nothing to anchor there. Left as-is to avoid dead rules. */

/* Filled quote mark — the regular Phosphor "quotes" glyph reads as an outlined
 * "99"; filled is wanted. Phosphor uses the SAME codepoint (\e660) across weights,
 * so we only swap the font on .kc-lp-quotes-mark to a 1-glyph subset of Phosphor
 * Fill (~456 B). Positive .kc- selector (RUCSS-safe); (0,2,0) beats the base
 * .kc-icon font-family. Applies to lp-quotes + lp-quotes-minimal. */
@font-face {
	font-family: "PhosphorFill";
	src: url("https://kutri.net/wp-content/themes/kutri-tt25/assets/fonts/Phosphor-Fill-quotes.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.kc-lp-quotes-mark .kc-icon { font-family: "PhosphorFill"; }


/* ============================================================================
 * Round-2 fixes (Katri's annotated screenshots, 2026-06-30) — APPENDED LAST so
 * source order beats the §6 vertical-rhythm tail rules they override.
 * Plan: plans/2026-06-30-tt25-pattern-viilaus-2.md
 * ========================================================================== */

/* img-1 + img-10: the eyebrow icon sat ~9px below the text because .kc-eyebrow's
 * margin-bottom (var(--space-4), set globally at "B+D") inflated the flex row's
 * cross-size, so align-items:center pushed the icon down. Move that spacing to the
 * ROW: the eyebrow margin is zeroed (0,3,0 beats the 0,2,0 global) and the row owns
 * the gap to the H2. Centres icon ↔ text in both howto-rohkea and course-pack. */
.kc-lp-sec .kc-lp-howto-eyebrow .kc-eyebrow,
.kc-lp-sec .kc-lp-coursepack-eyebrow .kc-eyebrow { margin-bottom: 0; }
.kc-lp-howto-eyebrow,
.kc-lp-coursepack-eyebrow { margin-bottom: var(--space-4); }

/* img-4: a touch more air between the final-cta eyebrow and the heading.
 * (0,3,0) beats the global .kc-lp-sec .kc-eyebrow margin-bottom (0,2,0). */
.kc-lp-sec.kc-lp-finalcta .kc-eyebrow { margin-bottom: var(--space-5); }


/* ============================================================================
 * NEW (#18) — compare-table: a brand-styled comparison MATRIX (rows × columns),
 * reusable across courses. Each row is its own (unlocked) group → Katri can
 * duplicate / reorder / delete rows; each yes/no cell holds a swappable
 * kutri/icon; value cells are plain paragraphs ("Muutama" / "Koko kirjasto").
 * White band; every selector starts with .kc- (RUCSS-safe). CSS-grid per row
 * (same template on every row) keeps the columns aligned without a <table>.
 * ========================================================================== */
.kc-lp-cmptable { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-cmptable-grid {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
}
/* The data rows now live inside a kutri/lista wrapper (.kc-lp-cmptable-body),
 * one DOM level below .kc-lp-cmptable-grid. `display:contents` makes that
 * wrapper layout-transparent, so the ctable-row blocks stay VISUAL children of
 * the grid stack — the border/gap/margin-reset rules below keep working as if
 * the lista wrapper weren't there. */
.kc-lp-cmptable-body { display: contents; }
/* Row = grid with NO column gap and NO block padding: each child cell owns its
 * padding-block and the columns touch, so the 1px column rules (border-left on
 * cells 2+3, cells stretched to full row height) read as CONTINUOUS vertical
 * lines from the header down to the last row — matching the equally thin
 * (--border-1) horizontal row rules. */
.kc-lp-cmptable-row {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	column-gap: 0;
	row-gap: var(--space-2);
	padding: 0 var(--space-2);
	border-bottom: var(--border-1) solid var(--color-laivasto);
}
.kc-lp-cmptable-row > * { padding-block: var(--space-4); }
.kc-lp-cmptable-row > :first-child { padding-right: var(--space-4); }
/* the thin column separators (same weight as the row rules). */
.kc-lp-cmptable-row > :nth-child(2),
.kc-lp-cmptable-row > :nth-child(3) { border-left: var(--border-1) solid var(--color-laivasto); }
/* Top border of the table sits on the header row. Scoped to the --head class
 * (not :first-child) because the data rows now live inside .kc-lp-cmptable-body
 * (display:contents), so the first DATA row is :first-child of that wrapper and
 * would otherwise pick up a stray border-top. The header row is always present
 * and is the grid's first child. */
.kc-lp-cmptable-row--head { border-top: var(--border-1) solid var(--color-laivasto); }
/* header row: bold labels, the column titles centred above their cells.
 * position:sticky pins it to the viewport top while the table scrolls past;
 * it releases when the grid (its containing block) ends, i.e. after the last
 * row. top offset = the WP admin bar when logged in (front end sets the var),
 * 0 for visitors — the TT25 site header is not sticky. bg-sininen is opaque,
 * so rows sliding underneath never show through. */
.kc-lp-cmptable-row--head {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 2;
	background: var(--color-bg-sininen);
	border-radius: var(--radius) var(--radius) 0 0;
}
.kc-lp-cmptable-feat { margin: 0; font-weight: var(--weight-semibold); line-height: 1.4; color: var(--color-laivasto); display: flex; align-items: center; }
.kc-lp-cmptable-feathead,
.kc-lp-cmptable-colhead { margin: 0; font-weight: var(--weight-bold); color: var(--color-laivasto); }
.kc-lp-cmptable-colhead { text-align: center; line-height: 1.3; display: flex; align-items: center; justify-content: center; }
/* yes/no cell — the kutri/icon is a DIRECT group child (never inside a paragraph). */
.kc-lp-cmptable-cell { display: flex; align-items: center; justify-content: center; }
.kc-lp-cmptable-cell .kc-icon { font-size: 1.8rem; line-height: 1; color: var(--color-laivasto); }
/* colour follows the GLYPH, so swapping check↔x recolours automatically. */
.kc-lp-cmptable-cell .kc-ic-check-circle,
.kc-lp-cmptable-cell .kc-ic-check { color: var(--color-turkoosi); }
.kc-lp-cmptable-cell .kc-ic-x-circle,
.kc-lp-cmptable-cell .kc-ic-x { color: var(--text-secondary); }
/* text value cell ("Muutama" / "Koko kirjasto"). */
.kc-lp-cmptable-val { margin: 0; text-align: center; font-weight: var(--weight-semibold); line-height: 1.35; color: var(--color-laivasto); }
/* mobile: feature label spans the top, the two value columns sit below it.
 * The feature cell moves to its own grid row, so only the line BETWEEN the two
 * value columns remains (child 2 starts the row — its border-left would sit on
 * the table edge). Tighter cell padding; the feature label keeps only a small
 * gap to its value row (row-gap covers it). */
@media (max-width: 600px) {
	.kc-lp-cmptable-row { grid-template-columns: 1fr 1fr; }
	.kc-lp-cmptable-row > * { padding-block: var(--space-2); }
	.kc-lp-cmptable-row > :first-child { padding-right: 0; padding-bottom: 0; }
	.kc-lp-cmptable-row > :nth-child(2) { border-left: 0; }
	.kc-lp-cmptable-feat,
	.kc-lp-cmptable-feathead { grid-column: 1 / -1; }
}
/* neutralise WP flow block-gap on the rows + cells (border + gap own the spacing). */
.kc-lp-sec .kc-lp-cmptable-grid > *,
.kc-lp-sec .kc-lp-cmptable-row > * { margin-block: 0; }
/* CTA row closing the table: free join + direct-to-checkout side by side. The
   flex layout itself comes from the group block's own layout attribute. */
.kc-lp-cmptable-cta { margin-top: var(--space-5); gap: var(--space-4); }


/* ---- kutri/tarjous + kutri/hinta — section offer and its live price --------
 * kutri/tarjous carries nothing visual: it exists so ONE offer choice reaches
 * the price and both CTA buttons through block context. display:contents keeps
 * its children direct children of the real layout parent (same trick as
 * .kc-lp-cmptable-body), so wrapping a section in it changes no layout at all.
 * NOTE: display:contents also removes the box in the EDITOR canvas — accepted,
 * kutri/lista has behaved this way since 2026-07-02. */
.kc-tarjous { display: contents; }
/* kutri/hinta supplies structure only; the LOOK comes from the pattern class it
 * carries (kc-lp-compare-price in a card, kc-lp-cmptable-colhead in a head
 * cell), so no sizes are set here. --pino (label above price) stacks the two
 * lines; it must beat the centred flex row of .kc-lp-cmptable-colhead, hence
 * the later position in this file. */
.kc-hinta--pino {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
}
.kc-hinta-label { line-height: 1.25; }
.kc-hinta-value { white-space: nowrap; }
/* Struck regular price before the current one (kutri/hinta 1.1.0 showRegular).
 * <s> brings the line-through; this just calms it down next to the real price. */
.kc-hinta-old { font-weight: var(--weight-normal); color: var(--text-secondary); white-space: nowrap; margin-right: .3em; }

/* ---- Tuotekortti (Landing sinkut: lps-tuotekortti-a/b/c, 2026-07-31) ------
 * Standalone product card built from kutri/tarjous + rating + hinta + a CTA
 * lista (osta-nappi ↔ liity-nappi swappable in locked instances). Katri
 * approved ALL THREE variants; layout differences live here, anatomy in the
 * pattern files. White box card — works on any band. Full border, 6 px
 * radius, flat fill (DESIGN-RULES). */
.kc-tuotekortti {
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
	border: 1px solid var(--kc-border);
	border-radius: 6px;
	overflow: hidden;
	max-width: 380px;
}
.kc-tuotekortti-kuva { margin: 0; }
.kc-tuotekortti-kuva img { display: block; width: 100%; height: auto; }
.kc-tuotekortti-body { padding: 1rem 1.2rem 1.3rem; }
.kc-tuotekortti-body > * { margin-top: 0; margin-bottom: .55rem; }
.kc-tuotekortti-body > *:last-child { margin-bottom: 0; }
.kc-tuotekortti-otsikko { font-size: var(--text-xl); }
.kc-tuotekortti-kuvaus { font-size: var(--text-sm); color: var(--text-secondary); }
.kc-tuotekortti-hinta { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.kc-tuotekortti-cta { margin-top: .8rem; }
/* B Keskitie: horizontal, image column left. */
.kc-tuotekortti--keskitie { max-width: 640px; display: flex; align-items: stretch; }
.kc-tuotekortti--keskitie > .kc-tuotekortti-kuva { flex: 0 0 38%; }
.kc-tuotekortti--keskitie > .kc-tuotekortti-kuva img { height: 100%; object-fit: cover; }
.kc-tuotekortti--keskitie > .kc-tuotekortti-body { flex: 1; }
@media (max-width: 600px) {
	.kc-tuotekortti--keskitie { display: block; max-width: 380px; }
	.kc-tuotekortti--keskitie > .kc-tuotekortti-kuva img { height: auto; }
}


/* ---- CTA colour ROLES for the offer buttons (Katri 2026-07-27) ------------
 * The band↔CTA pairing near the top of this file stays the default for every
 * ordinary button. The offer pair is the documented exception: the FREE join
 * button and the PAID checkout button appear side by side, so if both took the
 * band's single CTA colour they would be indistinguishable. Each therefore
 * carries an explicit role class emitted by kcore_tarjous_button_class():
 *
 *   .kc-btn--petrooli   free join → petrooli fill, white text     (8.6:1)
 *   .kc-btn--keltainen  paid buy  → keltaoranssi fill, laivasto   (10.6:1)
 *
 * Hover follows the house pattern (kutri-kc-alias --kc-cta-hover = laivasto)
 * for petrooli; the gold button darkens toward laivasto instead of switching
 * hue, keeping it gold and still 8:1. Engines without color-mix() simply keep
 * the base gold — no broken state.
 *
 * PLACEMENT MATTERS: these selectors tie with the pairing rule at (0,4,0), so
 * source order decides. Keep this block at the END of the file.
 * The un-scoped selector is listed too so the roles also work outside
 * .kc-lp-sec (e.g. a future footer placement). */
.wp-block-button.kc-btn--petrooli .wp-block-button__link,
.kc-lp-sec .wp-block-button.kc-btn--petrooli .wp-block-button__link {
	background-color: var(--color-petrooli);
	color: var(--color-valkoinen);
	border-color: var(--color-petrooli);
}
.wp-block-button.kc-btn--petrooli .wp-block-button__link:hover,
.wp-block-button.kc-btn--petrooli .wp-block-button__link:focus,
.kc-lp-sec .wp-block-button.kc-btn--petrooli .wp-block-button__link:hover,
.kc-lp-sec .wp-block-button.kc-btn--petrooli .wp-block-button__link:focus {
	background-color: var(--color-laivasto);
	color: var(--color-valkoinen);
	border-color: var(--color-laivasto);
}
.wp-block-button.kc-btn--keltainen .wp-block-button__link,
.kc-lp-sec .wp-block-button.kc-btn--keltainen .wp-block-button__link {
	background-color: var(--color-keltaoranssi);
	color: var(--color-laivasto);
	border-color: var(--color-keltaoranssi);
}
.wp-block-button.kc-btn--keltainen .wp-block-button__link:hover,
.wp-block-button.kc-btn--keltainen .wp-block-button__link:focus,
.kc-lp-sec .wp-block-button.kc-btn--keltainen .wp-block-button__link:hover,
.kc-lp-sec .wp-block-button.kc-btn--keltainen .wp-block-button__link:focus {
	background-color: color-mix(in srgb, var(--color-keltaoranssi) 88%, var(--color-laivasto));
	border-color: color-mix(in srgb, var(--color-keltaoranssi) 88%, var(--color-laivasto));
	color: var(--color-laivasto);
}


/* kutri/next-event — the event title links to its calendar page. color:inherit so
 * it reads white on the dark topics CTA bar and dark on a light band; underlined to
 * signal it's clickable. */
.kc-next-event-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kc-next-event-link:hover,
.kc-next-event-link:focus { text-decoration-thickness: 2px; }


/* ============================================================================
 * 7. Hinnankorotuslaskuri — one semantic kutri/hinnankorotus block, four
 *    landing presentations. The time display is one continuous instrument rail,
 *    not a grid of decorative timer cards. The outer group keeps owning the
 *    swappable band colour and the shared band↔CTA pairing.
 * ========================================================================== */
.kc-lp-price-rise-section.is-style-kc-lp-petrooli,
.kc-lp-price-rise-section.is-style-kc-lp-keltainen,
.kc-lp-price-rise-section.is-style-kc-lp-vaaleansininen,
.kc-lp-price-rise-section.is-style-kc-lp-valkoinen,
.kc-lp-price-rise-section.is-style-kc-lp-pinkki { --kc-lp-bg: var(--kc-lp-accent); }

.kc-lp-price-rise-section--banner { padding-block: clamp(2rem, 4vw, 3.25rem); }
.kc-lp-price-rise-section--hero { padding-block: clamp(3.5rem, 7vw, 6rem); }
.kc-lp-price-rise-section--compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.kc-lp-price-rise-section--narrow {
	padding: var(--space-4);
	border-radius: var(--radius);
}
.kc-lp-price-rise-section.kc-lp-price-rise-section--hero { --kc-lp-bg: var(--surface-1); }

.kc-price-rise {
	--kc-pr-on: var(--kc-lp-on, var(--color-laivasto));
	--kc-pr-clock-bg: var(--color-valkoinen);
	--kc-pr-clock-text: var(--color-laivasto);
	--kc-pr-current-bg: var(--color-valkoinen);
	--kc-pr-future-bg: var(--color-bg-pinkki);
	width: 100%;
	font-family: var(--font-family);
	color: var(--kc-pr-on);
}

/* Cached markup fails closed until view.js has evaluated the real client-time
 * visibility window. The outer shell collapses too, so stale prices or CTAs
 * never remain visible when scripting is unavailable. */
.kc-price-rise[data-kc-ready="false"] { visibility: hidden; }
.kc-lp-price-rise-section:has(.kc-price-rise[data-kc-ready="false"]),
.kc-lp-price-rise-section:has(.kc-price-rise[hidden]) { display: none; }

.kc-price-rise__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(18rem, .82fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.kc-price-rise__copy,
.kc-price-rise__action { min-width: 0; }

.kc-price-rise__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--ls-label);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--kc-pr-on);
	opacity: .88;
}
.kc-price-rise__eyebrow time { white-space: nowrap; }
.kc-price-rise--hero .kc-price-rise__eyebrow { color: var(--color-petrooli); opacity: 1; }

.kc-price-rise__headline {
	max-width: 28ch;
	margin: 0;
	font-size: clamp(1.65rem, 3vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
	color: var(--kc-pr-on);
}
.kc-price-rise--hero .kc-price-rise__headline {
	max-width: 19ch;
	font-size: var(--text-6xl);
	line-height: var(--lh-display);
}
.kc-price-rise--compact .kc-price-rise__headline {
	max-width: 32ch;
	font-size: var(--text-2xl);
}

/* Current→future price is a real two-state sequence, so one continuous split
 * rail communicates the step without a generic card grid. */
.kc-price-rise__prices {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	margin: var(--space-5) 0 0;
	padding: 0;
	overflow: hidden;
	border: var(--border-3) solid var(--color-laivasto);
	border-radius: var(--radius);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
}
.kc-price-rise__price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-1);
	min-width: 0;
	padding: var(--space-3) var(--space-5);
}
.kc-price-rise__price--current { background: var(--kc-pr-current-bg); }
.kc-price-rise__price--future { background: var(--kc-pr-future-bg); }
.kc-price-rise__price dt {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.35;
	color: var(--text-secondary);
}
.kc-price-rise__price--current dt { color: var(--color-laivasto); }
.kc-price-rise__price dd {
	margin: 0;
	font-size: clamp(1.35rem, 2.5vw, var(--text-3xl));
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--color-laivasto);
}

.kc-price-rise__action {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.kc-price-rise--hero .kc-price-rise__action {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: var(--border-3) solid var(--color-laivasto);
	border-radius: var(--radius);
	background: var(--color-valkoinen);
	color: var(--color-laivasto);
}
.kc-price-rise__clock-label {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--ls-label);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--kc-pr-on);
}
.kc-price-rise--hero .kc-price-rise__clock-label { color: var(--color-laivasto); }

.kc-price-rise__clock {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(.35rem, 1.2vw, var(--space-3));
	width: 100%;
	padding: clamp(.8rem, 2vw, 1.2rem);
	border: 0;
	border-radius: var(--radius);
	background: var(--kc-pr-clock-bg);
	color: var(--kc-pr-clock-text);
}
.kc-lp-price-rise-section.is-style-kc-lp-keltainen .kc-price-rise {
	--kc-pr-clock-bg: var(--color-valkoinen);
	--kc-pr-current-bg: var(--color-valkoinen);
}
.kc-price-rise--hero { --kc-pr-clock-bg: var(--color-keltaoranssi); }
.kc-price-rise__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.kc-price-rise__value {
	display: block;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: .95;
	letter-spacing: var(--ls-display);
	white-space: nowrap;
}
.kc-price-rise__separator {
	display: block;
	padding-top: .02em;
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: var(--weight-bold);
	line-height: .95;
}
.kc-price-rise__label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	color: var(--color-laivasto);
}
.kc-price-rise__cta {
	width: 100%;
	margin-top: var(--space-4);
	justify-content: stretch;
}
.kc-price-rise__cta .wp-block-button { width: 100%; }
.kc-price-rise__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--touch-comfortable);
	text-align: center;
}

/* The compact bookend preserves the same rail, but lowers its visual volume. */
.kc-price-rise--compact .kc-price-rise__inner {
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.kc-price-rise--compact .kc-price-rise__prices { margin-top: var(--space-4); }
.kc-price-rise--compact .kc-price-rise__price { padding: var(--space-2) var(--space-4); }
.kc-price-rise--compact .kc-price-rise__price dd { font-size: var(--text-xl); }
.kc-price-rise--compact .kc-price-rise__clock { padding: var(--space-3); }
.kc-price-rise--compact .kc-price-rise__value { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.kc-price-rise--compact .kc-price-rise__separator { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* A blog post is constrained to 800px even when the browser viewport is wide.
 * This variant therefore sizes itself from its own container and uses a small,
 * fixed timer scale instead of the viewport-based display scale above. */
.kc-price-rise--narrow {
	container-name: kc-price-rise-narrow;
	container-type: inline-size;
}
.kc-price-rise--narrow .kc-price-rise__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}
.kc-price-rise__narrow-message {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25em .45em;
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.45;
	color: var(--kc-pr-on);
}
.kc-price-rise__narrow-product { font-weight: var(--weight-bold); }
.kc-price-rise__narrow-deadline time { white-space: nowrap; }
.kc-price-rise__narrow-prices {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	white-space: nowrap;
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
}
.kc-price-rise__narrow-future {
	padding: .1em .4em;
	border-radius: var(--radius);
	background: var(--color-bg-pinkki);
	color: var(--color-laivasto);
}
.kc-price-rise__narrow-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	gap: var(--space-3);
}
.kc-price-rise--narrow .kc-price-rise__clock {
	min-height: var(--touch-comfortable);
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
}
.kc-price-rise--narrow .kc-price-rise__value { font-size: var(--text-2xl); }
.kc-price-rise--narrow .kc-price-rise__separator { font-size: var(--text-xl); }
.kc-price-rise--narrow .kc-price-rise__label {
	margin-top: var(--space-1);
	font-size: var(--text-xs);
}
.kc-price-rise--narrow .kc-price-rise__cta {
	width: auto;
	margin-top: 0;
}
.kc-price-rise--narrow .kc-price-rise__cta .wp-block-button,
.kc-price-rise--narrow .kc-price-rise__cta .wp-block-button__link { height: 100%; }
.kc-price-rise--narrow .kc-price-rise__cta .wp-block-button__link {
	padding-inline: var(--space-5);
}

@container kc-price-rise-narrow (max-width: 36rem) {
	.kc-price-rise__narrow-bottom { grid-template-columns: minmax(0, 1fr); }
	.kc-price-rise--narrow .kc-price-rise__cta { width: 100%; }
}

/* Editor warnings sit above the rendered preview without changing front-end
 * geometry. The preview never receives data-kc-ready=false. */
.kc-price-rise--editor > .components-notice { margin: 0 0 var(--space-3); }

@media (max-width: 880px) {
	.kc-price-rise__inner,
	.kc-price-rise--compact .kc-price-rise__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
	.kc-price-rise__headline,
	.kc-price-rise--hero .kc-price-rise__headline,
	.kc-price-rise--compact .kc-price-rise__headline { max-width: 24ch; }
	.kc-price-rise__action { width: min(100%, 38rem); }
}

@media (max-width: 540px) {
	.kc-lp-price-rise-section--banner,
	.kc-lp-price-rise-section--hero,
	.kc-lp-price-rise-section--compact { padding-block: var(--space-7); }
	.kc-price-rise__prices { display: flex; width: 100%; }
	.kc-price-rise__price { flex: 1 1 50%; padding: var(--space-3); }
	.kc-price-rise__price dt { font-size: clamp(.68rem, 3vw, var(--text-xs)); }
	.kc-price-rise__price dd { font-size: clamp(1.2rem, 6vw, 1.65rem); }
	.kc-price-rise__clock { gap: var(--space-1); padding: var(--space-3) var(--space-2); }
	.kc-price-rise__value { font-size: clamp(2rem, 12vw, 3.25rem); }
	.kc-price-rise__separator { font-size: clamp(1.8rem, 10vw, 2.9rem); }
	.kc-price-rise__label { font-size: clamp(.66rem, 3vw, var(--text-xs)); }
	.kc-price-rise--hero .kc-price-rise__action { padding: var(--space-4); }
}


/* ==========================================================================
 * 12. Guide grid — three editable 3:4 previews with an editorial index.
 *     TINT band: each existing LP colour style supplies its own light surface.
 *     The guides remain an open catalogue, not a repeated card component.
 * ========================================================================== */
.kc-lp-sec.kc-lp-guides {
	--kc-lp-bg: var(--kc-lp-tint);
	--kc-lp-on: var(--color-laivasto);
	color: var(--color-laivasto);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.kc-lp-guides .kc-eyebrow,
.kc-lp-guides .kc-h2,
.kc-lp-guides .kc-lead { color: var(--color-laivasto); }
.kc-lp-guides .kc-h2 { max-width: 24ch; }
.kc-lp-guides .kc-lead { max-width: 58ch; }
.kc-lp-guides-intro {
	max-width: 72ch;
	margin-top: var(--space-3);
	font-size: var(--text-base);
	line-height: var(--lh-body);
	color: var(--color-laivasto);
}
.kc-lp-guides-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-7);
	margin-top: var(--space-7);
}
/* Gutenberg renders a Group with layout.type=default as is-layout-flow. Its
 * block-gap becomes margin-block-start on children 2+, even after this wrapper
 * is converted to CSS Grid. Reset that inherited margin and let grid gap own
 * all spacing so every gallery starts on the same row. */
.kc-lp-guides-grid > .kc-lp-guides-item { margin-block-start: 0; }
.kc-lp-guides-item {
	width: 100%;
	max-width: 25rem;
	min-width: 0;
	margin-inline: auto;
}
.kc-lp-guides .kc-galleria { width: 100%; }
.kc-lp-guides .kc-galleria__frame {
	border: var(--border-3) solid var(--kc-lp-accent-deep);
	background: var(--color-valkoinen);
}
.kc-lp-guides .kc-galleria__dot-visual {
	border-color: var(--kc-lp-accent-deep);
}
.kc-lp-guides .kc-galleria__dot[aria-current="true"] .kc-galleria__dot-visual,
.kc-lp-guides .kc-galleria__dot[aria-current="true"]:hover .kc-galleria__dot-visual {
	background: var(--kc-lp-accent);
}
.kc-lp-guides-copy {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.kc-lp-guides-copy--aligned {
	grid-template-areas:
		"number title"
		". description";
	column-gap: var(--space-3);
	row-gap: var(--space-3);
}
.kc-lp-guides-copy--aligned > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.kc-lp-guides-num {
	margin: 0;
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: .95;
	letter-spacing: var(--ls-display);
	color: var(--kc-lp-accent-deep);
}
.kc-lp-guides-copy--aligned > .kc-lp-guides-num {
	grid-area: number;
	align-self: end;
}
/* Compatibility for pages inserted from the first pattern version. New
 * pattern instances place title and description directly in the parent grid. */
.kc-lp-guides-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}
.kc-lp-guides-title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-heading);
	color: var(--kc-lp-accent-deep);
	hyphens: auto;
	overflow-wrap: anywhere;
}
.kc-lp-guides-copy--aligned > .kc-lp-guides-title {
	grid-area: title;
	align-self: end;
}
.kc-lp-guides-desc {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-laivasto);
}
.kc-lp-guides-copy--aligned > .kc-lp-guides-desc { grid-area: description; }

@media (min-width: 900px) {
	.kc-lp-guides-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1.5rem, 3vw, 3rem);
	}
	.kc-lp-guides-item {
		max-width: none;
		margin-inline: 0;
	}
}