/**
 * Shared components: buttons, cards, prose, forms, newsletter.
 * Raw colors stay in tokens.css.
 */

.kpp-kicker {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--kpp-color-sap);
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xs);
	font-weight: var(--kpp-weight-semibold);
	letter-spacing: var(--kpp-tracking-kicker);
	line-height: 1.3;
	text-transform: uppercase;
}

.kpp-kicker::before {
	content: "";
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	margin-inline-end: 0.55rem;
	background: var(--kpp-kicker-swatch, var(--kpp-color-clay));
	flex: none;
}

.kpp-section {
	padding-block: var(--kpp-space-8);
}

.kpp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kpp-space-4);
	margin-bottom: var(--kpp-space-6);
}

.kpp-section-head h2,
.kpp-listing__header h1,
.kpp-page__title,
.kpp-article__title {
	margin: var(--kpp-space-2) 0 0;
	font-size: var(--kpp-text-2xl);
	line-height: var(--kpp-leading-heading);
}

.kpp-article__title,
.kpp-page__title,
.kpp-listing__header h1 {
	font-size: var(--kpp-text-3xl);
	line-height: var(--kpp-leading-display);
}

.kpp-lede {
	margin: var(--kpp-space-4) 0 0;
	max-width: 40rem;
	color: var(--kpp-color-ink-soft);
	font-size: var(--kpp-text-lg);
	line-height: var(--kpp-leading-snug);
}

.kpp-textlink {
	font-weight: var(--kpp-weight-semibold);
	text-underline-offset: 0.22em;
}

.kpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kpp-space-2);
	min-height: 2.75rem;
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--kpp-radius-sm);
	background: var(--kpp-color-sap);
	color: var(--kpp-color-on-sap);
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-sm);
	font-weight: var(--kpp-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

.kpp-btn:hover {
	background: var(--kpp-color-sap-deep);
	color: var(--kpp-color-on-sap);
}

.kpp-btn--ghost {
	background: transparent;
	border-color: var(--kpp-color-ink);
	color: var(--kpp-color-ink);
}

.kpp-btn--ghost:hover {
	background: var(--kpp-color-linen);
	color: var(--kpp-color-ink);
}

.kpp-btn--ochre {
	background: var(--kpp-color-ochre-soft);
	color: var(--kpp-color-ink);
}

.kpp-btn--ochre:hover {
	background: var(--kpp-color-paper);
	color: var(--kpp-color-ink);
}

.kpp-media {
	position: relative;
	overflow: hidden;
	background: var(--kpp-color-linen);
	aspect-ratio: var(--kpp-media-card);
}

.kpp-media--feature {
	aspect-ratio: var(--kpp-media-feature);
}

.kpp-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpp-grid {
	display: grid;
	gap: var(--kpp-space-5);
}

.kpp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	background: var(--kpp-color-paper);
	border: var(--kpp-border);
	border-radius: var(--kpp-radius-sm);
}

.kpp-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--kpp-space-3);
	padding: var(--kpp-card-padding);
}

.kpp-card__title,
.kpp-row__title,
.kpp-path__title {
	margin: 0;
	font-size: var(--kpp-text-xl);
	line-height: var(--kpp-leading-snug);
}

.kpp-card__title a,
.kpp-row__title a,
.kpp-path__title a {
	color: inherit;
	text-decoration: none;
}

.kpp-card__title a::after,
.kpp-row__title a::after,
.kpp-path__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kpp-card__excerpt {
	margin: 0;
	color: var(--kpp-color-ink-soft);
}

.kpp-card__meta,
.kpp-row__meta,
.kpp-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.55rem;
	margin: 0;
	color: var(--kpp-color-muted);
	font-size: var(--kpp-text-sm);
}

