/* 2026-10-13: role surfaces supersede the historic mint mappings discussed below.
 * White helpers, paper gifts, dark closing actions; mint only for signed Diana quotes.
 */
/*
 * The prices page.
 *
 * Enqueued only where it is used (plan section 1.1, engineering standards
 * section 7). Loads after components.css and builds on both it and
 * tokens.css; declares no colour of its own.
 *
 * NO MANUAL BREAKPOINTS, on purpose. Every multi-column block below is an
 * `auto-fit`/`minmax` grid, the same technique page-burnos-higiena.css uses
 * for the same reason: the mockup places its own second column this way, and
 * a media query of our own would move a boundary the grid already finds.
 * Measured at 390/800/1440 - the pricelist and timeline stay one column
 * throughout (nothing in the mockup makes them two), and the comparison
 * table's three columns are drawn as fixed proportions at every width, not a
 * responsive collapse - reproduced the same way here.
 *
 * COLOURS SNAPPED TO THE CANON, not carried from the mockup's raw values
 * (qa-grep G4 - no bare hex outside tokens.css, comments included):
 *
 *   THE TWO REASSURANCE CALLOUTS (long-gap price row, postponing section).
 *   The mockup paints a pale mint the palette has no exact name for - every
 *   other pale green wash on this site is --tint-leaf, so both callouts take
 *   that instead of a new value, the same near-miss correction WPS-022 made
 *   for an off-scale radius.
 *
 *   THE COMPARISON TABLE'S "PAS MANE" COLUMN and every checkmark icon on this
 *   page. The mockup's greens map to the existing --color-green-ink /
 *   --tint-leaf / --color-border trio rather than new values for one column -
 *   --color-green-ink is also the token page-kontaktai.css already uses for
 *   its own check_circle icon, so this page's checkmarks match it exactly.
 */

/* ---------------------------------------------------------------------------
 * Hero
 */

.kn-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var( --space-3 );
	padding-block: clamp( 28px, 5vw, 60px ) clamp( 24px, 3.5vw, 40px );
}

.kn-hero__title {
	/* 720px, one of qa-measure's known narrow widths (I11.2) - not a
	 * container-level max-width on .kn-hero itself, which would have caught
	 * the lead's own 620px inside a second, unlisted band. */
	margin: 0;
	max-width: 720px;
	font-size: clamp( 30px, 5vw, var( --fs-display ) );
	font-weight: var( --fw-black );
	line-height: var( --lh-tight );
	color: var( --text-heading );
	letter-spacing: var( --ls-display );
	text-wrap: pretty;
}

.kn-hero__title span {
	color: var( --color-accent-text );
}

.kn-hero__lead {
	margin: 0;
	font-size: clamp( 16px, 2vw, var( --fs-lead ) );
	line-height: var( --lh-body );
	color: var( --text-body );
	max-width: 620px;
}

.kn-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-2 );
	margin: var( --space-1 ) 0 0;
}

.kn-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var( --fs-meta );
	font-weight: var( --fw-bold );
	padding: var( --space-2 ) 15px;
	border-radius: var( --radius-pill );
}

.kn-hero__badge .material-symbols-outlined {
	font-size: 17px;
}

.kn-hero__badge--blue {
	background: var( --tint-ice );
	color: var( --color-accent-text );
}

.kn-hero__badge--green {
	background: var( --color-green );
	color: var( --color-green-ink );
}

/* ---------------------------------------------------------------------------
 * Shared section head (timeline / comparison / postponing / why)
 */

.kn-section {
	padding-block-end: clamp( 40px, 6vw, 64px );
}

.kn-section--last {
	padding-block-end: clamp( 48px, 7vw, 80px );
}

.kn-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var( --space-2 );
	margin-block-end: clamp( 18px, 3vw, 28px );
}

.kn-section__head h2 {
	margin: 0;
	font-size: clamp( 24px, 3.4vw, var( --fs-h2 ) );
	font-weight: var( --fw-black );
	color: var( --text-heading );
	line-height: var( --lh-heading );
}

