/* KnowReva site styles
   Ink navy for trust, cobalt for action, signal green for "done". */

:root {
	--kr-ink: #13203a;
	--kr-cobalt: #2b50e8;
	--kr-cobalt-dark: #1e3cc0;
	--kr-signal: #0e9f7e;
	--kr-paper: #f3f5f9;
	--kr-line: #dbe0ea;
	--kr-mute: #56607a;
	--kr-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--kr-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--kr-wrap: 1120px;
}

/* ---------- Global typography ---------- */
html body {
	font-family: var(--kr-body);
	color: var(--kr-ink);
}
html body :is(h1, h2, h3, h4, .wp-block-site-title) {
	font-family: var(--kr-display);
	color: inherit;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* ---------- Page shell: hide theme title, remove gaps ---------- */
.kr-page .wp-block-post-title,
.kr-page .entry-header,
.kr-page .page-header {
	display: none;
}
.kr-page main.wp-block-group,
.kr-page .wp-block-post-content,
.kr-page .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.kr-page .wp-block-post-content > *:last-child,
.kr-page .entry-content > *:last-child {
	margin-bottom: 0;
}

/* ---------- Sections ---------- */
.kr-section,
.wp-block-group.kr-section.has-global-padding {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: clamp(3.5rem, 8vw, 6rem);
	padding-bottom: clamp(3.5rem, 8vw, 6rem);
	padding-left: max(1.25rem, calc((100vw - var(--kr-wrap)) / 2));
	padding-right: max(1.25rem, calc((100vw - var(--kr-wrap)) / 2));
	box-sizing: border-box;
}
.kr-white { background: #fff; }
.kr-paper { background: var(--kr-paper); }
.kr-dark  { background: var(--kr-ink); color: #fff; }

.kr-section h1 {
	font-size: clamp(2.5rem, 6vw, 4.6rem);
	font-weight: 700;
	max-width: 15ch;
	margin: 0 0 1.25rem;
}
.kr-section h2 {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	font-weight: 700;
	max-width: 24ch;
	margin: 0 0 1rem;
}
.kr-section h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 0.5rem;
	line-height: 1.25;
}
.kr-section p,
.kr-section li {
	line-height: 1.6;
	max-width: 65ch;
}
.kr-lead {
	font-size: clamp(1.08rem, 1.5vw, 1.25rem);
	color: var(--kr-mute);
	max-width: 58ch;
	margin-bottom: 2rem;
}
.kr-dark .kr-lead { color: #c7cfe0; }
.kr-caption {
	font-size: 0.9rem;
	color: var(--kr-mute);
	margin-top: 1rem;
}

.kr-hero {
	background: var(--kr-paper);
	padding-top: clamp(4rem, 10vw, 7.5rem);
}
.kr-pagehead {
	background: var(--kr-paper);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--kr-line);
}
.kr-pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 20ch; }

.kr-section .wp-block-columns { gap: 1.25rem; margin-top: 1.25rem; margin-bottom: 0; }

/* ---------- Cards ---------- */
.kr-card {
	background: #fff;
	border: 1px solid var(--kr-line);
	border-radius: 8px;
	padding: 1.6rem 1.6rem 1.4rem;
}
.kr-white .kr-card { background: var(--kr-paper); border-color: transparent; }
.kr-card p { color: var(--kr-mute); margin: 0; }
.kr-card ul, .kr-card ol { padding-left: 1.1rem; color: var(--kr-mute); }
.kr-example {
	margin-top: 0.9rem !important;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--kr-line);
	font-size: 0.93rem;
}

/* Numbered steps (real sequence) */
.kr-steps { counter-reset: krstep; }
.kr-step-card { counter-increment: krstep; }
.kr-step-card::before {
	content: counter(krstep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--kr-cobalt);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Pricing */
.kr-plan { display: flex; flex-direction: column; }
.kr-plan .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.kr-price-tag {
	font-family: var(--kr-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--kr-cobalt) !important;
	margin: 0.25rem 0 0.75rem !important;
}
.kr-featured { border: 2px solid var(--kr-cobalt); }

/* ---------- The workflow strip (the signature element) ---------- */
.kr-flow {
	display: flex;
	flex-wrap: wrap;
	gap: 0 !important;
	margin-top: 3.25rem;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid var(--kr-line);
	border-radius: 10px;
}
.kr-flow .kr-step {
	position: relative;
	flex: 1 1 0;
	min-width: 150px;
	margin: 0;
	padding: 0.85rem 0.9rem 0.85rem 2.3rem;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.35;
	opacity: 0.3;
	animation: kr-lit 0.45s ease forwards;
}
.kr-flow .kr-step::before {
	content: "";
	position: absolute;
	left: 0.9rem;
	top: 1.05rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	border: 2px solid var(--kr-cobalt);
	background: #fff;
	box-sizing: border-box;
	z-index: 1;
}
.kr-flow .kr-step:last-child::before {
	background: var(--kr-signal);
	border-color: var(--kr-signal);
}
.kr-flow .kr-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.6rem;
	right: -0.9rem;
	top: 1.35rem;
	height: 2px;
	background: var(--kr-cobalt);
	transform: scaleX(0);
	transform-origin: left;
	animation: kr-line 0.45s ease forwards;
}
.kr-flow .kr-step:nth-child(1), .kr-flow .kr-step:nth-child(1)::after { animation-delay: 0.3s; }
.kr-flow .kr-step:nth-child(2), .kr-flow .kr-step:nth-child(2)::after { animation-delay: 0.75s; }
.kr-flow .kr-step:nth-child(3), .kr-flow .kr-step:nth-child(3)::after { animation-delay: 1.2s; }
.kr-flow .kr-step:nth-child(4), .kr-flow .kr-step:nth-child(4)::after { animation-delay: 1.65s; }
.kr-flow .kr-step:nth-child(5) { animation-delay: 2.1s; }