.kpp-card:hover .kpp-card__title a,
.kpp-card:focus-within .kpp-card__title a,
.kpp-row:hover .kpp-row__title a,
.kpp-row:focus-within .kpp-row__title a,
.kpp-path:hover .kpp-path__title a,
.kpp-path:focus-within .kpp-path__title a {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.kpp-card:focus-within,
.kpp-row:focus-within,
.kpp-path:focus-within {
	outline: 3px solid var(--kpp-color-focus);
	outline-offset: 3px;
}

.kpp-card a:focus-visible,
.kpp-row a:focus-visible,
.kpp-path a:focus-visible {
	outline: none;
}

.kpp-row {
	position: relative;
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: var(--kpp-space-4);
	align-items: center;
	padding-block: var(--kpp-space-4);
}

.kpp-row + .kpp-row {
	border-top: var(--kpp-border);
}

.kpp-row__media {
	width: 7.5rem;
}

.kpp-path {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kpp-space-4);
	min-width: 0;
	padding: var(--kpp-panel-padding);
	background: var(--kpp-color-linen);
	border: var(--kpp-border);
}

.kpp-path--homeowners {
	--kpp-kicker-swatch: var(--kpp-color-clay);
}

.kpp-path--contractors {
	--kpp-kicker-swatch: var(--kpp-color-ochre-soft);
	background: var(--kpp-color-sap);
	color: var(--kpp-color-on-sap);
	border-color: var(--kpp-color-sap);
}

.kpp-path--contractors .kpp-kicker,
.kpp-path--contractors h3 {
	color: var(--kpp-color-on-sap);
}

.kpp-path--contractors:focus-within {
	outline-color: var(--kpp-color-ochre-soft);
}

.kpp-path__summary,
.kpp-path__cta {
	margin: 0;
}

