/*!
 * Kutri Canvas — portable component library (.kc-*)
 * Version: 1.0.0
 *
 * SOURCE OF TRUTH: WordpressGuru repo — FTP deploy only, do NOT edit on the server.
 *
 * PORTABLE layer: theme-independent. Carries no host-theme or block-editor
 * vendor tokens, so it survives a theme switch (e.g. to TT5) unchanged. Tokens
 * live on .kutri-canvas-inner (the adapter scope). Reuses the preloaded Lexend font.
 * Declares optional Phosphor icon support whose src is a kutri.net ABSOLUTE path
 * (the same shared font the guides use) — gate-safe (no offsite url()/@import).
 * Distilled from the Claude Design shop page; fixed 3/4-col grids generalized to
 * auto-fit, type uses fixed token sizes.
 *
 * BRAND ALIGNMENT (Kutri Swiss Design): primary buttons are PETROOLI (#094f7c)
 * with white text (~8.6:1) — replaces the old orange #FF8A00/#B85C00 CTA. Rating
 * stars are keltaoranssi #F9C51A (decorative, aria-hidden). No box-shadow (border
 * instead), radius max 4px (pills 9999px), no gradients, 10px colour-bar separators,
 * optional Phosphor icon affordances. Lexend kept.
 *
 * Sections inside one Custom HTML block: hero, band, grid, card, price, stats, FAQ.
 */

/* ----------------------------------------------------------------------------
 * Adapter scope — TT25 theme copy (Phase 7): the hardcoded --kc-* TOKEN block
 * was DELETED here. Colors, --kc-cta/--kc-cta-hover, --kc-radius,
 * --kc-radius-pill and --kc-font now resolve through the alias layer
 * (kutri-kc-alias.css -> --color-*/--text-*/--radius*/--font-family tokens in
 * kutri-tokens.css), enqueued BEFORE this file. Only the NON-MAPPABLE
 * consumer-scope vars stay here per the token-pipeline WP6 contract:
 * --kc-fs-*, --kc-border, --kc-max*.
 * -------------------------------------------------------------------------- */
.kutri-canvas-inner {
	--kc-border: 1px solid rgba(9, 79, 124, 0.18);
	--kc-max: 1200px;
	--kc-max-narrow: 920px;

	/* Type scale — fixed sizes, no viewport-based font scaling. */
	--kc-fs-body: 1.0625rem;   /* 17px */
	--kc-fs-h1: 2.5rem;        /* 40px */
	--kc-fs-h2: 2rem;          /* 32px */
	--kc-fs-h3: 1.25rem;       /* 20px */
	--kc-fs-price: 1.5rem;     /* 24px */
	--kc-fs-stat: 2.5rem;      /* 40px */
	--kc-fs-small: 0.875rem;        /* 14px */
	--kc-fs-eyebrow: 0.8125rem;     /* 13px */

	font-family: var(--kc-font);
	font-size: var(--kc-fs-body);
	line-height: 1.6;
	color: var(--kc-teksti);
	background: var(--kc-valkoinen);
}

/* ----------------------------------------------------------------------------
 * Phosphor icons — same shared font the kutri.net guides use. The src is a
 * kutri.net ABSOLUTE path (passes the host-anchored gate; no offsite url()).
 * Only the handful of codepoints this page needs are mapped (keeps the library
 * small) — the convention matches the guides' .ph / .ph.ph-NAME:before rules.
 * Icons are aria-hidden decoration; they never carry meaning the text lacks.
 * -------------------------------------------------------------------------- */