.kn-section__lead {
	margin: 0;
	font-size: var( --fs-body );
	line-height: var( --lh-relaxed );
	color: var( --text-body );
	max-width: 600px;
}

/* ---------------------------------------------------------------------------
 * Price list
 */

.kn-pricelist {
	display: flex;
	flex-direction: column;
	background: var( --surface-card );
	border-radius: var( --radius-2xl );
	box-shadow: var( --shadow-card );
	padding: clamp( 18px, 2.6vw, 30px ) clamp( 14px, 2.2vw, 26px );
}

.kn-pricelist__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var( --space-2 ) clamp( 8px, 1.4vw, 14px );
	padding: var( --space-4 ) clamp( 10px, 1.6vw, 16px );
	border-bottom: 1px solid var( --tint-cloud );
}

.kn-pricelist__row:last-of-type {
	border-bottom: none;
}

.kn-pricelist__row--lead {
	background: var( --tint-sky-soft );
	border-radius: var( --radius-md );
	border-bottom: none;
}

.kn-pricelist__name {
	margin: 0;
	font-size: clamp( 14.5px, 1.9vw, calc( var( --fs-sm ) + 1px ) );
	font-weight: var( --fw-bold );
	color: var( --text-heading );
	line-height: 1.3;
}

.kn-pricelist__row--lead .kn-pricelist__name {
	font-size: clamp( 15px, 2vw, 17px );
	font-weight: var( --fw-black );
}

.kn-pricelist__note {
	margin: 4px 0 0;
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
}

.kn-pricelist__badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	font-weight: var( --fw-black );
	color: var( --color-green-ink );
	background: var( --color-green );
	padding: 3px 9px;
	border-radius: var( --radius-pill );
	text-transform: uppercase;
	letter-spacing: var( --ls-label );
	vertical-align: middle;
	margin-inline-start: var( --space-2 );
}

.kn-pricelist__badge-star {
	font-size: 11px;
	line-height: 1;
}

.kn-pricelist__sum {
	margin: 0;
	text-align: right;
	font-size: clamp( 17px, 2.2vw, 19px );
	font-weight: var( --fw-black );
	color: var( --text-heading );
	white-space: nowrap;
}

.kn-pricelist__sum--lead {
	font-size: clamp( 20px, 2.6vw, calc( var( --fs-price ) - 6px ) );
	color: var( --color-accent-text );
}

.kn-pricelist__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
	border-top: 1px solid var( --tint-panel-cool );
	margin-top: 6px;
	padding: var( --space-4 ) clamp( 10px, 1.6vw, 16px ) 4px;
}

.kn-pricelist__foot-text {
	margin: 0;
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
}

/* ---------------------------------------------------------------------------
 * Comparison table
 */

.kn-compare {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 84px, auto ) minmax( 118px, auto );
	background: var( --surface-card );
	border-radius: var( --radius-xl );
	overflow: hidden;
	box-shadow: var( --shadow-card );
	font-size: 14.5px;
	color: var( --text-heading );
}

.kn-compare__row {
	display: contents;
}

.kn-compare__cell {
	display: flex;
	align-items: center;
	padding: 14px clamp( 10px, 1.8vw, 18px );
	border-bottom: 1px solid var( --tint-cloud );
}

.kn-compare__row:last-child .kn-compare__cell {
	border-bottom: none;
}

.kn-compare__cell--head {
	background: var( --tint-sky-soft );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	color: var( --text-meta );
	text-transform: uppercase;
	border-bottom: none;
}

.kn-compare__cell--ok-head {
	background: var( --color-green-ink );
	color: var( --color-surface );
	justify-content: center;
	gap: 5px;
	text-align: center;
}

.kn-compare__cell--ok-head .material-symbols-outlined {
	font-size: 14px;
}