.kpp-path__cta {
	margin-top: auto;
	font-weight: var(--kpp-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kpp-path__media {
	aspect-ratio: var(--kpp-media-card);
}

.kpp-empty {
	padding: var(--kpp-panel-padding);
	background: var(--kpp-color-paper);
	border: var(--kpp-border);
}

.kpp-empty h2 {
	margin: 0 0 var(--kpp-space-3);
	font-size: var(--kpp-text-xl);
}

.kpp-empty p {
	margin: 0 0 var(--kpp-space-4);
	max-width: var(--kpp-measure);
}

.kpp-empty__paths,
.kpp-miss__paths {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-3);
	margin: var(--kpp-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.kpp-breadcrumbs {
	margin: 0 0 var(--kpp-space-4);
	font-size: var(--kpp-text-sm);
	color: var(--kpp-color-muted);
}

.kpp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kpp-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.35rem;
	color: var(--kpp-color-line);
}

.kpp-breadcrumbs a {
	color: var(--kpp-color-ink-soft);
}

.kpp-theme .rank-math-breadcrumb,
.kpp-theme .rank-math-breadcrumb a {
	color: var(--kpp-color-ink-soft);
	font-size: var(--kpp-text-sm);
}

.kpp-byline a {
	color: var(--kpp-color-ink);
	font-weight: var(--kpp-weight-semibold);
}

.kpp-prose {
	font-size: var(--kpp-text-md);
	line-height: var(--kpp-leading-body);
}

.kpp-prose > *:first-child {
	margin-top: 0;
}

.kpp-prose > *:last-child {
	margin-bottom: 0;
}

.kpp-prose p,
.kpp-prose ul,
.kpp-prose ol,
.kpp-prose pre,
.kpp-prose table,
.kpp-prose figure {
	margin-block: var(--kpp-space-4);
}

.kpp-prose h2,
.kpp-prose h3,
.kpp-prose h4 {
	margin-block: var(--kpp-space-7) var(--kpp-space-3);
	scroll-margin-top: var(--kpp-space-4);
}

.kpp-prose h2 {
	font-size: var(--kpp-text-2xl);
}

.kpp-prose h3 {
	font-size: var(--kpp-text-h3);
	line-height: var(--kpp-leading-h3);
}

.kpp-prose h4 {
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xl);
	font-weight: var(--kpp-weight-semibold);
	line-height: var(--kpp-leading-h4);
}

.kpp-prose ul,
.kpp-prose ol {
	padding-inline-start: 1.25rem;
}

.kpp-prose li + li {
	margin-top: 0.35rem;
}

.kpp-prose blockquote {
	margin: var(--kpp-space-6) 0;
	padding: var(--kpp-space-4) var(--kpp-space-5);
	border-inline-start: 4px solid var(--kpp-color-clay);
	background: var(--kpp-color-linen);
	font-family: var(--kpp-font-serif);
	font-size: var(--kpp-text-lg);
	line-height: var(--kpp-leading-snug);
}

.kpp-prose img,
.kpp-prose video {
	max-width: 100%;
	height: auto;
}

.kpp-prose figure {
	margin-inline: 0;
}

.kpp-prose figcaption {
	margin-top: var(--kpp-space-2);
	color: var(--kpp-color-muted);
	font-size: var(--kpp-text-sm);
}

.kpp-prose code {
	font-family: var(--kpp-font-mono);
	font-size: 0.92em;
	padding: 0.1em 0.35em;
	background: var(--kpp-color-linen);
}

.kpp-prose pre {
	overflow: auto;
	padding: var(--kpp-space-4);
	background: var(--kpp-color-ink);
	color: var(--kpp-color-on-ink);
}

.kpp-prose pre code {
	padding: 0;
	background: transparent;
	color: inherit;
}

.kpp-prose .wp-block-table {
	overflow-x: auto;
}

.kpp-prose table {
	width: 100%;
	border-collapse: collapse;
}

.kpp-prose th,
.kpp-prose td {
	padding: var(--kpp-space-3);
	border-bottom: var(--kpp-border);
	text-align: start;
	vertical-align: top;
}

.kpp-prose hr {
	border: 0;
	border-top: var(--kpp-border);
	margin-block: var(--kpp-space-6);
}

.kpp-field,
.kpp-theme .comment-form input[type="text"],
.kpp-theme .comment-form input[type="email"],
.kpp-theme .comment-form input[type="url"],
.kpp-theme .comment-form textarea,
.kpp-theme .kpp-field {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	border: var(--kpp-border);
	border-radius: var(--kpp-radius-sm);
	background: var(--kpp-color-paper);
	color: var(--kpp-color-ink);
	font: inherit;
}

.kpp-theme textarea.kpp-field,
.kpp-theme .comment-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.kpp-field::placeholder {
	color: var(--kpp-color-muted);
	opacity: 1;
}

.kpp-search__label,
.kpp-form label,
.kpp-newsletter__label,
.kpp-theme .comment-form label {
	display: block;
	margin-bottom: var(--kpp-space-2);
	font-size: var(--kpp-text-sm);
	font-weight: var(--kpp-weight-semibold);
}

.kpp-search__row,
.kpp-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-3);
	align-items: center;
}

.kpp-search__row .kpp-field,
.kpp-newsletter__row .kpp-field {
	flex: 1 1 14rem;
	width: auto;
}

.kpp-newsletter__label {
	flex: 1 0 100%;
	color: var(--kpp-color-on-ink);
}

.kpp-newsletter {
	--kpp-kicker-swatch: var(--kpp-color-ochre-soft);
	background: var(--kpp-color-ink);
	color: var(--kpp-color-on-ink);
	padding-block: var(--kpp-space-8);
}

.kpp-newsletter h2,
.kpp-newsletter .kpp-kicker {
	color: var(--kpp-color-on-ink);
}

.kpp-newsletter .kpp-kicker {
	color: var(--kpp-color-ochre-soft);
}

.kpp-newsletter a {
	color: var(--kpp-color-ochre-soft);
}

.kpp-newsletter :focus-visible {
	outline-color: var(--kpp-color-ochre-soft);
}

.kpp-newsletter__inner {
	display: grid;
	gap: var(--kpp-space-6);
}

.kpp-newsletter__copy p {
	margin: var(--kpp-space-4) 0 0;
	max-width: 38rem;
	color: var(--kpp-color-ochre-soft);
}

.kpp-newsletter__status {
	margin: 0 0 var(--kpp-space-4);
	padding: var(--kpp-space-3) var(--kpp-space-4);
	background: var(--kpp-color-paper);
	color: var(--kpp-color-ink);
}