@font-face {
	font-family: "Phosphor";
	src: url("https://kutri.net/wp-content/oppaat/_shared/fonts/Phosphor.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.kc-icon {
	font-family: "Phosphor";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.kc-icon::before { content: var(--kc-ic, ""); }
/* Codepoint map (Phosphor regular) — verbatim from kutri-base.css. */
.kc-ic-seal-check    { --kc-ic: "\e606"; }
.kc-ic-shield-check  { --kc-ic: "\e40c"; }
.kc-ic-credit-card   { --kc-ic: "\e1d2"; }
.kc-ic-wallet        { --kc-ic: "\e68a"; }
.kc-ic-gift          { --kc-ic: "\e276"; }
.kc-ic-sparkle       { --kc-ic: "\e6a2"; }
.kc-ic-graduation    { --kc-ic: "\e62c"; }
.kc-ic-heart         { --kc-ic: "\e2a8"; }
.kc-ic-pencil        { --kc-ic: "\e3b4"; }
.kc-ic-crown         { --kc-ic: "\e614"; }
.kc-ic-chat          { --kc-ic: "\e168"; }
.kc-ic-calendar      { --kc-ic: "\e108"; }
.kc-ic-quotes        { --kc-ic: "\e660"; }
.kc-ic-arrow-right   { --kc-ic: "\e06c"; }
.kc-ic-check         { --kc-ic: "\e182"; }
/* Contextual sizing: icon inherits the surrounding font-size by default; these
 * trims keep it optically balanced inside an eyebrow, button or info title. */
.kc-eyebrow .kc-icon { font-size: 1em; margin-right: 0.4em; vertical-align: -0.08em; }
.kc-btn .kc-icon { font-size: 1.15em; }
.kc-info__title .kc-icon { font-size: 1.1em; margin-right: 0.4em; vertical-align: -0.1em; }
.kc-pathlabel__title .kc-icon { font-size: 1.05em; margin-right: 0.45em; vertical-align: -0.1em; color: var(--kc-petrooli); }
.kc-pathlabel--turkoosi .kc-pathlabel__title .kc-icon { color: var(--kc-keskisininen); }
.kc-pathlabel--keskisininen .kc-pathlabel__title .kc-icon { color: var(--kc-keskisininen); }
.kc-quote__mark .kc-icon { font-size: 1em; }
.kc-h2 .kc-icon { font-size: 0.9em; margin-right: 0.4em; vertical-align: -0.05em; color: var(--kc-petrooli); }
.kc-band .kc-h2 .kc-icon { color: var(--kc-vaaleaturkoosi); }

/* ----------------------------------------------------------------------------
 * Sections / bands — full-bleed via width:100% (never 100vw -> no scrollbar gap).
 * -------------------------------------------------------------------------- */
.kc-section {
	width: 100%;
	padding: clamp(2.5rem, 1.5rem + 5vw, 3.5rem) clamp(1.125rem, 0.5rem + 3vw, 2rem);
	background: var(--kc-valkoinen);
}
.kc-section--blue { background: var(--kc-bg-sininen); }
.kc-section--pink { background: var(--kc-bg-pinkki); }

/* Dark bands: white text + light accents (header/footer-style contrast). */
.kc-band {
	width: 100%;
	padding: clamp(2.5rem, 1.5rem + 5vw, 3.5rem) clamp(1.125rem, 0.5rem + 3vw, 2rem);
	color: var(--kc-valkoinen);
}
.kc-band--navy { background: var(--kc-laivasto); }
.kc-band--cta { background: var(--kc-cta); }          /* petrooli band; white text ~8.6:1 */
.kc-band p,
.kc-band .kc-lead { color: rgba(255, 255, 255, 0.92); }

/* Inner width limiters. */
.kc-wrap { max-width: var(--kc-max); margin-inline: auto; }
.kc-wrap--narrow { max-width: var(--kc-max-narrow); margin-inline: auto; }

/* Section colour-bar separator (Swiss rule: 10px solid bar between sections). */
.kc-divbar { width: 100%; height: 10px; }
.kc-divbar--petrooli { background: var(--kc-petrooli); }
.kc-divbar--turkoosi { background: var(--kc-turkoosi); }
.kc-divbar--keskisininen { background: var(--kc-keskisininen); }
.kc-divbar--oranssi { background: var(--kc-oranssi); }
.kc-divbar--pinkki { background: var(--kc-pinkki); }

/* ----------------------------------------------------------------------------
 * Hero — deterministic <h1>, min-height reserves space (CLS).
 * -------------------------------------------------------------------------- */
.kc-hero {
	width: 100%;
	min-height: clamp(180px, 22vw, 280px);
	padding: clamp(2.5rem, 1.5rem + 5vw, 4rem) clamp(1.125rem, 0.5rem + 3vw, 2rem);
	background: var(--kc-petrooli);
	color: var(--kc-valkoinen);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kc-hero__inner { max-width: var(--kc-max); margin-inline: auto; width: 100%; }
.kc-hero h1 {
	font-size: var(--kc-fs-h1);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	margin: 0;
	color: var(--kc-valkoinen);
}
.kc-hero__lead {
	font-size: 1.125rem;
	margin: 0.75rem 0 0;
	max-width: 48rem;
	color: var(--kc-vaaleaturkoosi);
}

/* ----------------------------------------------------------------------------
 * Headings / text helpers.
 * -------------------------------------------------------------------------- */
.kc-h2 {
	font-size: var(--kc-fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	margin: 0;
	color: var(--kc-teksti);
}
.kc-band .kc-h2 { color: var(--kc-valkoinen); }
.kc-eyebrow {
	display: block;
	font-size: var(--kc-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kc-teksti-vaalea);
}
.kc-band .kc-eyebrow { color: var(--kc-vaaleaturkoosi); }
/* The CTA band is now petrooli (#094f7c). White text on it is ~8.6:1 and
 * vaaleaturkoosi accents pass comfortably, so this band reads like the navy one.
 * Kept the pure-white pin for the body/lead (a touch crisper on petrooli) — the
 * eyebrow keeps vaaleaturkoosi for the brand accent. Equal specificity to the
 * .kc-band rules above; wins by source order. */
.kc-band--cta p,
.kc-band--cta .kc-lead { color: var(--kc-valkoinen); }
.kc-lead {
	font-size: 1.0625rem;
	color: var(--kc-teksti-vaalea);
	margin: 0;
	max-width: 48rem;
}

/* Numbered section header (badge + title in a row). */
.kc-sec-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.kc-sec-head__num {
	flex-shrink: 0;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--kc-radius-pill);
	background: var(--kc-petrooli);
	color: var(--kc-valkoinen);
	display: grid;
	place-items: center;
	font-size: 1.1875rem;
	font-weight: 800;
	/* Optical centring. align-items:center on .kc-sec-head centres the badge on the
	 * heading's LINE BOX, but Lexend's line box is taller than its glyphs and bottom-
	 * heavy (descent + half-leading), so its centre lands near the x-height — ~1.3-1.6px
	 * below the cap-band centre of a descenderless heading like "Suosituimmat". Measured
	 * with Lexend's metrics, the badge reads low. Lift it onto the cap band. */
	transform: translateY(-0.06em);
}
/* Osio-otsikon h2:lla EI alamarginia flex-kontekstissa: muuten sen margin-laatikko
 * kasvaa (~27px) ja align-items:center työntää otsikkotekstin ylös → numero näyttää
 * ~13px liian matalalta. Tämä on todellinen korjaus; translateY yllä on vain ~1px optinen hienosäätö. */
.kc-sec-head .kc-h2 { margin-bottom: 0; }
.kc-sec-head--turkoosi .kc-sec-head__num { background: var(--kc-keskisininen); }
/* Lahjakortit badge: laivasto (white ~15:1). The section's pink background and
 * the oranssi divider bar carry the warm accent; the number stays a dark brand
 * colour so the white digit passes contrast (oranssi would be ~2.3:1). */
.kc-sec-head--oranssi .kc-sec-head__num { background: var(--kc-laivasto); }

/* ----------------------------------------------------------------------------
 * Grid — auto-fit so 3/4-col layouts collapse to 1 with no media query.
 * minmax(min(100%, 16rem), 1fr): never overflows at 320px.
 * -------------------------------------------------------------------------- */
.kc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}
.kc-grid--tight { gap: 1rem; }
/* Narrower min for the 4-up gift-card row. */
.kc-grid--quad { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ----------------------------------------------------------------------------
 * Card — Swiss: border, no shadow, max 4px radius. Flex column so the CTA
 * pins to the bottom regardless of body length.
 * -------------------------------------------------------------------------- */
.kc-card {
	display: flex;
	flex-direction: column;
	background: var(--kc-valkoinen);
	border: var(--kc-border);
	border-radius: var(--kc-radius);
	overflow: hidden;
	position: relative;
}
.kc-card--featured { border: 2px solid var(--kc-petrooli); }
.kc-card__media {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-bottom: var(--kc-border);
}
.kc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem;
}
.kc-card__title {
	font-size: var(--kc-fs-h3);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.375rem;
	color: var(--kc-teksti);
}
.kc-card__meta {
	font-size: var(--kc-fs-small);
	color: var(--kc-teksti-vaalea);
	margin: 0 0 0.5rem;
}
/* Push price + CTA to the bottom of the card. */
.kc-card__foot { margin-top: auto; }
.kc-card__actions {
	display: grid;
	gap: 0.625rem;
}
.kc-card__actions .kc-btn { width: 100%; }

/* Badges (corner labels on featured cards). */
.kc-badge {
	position: absolute;
	top: 0.75rem;
	z-index: 1;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: var(--kc-radius);
}
.kc-badge--start { left: 0.75rem; background: var(--kc-petrooli); color: var(--kc-valkoinen); }
.kc-badge--end { right: 0.75rem; background: var(--kc-keltaoranssi); color: var(--kc-laivasto); }
/* Inline pill (e.g. ePassi tag). */
.kc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.125rem 0.5625rem;
	border-radius: var(--kc-radius);
	background: var(--kc-vaaleaturkoosi);
	color: var(--kc-laivasto);
}

/* ----------------------------------------------------------------------------
 * Price.
 * -------------------------------------------------------------------------- */
.kc-price {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	flex-wrap: wrap;
	margin: 0 0 0.875rem;
}
.kc-price__now {
	font-size: var(--kc-fs-price);
	font-weight: 800;
	color: var(--kc-teksti);
}
.kc-price__now--free { color: var(--kc-petrooli); }
.kc-price__was {
	font-size: 1rem;
	color: var(--kc-teksti-vaalea);
	text-decoration: line-through;
}
.kc-price__note { font-size: var(--kc-fs-small); font-weight: 600; color: var(--kc-teksti-vaalea); }

/* Star rating row (decorative stars are CSS characters, not images). */
.kc-rating {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--kc-fs-small);
	color: var(--kc-teksti-vaalea);
	margin: 0 0 0.5rem;
}
.kc-rating__stars {
	letter-spacing: 0.08em;
	color: var(--kc-keltaoranssi); /* #F9C51A — brand STARS colour; aria-hidden decorative, not a text-contrast criterion */
	font-size: 1rem;
}
.kc-rating strong { color: var(--kc-teksti); }