.kn-compare__cell--bad {
	justify-content: center;
	text-align: center;
	font-size: 13px;
	font-weight: var( --fw-bold );
	color: var( --color-danger-text );
}

.kn-compare__cell--ok {
	background: var( --tint-leaf );
	justify-content: center;
	gap: 5px;
	text-align: center;
	font-size: 13px;
	font-weight: var( --fw-black );
	color: var( --color-green-ink );
}

.kn-compare__cell--ok .material-symbols-outlined {
	font-size: 15px;
	color: var( --color-green-ink );
}

.kn-compare__note {
	font-size: 12.5px;
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
	margin: var( --space-3 ) 0 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Cost of postponing
 */

.kn-defer__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 250px ), 1fr ) );
	gap: 14px;
}

.kn-defer__card {
	background: var( --surface-card );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-lg );
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
}

.kn-defer__label {
	margin: 0;
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

.kn-defer__card--ok .kn-defer__label {
	color: var( --color-green-ink );
}

.kn-defer__card--warn .kn-defer__label {
	color: var( --color-amber-ink );
}

.kn-defer__card--bad .kn-defer__label {
	color: var( --color-danger-text );
}

.kn-defer__price {
	margin: 0;
	font-size: 26px;
	font-weight: var( --fw-black );
	color: var( --text-heading );
	line-height: 1;
}

.kn-defer__text {
	margin: 0;
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
}

.kn-defer__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var( --tint-leaf );
	border-radius: var( --radius-md );
	padding: 15px 17px;
	margin: var( --space-4 ) 0 0;
	font-size: var( --fs-caption );
	line-height: var( --lh-body );
	color: var( --color-accent-text );
}

.kn-defer__note .material-symbols-outlined {
	color: var( --color-accent-text );
	flex-shrink: 0;
}

.kn-defer__note b {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Quiz band section wrapper
 */

.kn-band {
	padding-block-end: clamp( 36px, 5vw, 56px );
}

/* ---------------------------------------------------------------------------
 * Why prices differ (dark card)
 */

.kn-why {
	background: var( --surface-inverse );
	border-radius: var( --radius-2xl );
	padding: clamp( 24px, 4vw, 44px );
	display: flex;
	flex-direction: column;
	gap: clamp( 18px, 3vw, 26px );
}

.kn-why__head {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	max-width: 640px;
}

.kn-why__eyebrow {
	margin: 0;
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
	color: var( --color-surface );
}

.kn-why__title {
	margin: 0;
	font-size: clamp( 24px, 3.4vw, var( --fs-h2 ) );
	font-weight: var( --fw-black );
	color: var( --color-surface );
	line-height: var( --lh-heading );
}

.kn-why__lead {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.7 );
}

.kn-why__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) );
	gap: 14px;
}

.kn-why__card {
	background: rgba( 255, 255, 255, 0.06 );
	border-radius: var( --radius-md );
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
}

.kn-why__card-head {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var( --fs-sm );
	font-weight: var( --fw-bold );
	color: var( --color-surface );
}

.kn-why__card-head .material-symbols-outlined {
	color: var( --color-surface );
}

.kn-why__card-text {
	margin: 0;
	font-size: 13.5px;
	line-height: var( --lh-relaxed );
	color: rgba( 255, 255, 255, 0.65 );
}

/* ---------------------------------------------------------------------------
 * Insurance
 */

.kn-insurance {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 280px ), 1fr ) );
	gap: clamp( 20px, 3vw, 36px );
	align-items: center;
}

.kn-insurance__copy {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
}

.kn-insurance__copy h2 {
	margin: 0;
	font-size: clamp( 22px, 3vw, 30px );
	font-weight: var( --fw-black );
	color: var( --text-heading );
	line-height: 1.16;
}

.kn-insurance__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var( --text-body );
}

.kn-insurance__text--muted {
	font-size: var( --fs-caption );
	color: var( --text-meta );
}