.kpp-honeypot {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kpp-author {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--kpp-space-4);
	padding: var(--kpp-card-padding);
	background: var(--kpp-color-paper);
	border: var(--kpp-border);
}

.kpp-author__name {
	margin: var(--kpp-space-2) 0;
	font-size: var(--kpp-text-xl);
}

.kpp-author p {
	margin: 0 0 var(--kpp-space-3);
}

.kpp-avatar {
	display: block;
	width: 4rem;
	height: 4rem;
	color: var(--kpp-color-sap);
}

.kpp-avatar rect {
	fill: currentColor;
}

.kpp-avatar text {
	fill: var(--kpp-color-paper);
	font-family: var(--kpp-font-serif);
	font-size: 28px;
}

.kpp-theme .pagination {
	margin-top: var(--kpp-space-7);
}

.kpp-theme .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-2);
}

.kpp-theme .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--kpp-space-3);
	border: var(--kpp-border);
	background: var(--kpp-color-paper);
	color: var(--kpp-color-ink);
	text-decoration: none;
}

.kpp-theme .page-numbers.current {
	background: var(--kpp-color-sap);
	border-color: var(--kpp-color-sap);
	color: var(--kpp-color-on-sap);
	font-weight: var(--kpp-weight-semibold);
}

.kpp-theme .page-numbers:hover {
	background: var(--kpp-color-linen);
	color: var(--kpp-color-ink);
}

.kpp-theme .page-numbers.current:hover {
	background: var(--kpp-color-sap);
	color: var(--kpp-color-on-sap);
}

.kpp-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-2);
	align-items: center;
	margin-top: var(--kpp-space-6);
}

.kpp-page-links a,
.kpp-page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.kpp-comments {
	padding-block: var(--kpp-space-7) var(--kpp-space-8);
}

.kpp-comments__heading,
.kpp-comments__reply {
	margin-top: 0;
}

.kpp-comment-list {
	margin: 0 0 var(--kpp-space-6);
	padding: 0;
	list-style: none;
}

.kpp-theme .comment {
	margin-top: var(--kpp-space-5);
	padding-top: var(--kpp-space-5);
	border-top: var(--kpp-border);
}

.kpp-theme .comment .children {
	margin: 0;
	padding-inline-start: var(--kpp-space-5);
	list-style: none;
}

.kpp-theme .comment-author {
	display: flex;
	align-items: center;
	gap: var(--kpp-space-3);
}

.kpp-theme .comment-author .kpp-avatar {
	width: 3rem;
	height: 3rem;
}

.kpp-theme .comment-meta,
.kpp-theme .comment-content,
.kpp-theme .reply {
	margin-top: var(--kpp-space-2);
}

.kpp-theme .comment-content p {
	margin: var(--kpp-space-3) 0;
}

.kpp-theme .comment-reply-link {
	font-weight: var(--kpp-weight-semibold);
}

.kpp-form__note,
.kpp-comments__closed {
	color: var(--kpp-color-muted);
}

.kpp-theme .comment-form p {
	margin-block: var(--kpp-space-4);
}

@media (min-width: 40rem) {
	.kpp-grid--cards {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {
	.kpp-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kpp-newsletter__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: var(--kpp-space-2xl);
	}
}

/* Figma component specs. These follow the earlier rules so the palette wins. */

.kpp-kicker {
	color: var(--kpp-text-cta-strong);
	font-size: var(--kpp-text-xs);
	font-weight: var(--kpp-weight-bold);
	letter-spacing: var(--kpp-tracking-kicker);
	line-height: 1.2;
}

.kpp-kicker::before {
	display: none;
}

.kpp-btn,
.kpp-btn--primary,
.kpp-btn--ochre {
	gap: var(--kpp-space-xs);
	min-height: 3rem;
	padding: 0.7rem 1.5rem;
	border: 1.5px solid transparent;
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-bg-cta-strong);
	color: var(--kpp-text-inverse);
	font-size: 1rem;
	font-weight: var(--kpp-weight-semibold);
	line-height: var(--kpp-leading-button);
}