@keyframes kr-lit  { to { opacity: 1; } }
@keyframes kr-line { to { transform: scaleX(1); } }

@media (max-width: 760px) {
	.kr-flow { flex-direction: column; }
	.kr-flow .kr-step { flex: none; }
	.kr-flow .kr-step:not(:last-child)::after {
		left: 1.22rem;
		right: auto;
		top: 1.6rem;
		bottom: -1.1rem;
		width: 2px;
		height: auto;
		transform: scaleY(0);
		transform-origin: top;
		animation-name: kr-line-v;
	}
}
@keyframes kr-line-v { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
	.kr-flow .kr-step,
	.kr-flow .kr-step::after {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Buttons ---------- */
.kr-page .wp-block-buttons { gap: 0.75rem; }
.kr-page .wp-block-button__link {
	background: var(--kr-cobalt);
	color: #fff;
	border: 1.5px solid var(--kr-cobalt);
	border-radius: 6px;
	padding: 0.8rem 1.35rem;
	font-family: var(--kr-body);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}
.kr-page .wp-block-button__link:hover { background: var(--kr-cobalt-dark); border-color: var(--kr-cobalt-dark); }
.kr-page .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--kr-ink);
	border-color: var(--kr-ink);
}
.kr-page .is-style-outline .wp-block-button__link:hover { background: var(--kr-ink); color: #fff; }

.kr-page a:focus-visible,
.kr-form :focus-visible {
	outline: 3px solid var(--kr-cobalt);
	outline-offset: 2px;
}

/* ---------- Contact form ---------- */
.kr-form p { margin: 0 0 1rem; max-width: none; }
.kr-form label {
	display: block;
	font-weight: 600;
	font-size: 0.93rem;
	margin-bottom: 0.35rem;
}
.kr-form input,
.kr-form select,
.kr-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--kr-line);
	border-radius: 6px;
	background: #fff;
	color: var(--kr-ink);
	font: inherit;
}
.kr-form input:focus,
.kr-form select:focus,
.kr-form textarea:focus { border-color: var(--kr-cobalt); }
.kr-form .kr-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.kr-submit {
	background: var(--kr-cobalt);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.85rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.kr-submit:hover { background: var(--kr-cobalt-dark); }
.kr-alert {
	padding: 0.85rem 1rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
	font-weight: 500;
}
.kr-alert-ok    { background: #e3f6f0; color: #0b6b55; }
.kr-alert-error { background: #fdecec; color: #a12626; }

/* ---------- Products (v1.1) ---------- */
.kr-products-home { border-bottom: 1px solid var(--kr-line); }
.kr-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}
.kr-products.kr-products-single { grid-template-columns: minmax(0, 640px); }
.kr-product {
	background: var(--kr-paper);
	border: 1px solid var(--kr-line);
	border-left: 4px solid var(--kr-cobalt);
	border-radius: 8px;
	padding: 1.5rem 1.6rem;
}
.kr-product h3 { font-size: 1.6rem; font-weight: 700; margin: 0.25rem 0 0.5rem; }
.kr-product h3 a { color: var(--kr-ink); text-decoration: none; }
.kr-product h3 a:hover { color: var(--kr-cobalt); }
.kr-product p { color: var(--kr-mute); margin: 0 0 0.75rem; }
.kr-product-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.kr-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.8rem;
	background: #e3f6f0;
	color: #0b6b55;
}
.kr-badge-beta { background: #e8edff; color: var(--kr-cobalt-dark); }
.kr-badge-soon { background: #eef0f4; color: var(--kr-mute); }
.kr-product-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 0 !important; }
.kr-product-links a { color: var(--kr-cobalt); font-weight: 600; text-decoration: none; }
.kr-product-links a:hover { text-decoration: underline; }

.kr-badge-line {
	display: inline-block;
	margin-bottom: 1rem !important;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: #e3f6f0;
	color: #0b6b55;
	font-weight: 600;
	font-size: 0.88rem;
}
.kr-page .wp-block-code {
	background: var(--kr-ink);
	color: #e8ecf6;
	border: 0;
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	font-size: 0.95rem;
	max-width: 100%;
}
.kr-page .wp-block-code code { white-space: pre; }
.kr-section .kr-caption a,
.kr-section .kr-lead a { color: var(--kr-cobalt); }