/* ----------------------------------------------------------------------------
 * Buttons — real <a>/<button>. Brand-aligned: primary = solid PETROOLI (white
 * text ~8.6:1), secondary = darkened KESKISININEN (white text ~5.0:1) for a clear
 * but accessible on-brand hierarchy. The old orange #FF8A00/#B85C00 CTA is gone. Optional
 * Phosphor affordance via <i class="kc-icon kc-ic-*"> inside the button.
 * Target size >= 24x24 (min-height 52px). Icons are aria-hidden.
 * -------------------------------------------------------------------------- */
.kc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 52px;
	padding: 0.875rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--kc-radius);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.kc-btn--block { width: 100%; }
.kc-btn--big { min-height: 60px; padding: 1.125rem 2rem; font-size: 1.1875rem; }

.kc-btn--primary {
	background: var(--kc-cta);          /* petrooli #094f7c — white text ~8.6:1 */
	color: var(--kc-valkoinen);
	border-color: var(--kc-cta);
}
.kc-btn--primary:hover,
.kc-btn--primary:focus-visible {
	background: var(--kc-cta-hover);    /* laivasto */
	border-color: var(--kc-cta-hover);
	color: var(--kc-valkoinen);
}

.kc-btn--secondary {
	background: var(--kc-keskisininen-a11y);
	color: var(--kc-valkoinen);
	border-color: var(--kc-keskisininen-a11y);
}
.kc-btn--secondary:hover,
.kc-btn--secondary:focus-visible {
	background: var(--kc-petrooli);
	border-color: var(--kc-petrooli);
	color: var(--kc-valkoinen);
}