.kpp-btn:hover,
.kpp-btn--primary:hover,
.kpp-btn--ochre:hover {
	background: var(--kpp-bg-cta-strong-hover);
	color: var(--kpp-text-inverse);
}

.kpp-btn--ghost,
.kpp-btn--outline {
	background: transparent;
	border-color: var(--kpp-border-brand);
	color: var(--kpp-text-brand);
}

.kpp-btn--ghost:hover,
.kpp-btn--outline:hover {
	background: var(--kpp-bg-brand-soft);
	color: var(--kpp-text-brand);
}

.kpp-nav__cta {
	align-self: flex-start;
}

.kpp-card {
	overflow: hidden;
	background: var(--kpp-bg-surface);
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-lg);
	box-shadow: var(--kpp-shadow-card);
}

.kpp-card__title,
.kpp-row__title {
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xl);
	font-weight: var(--kpp-weight-semibold);
	line-height: var(--kpp-leading-h4);
	letter-spacing: 0;
}

.kpp-card__excerpt,
.kpp-row__excerpt,
.kpp-card__meta,
.kpp-row__meta {
	font-size: var(--kpp-text-sm);
	line-height: var(--kpp-leading-small);
}

.kpp-card__excerpt,
.kpp-row__excerpt {
	margin: 0;
	color: var(--kpp-text-secondary);
}

.kpp-path {
	gap: var(--kpp-space-md);
	padding: var(--kpp-space-xl);
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-lg);
	background: var(--kpp-bg-surface);
	box-shadow: var(--kpp-shadow-card);
}

.kpp-path__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-accent-soft);
	color: var(--kpp-text-brand);
}

.kpp-path__title {
	font-size: var(--kpp-text-h3);
	line-height: var(--kpp-leading-h3);
}

.kpp-path__title a::after {
	content: none;
}

.kpp-path__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kpp-path__points li {
	display: flex;
	gap: var(--kpp-space-sm);
	align-items: flex-start;
	margin: 0 0 var(--kpp-space-xs);
	font-size: var(--kpp-text-md);
	line-height: var(--kpp-leading-body);
}

.kpp-path__points li::before {
	content: "";
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.3rem;
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-bg-accent-soft);
	box-shadow: inset 0 0 0 2px var(--kpp-bg-accent);
}

.kpp-path__cta {
	margin-top: auto;
	text-decoration: none;
}

.kpp-path--contractors {
	background: var(--kpp-bg-brand);
	border-color: var(--kpp-bg-brand);
	color: var(--kpp-text-inverse);
}

.kpp-path--contractors .kpp-path__title,
.kpp-path--contractors .kpp-path__title a,
.kpp-path--contractors .kpp-path__points {
	color: var(--kpp-text-inverse);
}

.kpp-path--contractors .kpp-path__icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--kpp-text-inverse);
}

.kpp-path--contractors .kpp-path__points li::before {
	background: var(--kpp-terracotta-500);
	box-shadow: none;
}

.kpp-newsletter {
	background: transparent;
	color: var(--kpp-text-inverse);
	padding: 0 0 var(--kpp-space-3xl);
}

.kpp-newsletter__inner {
	background: var(--kpp-bg-brand);
	border-radius: var(--kpp-radius-xl);
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 4rem);
	gap: var(--kpp-space-xl);
}

.kpp-newsletter h2 {
	margin: var(--kpp-space-xs) 0 0;
	color: var(--kpp-text-inverse);
	font-size: var(--kpp-text-2xl);
	line-height: var(--kpp-leading-heading);
}

.kpp-newsletter__copy p,
.kpp-newsletter .kpp-kicker {
	color: var(--kpp-text-inverse);
}

.kpp-newsletter .kpp-kicker {
	color: var(--kpp-terracotta-500);
}

.kpp-newsletter__roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-sm) var(--kpp-space-lg);
	margin: 0 0 var(--kpp-space-sm);
	padding: 0;
	border: 0;
}