.kn-insurance__card {
	background: var( --surface-card );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-xl );
	padding: clamp( 20px, 3vw, 28px );
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kn-insurance__card-title {
	margin: 0;
	font-size: var( --fs-sm );
	font-weight: var( --fw-black );
	color: var( --text-heading );
}

.kn-insurance__item {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var( --fs-caption );
	color: var( --text-body );
}

.kn-insurance__item .material-symbols-outlined {
	font-size: 19px;
	color: var( --color-green-ink );
}

.kn-insurance__item span span {
	font-weight: var( --fw-bold );
}

/* ---------------------------------------------------------------------------
 * Shared text link (coupon/FAQ teasers, insurance)
 */

.kn-link {
	/* 11px padding, not --space-2's 8px: the same touch-target fix
	 * .fp-textlink already carries (qa-measure I8.2 - 44px minimum). */
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
	color: var( --color-accent-text );
	text-decoration: none;
	padding: 11px 4px;
}

.kn-link:hover {
	color: var( --text-heading );
}

.kn-link .material-symbols-outlined {
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * Coupon + FAQ teasers
 */

.kn-teasers {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 260px ), 1fr ) );
	gap: var( --space-4 );
}

.kn-teasers__card {
	background: var( --surface-card );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-xl );
	padding: clamp( 22px, 3vw, 32px );
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
}

.kn-teasers__card--paper {
	background: var( --tint-paper );
	border-color: var( --tint-paper-border );
}

.kn-teasers__card > .material-symbols-outlined {
	font-size: 30px;
	color: var( --color-accent-text );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var( --radius-pill );
	background: var( --tint-ice );
}

.kn-teasers__card--paper > .material-symbols-outlined {
	color: var( --color-amber-ink );

	background: var( --tint-paper-icon );
}

.kn-teasers__card h2 {
	margin: 0;
	font-size: clamp( 19px, 2.4vw, 23px );
	font-weight: var( --fw-black );
	color: var( --text-heading );
	line-height: 1.18;
}

.kn-teasers__card p {
	margin: 0;
	font-size: 14.5px;
	line-height: var( --lh-body );
	color: var( --text-body );
}

.kn-teasers__card--paper p {
	color: var( --text-body );
}

.kn-teasers__card--paper .kn-link {
	color: var( --color-accent-text );
}

.kn-teasers__card--paper .kn-link:hover {
	color: var( --text-heading );
}

/* ---------------------------------------------------------------------------
 * What the price includes (2026-09-27, Storybook informacine-v2-2026-09-27b):
 * a short summary instead of the minute-by-minute breakdown.
 */
.kn-included {
	display: flex;
	flex-direction: column;
	padding: clamp( 18px, 2.6vw, 26px );
	background: var( --surface-card );
	border-radius: var( --radius-xl );
	box-shadow: var( --shadow-card );
	gap: var( --space-4 );
}

.kn-included__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 260px ), 1fr ) );
	margin: 0;
	padding: 0;
	gap: var( --space-4 );
	list-style: none;
}

.kn-included__list li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kn-included__list .material-symbols-outlined {
	color: var( --text-link );
	font-size: 24px;
}

.kn-included__title {
	color: var( --text-heading );
	font-weight: var( --fw-bold );
}

.kn-included__text {
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.kn-included__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-top: var( --space-4 );
	border-top: 1px solid var( --tint-cloud );
	gap: var( --space-2 ) var( --space-4 );
}

.kn-included__time {
	display: inline-flex;
	align-items: center;
	margin: 0;
	gap: var( --space-2 );
	color: var( --text-heading );
	font-weight: var( --fw-bold );
}

.kn-included__time .material-symbols-outlined {
	color: var( --text-link );
}

.kn-included__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 6px;
	color: var( --text-link );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.kn-included__link:hover {
	text-decoration: underline;
}

.kn-defer__extra {
	display: block;
	color: var( --text-meta );
	font-size: var( --fs-sm );
	font-weight: var( --fw-bold );
}