/* Ghost = outline on light backgrounds. */
.kc-btn--ghost {
	background: transparent;
	color: var(--kc-petrooli);
	border-color: var(--kc-petrooli);
}
.kc-btn--ghost:hover,
.kc-btn--ghost:focus-visible {
	background: var(--kc-vaaleaturkoosi);
	color: var(--kc-laivasto);
}
.kc-band .kc-btn--ghost {
	color: var(--kc-valkoinen);
	border-color: var(--kc-vaaleaturkoosi);
}
.kc-band .kc-btn--ghost:hover,
.kc-band .kc-btn--ghost:focus-visible {
	background: var(--kc-vaaleaturkoosi);
	color: var(--kc-laivasto);
}

.kc-btn:focus-visible,
.kc-faq__q:focus-visible {
	outline: 3px solid var(--kc-laivasto);
	outline-offset: 3px;
}
.kc-band .kc-btn:focus-visible { outline-color: var(--kc-vaaleaturkoosi); }

/* On a dark band, navy text on pink/light reads; pin for >=4.5:1. */
.kc-btn--pink {
	background: var(--kc-pinkki);
	color: var(--kc-laivasto);          /* navy on pink = 6.0:1 */
	border-color: var(--kc-pinkki);
}
.kc-btn--pink:hover,
.kc-btn--pink:focus-visible { background: #ffb3dc; color: var(--kc-laivasto); }

/* ----------------------------------------------------------------------------
 * Inline highlight band (icon + text + price + CTA in one row).
 * -------------------------------------------------------------------------- */
.kc-feature {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.kc-feature__media {
	flex: 0 1 22rem;
	width: min(100%, 22rem);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--kc-radius);
}
.kc-feature__body { flex: 1 1 16rem; min-width: 0; }
.kc-feature__title {
	font-size: var(--kc-fs-h2);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	color: var(--kc-valkoinen);
}
.kc-feature__price {
	font-size: var(--kc-fs-stat);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 0.875rem;
}
.kc-feature__price--pink { color: var(--kc-pinkki); }
.kc-feature__actions {
	display: grid;
	gap: 0.625rem;
	min-width: min(100%, 16rem);
}

/* Path-group label row (icon stripe + heading). */
.kc-pathlabel {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	background: var(--kc-valkoinen);
	border: var(--kc-border);
	border-top: 4px solid var(--kc-petrooli);
	border-radius: var(--kc-radius);
	margin-bottom: 1rem;
}
.kc-pathlabel--turkoosi { border-top-color: var(--kc-turkoosi); }
.kc-pathlabel--keskisininen { border-top-color: var(--kc-keskisininen); }
.kc-pathlabel__title {
	font-size: var(--kc-fs-h3);
	font-weight: 800;
	line-height: 1.15;
	color: var(--kc-teksti);
	margin: 0;
}
.kc-pathlabel__sub { font-size: var(--kc-fs-small); color: var(--kc-teksti-vaalea); margin: 0; }

/* ----------------------------------------------------------------------------
 * Stats strip.
 * -------------------------------------------------------------------------- */
.kc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	background: var(--kc-petrooli);
	border-radius: var(--kc-radius);
	overflow: hidden;
}
.kc-stats__item {
	padding: 1.625rem 1.25rem;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.kc-stats__item:first-child { border-left: 0; }
.kc-stats__num {
	font-size: var(--kc-fs-stat);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	color: var(--kc-valkoinen);
}
.kc-stats__label {
	font-size: var(--kc-fs-small);
	font-weight: 600;
	color: var(--kc-vaaleaturkoosi);
	margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------------
 * Quote / testimonial band.
 * -------------------------------------------------------------------------- */
.kc-quote { text-align: center; }
.kc-quote__mark {
	font-size: 3.5rem;
	line-height: 1;
	color: var(--kc-turkoosi);
	margin-bottom: 0.5rem;
}
.kc-quote blockquote {
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: var(--kc-valkoinen);
}
.kc-quote__cite {
	margin-top: 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--kc-turkoosi);
}

/* Payment-method chips. */
.kc-chips { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.kc-chip {
	background: var(--kc-valkoinen);
	border: 1px solid rgba(9, 79, 124, 0.2);
	border-radius: var(--kc-radius);
	padding: 0.375rem 0.875rem;
	font-size: var(--kc-fs-small);
	font-weight: 700;
	color: var(--kc-teksti);
}

/* Info cards (payment / guarantee tiles). */
.kc-info {
	background: var(--kc-valkoinen);
	border: var(--kc-border);
	border-radius: var(--kc-radius);
	padding: 1.375rem;
}
.kc-info__title { font-size: 1.125rem; font-weight: 700; color: var(--kc-petrooli); margin: 0 0 0.25rem; }
.kc-info__text { font-size: var(--kc-fs-small); color: var(--kc-teksti-vaalea); margin: 0; }

/* ----------------------------------------------------------------------------
 * FAQ — native <details>/<summary>. Open-cue is a plain plus glyph that rotates
 * 45deg into an x when open (shape change >=3:1, not colour-only). No JS.
 * -------------------------------------------------------------------------- */
.kc-faq { display: flex; flex-direction: column; gap: 0.75rem; }
.kc-faq__item {
	background: var(--kc-valkoinen);
	border: var(--kc-border);
	border-radius: var(--kc-radius);
}
.kc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--kc-teksti);
	cursor: pointer;
	list-style: none;
}
.kc-faq__q::-webkit-details-marker { display: none; }
/* The +/x cue: a 24x24 box with a plain plus glyph; rotates 45deg when open. */
.kc-faq__q::after {
	content: "+";
	font-family: inherit;
	font-weight: 800;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--kc-petrooli);
	border: 2px solid var(--kc-petrooli);
	border-radius: var(--kc-radius);
	transition: transform 0.15s ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.kc-faq__item[open] .kc-faq__q::after { transform: rotate(45deg); }
.kc-faq__a {
	padding: 0 1.25rem 1.25rem;
	font-size: 1rem;
	color: var(--kc-teksti-vaalea);
}
.kc-faq__a p { margin: 0; }

/* ----------------------------------------------------------------------------
 * Flush lists styled as plain rows (carry role="list" in the HTML).
 * -------------------------------------------------------------------------- */
.kc-list { list-style: none; margin: 0; padding: 0; }
.kc-list--inline { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Spacing helpers used by the fragment (kept minimal). */
.kc-mt-lg { margin-top: 1.75rem; }
.kc-mb-lg { margin-bottom: 2rem; }

/* ----------------------------------------------------------------------------
 * Motion — transform/opacity only; disabled under reduced-motion.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.kc-btn { transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease; }
	.kc-btn:hover { transform: translateY(-1px); }
}