.kpp-newsletter__roles label {
	display: inline-flex;
	align-items: center;
	gap: var(--kpp-space-xs);
	min-height: 2.75rem;
	color: var(--kpp-text-inverse);
	font-size: var(--kpp-text-sm);
}

.kpp-newsletter .kpp-field {
	border: 0;
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-white);
	min-height: 3rem;
	padding-inline: 1.1rem;
}

.kpp-newsletter :focus-visible {
	outline-color: var(--kpp-white);
}

.kpp-author {
	border: 0;
	border-inline-start: 4px solid var(--kpp-bg-accent);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-accent-soft);
}

.kpp-byline {
	margin-top: var(--kpp-space-md);
	color: var(--kpp-text-secondary);
	font-size: var(--kpp-text-sm);
	line-height: var(--kpp-leading-small);
}

.kpp-cost-summary,
.is-style-kpp-cost-summary {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 35rem;
	padding: 1.75rem;
	border: 2px solid var(--kpp-border-brand);
	border-radius: var(--kpp-radius-lg);
	background: var(--kpp-bg-surface);
}

.kpp-cost-summary__figure {
	margin: 0;
	font-family: var(--kpp-font-serif);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: var(--kpp-weight-semibold);
	line-height: 1.1;
}

.kpp-cost-summary__note,
.kpp-range__labels {
	margin: 0;
	color: var(--kpp-text-secondary);
	font-size: var(--kpp-text-sm);
	line-height: var(--kpp-leading-small);
}

.kpp-range__track {
	position: relative;
	height: 0.5rem;
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-cream-200);
}

.kpp-range__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--kpp-range, 50%);
	border-radius: inherit;
	background: var(--kpp-bg-cta);
}

.kpp-range__marker {
	position: absolute;
	top: 50%;
	left: var(--kpp-range, 50%);
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--kpp-white);
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-terracotta-600);
	transform: translate(-50%, -50%);
}

.kpp-range__labels {
	display: flex;
	justify-content: space-between;
	gap: var(--kpp-space-md);
	margin-top: var(--kpp-space-xs);
}

.kpp-cost-table,
.kpp-compare,
.is-style-kpp-cost-table,
.is-style-kpp-compare {
	overflow: hidden;
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-surface);
}

.kpp-cost-table table,
.kpp-compare table,
.kpp-cost-table__table table,
.kpp-compare__table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.kpp-cost-table th,
.kpp-cost-table td,
.kpp-compare th,
.kpp-compare td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--kpp-border-default);
	font-size: var(--kpp-text-data);
	font-weight: var(--kpp-weight-medium);
	line-height: var(--kpp-leading-data);
	text-align: start;
}

.kpp-cost-table th,
.kpp-compare th {
	background: var(--kpp-bg-brand);
	color: var(--kpp-text-inverse);
	font-size: 1rem;
	font-weight: var(--kpp-weight-semibold);
	line-height: 1.2;
}

.kpp-cost-table tr:last-child td,
.kpp-compare tr:last-child td {
	border-bottom: 0;
}

.kpp-swatch {
	overflow: hidden;
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-lg);
	background: var(--kpp-bg-surface);
	box-shadow: var(--kpp-shadow-card);
}

.kpp-swatch__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.kpp-swatch__chip {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--kpp-cream-200);
}

.kpp-swatch__body {
	display: flex;
	flex-direction: column;
	gap: var(--kpp-space-2xs);
	padding: var(--kpp-space-md) var(--kpp-space-lg) var(--kpp-space-lg);
}

.kpp-swatch__name {
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xl);
	font-weight: var(--kpp-weight-semibold);
	line-height: var(--kpp-leading-h4);
}

.kpp-swatch__meta {
	margin: 0;
	color: var(--kpp-text-secondary);
	font-size: var(--kpp-text-sm);
	line-height: var(--kpp-leading-small);
}

.kpp-protip,
.is-style-kpp-protip {
	display: flex;
	gap: var(--kpp-space-md);
	align-items: flex-start;
	padding: 1.25rem 1.5rem;
	border: 1.5px solid var(--kpp-bg-accent);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-accent-soft);
}

.kpp-protip__mark {
	display: inline-flex;
	flex: none;
	color: var(--kpp-text-brand);
}

.kpp-protip p {
	margin: 0;
}

.kpp-protip .kpp-kicker {
	margin-bottom: var(--kpp-space-2xs);
}

.kpp-step,
.is-style-kpp-step {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: var(--kpp-space-lg);
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-surface);
}

.kpp-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-bg-cta-soft);
	color: var(--kpp-text-cta-strong);
	font-family: var(--kpp-font-serif);
	font-size: 1.375rem;
	font-weight: var(--kpp-weight-semibold);
	line-height: 1;
}

.kpp-step__title {
	margin: 0 0 var(--kpp-space-2xs);
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xl);
	font-weight: var(--kpp-weight-semibold);
	line-height: var(--kpp-leading-h4);
}

.kpp-step__meta {
	margin: var(--kpp-space-xs) 0 0;
	color: var(--kpp-text-secondary);
	font-size: var(--kpp-text-sm);
	line-height: var(--kpp-leading-small);
}

.kpp-databox,
.is-style-kpp-databox {
	padding: var(--kpp-space-lg);
	border: 1px solid var(--kpp-border-brand);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-brand-soft);
}

.kpp-databox h3 {
	margin: var(--kpp-space-xs) 0 var(--kpp-space-sm);
}

.kpp-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	overflow: visible;
}

.kpp-sprite {
	position: absolute;
	inset-inline-start: -100vw;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

.kpp-editor-note {
	margin: var(--kpp-space-lg) 0;
	padding: var(--kpp-space-md);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-cta-soft);
	color: var(--kpp-text-primary);
}

.kpp-hub__hero {
	padding-block: var(--kpp-space-xl) var(--kpp-space-2xl);
}

.kpp-hub__grid {
	display: grid;
	gap: var(--kpp-space-xl);
	align-items: center;
}

.kpp-hub__figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--kpp-radius-lg);
	background: var(--kpp-bg-subtle);
	aspect-ratio: 4 / 3;
}

.kpp-hub__figure picture,
.kpp-hub__figure img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpp-hub__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-sm);
	margin-top: var(--kpp-space-lg);
}

.kpp-topics {
	padding-block: 0 var(--kpp-space-xl);
}

.kpp-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kpp-space-xs);
	margin: var(--kpp-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.kpp-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--kpp-space-xs);
	min-height: 2.75rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--kpp-border-default);
	border-radius: var(--kpp-radius-full);
	background: var(--kpp-bg-surface);
	color: var(--kpp-text-primary);
	font-size: var(--kpp-text-sm);
	font-weight: var(--kpp-weight-semibold);
	text-decoration: none;
}

.kpp-pill:hover {
	border-color: var(--kpp-border-brand);
	color: var(--kpp-text-brand);
}

.kpp-hub__content,
.kpp-city__content {
	padding-block: 0 var(--kpp-space-2xl);
}

.kpp-city__summary {
	display: grid;
	gap: var(--kpp-space-lg);
	padding-block: 0 var(--kpp-space-2xl);
}

.kpp-glance {
	padding: var(--kpp-space-lg);
	border-radius: var(--kpp-radius-lg);
	background: var(--kpp-bg-brand);
	color: var(--kpp-text-inverse);
}

.kpp-glance .kpp-kicker {
	color: var(--kpp-terracotta-500);
}

.kpp-glance__line {
	display: flex;
	justify-content: space-between;
	gap: var(--kpp-space-md);
	margin: var(--kpp-space-sm) 0 0;
	font-size: var(--kpp-text-sm);
}

.kpp-glance__more {
	margin: var(--kpp-space-md) 0 0;
}

.kpp-nearby {
	padding-block: 0 var(--kpp-space-3xl);
}

.kpp-page__title {
	font-size: var(--kpp-text-3xl);
	line-height: var(--kpp-leading-h1);
}

@media (min-width: 64rem) {
	.kpp-hub__grid,
	.kpp-city__summary {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}

	.kpp-nav__cta {
		align-self: center;
	}
}