/* Kikis Diet — classic PHP theme.

   Design tokens live here because there is no theme.json in a classic theme.
   Everything below the token block is component CSS.

   Direction: bold and typographic, grounded in food rather than screen colour.
   Palette is pigment-derived (leaf, olive, yolk, paprika, oat). Structure is
   carried by rules — heavy above, hairline between — borrowed from the
   nutrition label. No offset shadows: those read as arcade UI, not food. */

@font-face {
	font-family: "Young Serif";
	src: url("../fonts/YoungSerif.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Wordmark only. Subset to the letters in "Kiki's Diet", which is why it
   weighs 14KB rather than 150KB. Do not use it for anything else — the
   other glyphs are not in the file. */
@font-face {
	font-family: "Fraunces Wordmark";
	src: url("../fonts/FrauncesWordmark.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colour — anchored on the two logo values.
	   --kd-leaf and --kd-paper are taken straight from the mark.

	   Contrast note: #5DA667 carries only 2.95:1 against white, so it is used
	   as a background for DARK text (5.44:1 with ink), never behind pale text.
	   --kd-leaf-deep is the same hue dropped in lightness for the cases that
	   need green type on a light surface — 8.39:1. */
	--kd-ink: #1A2416;
	--kd-leaf: #5DA667;
	--kd-leaf-deep: #2F5634;
	--kd-olive: #7F9A4F;
	--kd-yolk: #E3A83A;
	--kd-paprika: #A8431F;
	--kd-paper: #FDFFF5;
	--kd-oat: #FDFFF5;
	--kd-husk: #EDF3E4;
	--kd-white: #FFFFFF;
	--kd-smoke: #5E6857;

	/* Type */
	--kd-display: "Young Serif", Georgia, serif;
	--kd-wordmark: "Fraunces Wordmark", "Young Serif", Georgia, serif;
	--kd-body: Archivo, -apple-system, "Segoe UI", sans-serif;

	--kd-fs-small: 0.9375rem;
	--kd-fs-base: 1.125rem;
	--kd-fs-medium: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	--kd-fs-large: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
	--kd-fs-xlarge: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
	--kd-fs-display: clamp(3rem, 1.6rem + 6vw, 6rem);

	/* Spacing */
	--kd-s1: 0.5rem;
	--kd-s2: 1rem;
	--kd-s3: 1.75rem;
	--kd-s4: 3rem;
	--kd-s5: 5rem;
	--kd-s6: 7.5rem;

	/* Layout */
	--kd-content: 720px;
	--kd-wide: 1240px;
}

/* ---------- Layout scaffolding ----------
   Block themes gave us alignwide and constrained layouts for free. In a
   classic theme these are ours to declare. */

.kd-wrap {
	max-width: var(--kd-wide);
	margin-inline: auto;
	padding-inline: var(--kd-s3);
}

.kd-wrap--narrow {
	max-width: var(--kd-content);
}

.kd-band {
	padding-block: var(--kd-s5);
}

/* Not every section deserves the same vertical weight. Dense sections get
   room; short ones would otherwise float in dead space. */
.kd-band--tight {
	padding-block: var(--kd-s4);
}

/* Shared section head. An eyebrow gives each section a second level of
   hierarchy, so consecutive headings stop reading as one flat list. */
.kd-section__head {
	max-width: 46ch;
	margin-block-end: var(--kd-s4);
}

.kd-eyebrow {
	display: block;
	font-size: var(--kd-fs-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kd-leaf-deep);
	margin-block-end: var(--kd-s1);
}

.kd-band--leaf .kd-eyebrow,
.kd-band--ink .kd-eyebrow {
	color: inherit;
	opacity: 0.75;
}

.kd-section__head h2 {
	margin-block: 0;
}

.kd-section__head p {
	margin-block-end: 0;
	font-size: var(--kd-fs-medium);
}

.kd-band--oat { background: var(--kd-oat); }
.kd-band--husk { background: var(--kd-husk); }
.kd-band--leaf { background: var(--kd-leaf); color: var(--kd-ink); }
.kd-band--ink { background: var(--kd-ink); color: var(--kd-oat); }

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	background: var(--kd-oat);
	color: var(--kd-ink);
	font-family: var(--kd-body);
	font-size: var(--kd-fs-base);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--kd-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

h1 { font-size: var(--kd-fs-display); }
h2 { font-size: var(--kd-fs-xlarge); }
h3 { font-size: var(--kd-fs-large); }

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--kd-paprika);
}

.kd-band--ink a:hover,
.kd-band--leaf a:hover {
	color: var(--kd-yolk);
}

img {
	max-width: 100%;
	height: auto;
}

/* Buttons are plain anchors now, not block output. */

.kd-btn {
	display: inline-block;
	font-family: var(--kd-body);
	font-weight: 700;
	font-size: var(--kd-fs-base);
	text-decoration: none;
	padding: 1rem 2rem;
	background: var(--kd-ink);
	color: var(--kd-oat);
	cursor: pointer;
}

:root {
	--kd-hair: 1px;
	--kd-rule: 2px;
	--kd-heavy: 6px;
	--kd-measure: 62ch;
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
}

p,
li {
	max-width: var(--kd-measure);
}

/* Archivo carries a width axis. Widening interface text a little — buttons,
   tags, label rows — adds energy without adding another colour. */

.kd-btn,
.kd-btn,
.kd-slab__tag,
.kd-label__title,
.kd-faq__list summary {
	font-variation-settings: "wdth" 106;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(summary:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible) {
	outline: var(--kd-rule) solid var(--kd-paprika);
	outline-offset: 3px;
}

.kd-band--leaf :where(a:focus-visible),
.kd-band--ink :where(a:focus-visible) {
	outline-color: var(--kd-yolk);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Buttons ---------- */
/* Flat, with a rule. Weight comes from the fill, not a drop shadow. */

.kd-btn {
	border: var(--kd-rule) solid var(--kd-ink);
	transition: background-color 120ms ease, color 120ms ease;
}

.kd-btn:hover {
	background: var(--kd-paprika);
	color: var(--kd-oat);
	border-color: var(--kd-paprika);
}

.kd-btn--outline {
	background: transparent;
	color: var(--kd-ink);
}

.kd-btn--accent {
	background: var(--kd-yolk);
	color: var(--kd-ink);
	border-color: var(--kd-yolk);
}

.kd-btn--accent:hover {
	background: var(--kd-oat);
	border-color: var(--kd-oat);
	color: var(--kd-ink);
}

.kd-btn--sm {
	padding: 0.5rem 1.15rem;
	font-size: var(--kd-fs-small);
	background: var(--kd-yolk);
	color: var(--kd-ink);
	border-color: var(--kd-yolk);
}

/* ---------- Header ---------- */

.kd-header {
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-nav a {
	text-decoration: none;
	font-weight: 600;
}

.kd-nav a:hover {
	color: var(--kd-yolk);
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

.kd-hero {
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 900px) {
	.kd-hero__grid {
		grid-template-columns: 1fr;
	}
}

.kd-hero__title {
	max-width: 13ch;
	text-wrap: balance;
	margin-block: 0 var(--kd-s3);
}

/* ---------- Nutrition label ---------- */
/* The signature element. Thick rule, hairline rows, tabular figures — the
   grammar of a nutrition panel, used here to describe what is in a plan. */

.kd-label {
	background: var(--kd-white);
	border: var(--kd-rule) solid var(--kd-ink);
	padding: var(--kd-s3);
	font-size: var(--kd-fs-small);
}

.kd-label__title {
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1;
	margin: 0 0 0.5rem;
	max-width: none;
}

.kd-label__rule {
	background: var(--kd-ink);
}

.kd-label__rule--thick {
	block-size: var(--kd-heavy);
}

.kd-label__rule--mid {
	block-size: var(--kd-rule);
}

.kd-label__serving {
	margin: 0.5rem 0;
	font-weight: 700;
	max-width: none;
}

.kd-label__rows {
	margin: 0;
}

.kd-label__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
	padding-block: 0.6rem;
	border-block-end: var(--kd-hair) solid var(--kd-ink);
}

.kd-label__rows dt {
	margin: 0;
}

.kd-label__rows dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: var(--kd-fs-medium);
	font-family: var(--kd-display);
}

.kd-label__note {
	margin: 0.75rem 0 0;
	color: var(--kd-smoke);
	max-width: none;
}

/* ---------- Proof band ---------- */

.kd-proof__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--kd-s4);
	align-items: end;
}

.kd-proof__item {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-proof__figure {
	font-family: var(--kd-display);
	font-size: clamp(3rem, 1.6rem + 5vw, 5rem);
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
}

.kd-proof__label {
	font-size: var(--kd-fs-small);
	max-width: 24ch;
}

/* ---------- Plans ---------- */

.kd-plans__grid {
	gap: var(--kd-s3);
	margin-block-start: var(--kd-s4);
}

.kd-slab {
	background: var(--kd-white);
	border: var(--kd-rule) solid var(--kd-ink);
	border-block-start-width: var(--kd-heavy);
	padding: var(--kd-s3);
	block-size: 100%;
	transition: background-color 120ms ease;
}

.kd-slab:has(a:hover) {
	background: var(--kd-husk);
}

.kd-slab > :last-child {
	margin-block-end: 0;
}

.kd-slab h2 a,
.kd-slab h3 a {
	text-decoration: none;
}

.kd-slab__tag {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
	margin-block-end: var(--kd-s2);
}

.kd-slab__tag a {
	text-decoration: none;
	color: inherit;
}

/* ---------- Credential ---------- */

.kd-cred__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--kd-s3);
	align-items: start;
	border-block: var(--kd-heavy) solid var(--kd-ink);
	padding-block: var(--kd-s4);
}

@media (max-width: 640px) {
	.kd-cred__inner {
		grid-template-columns: 1fr;
	}
}

.kd-cred__badge svg {
	inline-size: 60px;
	block-size: 60px;
	color: var(--kd-leaf-deep);
}

.kd-cred__text h2 {
	margin-block: 0 0.4em;
	font-size: var(--kd-fs-large);
}

/* ---------- Steps ---------- */

.kd-steps__list {
	list-style: none;
	counter-reset: kd-step;
	margin: var(--kd-s4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--kd-s3);
}

.kd-steps__list li {
	counter-increment: kd-step;
	max-width: none;
	border-block-start: var(--kd-hair) solid var(--kd-ink);
	padding-block-start: var(--kd-s2);
	position: relative;
}

.kd-steps__list li::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 2.5rem;
	block-size: var(--kd-heavy);
	background: var(--kd-leaf);
}

.kd-steps__list li::before {
	content: counter(kd-step);
	display: block;
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1;
	color: var(--kd-leaf);
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	margin-block-end: var(--kd-s1);
}

.kd-steps__list h3 {
	font-size: var(--kd-fs-medium);
	margin-block: 0 0.4em;
}

.kd-steps__list p {
	margin: 0;
	font-size: var(--kd-fs-small);
}

/* ---------- FAQ ---------- */

.kd-faq__list {
	max-width: 46rem;
	margin-block-start: var(--kd-s4);
	border-block-start: var(--kd-heavy) solid var(--kd-ink);
}

.kd-faq__list details {
	border-block-end: var(--kd-hair) solid var(--kd-ink);
}

.kd-faq__list summary {
	cursor: pointer;
	padding-block: 1.1rem;
	font-weight: 700;
	font-size: var(--kd-fs-medium);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.kd-faq__list summary::-webkit-details-marker {
	display: none;
}

.kd-faq__list summary::after {
	content: "+";
	font-family: var(--kd-display);
	font-size: 1.4em;
	line-height: 1;
	color: var(--kd-leaf-deep);
}

.kd-faq__list details[open] summary::after {
	content: "\2212";
}

.kd-faq__list details p {
	margin-block: 0 1.35rem;
	max-width: 54ch;
}

/* ---------- Footer ---------- */

.kd-footer__shout {
	font-size: var(--kd-fs-xlarge);
	max-width: 14ch;
	margin-block: 0 var(--kd-s3);
	color: var(--kd-yolk);
}

.kd-footer__base {
	margin-block-start: var(--kd-s4);
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-hair) solid rgba(250, 244, 230, 0.32);
	font-size: var(--kd-fs-small);
}

.kd-footer__base a {
	text-decoration: none;
}

.kd-footer__base a:hover {
	text-decoration: underline;
}

/* ---------- Medical notice ---------- */

.kd-notice {
	font-size: var(--kd-fs-small);
	border-inline-start: var(--kd-rule) solid var(--kd-yolk);
	padding-inline-start: var(--kd-s2);
	max-width: var(--kd-measure);
	opacity: 0.92;
}

/* ---------- Intake form ---------- */

.kd-intake {
	max-width: 36rem;
}

.kd-intake__progress {
	display: flex;
	gap: 5px;
	margin-block-end: var(--kd-s4);
	list-style: none;
	padding: 0;
}

.kd-intake__progress li {
	block-size: 6px;
	flex: 1;
	background: var(--kd-husk);
	max-width: none;
}

.kd-intake__progress li[aria-current="step"],
.kd-intake__progress li[data-done="true"] {
	background: var(--kd-leaf-deep);
}

.kd-intake__step {
	display: none;
}

.kd-intake__step[data-active="true"] {
	display: block;
}

.kd-intake__legend {
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1.05;
	padding: 0;
	margin-block-end: var(--kd-s3);
	max-width: 18ch;
}

.kd-intake label {
	display: block;
	font-weight: 700;
	margin-block-end: 0.35rem;
}

.kd-intake .kd-hint {
	display: block;
	font-weight: 400;
	font-size: var(--kd-fs-small);
	color: var(--kd-smoke);
	margin-block-end: 0.5rem;
}

.kd-intake input[type="text"],
.kd-intake input[type="email"],
.kd-intake input[type="tel"],
.kd-intake input[type="number"],
.kd-intake select,
.kd-intake textarea {
	inline-size: 100%;
	padding: 0.8rem 0.9rem;
	font: inherit;
	color: inherit;
	background: var(--kd-white);
	border: var(--kd-rule) solid var(--kd-ink);
	border-radius: 0;
}

.kd-intake fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--kd-s3);
}

.kd-intake__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: var(--kd-fs-small);
	font-weight: 400;
	max-width: var(--kd-measure);
}

.kd-intake__consent input {
	margin-block-start: 0.3rem;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	accent-color: var(--kd-leaf-deep);
}

.kd-intake__nav {
	display: flex;
	gap: var(--kd-s2);
	margin-block-start: var(--kd-s4);
}

.kd-intake__nav button {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 1rem 2rem;
	background: var(--kd-ink);
	color: var(--kd-oat);
	border: var(--kd-rule) solid var(--kd-ink);
}

.kd-intake__nav button[data-kd-prev] {
	background: transparent;
	color: var(--kd-ink);
}

.kd-error {
	color: #9C2E14;
	font-weight: 600;
	font-size: var(--kd-fs-small);
	margin-block-start: 0.35rem;
}

.kd-intake__referral {
	border: var(--kd-rule) solid var(--kd-ink);
	border-block-start-width: var(--kd-heavy);
	padding: var(--kd-s3);
	background: var(--kd-white);
}

/* ---------- Utilities ---------- */

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
   Classic-theme additions.
   Block markup supplied some of this for free; in a PHP theme
   it is ours to write.
   ============================================================ */

.kd-skip {
	position: absolute;
	inset-inline-start: -9999px;
}

.kd-skip:focus {
	position: fixed;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 999;
	background: var(--kd-ink);
	color: var(--kd-oat);
	padding: 0.75rem 1rem;
}

/* ---------- Header ---------- */

.kd-header {
	padding-block: var(--kd-s2);
}

.kd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-s3);
}

.kd-header__brand img,
.kd-header__brand .custom-logo {
	inline-size: 58px;
	block-size: auto;
	display: block;
}

.kd-header__title {
	font-family: var(--kd-display);
	font-size: 1.25rem;
	text-decoration: none;
}

.kd-header__right {
	display: flex;
	align-items: center;
	gap: var(--kd-s3);
}

.kd-nav__list {
	display: flex;
	align-items: center;
	gap: var(--kd-s3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kd-nav__list li {
	max-width: none;
}

.kd-nav a {
	text-decoration: none;
	font-weight: 600;
}

.kd-nav a:hover {
	color: var(--kd-yolk);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.kd-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--kd-yolk);
	text-decoration-thickness: 2px;
}

/* Mobile menu. A three-line button that swaps to a close mark when open. */

.kd-header__toggle {
	display: none;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	background: transparent;
	border: var(--kd-rule) solid var(--kd-oat);
	cursor: pointer;
	position: relative;
}

.kd-header__toggle span[aria-hidden],
.kd-header__toggle span[aria-hidden]::before,
.kd-header__toggle span[aria-hidden]::after {
	position: absolute;
	inset-inline: 11px;
	block-size: 2px;
	background: var(--kd-oat);
	content: "";
}

.kd-header__toggle span[aria-hidden] {
	inset-block-start: 21px;
}

.kd-header__toggle span[aria-hidden]::before { inset-block-start: -7px; }
.kd-header__toggle span[aria-hidden]::after  { inset-block-start: 7px; }

.kd-header__toggle[aria-expanded="true"] span[aria-hidden] {
	background: transparent;
}

.kd-header__toggle[aria-expanded="true"] span[aria-hidden]::before {
	inset-block-start: 0;
	transform: rotate(45deg);
}

.kd-header__toggle[aria-expanded="true"] span[aria-hidden]::after {
	inset-block-start: 0;
	transform: rotate(-45deg);
}

@media (max-width: 820px) {
	.kd-header__toggle {
		display: block;
	}

	.kd-header__right {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--kd-s2);
		padding-block-start: var(--kd-s3);
	}

	.kd-header__right.is-open {
		display: flex;
	}

	.kd-header__inner {
		flex-wrap: wrap;
	}

	.kd-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--kd-s2);
	}
}

/* ---------- Shared typography ---------- */

.kd-lead {
	font-size: var(--kd-fs-medium);
}

.kd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-s2);
	margin-block-start: var(--kd-s3);
	max-width: none;
}

.kd-btn--outline {
	background: transparent;
	color: var(--kd-ink);
}

.kd-btn--sm {
	padding: 0.5rem 1.15rem;
	font-size: var(--kd-fs-small);
	background: var(--kd-yolk);
	color: var(--kd-ink);
	border-color: var(--kd-yolk);
}

.kd-btn--accent {
	background: var(--kd-yolk);
	color: var(--kd-ink);
	border-color: var(--kd-yolk);
}

.kd-content > * + * {
	margin-block-start: 1.25em;
}

.kd-entry + .kd-entry {
	margin-block-start: var(--kd-s4);
	padding-block-start: var(--kd-s4);
	border-block-start: var(--kd-hair) solid var(--kd-ink);
}

.kd-entry__meta {
	color: var(--kd-smoke);
	font-size: var(--kd-fs-small);
}

.kd-plans__intro {
	padding-block: var(--kd-s5) var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kd-s3);
	margin-block-start: var(--kd-s4);
}

.kd-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--kd-s2);
	align-items: center;
}

.kd-footer__base p {
	margin: 0;
}

.navigation.pagination {
	margin-block-start: var(--kd-s4);
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border: var(--kd-rule) solid var(--kd-ink);
	text-decoration: none;
	margin-inline-end: 0.35rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--kd-ink);
	color: var(--kd-oat);
}

/* ---------- Plan groups ---------- */

.kd-plans__group + .kd-plans__group {
	margin-block-start: var(--kd-s5);
}

.kd-plans__heading {
	font-size: var(--kd-fs-large);
	margin-block: 0;
	padding-block-end: var(--kd-s1);
	border-block-end: var(--kd-heavy) solid var(--kd-ink);
}

.kd-plans__heading a {
	text-decoration: none;
}

.kd-plans__heading a:hover {
	color: var(--kd-paprika);
}

.kd-slab__gp {
	margin-block: var(--kd-s2) 0;
	font-size: var(--kd-fs-small);
	font-weight: 600;
	color: var(--kd-paprika);
	border-block-start: var(--kd-hair) solid var(--kd-paprika);
	padding-block-start: 0.5rem;
}

/* ---------- Service pillars ---------- */

.kd-pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--kd-s4);
	margin-block-start: var(--kd-s4);
}

.kd-pillars__grid {
	counter-reset: kd-pillar;
}

.kd-pillar {
	counter-increment: kd-pillar;
	background: var(--kd-white);
	border: var(--kd-hair) solid var(--kd-husk);
	border-block-start: var(--kd-heavy) solid var(--kd-leaf);
	padding: var(--kd-s3);
	display: flex;
	flex-direction: column;
}

.kd-pillar::before {
	content: counter(kd-pillar, decimal-leading-zero);
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1;
	color: var(--kd-husk);
	margin-block-end: var(--kd-s2);
}

.kd-pillar p {
	flex: 1;
}

.kd-pillar h3 {
	font-size: var(--kd-fs-medium);
	margin-block: 0 0.5em;
}

.kd-pillar h3 a {
	text-decoration: none;
}

.kd-pillar h3 a:hover {
	color: var(--kd-paprika);
}

.kd-pillar p {
	margin: 0;
	font-size: var(--kd-fs-small);
}

.kd-band--paper { background: var(--kd-paper); }

/* ---------- Footer ---------- */

.kd-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
	gap: var(--kd-s4);
	align-items: start;
}

@media (max-width: 760px) {
	.kd-footer__top {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
	}
}

.kd-footer__tagline {
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1.1;
	margin-block: 0 var(--kd-s3);
	color: var(--kd-yolk);
	max-width: 16ch;
}

.kd-footer__col h2 {
	font-size: var(--kd-fs-small);
	font-family: var(--kd-body);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-block: 0 var(--kd-s2);
	padding-block-end: 0.4rem;
	border-block-end: var(--kd-hair) solid rgba(253, 255, 245, 0.3);
}

.kd-footer__col ul,
.kd-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.kd-footer__col li,
.kd-social li {
	max-width: none;
}

.kd-social {
	grid-auto-flow: column;
	justify-content: start;
	gap: var(--kd-s3);
	margin-block-start: var(--kd-s3);
	font-size: var(--kd-fs-small);
}

.kd-footer a {
	text-decoration: none;
}

.kd-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kd-footer .kd-notice {
	margin-block-start: var(--kd-s4);
}

.kd-pillar__more {
	margin-block-start: var(--kd-s2);
	font-size: var(--kd-fs-small);
	font-weight: 700;
}

.kd-pillar__more a {
	text-decoration: none;
	color: var(--kd-leaf-deep);
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
}

.kd-pillar__more a:hover {
	color: var(--kd-paprika);
	border-color: var(--kd-paprika);
}

/* ============================================================
   Section-level layout.
   The earlier version gave every section the same shape — heading,
   then a row of rule-topped items — so four in a row read as one
   repeated block. Each now has its own structure and uses the
   full column width instead of floating in the left half.
   ============================================================ */

/* ---------- Credential ----------
   Was two thick rules around a small block, adrift in a wide band.
   Now a contained panel with the badge given real size. */

.kd-cred__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: center;
	border: var(--kd-hair) solid var(--kd-ink);
	border-inline-start: var(--kd-heavy) solid var(--kd-leaf);
	background: var(--kd-white);
	padding: var(--kd-s4);
	max-width: 60rem;
	margin-inline: auto;
}

.kd-cred__badge svg {
	inline-size: 96px;
	block-size: 96px;
	color: var(--kd-leaf);
}

.kd-cred__text h2 {
	font-size: var(--kd-fs-large);
	margin-block: 0 0.35em;
}

.kd-cred__text p {
	margin-block-end: 0;
	max-width: 56ch;
}

.kd-cred__role {
	display: block;
	font-family: var(--kd-body);
	font-size: var(--kd-fs-small);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-leaf-deep);
	margin-block-end: var(--kd-s1);
}

@media (max-width: 700px) {
	.kd-cred__inner {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
		padding: var(--kd-s3);
	}

	.kd-cred__badge svg {
		inline-size: 64px;
		block-size: 64px;
	}
}

/* ---------- FAQ ----------
   Heading was stacked above a half-width list, leaving the right
   side empty. Now heading and list sit side by side. */

.kd-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: var(--kd-s4);
	align-items: start;
}

@media (max-width: 860px) {
	.kd-faq__layout {
		grid-template-columns: 1fr;
	}
}

.kd-faq__layout .kd-section__head {
	margin-block-end: 0;
	position: sticky;
	inset-block-start: var(--kd-s3);
}

.kd-faq__list {
	max-width: none;
	margin-block-start: 0;
}

/* ---------- Hero ----------
   Tighter coupling between the headline and the label panel. */

.kd-hero {
	padding-block: var(--kd-s5) var(--kd-s5);
}

.kd-hero__grid {
	align-items: center;
}

.kd-hero__title {
	margin-block-end: var(--kd-s3);
}

.kd-hero .kd-lead {
	max-width: 44ch;
}

.kd-label {
	box-shadow: none;
	border-width: var(--kd-rule);
}

/* ---------- Pillars ---------- */

.kd-pillars__grid {
	gap: var(--kd-s3);
}

/* ---------- Vertical rhythm between adjacent bands ----------
   Consecutive bands of the same colour need a seam, or they merge
   into one very tall section. */

.kd-band--paper + .kd-band--paper {
	padding-block-start: 0;
}

.kd-band--paper + .kd-band--paper > .kd-wrap {
	border-block-start: var(--kd-hair) solid var(--kd-husk);
	padding-block-start: var(--kd-s5);
}

/* ============================================================
   Refinements.
   ============================================================ */

/* ---------- Pillar call to action ----------
   A quiet underlined link at the bottom of a card does not read as
   an action. These are the routes into the three archives, so they
   get button weight. */

.kd-pillar__more {
	margin-block-start: var(--kd-s3);
	margin-block-end: 0;
}

.kd-pillar__more a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border: none;
	font-weight: 700;
	font-size: var(--kd-fs-small);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.kd-pillar__more a::after {
	content: "\2192";
	font-size: 1.05em;
	transition: transform 120ms ease;
}

.kd-pillar__more a:hover {
	background: var(--kd-ink);
	color: var(--kd-paper);
	border: none;
}

.kd-pillar__more a:hover::after {
	transform: translateX(3px);
}

/* ---------- Proof band ----------
   Three fixed rows so the rule, the figure and the label align
   across all three columns regardless of label length. */

.kd-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto;
	gap: 0 var(--kd-s5);
	align-items: start;
}

@media (max-width: 780px) {
	.kd-proof__grid {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
	}
}

.kd-proof__item {
	display: grid;
	grid-row: 1 / span 3;
	grid-template-rows: subgrid;
	gap: 0;
	padding-block-start: 0;
	border-block-start: none;
	position: relative;
}

@supports not (grid-template-rows: subgrid) {
	.kd-proof__item {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}
}

.kd-proof__item + .kd-proof__item {
	padding-inline-start: var(--kd-s4);
	margin-inline-start: calc(var(--kd-s4) * -1);
}

.kd-proof__item + .kd-proof__item::before {
	content: "";
	position: absolute;
	inset-block: 0.35rem 0.35rem;
	inset-inline-start: 0;
	inline-size: var(--kd-hair);
	background: var(--kd-ink);
	opacity: 0.35;
}

@media (max-width: 780px) {
	.kd-proof__item + .kd-proof__item {
		padding-inline-start: 0;
		margin-inline-start: 0;
		padding-block-start: var(--kd-s3);
	}

	.kd-proof__item + .kd-proof__item::before {
		inset: 0 0 auto 0;
		inline-size: auto;
		block-size: var(--kd-hair);
	}
}

.kd-proof__figure {
	font-family: var(--kd-display);
	font-size: clamp(3.25rem, 1.6rem + 6vw, 5.5rem);
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
	align-self: end;
}

.kd-proof__label {
	font-size: var(--kd-fs-small);
	line-height: 1.45;
	max-width: 26ch;
	margin-block-start: var(--kd-s2);
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

/* ---------- FAQ ----------
   Was too much black: a heavy rule above, ink rules between every
   row, and bold ink questions. Lightened to green and husk so the
   section reads as a calm list rather than a grid of bars. */

.kd-faq__list {
	border-block-start: var(--kd-rule) solid var(--kd-leaf);
}

.kd-faq__list details {
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.14);
}

.kd-faq__list summary {
	font-weight: 600;
	color: var(--kd-ink);
}

.kd-faq__list summary:hover {
	color: var(--kd-leaf-deep);
}

.kd-faq__list details[open] summary {
	color: var(--kd-leaf-deep);
}

.kd-faq__list summary::after {
	color: var(--kd-leaf);
	font-family: var(--kd-body);
	font-weight: 400;
	font-size: 1.5em;
}

.kd-faq__layout .kd-section__head h2 {
	max-width: 12ch;
}

.kd-faq__layout .kd-section__head p {
	font-size: var(--kd-fs-base);
	color: var(--kd-smoke);
	margin-block-start: var(--kd-s2);
}

/* ============================================================
   Pillars — the section that has to carry the page.
   Previously three plain boxes on the same cream as everything
   around them, with a heading squeezed into a narrow column and
   wrapping to four lines.
   ============================================================ */

:root {
	--kd-sage: #DDE8CE;
}

.kd-band--sage {
	background: var(--kd-sage);
	border-block: var(--kd-hair) solid rgba(26, 36, 22, 0.12);
}

/* Heading and lead sit side by side, so the display type gets the
   width it needs instead of towering. */

.kd-pillars__head {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: end;
	margin-block-end: var(--kd-s4);
	padding-block-end: var(--kd-s3);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-pillars__head h2 {
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}

.kd-pillars__head p {
	margin: 0;
	font-size: var(--kd-fs-medium);
	max-width: 34ch;
}

@media (max-width: 820px) {
	.kd-pillars__head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s2);
	}
}

/* Cards: heavier edge, oversized outlined numeral, action bar
   pinned to the bottom so all three align. */

.kd-pillar {
	background: var(--kd-paper);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 10px solid var(--kd-leaf);
	padding: var(--kd-s3) var(--kd-s3) 0;
	overflow: clip;
	position: relative;
	transition: border-color 140ms ease, background-color 140ms ease;
}

.kd-pillar::before {
	content: counter(kd-pillar, decimal-leading-zero);
	position: absolute;
	inset-block-start: var(--kd-s2);
	inset-inline-end: var(--kd-s3);
	font-family: var(--kd-display);
	font-size: 5rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(93, 166, 103, 0.55);
	margin: 0;
	pointer-events: none;
}

.kd-pillar h3 {
	margin-block: var(--kd-s3) 0.5em;
	max-width: 14ch;
	font-size: var(--kd-fs-large);
}

.kd-pillar p {
	margin-block-end: var(--kd-s3);
}

.kd-pillar:hover {
	border-color: var(--kd-leaf);
	background: var(--kd-white);
}

/* Action bar spans the card, so the three line up regardless of
   how long each description runs. */

.kd-pillar__more {
	margin: auto calc(var(--kd-s3) * -1) 0;
}

.kd-pillar__more a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	inline-size: 100%;
	padding: 1rem var(--kd-s3);
	background: transparent;
	color: var(--kd-ink);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	font-weight: 700;
	font-size: var(--kd-fs-base);
}

.kd-pillar__more a:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
}

.kd-pillar__more a::after {
	content: "\2192";
	font-size: 1.15em;
}

/* ============================================================
   Third pass fixes.
   ============================================================ */

/* ---------- Pillars: numeral was colliding with the title ----------
   Reserve a corner for the numeral and keep the heading clear of it,
   rather than letting two elements share the same space. */

.kd-pillar::before {
	font-size: 3.5rem;
	inset-block-start: var(--kd-s3);
	inset-inline-end: var(--kd-s3);
	line-height: 0.8;
}

.kd-pillar h3 {
	margin-block-start: 0;
	padding-inline-end: 3.75rem;
	max-width: none;
	font-size: var(--kd-fs-medium);
	line-height: 1.15;
}

@media (max-width: 520px) {
	.kd-pillar::before {
		font-size: 2.75rem;
	}

	.kd-pillar h3 {
		padding-inline-end: 3rem;
	}
}

/* ---------- Proof band ----------
   Ink figures on mid-green read as a slab of black. White on that
   green fails contrast, so the band goes deep green instead and the
   figures go light: 8.4:1, and no black anywhere. */

.kd-band--forest {
	background: var(--kd-leaf-deep);
	color: var(--kd-paper);
}

.kd-band--forest .kd-proof__figure {
	color: var(--kd-paper);
}

.kd-band--forest .kd-proof__label {
	color: var(--kd-paper);
	opacity: 0.88;
	border-block-start-color: var(--kd-leaf);
	border-block-start-width: var(--kd-rule);
}

.kd-band--forest .kd-proof__item + .kd-proof__item::before {
	background: var(--kd-paper);
	opacity: 0.25;
}

/* Counting figures change width as they animate; tabular numerals
   and a reserved minimum stop the layout jumping. */
.kd-proof__figure {
	font-variant-numeric: tabular-nums;
	min-block-size: 1em;
}

@media (max-width: 780px) {
	.kd-proof__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.kd-proof__item {
		display: flex;
		flex-direction: column;
		grid-row: auto;
		padding-block: var(--kd-s3);
	}

	.kd-proof__figure {
		font-size: 3.25rem;
	}

	.kd-proof__label {
		max-width: none;
		margin-block-start: var(--kd-s1);
		padding-block-start: var(--kd-s1);
	}
}

@media (max-width: 400px) {
	.kd-proof__figure {
		font-size: 2.75rem;
	}
}

/* ---------- Steps: hoverable items ---------- */

.kd-steps__list li {
	padding: var(--kd-s2) var(--kd-s2) var(--kd-s3);
	margin-inline: calc(var(--kd-s2) * -1);
	transition: background-color 140ms ease;
}

.kd-steps__list li:hover {
	background: var(--kd-sage);
}

.kd-steps__list li::after {
	inset-inline-start: var(--kd-s2);
}

.kd-steps__list li:hover::before {
	color: var(--kd-leaf-deep);
}

.kd-steps__list li h3 {
	transition: color 140ms ease;
}

.kd-steps__list li:hover h3 {
	color: var(--kd-leaf-deep);
}

@media (max-width: 520px) {
	.kd-steps__list li {
		margin-inline: 0;
		padding-inline: 0;
	}

	.kd-steps__list li::after {
		inset-inline-start: 0;
	}
}

/* ============================================================
   Mobile fixes.
   Two desktop-only rules had escaped their breakpoints.
   ============================================================ */

/* The FAQ heading sticks so it stays beside a long accordion. Once
   the columns stack, sticking makes it ride down over the questions
   instead. Scope it to the two-column layout only. */

.kd-faq__layout .kd-section__head {
	position: static;
}

@media (min-width: 861px) {
	.kd-faq__layout .kd-section__head {
		position: sticky;
		inset-block-start: var(--kd-s3);
	}
}

/* align-self: end places the figure on the subgrid's vertical axis.
   In the mobile flex fallback the cross axis is horizontal, so the
   same rule shoved every number to the right edge. */

@media (max-width: 780px) {
	.kd-proof__item {
		align-items: stretch;
		text-align: start;
		padding-block: var(--kd-s3) var(--kd-s3);
	}

	.kd-proof__figure {
		align-self: start;
		line-height: 1;
	}

	.kd-proof__label {
		max-width: 34ch;
		border-block-start-width: var(--kd-rule);
	}

	/* One rule between items, not a rule under every figure and a
	   second one between rows. */
	.kd-proof__item + .kd-proof__item {
		border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.22);
	}

	.kd-proof__item + .kd-proof__item::before {
		display: none;
	}
}

/* ============================================================
   Proof band — mobile, rebuilt.
   The rule under each figure was the label's top border, and the
   label was capped at 34ch, so the rule stopped short of the
   column. Padding also stacked three deep: band, item and row.
   ============================================================ */

@media (max-width: 780px) {
	.kd-proof.kd-band {
		padding-block: var(--kd-s4);
	}

	.kd-proof__grid {
		display: block;
	}

	.kd-proof__item {
		display: grid;
		grid-template-columns: minmax(4.5ch, auto) minmax(0, 1fr);
		grid-template-rows: auto;
		column-gap: var(--kd-s3);
		align-items: center;
		padding-block: var(--kd-s3);
		border-block-start: none;
	}

	.kd-proof__item + .kd-proof__item {
		border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.2);
		padding-inline-start: 0;
		margin-inline-start: 0;
	}

	.kd-proof__figure {
		font-size: clamp(2.5rem, 11vw, 3.5rem);
		line-height: 1;
		align-self: center;
		justify-self: start;
	}

	.kd-proof__label {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: none;
		border-inline-start: var(--kd-rule) solid var(--kd-leaf);
		padding-inline-start: var(--kd-s2);
		max-width: none;
		font-size: var(--kd-fs-small);
	}
}

/* ============================================================
   Header.
   Was a plain black bar with no relationship to the page below.
   ============================================================ */

.kd-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block: var(--kd-s2);
}

.kd-header__title,
.kd-header__brand a {
	font-family: var(--kd-display);
	font-size: 1.4rem;
	letter-spacing: -0.01em;
}

/* Underline grows from the left rather than appearing whole. */

.kd-nav a {
	position: relative;
	padding-block: 0.35rem;
	font-size: var(--kd-fs-small);
	letter-spacing: 0.01em;
}

.kd-nav a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: var(--kd-rule);
	background: var(--kd-leaf);
	transition: inline-size 160ms ease;
}

.kd-nav a:hover {
	color: var(--kd-paper);
	text-decoration: none;
}

.kd-nav a:hover::after,
.kd-nav .current-menu-item > a::after {
	inline-size: 100%;
}

.kd-nav .current-menu-item > a {
	text-decoration: none;
}

.kd-header .kd-btn--sm {
	border: var(--kd-rule) solid var(--kd-yolk);
}

.kd-header .kd-btn--sm:hover {
	background: transparent;
	color: var(--kd-yolk);
}

/* Mobile panel: full width, real tap targets, separated rows. */

@media (max-width: 820px) {
	.kd-header__right {
		border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.22);
		margin-block-start: var(--kd-s2);
		padding-block-start: var(--kd-s2);
		gap: var(--kd-s2);
	}

	.kd-nav,
	.kd-nav__list {
		inline-size: 100%;
	}

	.kd-nav__list {
		gap: 0;
	}

	.kd-nav__list li {
		inline-size: 100%;
		border-block-end: var(--kd-hair) solid rgba(253, 255, 245, 0.15);
	}

	.kd-nav a {
		display: block;
		inline-size: 100%;
		padding-block: 0.9rem;
		font-size: var(--kd-fs-base);
	}

	.kd-header .kd-btn--sm {
		inline-size: 100%;
		text-align: center;
		padding-block: 0.9rem;
		margin-block-start: var(--kd-s1);
	}
}

/* ============================================================
   Footer.
   ============================================================ */

.kd-footer {
	border-block-start: var(--kd-heavy) solid var(--kd-leaf);
	padding-block: var(--kd-s5) var(--kd-s3);
}

.kd-footer__top {
	gap: var(--kd-s5) var(--kd-s4);
	padding-block-end: var(--kd-s4);
	border-block-end: var(--kd-hair) solid rgba(253, 255, 245, 0.18);
}

.kd-footer__tagline {
	font-size: var(--kd-fs-xlarge);
	max-width: 13ch;
	line-height: 1.05;
}

.kd-footer__col h2 {
	color: var(--kd-leaf);
	border-block-end-color: rgba(93, 166, 103, 0.4);
	text-transform: none;
}

.kd-footer__col a {
	display: inline-block;
	padding-block: 0.15rem;
	opacity: 0.9;
}

.kd-footer__col a:hover {
	opacity: 1;
	color: var(--kd-yolk);
}

.kd-social {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, minmax(0, max-content));
	gap: var(--kd-s1);
}

.kd-social a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: var(--kd-hair) solid rgba(253, 255, 245, 0.35);
	font-size: var(--kd-fs-small);
	font-weight: 600;
}

.kd-social a:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
	text-decoration: none;
}

.kd-footer .kd-notice {
	border-inline-start-color: var(--kd-leaf);
	opacity: 0.75;
	font-size: 0.875rem;
	max-width: 70ch;
}

.kd-footer__base {
	margin-block-start: var(--kd-s3);
	padding-block-start: var(--kd-s2);
	opacity: 0.7;
	font-size: 0.875rem;
}

@media (max-width: 760px) {
	.kd-footer {
		padding-block: var(--kd-s4) var(--kd-s3);
	}

	.kd-footer__top {
		gap: var(--kd-s4);
	}

	.kd-footer__tagline {
		font-size: var(--kd-fs-large);
		max-width: none;
	}

	.kd-footer .kd-btn--accent {
		inline-size: 100%;
		text-align: center;
	}

	.kd-footer__base {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}

/* ============================================================
   Colour correction.

   Yolk was never a brand value — it was introduced as an accent and
   ended up carrying structural weight in the header button and the
   footer tagline. Against ink and leaf it reads as a third,
   unrelated hue. The brand is two colours: #5DA667 and #FDFFF5.
   Everything load-bearing now uses those, with paprika reserved for
   warnings only.
   ============================================================ */

/* ---------- Header ---------- */

.kd-header .kd-btn--sm,
.kd-header .kd-btn.kd-btn--sm {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border: var(--kd-rule) solid var(--kd-leaf);
}

.kd-header .kd-btn--sm:hover {
	background: transparent;
	color: var(--kd-leaf);
	border-color: var(--kd-leaf);
}

.kd-nav a:hover {
	color: var(--kd-leaf);
}

/* ---------- Footer ---------- */

.kd-footer__tagline {
	color: var(--kd-paper);
}

/* The descriptor carries the green; the name stays paper, so the two
   brand values sit together instead of competing. */
.kd-footer__tagline em,
.kd-footer__tagline .kd-footer__descriptor {
	display: block;
	font-style: normal;
	color: var(--kd-leaf);
}

.kd-footer .kd-btn--accent,
.kd-footer .kd-btn.kd-btn--accent {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border: var(--kd-rule) solid var(--kd-leaf);
}

.kd-footer .kd-btn--accent:hover {
	background: transparent;
	color: var(--kd-leaf);
	border-color: var(--kd-leaf);
}

.kd-footer__col a:hover {
	color: var(--kd-leaf);
}

.kd-footer .kd-notice {
	border-inline-start-color: var(--kd-leaf);
}

/* ---------- Remaining yolk usages ----------
   Kept nowhere structural. The accent-button style is still
   available if a genuinely secondary action needs it later. */

.kd-band--ink .kd-eyebrow,
.kd-band--forest .kd-eyebrow {
	color: var(--kd-leaf);
	opacity: 1;
}

/* ---------- Hero: give the panel a brand edge ----------
   It was a plain black-ruled box floating beside the headline. */

.kd-label {
	border-color: var(--kd-ink);
	border-block-start: var(--kd-heavy) solid var(--kd-leaf);
}

.kd-label__rows dd {
	color: var(--kd-leaf-deep);
}

/* ============================================================
   Footer columns on mobile.
   Linqet and Resurse are short lists; stacking them made the
   footer twice as tall for no gain. They sit side by side and the
   brand block spans the full width above them.
   ============================================================ */

@media (max-width: 760px) {
	.kd-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--kd-s4) var(--kd-s3);
	}

	.kd-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 340px) {
	.kd-footer__top {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Hover colour.
   Paprika was doing double duty as both the warning colour and the
   interaction colour, which is why the primary button turned rust.
   Interaction is brand green; paprika now only signals a warning.
   ============================================================ */

.kd-btn:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
}

.kd-btn--outline:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
}

/* Text links on light backgrounds need the deeper tint — #5DA667
   against paper is only 2.9:1. */

a:hover {
	color: var(--kd-leaf-deep);
}

.kd-band--ink a:hover,
.kd-band--forest a:hover,
.kd-footer a:hover,
.kd-header a:hover {
	color: var(--kd-leaf);
}

.kd-pillar h3 a:hover,
.kd-plans__heading a:hover,
.kd-pillar__more a:hover {
	color: var(--kd-ink);
}

.kd-pillar__more a:hover {
	background: var(--kd-leaf);
}

.kd-slab__gp {
	color: var(--kd-paprika);
	border-block-start-color: var(--kd-paprika);
}

/* ============================================================
   Goal archives — Dieta, Receta, Fitness.
   Each plan gets a full row rather than a teaser card, because the
   old page carried real content per plan: a positioning line, a
   description and a list of what is included.
   ============================================================ */

.kd-goal__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: end;
}

.kd-goal__head h1 {
	margin: 0;
	font-size: var(--kd-fs-xlarge);
}

.kd-goal__lead p {
	margin-block: 0 var(--kd-s3);
	font-size: var(--kd-fs-medium);
}

.kd-goal__cta {
	margin-block-end: 0 !important;
}

@media (max-width: 820px) {
	.kd-goal__head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s3);
	}
}

/* ---------- Plan rows ---------- */

.kd-plancards {
	display: grid;
	gap: var(--kd-s3);
}

.kd-plancard {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
	gap: var(--kd-s4);
	align-items: start;
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-inline-start: var(--kd-heavy) solid var(--kd-leaf);
	padding: var(--kd-s3);
	transition: border-color 140ms ease;
}

.kd-plancard:hover {
	border-color: rgba(93, 166, 103, 0.6);
	border-inline-start-color: var(--kd-leaf-deep);
}

@media (max-width: 1000px) {
	.kd-plancard {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--kd-s3);
	}

	.kd-plancard__foot {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.kd-plancard {
		grid-template-columns: 1fr;
	}
}

.kd-plancard__tagline {
	margin: 0 0 0.4rem;
	font-size: var(--kd-fs-small);
	font-weight: 700;
	color: var(--kd-leaf-deep);
}

.kd-plancard__title {
	margin: 0 0 0.5rem;
	font-size: var(--kd-fs-large);
	line-height: 1.08;
}

.kd-plancard__title a {
	text-decoration: none;
}

.kd-plancard__excerpt {
	margin: 0;
	font-size: var(--kd-fs-small);
}

.kd-plancard__label {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-smoke);
	padding-block-end: 0.4rem;
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

/* Feature lists use a drawn check rather than a bullet — closer to
   the old page, and it reads as "included" rather than "item". */

.kd-featurelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.kd-featurelist li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: var(--kd-fs-small);
	line-height: 1.45;
	max-width: 42ch;
}

.kd-featurelist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	inline-size: 0.7rem;
	block-size: 0.38rem;
	border-inline-start: 2px solid var(--kd-leaf);
	border-block-end: 2px solid var(--kd-leaf);
	transform: rotate(-45deg);
}

.kd-featurelist--panel li {
	max-width: none;
}

.kd-plancard__foot {
	display: grid;
	gap: var(--kd-s2);
	justify-items: start;
	align-content: start;
}

.kd-plancard__foot .kd-btn {
	white-space: nowrap;
	font-size: var(--kd-fs-small);
	padding: 0.75rem 1.4rem;
}

.kd-plancard__gp {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kd-paprika);
	border-inline-start: var(--kd-rule) solid var(--kd-paprika);
	padding-inline-start: 0.6rem;
	max-width: 26ch;
}

/* ---------- Clinical group ---------- */

.kd-goal__clinical .kd-section__head {
	max-width: 60ch;
}

.kd-goal__clinical .kd-plancard {
	border-inline-start-color: var(--kd-paprika);
	background: var(--kd-paper);
}

/* ---------- Single plan hero ---------- */

.kd-planhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
	gap: var(--kd-s4);
	align-items: start;
}

@media (max-width: 900px) {
	.kd-planhero__grid {
		grid-template-columns: 1fr;
	}
}

.kd-planhero h1 {
	font-size: var(--kd-fs-xlarge);
	margin-block: var(--kd-s2) var(--kd-s2);
}

.kd-planhero__crumb {
	margin: 0;
	font-size: var(--kd-fs-small);
	font-weight: 700;
}

.kd-planhero__crumb a {
	text-decoration: none;
	color: var(--kd-leaf-deep);
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
}

.kd-planhero__actions {
	margin-block: var(--kd-s3) var(--kd-s2);
}

.kd-planhero .kd-label {
	background: var(--kd-white);
}

.kd-planhero .kd-featurelist {
	margin-block-start: var(--kd-s2);
	gap: 0.7rem;
}

/* ============================================================
   Plan cards and dialogs.
   The archive shows compact cards in a grid; the full detail —
   description, what is included, the CTA — opens in a dialog so
   browsing a category does not mean leaving it.
   ============================================================ */

.kd-plancards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--kd-s3);
	margin-block-start: var(--kd-s4);
}

.kd-plancard {
	display: flex;
	flex-direction: column;
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: var(--kd-heavy) solid var(--kd-leaf);
	padding: var(--kd-s3);
	transition: border-color 140ms ease, transform 140ms ease;
}

.kd-plancard:hover {
	border-color: rgba(93, 166, 103, 0.55);
	border-block-start-color: var(--kd-leaf-deep);
}

.kd-plancard__tagline {
	margin: 0 0 0.45rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-plancard__title {
	margin: 0 0 0.6rem;
	font-size: var(--kd-fs-medium);
	line-height: 1.12;
}

.kd-plancard__title a {
	text-decoration: none;
}

.kd-plancard__excerpt {
	margin: 0 0 var(--kd-s2);
	font-size: var(--kd-fs-small);
	flex: 1;
}

.kd-plancard__count {
	margin: 0 0 var(--kd-s2);
	font-size: 0.8125rem;
	color: var(--kd-smoke);
	max-width: none;
}

.kd-plancard__open {
	margin: auto calc(var(--kd-s3) * -1) calc(var(--kd-s3) * -1);
}

.kd-plancard__open a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem var(--kd-s3);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	font-weight: 700;
	font-size: var(--kd-fs-small);
	text-decoration: none;
}

.kd-plancard__open a::after {
	content: "\2192";
	font-size: 1.1em;
}

.kd-plancard__open a:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
}

.kd-goal__clinical .kd-plancard {
	border-block-start-color: var(--kd-paprika);
	background: var(--kd-paper);
}

.kd-goal__count {
	margin: var(--kd-s1) 0 0;
	font-size: var(--kd-fs-small);
	font-weight: 700;
	color: var(--kd-leaf-deep);
}

/* ---------- Dialog ---------- */

.kd-modal {
	border: none;
	padding: 0;
	max-inline-size: min(46rem, calc(100vw - 2rem));
	inline-size: 100%;
	background: transparent;
	color: var(--kd-ink);
}

.kd-modal::backdrop {
	background: rgba(26, 36, 22, 0.6);
}

.kd-modal__inner {
	position: relative;
	background: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-ink);
	border-block-start: var(--kd-heavy) solid var(--kd-leaf);
	padding: var(--kd-s4);
	max-block-size: 85vh;
	overflow-y: auto;
}

.kd-modal__close {
	position: absolute;
	inset-block-start: var(--kd-s2);
	inset-inline-end: var(--kd-s2);
	inline-size: 2.5rem;
	block-size: 2.5rem;
	font-size: 1.6rem;
	line-height: 1;
	background: transparent;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.2);
	color: var(--kd-ink);
	cursor: pointer;
}

.kd-modal__close:hover {
	background: var(--kd-leaf);
	border-color: var(--kd-leaf);
}

.kd-modal__tagline {
	margin: 0 0 0.5rem;
	font-size: var(--kd-fs-small);
	font-weight: 700;
	color: var(--kd-leaf-deep);
}

.kd-modal__title {
	margin: 0 0 var(--kd-s2);
	font-size: var(--kd-fs-large);
	padding-inline-end: 3rem;
}

.kd-modal__excerpt {
	margin: 0 0 var(--kd-s3);
	font-size: var(--kd-fs-base);
}

.kd-modal__label {
	margin: 0 0 0.7rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-smoke);
	padding-block-end: 0.4rem;
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-modal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kd-s3);
	margin-block-start: var(--kd-s4);
	padding-block-start: var(--kd-s3);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-modal__perma {
	font-size: var(--kd-fs-small);
	font-weight: 600;
}

@media (max-width: 560px) {
	.kd-modal__inner {
		padding: var(--kd-s3);
	}

	.kd-modal__actions .kd-btn {
		inline-size: 100%;
		text-align: center;
	}
}

/* ---------- Archive head ---------- */

.kd-goal__head {
	align-items: start;
}

.kd-goal__head h1 {
	margin: 0;
}

/* ============================================================
   Plan cards — tightened.
   The excerpt was set to flex: 1, which pushed the footer link to
   the bottom of the tallest card in the row and left everything
   else with a hole in the middle. Cards now size to their content
   and only the footer is pinned.
   ============================================================ */

.kd-plancards {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--kd-s2);
	margin-block-start: var(--kd-s3);
}

.kd-plancard {
	padding: var(--kd-s3) var(--kd-s3) 0;
	border-block-start-width: var(--kd-rule);
	border-block-start-color: var(--kd-leaf);
}

.kd-plancard::before {
	content: "";
	display: block;
	block-size: var(--kd-hair);
	background: transparent;
}

.kd-plancard__tagline {
	margin-block-end: 0.35rem;
	line-height: 1.35;
}

.kd-plancard__title {
	margin-block: 0 0.5rem;
	font-size: var(--kd-fs-base);
	font-family: var(--kd-display);
	line-height: 1.15;
}

.kd-plancard__excerpt {
	flex: 0 1 auto;
	margin-block-end: var(--kd-s2);
	line-height: 1.5;
}

.kd-plancard__gp {
	margin-block-end: var(--kd-s2);
	font-size: 0.75rem;
	max-width: none;
}

.kd-plancard__open {
	margin-block-start: auto;
	margin-inline: calc(var(--kd-s3) * -1);
	margin-block-end: 0;
}

.kd-plancard__open a {
	padding-block: 0.75rem;
}

/* Clinical group: two cards should not stretch to full width each. */

.kd-goal__clinical .kd-plancards {
	grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
}

/* ---------- Archive head: less air ---------- */

.kd-goal__intro.kd-band {
	padding-block: var(--kd-s4);
}

.kd-goal__head h1 {
	font-size: var(--kd-fs-xlarge);
}

.kd-goal__lead p {
	margin-block-end: var(--kd-s2);
}

.kd-goal__group.kd-band {
	padding-block: var(--kd-s4);
}

.kd-goal__group .kd-section__head {
	margin-block-end: var(--kd-s3);
}

.kd-goal__group .kd-section__head h2 {
	font-size: var(--kd-fs-large);
}

.kd-goal__group .kd-section__head p {
	font-size: var(--kd-fs-base);
	margin-block-start: 0.5rem;
}

/* ============================================================
   Plan cards — sizing, motion, centring.
   Type was too small for the box it sat in, which is what made the
   cards read as empty. Bigger text, less padding, and the cards now
   respond to the pointer.
   ============================================================ */

.kd-plancard::before {
	content: none;
}

.kd-plancard {
	padding: var(--kd-s2) var(--kd-s3) 0;
	border-block-start-width: 5px;
	transform: translateY(0);
	transition:
		transform 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.kd-plancard:hover {
	transform: translateY(-4px);
	border-color: rgba(93, 166, 103, 0.65);
	border-block-start-color: var(--kd-leaf-deep);
	box-shadow: 0 10px 0 -6px rgba(26, 36, 22, 0.16);
}

.kd-plancard__tagline {
	font-size: 0.875rem;
	margin-block: var(--kd-s1) 0.6rem;
	color: var(--kd-leaf-deep);
}

.kd-plancard__title {
	font-size: var(--kd-fs-medium);
	line-height: 1.12;
	margin-block: 0 0.65rem;
	transition: color 160ms ease;
}

.kd-plancard:hover .kd-plancard__title {
	color: var(--kd-leaf-deep);
}

.kd-plancard__excerpt {
	font-size: var(--kd-fs-base);
	line-height: 1.45;
	margin-block-end: var(--kd-s3);
}

.kd-plancard__gp {
	font-size: 0.8125rem;
	line-height: 1.4;
}

.kd-plancard__open a {
	font-size: var(--kd-fs-base);
	padding-block: 0.85rem;
	transition: background-color 160ms ease, color 160ms ease;
}

.kd-plancard__open a::after {
	transition: transform 160ms ease;
}

.kd-plancard:hover .kd-plancard__open a::after {
	transform: translateX(4px);
}

/* Cards fade up on first paint, staggered. Subtle, and skipped
   entirely when reduced motion is requested. */

@media (prefers-reduced-motion: no-preference) {
	.kd-plancard {
		animation: kd-rise 420ms ease both;
	}

	.kd-plancard:nth-child(2) { animation-delay: 70ms; }
	.kd-plancard:nth-child(3) { animation-delay: 140ms; }
	.kd-plancard:nth-child(4) { animation-delay: 210ms; }
}

@keyframes kd-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Centred groups ----------
   Two clinical cards were pinned left against a full-width band. */

.kd-plancards {
	justify-content: center;
}

.kd-goal__clinical .kd-plancards {
	grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
	justify-content: center;
}

.kd-goal__clinical .kd-section__head {
	margin-inline: auto;
	text-align: center;
	max-width: 56ch;
}

.kd-goal__clinical .kd-section__head p {
	margin-inline: auto;
}

/* ---------- Modal: match the new type scale ---------- */

.kd-modal__inner {
	animation: kd-rise 240ms ease both;
}

@media (prefers-reduced-motion: reduce) {
	.kd-modal__inner {
		animation: none;
	}
}

/* ============================================================
   Plan cards — two columns.
   Four columns in a 1240px wrap left each card about 280px wide, so
   every line broke after four or five words and the card grew tall
   to hold them. Two wide columns let the text fill the box, which
   is what makes the type look right rather than small.
   ============================================================ */

.kd-plancards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kd-s3);
	max-width: 62rem;
	margin-inline: auto;
}

@media (max-width: 720px) {
	.kd-plancards {
		grid-template-columns: 1fr;
		gap: var(--kd-s2);
	}
}

.kd-goal__clinical .kd-plancards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 62rem;
}

@media (max-width: 720px) {
	.kd-goal__clinical .kd-plancards {
		grid-template-columns: 1fr;
	}
}

.kd-plancard {
	padding: var(--kd-s3) var(--kd-s3) 0;
}

.kd-plancard__tagline {
	font-size: 0.9375rem;
	margin-block: 0 0.75rem;
	line-height: 1.3;
	max-width: 40ch;
}

.kd-plancard__title {
	font-size: var(--kd-fs-large);
	line-height: 1.08;
	margin-block: 0 0.75rem;
	max-width: 22ch;
}

.kd-plancard__excerpt {
	font-size: var(--kd-fs-base);
	line-height: 1.5;
	margin-block-end: var(--kd-s3);
	max-width: 46ch;
}

.kd-plancard__gp {
	font-size: 0.875rem;
	margin-block-end: var(--kd-s3);
}

.kd-plancard__open a {
	font-size: var(--kd-fs-base);
	padding-block: 0.95rem;
}

/* Stagger only reaches two cards per row now. */
.kd-plancard:nth-child(3) { animation-delay: 70ms; }
.kd-plancard:nth-child(4) { animation-delay: 140ms; }

/* Section heads sit above centred cards, so centre them too. */

.kd-goal__group .kd-section__head {
	max-width: 62rem;
	margin-inline: auto;
}

/* ============================================================
   Plan cards — back to the four-across grid.
   The two-column version was not what was asked for. Keeping the
   original format and fixing the proportions inside it: excerpts are
   trimmed in the template so one long description stops setting the
   row height, and the type is sized up to fill the card.
   ============================================================ */

.kd-plancards,
.kd-goal__clinical .kd-plancards {
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: var(--kd-s2);
	max-width: none;
	margin-inline: 0;
	justify-content: stretch;
}

.kd-goal__clinical .kd-plancards {
	max-width: 52rem;
	margin-inline: auto;
}

@media (max-width: 640px) {
	.kd-plancards,
	.kd-goal__clinical .kd-plancards {
		grid-template-columns: 1fr;
	}
}

.kd-plancard {
	padding: var(--kd-s2) var(--kd-s2) 0;
}

.kd-plancard__tagline {
	font-size: 0.875rem;
	line-height: 1.3;
	margin-block: 0 0.6rem;
	max-width: none;
}

.kd-plancard__title {
	font-size: 1.375rem;
	line-height: 1.1;
	margin-block: 0 0.6rem;
	max-width: none;
}

.kd-plancard__excerpt {
	font-size: 1.0625rem;
	line-height: 1.45;
	margin-block-end: var(--kd-s2);
	max-width: none;
}

.kd-plancard__gp {
	font-size: 0.8125rem;
	margin-block-end: var(--kd-s2);
}

.kd-plancard__open {
	margin-inline: calc(var(--kd-s2) * -1);
}

.kd-plancard__open a {
	font-size: 1rem;
	padding: 0.8rem var(--kd-s2);
}

.kd-goal__group .kd-section__head {
	max-width: 60ch;
	margin-inline: 0;
}

.kd-goal__clinical .kd-section__head {
	margin-inline: auto;
}

.kd-plancard:nth-child(2) { animation-delay: 70ms; }
.kd-plancard:nth-child(3) { animation-delay: 140ms; }
.kd-plancard:nth-child(4) { animation-delay: 210ms; }

/* ============================================================
   Card spacing — the real cause of the empty boxes.
   Paragraphs inside the cards only had margin-block-end set, so the
   browser's default 1em top margin was still stacking under every
   title and above the footer. That is where the gaps came from.
   ============================================================ */

.kd-plancard p {
	margin-block-start: 0;
}

.kd-plancard__title {
	margin-block-start: 0;
}

.kd-plancard__excerpt {
	margin-block: 0 var(--kd-s2);
}

.kd-plancard__gp {
	margin-block: 0 var(--kd-s2);
	padding-block: 0.15rem;
}

.kd-modal__inner p {
	margin-block-start: 0;
}

/* ---------- Hormonal group ----------
   Two cards, so they get a narrower measure and sit closer together
   rather than stretching to match the four-card rows above. */

.kd-goal__clinical .kd-plancards {
	max-width: 46rem;
	gap: var(--kd-s2);
}

.kd-goal__clinical .kd-plancard {
	background: var(--kd-white);
}

.kd-goal__clinical .kd-plancard__tagline {
	color: var(--kd-paprika);
}

.kd-goal__clinical.kd-band {
	padding-block: var(--kd-s4);
}

.kd-goal__clinical .kd-section__head {
	margin-block-end: var(--kd-s3);
}

.kd-goal__clinical .kd-section__head h2 {
	font-size: var(--kd-fs-large);
	margin-block-end: 0.5rem;
}

.kd-goal__clinical .kd-section__head p {
	font-size: 1.0625rem;
	max-width: 52ch;
}

/* ============================================================
   Hormonal plans — row layout.
   Two vertical cards side by side always left a hole: the box height
   came from padding and a pinned footer, not from the content. A row
   is sized by its own text, so there is nothing left to fill.
   ============================================================ */

.kd-planrows {
	display: grid;
	gap: 0;
	max-width: 54rem;
	margin-inline: auto;
	border-block-start: var(--kd-rule) solid rgba(26, 36, 22, 0.18);
}

.kd-planrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--kd-s3);
	align-items: center;
	padding: var(--kd-s3) var(--kd-s3) var(--kd-s3) var(--kd-s2);
	background: var(--kd-white);
	border-block-end: var(--kd-rule) solid rgba(26, 36, 22, 0.18);
	border-inline-start: 5px solid var(--kd-paprika);
	transition: background-color 160ms ease;
}

.kd-planrow:hover {
	background: var(--kd-paper);
}

.kd-planrow__main > * {
	margin-block-start: 0;
}

.kd-planrow__title {
	font-size: 1.5rem;
	line-height: 1.1;
	margin-block: 0 0.4rem;
}

.kd-planrow__title a {
	text-decoration: none;
	transition: color 160ms ease;
}

.kd-planrow:hover .kd-planrow__title a {
	color: var(--kd-paprika);
}

.kd-planrow__excerpt {
	font-size: 1.0625rem;
	line-height: 1.45;
	margin-block: 0;
	max-width: 56ch;
}

.kd-planrow__gp {
	margin-block: 0.6rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kd-paprika);
	max-width: none;
}

.kd-planrow__action .kd-btn {
	white-space: nowrap;
	font-size: 1rem;
	padding: 0.75rem 1.4rem;
	border-color: var(--kd-paprika);
	color: var(--kd-paprika);
}

.kd-planrow__action .kd-btn:hover {
	background: var(--kd-paprika);
	color: var(--kd-paper);
	border-color: var(--kd-paprika);
}

@media (max-width: 620px) {
	.kd-planrow {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s2);
	}

	.kd-planrow__action .kd-btn {
		inline-size: 100%;
		text-align: center;
	}
}

/* The group heading no longer needs centring — the rows are a list,
   so the head reads better aligned with them. */

.kd-goal__clinical .kd-section__head {
	max-width: 54rem;
	margin-inline: auto;
	text-align: start;
}

.kd-goal__clinical .kd-section__head p {
	margin-inline: 0;
	max-width: 60ch;
}

/* ============================================================
   Card footer alignment.
   The "Shiko detajet" bar sat at a different height in each card
   because the equal-height chain was broken: the grid must stretch
   the item, the item must fill the row, and the footer must be the
   thing that takes up the slack. All three are set explicitly here
   rather than relying on earlier rules.
   ============================================================ */

.kd-plancards {
	align-items: stretch;
}

.kd-plancard {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	min-block-size: 0;
}

.kd-plancard__excerpt {
	flex: 1 1 auto;
}

.kd-plancard__open {
	margin-block-start: auto;
	flex: 0 0 auto;
}

/* The flag sits between the text and the footer, so it must not
   absorb the free space either. */
.kd-plancard__gp {
	flex: 0 0 auto;
}

/* ============================================================
   Card badge.
   Sits on the top edge so it reads as a marker on the card rather
   than another line of copy competing with the tagline.
   ============================================================ */

.kd-plancard {
	position: relative;
	overflow: visible;
}

.kd-plancard--badged {
	border-block-start-color: var(--kd-leaf-deep);
}

.kd-plancard__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--kd-s2);
	transform: translateY(-50%);
	margin: 0;
	padding: 0.3rem 0.7rem;
	background: var(--kd-leaf-deep);
	color: var(--kd-paper);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	max-width: none;
	white-space: nowrap;
}

.kd-plancard--badged .kd-plancard__tagline {
	padding-inline-end: 0;
	margin-block-start: 0.35rem;
}

@media (max-width: 640px) {
	.kd-plancard__badge {
		inset-inline-end: var(--kd-s2);
		font-size: 0.7rem;
	}
}

/* ============================================================
   Header — light.
   ============================================================ */

.kd-header--light {
	background: var(--kd-paper);
	color: var(--kd-ink);
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-header--light .kd-header__title,
.kd-header--light .kd-nav a {
	color: var(--kd-ink);
}

.kd-header--light .kd-nav a:hover {
	color: var(--kd-leaf-deep);
}

.kd-header--light .kd-nav a::after {
	background: var(--kd-leaf);
}

.kd-header--light .kd-btn--sm {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
}

.kd-header--light .kd-btn--sm:hover {
	background: var(--kd-ink);
	color: var(--kd-paper);
	border-color: var(--kd-ink);
}

/* Toggle and mobile panel need dark strokes on a light bar. */

.kd-header--light .kd-header__toggle {
	border-color: rgba(26, 36, 22, 0.3);
}

.kd-header--light .kd-header__toggle span[aria-hidden],
.kd-header--light .kd-header__toggle span[aria-hidden]::before,
.kd-header--light .kd-header__toggle span[aria-hidden]::after {
	background: var(--kd-ink);
}

.kd-header--light .kd-header__toggle[aria-expanded="true"] span[aria-hidden] {
	background: transparent;
}

@media (max-width: 820px) {
	.kd-header--light .kd-header__right {
		border-block-start-color: rgba(26, 36, 22, 0.16);
	}

	.kd-header--light .kd-nav__list li {
		border-block-end-color: rgba(26, 36, 22, 0.12);
	}
}

/* The hero sits directly under the bar and shares its background, so
   a rule is the only thing separating them. */

.kd-header--light + main .kd-band:first-child {
	border-block-start: none;
}

/* ============================================================
   Header — translucent.
   The bar is sticky, so content scrolls beneath it. A blurred,
   semi-opaque background lets that show through without the text
   underneath making the nav unreadable.
   ============================================================ */

.kd-header--light {
	background: rgba(253, 255, 245, 0.72);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.14);
	transition: background-color 200ms ease, border-color 200ms ease;
}

/* Without backdrop-filter the bar would be genuinely see-through and
   the nav would collide with whatever scrolls past. Fall back to a
   solid bar in that case. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kd-header--light {
		background: var(--kd-paper);
	}
}

/* Once the page has scrolled, firm it up slightly so the nav stays
   legible over dense sections like the green proof band. */

.kd-header--light.is-stuck {
	background: rgba(253, 255, 245, 0.88);
	border-block-end-color: rgba(26, 36, 22, 0.22);
}

@media (prefers-reduced-transparency: reduce) {
	.kd-header--light,
	.kd-header--light.is-stuck {
		background: var(--kd-paper);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ============================================================
   Recipe strips.
   Recipes are fewer and have more to say than diet plans, so they
   get wide alternating rows rather than a card grid. The oversized
   index number is the only ornament.
   ============================================================ */

.kd-strips {
	display: grid;
	gap: 0;
	max-width: 64rem;
	margin-inline: auto;
}

.kd-strip {
	display: grid;
	grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--kd-s3) var(--kd-s4);
	align-items: start;
	padding-block: var(--kd-s4);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
}

.kd-strip:last-child {
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
}

/* Alternate the sides so the page zig-zags rather than marching. */
.kd-strip:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

.kd-strip:nth-child(even) .kd-strip__index {
	order: 3;
}

.kd-strip:nth-child(even) .kd-strip__aside {
	order: 1;
}

.kd-strip__index {
	font-family: var(--kd-display);
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px var(--kd-leaf);
	user-select: none;
}

.kd-strip__body > * {
	margin-block-start: 0;
}

.kd-strip__title {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1.08;
	margin-block-end: 0.75rem;
	max-width: 20ch;
}

.kd-strip__title a {
	text-decoration: none;
	transition: color 160ms ease;
}

.kd-strip:hover .kd-strip__title a {
	color: var(--kd-leaf-deep);
}

.kd-strip__lead {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-block-end: 0.9rem;
	max-width: 52ch;
}

.kd-strip__more {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--kd-smoke);
	margin-block-end: var(--kd-s2);
	max-width: 52ch;
}

.kd-strip__gp {
	margin-block: 0 var(--kd-s2);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kd-paprika);
	border-inline-start: var(--kd-rule) solid var(--kd-paprika);
	padding-inline-start: 0.6rem;
	max-width: none;
}

.kd-strip__action {
	margin-block: 0;
}

.kd-strip__action .kd-btn {
	font-size: 1rem;
	padding: 0.8rem 1.6rem;
}

.kd-strip__aside {
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 4px solid var(--kd-leaf);
	padding: var(--kd-s3);
}

.kd-strip__label {
	margin-block: 0 0.7rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-smoke);
	padding-block-end: 0.4rem;
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

@media (max-width: 900px) {
	.kd-strip,
	.kd-strip:nth-child(even) {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--kd-s2) var(--kd-s3);
		padding-block: var(--kd-s3);
	}

	.kd-strip:nth-child(even) .kd-strip__index { order: 0; }
	.kd-strip:nth-child(even) .kd-strip__aside { order: 0; }

	.kd-strip__aside {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.kd-strip,
	.kd-strip:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.kd-strip__action .kd-btn {
		display: block;
		text-align: center;
	}
}

/* ============================================================
   Recipes — its own page, not a variation of the plan archives.
   An index rather than a grid: full-width rows, the whole band
   clickable, filling green on hover.
   ============================================================ */

.kd-recipehero {
	background: var(--kd-ink);
	color: var(--kd-paper);
	padding-block: var(--kd-s6) var(--kd-s5);
}

.kd-recipehero__kicker {
	margin: 0 0 var(--kd-s2);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--kd-leaf);
	max-width: none;
}

.kd-recipehero__title {
	margin: 0 0 var(--kd-s3);
	font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
	line-height: 0.95;
	max-width: 16ch;
}

.kd-recipehero__lead p {
	margin: 0;
	font-size: var(--kd-fs-medium);
	max-width: 48ch;
	opacity: 0.86;
}

/* ---------- Index ---------- */

.kd-recipes {
	padding-block: 0 var(--kd-s5);
	background: var(--kd-paper);
}

.kd-recipes__list {
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-recipe {
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.2);
}

.kd-recipe__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--kd-s3) var(--kd-s4);
	align-items: center;
	padding-block: var(--kd-s4);
	padding-inline: var(--kd-s2);
	margin-inline: calc(var(--kd-s2) * -1);
	text-decoration: none;
	color: inherit;
	transition: background-color 180ms ease, color 180ms ease, padding-inline 180ms ease;
}

.kd-recipe__link:hover,
.kd-recipe__link:focus-visible {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	padding-inline: var(--kd-s3);
}

.kd-recipe__num {
	font-family: var(--kd-display);
	font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px rgba(26, 36, 22, 0.45);
	transition: -webkit-text-stroke-color 180ms ease, color 180ms ease;
}

.kd-recipe__link:hover .kd-recipe__num {
	color: var(--kd-ink);
	-webkit-text-stroke-color: transparent;
}

.kd-recipe__text {
	display: block;
}

.kd-recipe__title {
	display: block;
	font-family: var(--kd-display);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	line-height: 1.08;
	margin-block-end: 0.5rem;
}

.kd-recipe__lead {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 60ch;
}

.kd-recipe__more {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	margin-block-start: 0.5rem;
	max-width: 60ch;
	opacity: 0.72;
}

.kd-recipe__gp {
	display: inline-block;
	margin-block-start: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kd-paprika);
	border-inline-start: var(--kd-rule) solid var(--kd-paprika);
	padding-inline-start: 0.6rem;
}

.kd-recipe__link:hover .kd-recipe__gp {
	color: var(--kd-ink);
	border-inline-start-color: var(--kd-ink);
}

.kd-recipe__marker svg {
	inline-size: 2rem;
	block-size: 2rem;
	transition: transform 180ms ease;
}

.kd-recipe__link:hover .kd-recipe__marker svg {
	transform: translateX(6px);
}

@media (max-width: 700px) {
	.kd-recipe__link {
		grid-template-columns: auto minmax(0, 1fr);
		padding-block: var(--kd-s3);
		gap: var(--kd-s2);
	}

	.kd-recipe__marker {
		display: none;
	}
}

/* ---------- Newsletter ---------- */

.kd-news {
	padding-block: var(--kd-s5);
}

.kd-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: center;
}

@media (max-width: 820px) {
	.kd-news__grid {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
	}
}

.kd-news__copy h2 {
	margin: 0 0 0.75rem;
	font-size: var(--kd-fs-large);
	max-width: 18ch;
}

.kd-news__copy p {
	margin: 0;
	max-width: 44ch;
	opacity: 0.88;
}

.kd-news__hp {
	position: absolute;
	inset-inline-start: -9999px;
}

.kd-news__field label {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	margin-block-end: 0.4rem;
}

.kd-news__row {
	display: flex;
	gap: 0;
}

.kd-news__row input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.95rem 1rem;
	font: inherit;
	color: var(--kd-ink);
	background: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-paper);
	border-radius: 0;
}

.kd-news__row .kd-btn {
	flex: 0 0 auto;
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
	padding-inline: 1.5rem;
}

.kd-news__row .kd-btn:hover {
	background: var(--kd-paper);
	border-color: var(--kd-paper);
}

.kd-news__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	margin-block-start: var(--kd-s2);
	font-size: 0.875rem;
	line-height: 1.45;
}

.kd-news__consent input {
	margin-block-start: 0.2rem;
	accent-color: var(--kd-leaf);
}

.kd-news__consent a {
	color: var(--kd-leaf);
}

.kd-news__done {
	margin: 0;
	font-family: var(--kd-display);
	font-size: var(--kd-fs-medium);
	color: var(--kd-leaf);
}

.kd-news__error {
	margin-block-start: var(--kd-s2);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--kd-yolk);
}

/* ============================================================
   Recipe hero — overflow fix.
   The headline was clamping up to 5.5rem, which pushed long Albanian
   words past the viewport on narrow screens. Capped, and allowed to
   break rather than overflow.
   ============================================================ */

.kd-recipehero__title {
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
	max-width: 18ch;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

.kd-recipehero {
	padding-block: var(--kd-s5) var(--kd-s4);
	overflow-x: clip;
}

/* With the kicker gone the headline is the first thing in the band,
   so it no longer needs a lead-in gap. */
.kd-recipehero__title {
	margin-block-start: 0;
}

/* ============================================================
   Recipe index — hover band overflow.
   The row grew its horizontal padding on hover while also carrying a
   negative margin, so the green band pushed past the wrapper on both
   sides. Padding and margin are now fixed and equal; only the colour
   changes.
   ============================================================ */

.kd-recipe__link,
.kd-recipe__link:hover,
.kd-recipe__link:focus-visible {
	padding-inline: var(--kd-s3);
	margin-inline: calc(var(--kd-s3) * -1);
}

.kd-recipe__link {
	transition: background-color 180ms ease, color 180ms ease;
}

.kd-recipes .kd-wrap {
	overflow-x: clip;
}

.kd-modal__body {
	margin-block: 0 var(--kd-s3);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--kd-smoke);
}

/* ============================================================
   Newsletter — mobile.
   The field and button sat in a fixed row, so on a narrow screen the
   input shrank to nothing and the button crowded it.
   ============================================================ */

@media (max-width: 620px) {
	.kd-news {
		padding-block: var(--kd-s4);
	}

	.kd-news__grid {
		gap: var(--kd-s3);
	}

	.kd-news__copy h2 {
		max-width: none;
		font-size: var(--kd-fs-medium);
	}

	.kd-news__copy p {
		max-width: none;
		font-size: 1rem;
	}

	.kd-news__row {
		flex-direction: column;
		gap: var(--kd-s2);
	}

	.kd-news__row input {
		inline-size: 100%;
		padding-block: 1rem;
		font-size: 1rem;
	}

	.kd-news__row .kd-btn {
		inline-size: 100%;
		text-align: center;
		padding-block: 1rem;
	}

	.kd-news__consent {
		font-size: 0.8125rem;
		align-items: start;
	}

	.kd-news__consent input {
		inline-size: 1.15rem;
		block-size: 1.15rem;
	}
}

/* The checkbox was rendering as a bare square against the dark band —
   give it a visible frame at every size. */

.kd-news__consent input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	accent-color: var(--kd-leaf);
	border: var(--kd-hair) solid var(--kd-paper);
}

/* ============================================================
   Fitness — a split, not a list.
   Two options is a choice, so the page presents them opposed: two
   full panels, one light one dark, contents visible so they can be
   compared without opening anything.
   ============================================================ */

.kd-fithero {
	background: var(--kd-sage);
	padding-block: var(--kd-s5) var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-fithero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: end;
}

.kd-fithero__title {
	margin: 0;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	line-height: 0.98;
	max-width: 12ch;
	text-wrap: balance;
}

.kd-fithero__lead p {
	margin: 0;
	font-size: var(--kd-fs-medium);
	max-width: 46ch;
}

@media (max-width: 820px) {
	.kd-fithero__inner {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s3);
	}
}

/* ---------- The split ---------- */

.kd-fitsplit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.kd-fitsplit {
		grid-template-columns: 1fr;
	}
}

.kd-fitpanel {
	display: flex;
	transition: background-color 200ms ease;
}

.kd-fitpanel--a {
	background: var(--kd-paper);
	color: var(--kd-ink);
}

.kd-fitpanel--b {
	background: var(--kd-ink);
	color: var(--kd-paper);
}

.kd-fitpanel--a:hover {
	background: var(--kd-sage);
}

.kd-fitpanel--b:hover {
	background: var(--kd-leaf-deep);
}

.kd-fitpanel__inner {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	max-inline-size: 34rem;
	margin-inline: auto;
	padding: var(--kd-s5) var(--kd-s3);
}

.kd-fitpanel--a .kd-fitpanel__inner {
	margin-inline-start: auto;
	margin-inline-end: 0;
	padding-inline-end: var(--kd-s4);
}

.kd-fitpanel--b .kd-fitpanel__inner {
	margin-inline-start: 0;
	margin-inline-end: auto;
	padding-inline-start: var(--kd-s4);
}

@media (max-width: 860px) {
	.kd-fitpanel__inner,
	.kd-fitpanel--a .kd-fitpanel__inner,
	.kd-fitpanel--b .kd-fitpanel__inner {
		margin-inline: auto;
		padding: var(--kd-s4) var(--kd-s3);
	}
}

.kd-fitpanel__tagline {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-fitpanel--b .kd-fitpanel__tagline {
	color: var(--kd-leaf);
}

.kd-fitpanel__title {
	margin: 0 0 0.9rem;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.05;
	max-width: 14ch;
}

.kd-fitpanel__lead {
	margin: 0 0 var(--kd-s3);
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 44ch;
}

.kd-fitpanel--b .kd-fitpanel__lead {
	opacity: 0.88;
}

.kd-fitpanel__list {
	list-style: none;
	margin: 0 0 var(--kd-s4);
	padding: 0;
	display: grid;
	gap: 0.85rem;
	flex: 1;
}

.kd-fitpanel__list li {
	position: relative;
	padding-inline-start: 1.7rem;
	font-size: 1rem;
	line-height: 1.45;
	max-width: 42ch;
}

.kd-fitpanel__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	inline-size: 0.7rem;
	block-size: 0.38rem;
	border-inline-start: 2px solid var(--kd-leaf);
	border-block-end: 2px solid var(--kd-leaf);
	transform: rotate(-45deg);
}

.kd-fitpanel__action {
	margin: 0;
}

.kd-fitpanel--b .kd-btn {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
}

.kd-fitpanel--b .kd-btn:hover {
	background: var(--kd-paper);
	border-color: var(--kd-paper);
}

/* ---------- Closing note ---------- */

.kd-fitfoot {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-fitfoot__inner {
	max-width: 46rem;
	text-align: center;
}

.kd-fitfoot__q {
	margin: 0 0 0.5rem;
	font-family: var(--kd-display);
	font-size: var(--kd-fs-large);
	line-height: 1.1;
	max-width: none;
}

.kd-fitfoot__a {
	margin: 0 auto var(--kd-s3);
	max-width: 48ch;
}

/* ============================================================
   Fitness — switch, replacing the split.
   Side by side, the two panels never matched in height and the eye
   compared layout rather than content. One pane at a time, swapped
   by a segmented control.
   ============================================================ */

.kd-fithero {
	background: var(--kd-sage);
	padding-block: var(--kd-s5) var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-fithero__title {
	margin: 0 0 var(--kd-s2);
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	line-height: 1;
	max-width: 16ch;
	text-wrap: balance;
}

.kd-fithero__lead p {
	margin: 0;
	font-size: var(--kd-fs-medium);
	max-width: 54ch;
}

.kd-fitpick {
	background: var(--kd-paper);
	padding-block: var(--kd-s4) var(--kd-s5);
}

/* ---------- Segmented control ---------- */

.kd-fitpick__switch {
	display: inline-flex;
	border: var(--kd-rule) solid var(--kd-ink);
	margin-block-end: var(--kd-s4);
}

.kd-fitpick__tab {
	appearance: none;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	padding: 0.85rem 1.6rem;
	background: transparent;
	color: var(--kd-ink);
	border: 0;
	transition: background-color 160ms ease, color 160ms ease;
}

.kd-fitpick__tab + .kd-fitpick__tab {
	border-inline-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-fitpick__tab[aria-selected="true"] {
	background: var(--kd-ink);
	color: var(--kd-paper);
}

.kd-fitpick__tab:hover[aria-selected="false"] {
	background: var(--kd-sage);
}

/* Without the script the control is meaningless, so hide it and show
   every pane. */
.kd-fitpick:not(.is-enhanced) .kd-fitpick__switch {
	display: none;
}

.kd-fitpick:not(.is-enhanced) .kd-fitpane + .kd-fitpane {
	margin-block-start: var(--kd-s4);
	padding-block-start: var(--kd-s4);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.2);
}

/* ---------- Panes ---------- */

.kd-fitpick.is-enhanced .kd-fitpane {
	display: none;
}

.kd-fitpick.is-enhanced .kd-fitpane[data-active="true"] {
	display: grid;
}

.kd-fitpane {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--kd-s4);
	align-items: start;
}

@media (prefers-reduced-motion: no-preference) {
	.kd-fitpick.is-enhanced .kd-fitpane[data-active="true"] {
		animation: kd-rise 260ms ease both;
	}
}

@media (max-width: 860px) {
	.kd-fitpane {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
	}
}

.kd-fitpane__head > * {
	margin-block-start: 0;
}

.kd-fitpane__tagline {
	margin-block-end: 0.6rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-fitpane__title {
	margin-block-end: 0.9rem;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.05;
	max-width: 14ch;
}

.kd-fitpane__lead {
	margin-block-end: var(--kd-s3);
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 42ch;
}

.kd-fitpane__action {
	margin-block-end: 0;
}

/* The feature list is numbered here — it reads as a spec sheet for
   the programme rather than a sales list. */

.kd-fitpane__list {
	list-style: none;
	counter-reset: kd-fit;
	margin: 0;
	padding: 0;
	display: grid;
}

.kd-fitpane__list li {
	counter-increment: kd-fit;
	position: relative;
	padding: var(--kd-s2) 0 var(--kd-s2) 3rem;
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
	font-size: 1.0625rem;
	line-height: 1.45;
	max-width: 48ch;
}

.kd-fitpane__list li:last-child {
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
}

.kd-fitpane__list li::before {
	content: counter( kd-fit, decimal-leading-zero );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--kd-s2);
	font-family: var(--kd-display);
	font-size: 1.05rem;
	color: var(--kd-leaf-deep);
}

.kd-fitpick__note {
	margin-block-start: var(--kd-s4);
	padding-block-start: var(--kd-s3);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
	font-size: 1rem;
	max-width: 60ch;
}

@media (max-width: 520px) {
	.kd-fitpick__switch {
		inline-size: 100%;
	}

	.kd-fitpick__tab {
		flex: 1;
		padding-inline: 0.75rem;
	}
}

/* ============================================================
   Rreth nesh.
   ============================================================ */

.kd-abouthero {
	background: var(--kd-paper);
	padding-block: var(--kd-s5) var(--kd-s4);
}

.kd-abouthero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--kd-s4);
	align-items: end;
}

@media (max-width: 860px) {
	.kd-abouthero__grid {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s3);
	}
}

.kd-abouthero__title {
	margin: 0 0 0.5rem;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	line-height: 0.98;
}

.kd-abouthero__role {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-abouthero__lead p {
	margin-block: 0 var(--kd-s2);
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 52ch;
}

.kd-abouthero__lead p:last-child {
	margin-block-end: 0;
}

/* ---------- Facts ---------- */

.kd-aboutfacts {
	padding-block: var(--kd-s4);
}

.kd-aboutfacts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kd-s3);
}

@media (max-width: 640px) {
	.kd-aboutfacts__grid {
		grid-template-columns: 1fr;
		gap: var(--kd-s2);
	}

	.kd-aboutfact {
		display: grid;
		grid-template-columns: minmax(4.5ch, auto) 1fr;
		align-items: center;
		gap: var(--kd-s3);
		padding-block: var(--kd-s2);
	}

	.kd-aboutfact + .kd-aboutfact {
		border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.2);
	}
}

.kd-aboutfact__num {
	display: block;
	font-family: var(--kd-display);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kd-aboutfact__label {
	display: block;
	margin-block-start: var(--kd-s1);
	padding-block-start: var(--kd-s1);
	border-block-start: var(--kd-rule) solid var(--kd-leaf);
	font-size: 0.9375rem;
	max-width: 22ch;
	opacity: 0.9;
}

@media (max-width: 640px) {
	.kd-aboutfact__label {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: none;
		border-inline-start: var(--kd-rule) solid var(--kd-leaf);
		padding-inline-start: var(--kd-s2);
		max-width: none;
	}
}

/* ---------- Certifications ---------- */

.kd-aboutcerts {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-certs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--kd-s3);
	max-width: 58rem;
}

.kd-cert {
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 5px solid var(--kd-leaf);
	padding: var(--kd-s3);
}

.kd-cert__seal {
	inline-size: 48px;
	block-size: 48px;
	color: var(--kd-leaf);
	margin-block-end: var(--kd-s2);
}

.kd-cert h3 {
	margin: 0 0 0.3rem;
	font-size: 1.375rem;
	line-height: 1.15;
}

.kd-cert__place {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-cert p:last-child {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.kd-aboutnote {
	margin-block-start: var(--kd-s3);
	padding-inline-start: var(--kd-s2);
	border-inline-start: var(--kd-rule) solid var(--kd-yolk);
	font-size: 0.9375rem;
	color: var(--kd-smoke);
	max-width: 62ch;
}

/* ---------- Why ---------- */

.kd-aboutwhy {
	padding-block: var(--kd-s5);
}

.kd-why {
	list-style: none;
	counter-reset: kd-why;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--kd-s3);
}

.kd-why li {
	counter-increment: kd-why;
	max-width: none;
	border-block-start: var(--kd-rule) solid var(--kd-ink);
	padding-block-start: var(--kd-s2);
}

.kd-why li::before {
	content: counter( kd-why ) ".";
	display: block;
	font-family: var(--kd-display);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--kd-leaf-deep);
	margin-block-end: 0.5rem;
}

.kd-why h3 {
	margin: 0 0 0.4rem;
	font-size: 1.125rem;
	line-height: 1.2;
}

.kd-why p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ============================================================
   About — shared components and motion.
   The facts band now uses the homepage proof component outright, so
   it inherits the layout, the responsive behaviour and the count-up.
   Everything below adds the hover and entrance behaviour the page
   was missing.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	.kd-cert,
	.kd-why li {
		animation: kd-rise 420ms ease both;
	}

	.kd-cert:nth-child(2) { animation-delay: 90ms; }

	.kd-why li:nth-child(2) { animation-delay: 60ms; }
	.kd-why li:nth-child(3) { animation-delay: 120ms; }
	.kd-why li:nth-child(4) { animation-delay: 180ms; }
	.kd-why li:nth-child(5) { animation-delay: 240ms; }
}

/* ---------- Certification cards ---------- */

.kd-cert {
	transition:
		transform 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease;
}

.kd-cert:hover {
	transform: translateY(-4px);
	border-color: rgba(93, 166, 103, 0.6);
	border-block-start-color: var(--kd-leaf-deep);
	box-shadow: 0 10px 0 -6px rgba(26, 36, 22, 0.16);
}

.kd-cert__seal {
	transition: transform 320ms ease, color 180ms ease;
}

.kd-cert:hover .kd-cert__seal {
	transform: scale(1.08) rotate(-4deg);
	color: var(--kd-leaf-deep);
}

/* ---------- Reasons ---------- */

.kd-why li {
	padding-inline: var(--kd-s2);
	margin-inline: calc(var(--kd-s2) * -1);
	transition: background-color 180ms ease, border-color 180ms ease;
}

.kd-why li:hover {
	background: var(--kd-paper);
	border-block-start-color: var(--kd-leaf);
}

.kd-why li::before {
	transition: color 180ms ease, transform 180ms ease;
}

.kd-why li:hover::before {
	color: var(--kd-leaf);
	transform: translateX(3px);
}

.kd-why h3 {
	transition: color 180ms ease;
}

.kd-why li:hover h3 {
	color: var(--kd-leaf-deep);
}

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

@media (prefers-reduced-motion: no-preference) {
	.kd-abouthero__title,
	.kd-abouthero__role,
	.kd-abouthero__lead {
		animation: kd-rise 480ms ease both;
	}

	.kd-abouthero__role { animation-delay: 80ms; }
	.kd-abouthero__lead { animation-delay: 140ms; }
}

/* The role line gets a rule that draws itself in, so the name has a
   small piece of movement rather than sitting still. */

.kd-abouthero__role {
	display: inline-block;
	padding-block-end: 0.4rem;
	position: relative;
}

.kd-abouthero__role::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: var(--kd-rule);
	background: var(--kd-leaf);
	inline-size: 100%;
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.kd-abouthero__role::after {
		animation: kd-draw 620ms ease 260ms both;
	}
}

@keyframes kd-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------- Note ---------- */

.kd-aboutnote {
	transition: border-color 180ms ease;
}

.kd-aboutnote:hover {
	border-inline-start-color: var(--kd-leaf);
}

/* ============================================================
   Credentials — two certifications.
   Was a single badge beside a paragraph. Now the name and caveat sit
   on the left, with both certifications listed beside them.
   ============================================================ */

.kd-cred__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--kd-s4);
	align-items: start;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-inline-start: var(--kd-heavy) solid var(--kd-leaf);
	background: var(--kd-white);
	padding: var(--kd-s4);
	max-width: 64rem;
	margin-inline: auto;
}

@media (max-width: 820px) {
	.kd-cred__inner {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
		padding: var(--kd-s3);
	}
}

.kd-cred__who h2 {
	margin: 0 0 0.6rem;
	font-size: var(--kd-fs-large);
	line-height: 1.05;
}

.kd-cred__who p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--kd-smoke);
	max-width: 42ch;
}

.kd-cred__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.kd-cred__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--kd-s2);
	align-items: start;
	padding-block: var(--kd-s2);
	max-width: none;
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	transition: background-color 180ms ease;
}

.kd-cred__item:first-child {
	border-block-start: none;
	padding-block-start: 0;
}

.kd-cred__item:hover {
	background: var(--kd-paper);
}

.kd-cred__seal {
	inline-size: 40px;
	block-size: 40px;
	color: var(--kd-leaf);
	transition: transform 320ms ease, color 180ms ease;
}

.kd-cred__item:hover .kd-cred__seal {
	transform: scale(1.08) rotate(-4deg);
	color: var(--kd-leaf-deep);
}

.kd-cred__title {
	margin: 0 0 0.15rem;
	font-family: var(--kd-display);
	font-size: 1.25rem;
	line-height: 1.15;
	max-width: none;
}

.kd-cred__place {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-cred__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	max-width: none;
}

/* ============================================================
   Header — restyled.
   The bar was a row of plain links. It now has a defined nav group,
   a marker on the current page, and a CTA that reads as the primary
   action rather than another link.
   ============================================================ */

.kd-header--light {
	padding-block: 0;
}

.kd-header__inner {
	min-block-size: 4.5rem;
	gap: var(--kd-s4);
}

.kd-header__title,
.kd-header__brand a {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color 160ms ease;
}

.kd-header__brand a:hover {
	color: var(--kd-leaf-deep);
}

/* Links sit inside a bordered group, which separates browsing from
   the CTA without needing a second colour. */

.kd-header--light .kd-nav__list {
	gap: 0;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	background: rgba(255, 255, 255, 0.5);
}

.kd-header--light .kd-nav__list li + li {
	border-inline-start: var(--kd-hair) solid rgba(26, 36, 22, 0.12);
}

.kd-header--light .kd-nav a {
	display: block;
	padding: 0.75rem 1.1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 160ms ease, color 160ms ease;
}

.kd-header--light .kd-nav a::after {
	inset-block-end: 0;
	block-size: 3px;
}

.kd-header--light .kd-nav a:hover {
	background: var(--kd-sage);
	color: var(--kd-ink);
}

.kd-header--light .kd-nav .current-menu-item > a {
	background: var(--kd-ink);
	color: var(--kd-paper);
}

.kd-header--light .kd-nav .current-menu-item > a::after {
	inline-size: 0;
}

.kd-header--light .kd-btn--sm {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.kd-header--light .kd-btn--sm::after {
	content: "\2192";
	transition: transform 160ms ease;
}

.kd-header--light .kd-btn--sm:hover::after {
	transform: translateX(3px);
}

@media (max-width: 820px) {
	.kd-header--light .kd-nav__list {
		border: 0;
		background: transparent;
	}

	.kd-header--light .kd-nav__list li + li {
		border-inline-start: 0;
	}

	.kd-header--light .kd-nav a {
		padding-inline: 0;
	}

	.kd-header--light .kd-nav .current-menu-item > a {
		background: transparent;
		color: var(--kd-leaf-deep);
	}
}

/* ============================================================
   Questionnaire page.
   ============================================================ */

.kd-intakehero {
	padding-block: var(--kd-s5) var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-intakehero__title {
	margin: 0 0 var(--kd-s2);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	line-height: 1;
	max-width: 16ch;
}

.kd-intakehero__lead p {
	margin: 0;
	font-size: var(--kd-fs-medium);
	max-width: 52ch;
}

.kd-intakebody {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-intakebody__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
	gap: var(--kd-s5);
	align-items: start;
}

@media (max-width: 900px) {
	.kd-intakebody__grid {
		grid-template-columns: 1fr;
		gap: var(--kd-s4);
	}

	.kd-intakebody__aside {
		order: -1;
	}
}

.kd-assure {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-assure li {
	max-width: none;
	padding-block: var(--kd-s2);
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
}

.kd-assure__title {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-size: 1rem;
	max-width: none;
}

.kd-assure__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--kd-smoke);
	max-width: none;
}

.kd-assure__note {
	margin-block-start: var(--kd-s3);
	padding-inline-start: var(--kd-s2);
	border-inline-start: var(--kd-rule) solid var(--kd-yolk);
	font-size: 0.875rem;
	color: var(--kd-smoke);
}

/* ============================================================
   Cookie banner.
   ============================================================ */

.kd-cookie {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	background: var(--kd-ink);
	color: var(--kd-paper);
	border-block-start: var(--kd-rule) solid var(--kd-leaf);
	transition: transform 220ms ease, opacity 220ms ease;
}

@media (prefers-reduced-motion: no-preference) {
	.kd-cookie {
		animation: kd-cookie-in 320ms ease both;
	}
}

@keyframes kd-cookie-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.kd-cookie.is-gone {
	transform: translateY(100%);
	opacity: 0;
}

.kd-cookie__inner {
	max-width: var(--kd-wide);
	margin-inline: auto;
	padding: var(--kd-s3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-s3);
}

.kd-cookie__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 62ch;
}

.kd-cookie__text a {
	color: var(--kd-leaf);
}

.kd-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-s2);
}

.kd-cookie__actions .kd-btn {
	font-size: 0.9375rem;
	padding: 0.7rem 1.4rem;
	border-color: var(--kd-paper);
}

.kd-cookie__actions .kd-btn--outline {
	color: var(--kd-paper);
	background: transparent;
}

.kd-cookie__actions .kd-btn--outline:hover {
	background: var(--kd-paper);
	color: var(--kd-ink);
}

@media (max-width: 620px) {
	.kd-cookie__inner {
		flex-direction: column;
		align-items: stretch;
		padding: var(--kd-s2);
		gap: var(--kd-s2);
	}

	.kd-cookie__actions .kd-btn {
		flex: 1;
		text-align: center;
	}
}

/* ============================================================
   Back to top.
   ============================================================ */

.kd-totop {
	position: fixed;
	inset-inline-end: var(--kd-s3);
	inset-block-end: var(--kd-s3);
	z-index: 80;
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	background: var(--kd-ink);
	color: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-ink);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, background-color 160ms ease;
}

.kd-totop.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.kd-totop:hover {
	background: var(--kd-leaf);
	border-color: var(--kd-leaf);
	color: var(--kd-ink);
}

.kd-totop svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/* Keep it clear of the cookie banner while that is showing. */
.kd-cookie:not([hidden]) ~ .kd-totop {
	inset-block-end: calc(var(--kd-s3) + 5.5rem);
}

@media (max-width: 620px) {
	.kd-totop {
		inline-size: 2.75rem;
		block-size: 2.75rem;
		inset-inline-end: var(--kd-s2);
		inset-block-end: var(--kd-s2);
	}
}

/* ============================================================
   All-plans archive — group headings.
   ============================================================ */

.kd-grouphead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kd-s2);
	padding-block-end: var(--kd-s2);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
	max-width: none;
}

.kd-grouphead h2 {
	margin: 0;
	font-size: var(--kd-fs-large);
}

.kd-grouphead__link {
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--kd-leaf-deep);
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
	transition: color 160ms ease, border-color 160ms ease;
}

.kd-grouphead__link::after {
	content: " \2192";
}

.kd-grouphead__link:hover {
	color: var(--kd-paprika);
	border-color: var(--kd-paprika);
}

/* The panel now lists what is included rather than counting it, so the
   rows are a plain checked list instead of label/figure pairs. */

.kd-label__rows--plain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.kd-label__rows--plain li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-block-end: var(--kd-hair) solid var(--kd-ink);
	font-size: var(--kd-fs-small);
	line-height: 1.4;
	max-width: none;
}

.kd-label__rows--plain li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1.05em;
	inline-size: 0.65rem;
	block-size: 0.35rem;
	border-inline-start: 2px solid var(--kd-leaf);
	border-block-end: 2px solid var(--kd-leaf);
	transform: rotate(-45deg);
}

/* ============================================================
   Sticky header fix.
   overflow-x: clip on body created a clipping context, which stops
   position: sticky working on any descendant — the header is a child
   of body, so the bar was being cut off on scroll. Horizontal
   overflow is contained on the sections that cause it instead.
   ============================================================ */

html {
	overflow-x: clip;
}

.kd-hero,
.kd-recipehero,
.kd-fithero,
.kd-abouthero,
.kd-intakehero {
	overflow-x: clip;
}

.kd-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
}

/* The admin bar offsets everything by its own height. */
.admin-bar .kd-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .kd-header {
		inset-block-start: 46px;
	}
}

/* ============================================================
   Header — mobile.
   ============================================================ */

@media (max-width: 900px) {
	.kd-header__inner {
		min-block-size: 3.75rem;
		gap: var(--kd-s2);
	}

	.kd-header__title,
	.kd-header__brand a {
		font-size: 1.25rem;
	}

	.kd-header__brand img,
	.kd-header__brand .custom-logo {
		inline-size: 46px;
	}
}

@media (max-width: 820px) {
	.kd-header--light .kd-header__right {
		background: var(--kd-paper);
		margin-inline: calc(var(--kd-s3) * -1);
		padding-inline: var(--kd-s3);
		padding-block-end: var(--kd-s3);
		border-block-end: var(--kd-rule) solid var(--kd-ink);
		max-block-size: calc(100dvh - 4rem);
		overflow-y: auto;
	}

	.kd-header--light .kd-nav a {
		font-size: 1.0625rem;
		padding-block: 1rem;
	}

	.kd-header--light .kd-btn--sm {
		justify-content: center;
		padding-block: 1rem;
		font-size: 1rem;
	}
}

@media (max-width: 380px) {
	.kd-header__inner {
		min-block-size: 3.25rem;
	}

	.kd-header__title,
	.kd-header__brand a {
		font-size: 1.1rem;
	}
}

/* ============================================================
   Floating WhatsApp button.
   Sits beside back-to-top and expands to show its label on hover.
   ============================================================ */

.kd-wa {
	position: fixed;
	inset-inline-end: var(--kd-s3);
	inset-block-end: calc(var(--kd-s3) + 3.75rem);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: 0;
	block-size: 3rem;
	padding-inline: 0.85rem;
	background: var(--kd-leaf-deep);
	color: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-leaf-deep);
	text-decoration: none;
	overflow: hidden;
	transition: background-color 180ms ease, gap 220ms ease, padding-inline 220ms ease;
}

.kd-wa svg {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	flex: none;
}

.kd-wa__label {
	max-inline-size: 0;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.9375rem;
	overflow: hidden;
	transition: max-inline-size 220ms ease;
}

.kd-wa:hover,
.kd-wa:focus-visible {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
	gap: 0.55rem;
}

.kd-wa:hover .kd-wa__label,
.kd-wa:focus-visible .kd-wa__label {
	max-inline-size: 8rem;
}

@media (prefers-reduced-motion: reduce) {
	.kd-wa,
	.kd-wa__label {
		transition: none;
	}
}

/* Stack clear of the cookie banner while it is showing. */
.kd-cookie:not([hidden]) ~ .kd-wa {
	inset-block-end: calc(var(--kd-s3) + 9.25rem);
}

@media (max-width: 620px) {
	.kd-wa {
		inset-inline-end: var(--kd-s2);
		inset-block-end: calc(var(--kd-s2) + 3.5rem);
		block-size: 2.75rem;
	}

	.kd-wa__label {
		display: none;
	}
}

/* ============================================================
   Footer social icons.
   ============================================================ */

.kd-social {
	grid-auto-flow: column;
	grid-template-columns: none;
	justify-content: start;
	gap: 0.6rem;
}

.kd-social a {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: var(--kd-hair) solid rgba(253, 255, 245, 0.35);
	color: var(--kd-paper);
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.kd-social a svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.kd-social a:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
	border-color: var(--kd-leaf);
	transform: translateY(-2px);
}

/* ============================================================
   Footer base row.
   The CTA is gone from the brand block and the social icons have
   moved down to the closing row, so the footer ends on contact
   rather than repeating a button the page already has.
   ============================================================ */

.kd-footer__top {
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	align-items: start;
}

.kd-footer__brand {
	align-self: center;
}

.kd-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kd-s2) var(--kd-s3);
	margin-block-start: var(--kd-s3);
	padding-block-start: var(--kd-s3);
	border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.2);
}

.kd-footer__base .kd-social {
	margin-block: 0;
	margin-inline-end: auto;
}

.kd-footer__base p {
	margin: 0;
}

@media (max-width: 760px) {
	.kd-footer__base {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--kd-s2);
	}

	.kd-footer__base .kd-social {
		margin-inline-end: 0;
	}
}

/* ============================================================
   Floating WhatsApp button — matched to back-to-top.
   Same square, same fill, same hover. It is a second affordance in
   the same stack, so it should not look like a different component.
   ============================================================ */

.kd-wa {
	position: fixed;
	inset-inline-end: var(--kd-s3);
	inset-block-end: calc(var(--kd-s3) + 3.75rem);
	z-index: 80;
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	padding: 0;
	gap: 0;
	overflow: visible;
	background: var(--kd-ink);
	color: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-ink);
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.kd-wa:hover,
.kd-wa:focus-visible {
	background: var(--kd-leaf);
	border-color: var(--kd-leaf);
	color: var(--kd-ink);
	gap: 0;
}

.kd-wa svg {
	inline-size: 1.35rem;
	block-size: 1.35rem;
}

.kd-wa__label {
	display: none;
}

@media (max-width: 620px) {
	.kd-wa {
		inline-size: 2.75rem;
		block-size: 2.75rem;
		inset-inline-end: var(--kd-s2);
		inset-block-end: calc(var(--kd-s2) + 3.5rem);
	}

	.kd-wa svg {
		inline-size: 1.2rem;
		block-size: 1.2rem;
	}
}

/* ============================================================
   Footer social row.
   Sits under the two link columns rather than in the closing line,
   so contact reads as part of the navigation block.
   ============================================================ */

.kd-footer__socialrow {
	grid-column: 2 / -1;
	margin-block-start: var(--kd-s3);
	padding-block-start: var(--kd-s3);
	border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.2);
}

@media (max-width: 760px) {
	.kd-footer__socialrow {
		grid-column: 1 / -1;
	}
}

.kd-footer__socialrow .kd-social {
	margin: 0;
}

/* The closing line is copyright only again. */
.kd-footer__base {
	justify-content: space-between;
}

/* ============================================================
   Header — hides on scroll down, returns on scroll up.
   ============================================================ */

.kd-header {
	transition:
		transform 240ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
	will-change: transform;
}

.kd-header.is-hidden {
	transform: translateY(-100%);
}

/* The admin bar sits above the header, so the bar has to travel far
   enough to clear both. */
.admin-bar .kd-header.is-hidden {
	transform: translateY(calc(-100% - 32px));
}

@media (max-width: 782px) {
	.admin-bar .kd-header.is-hidden {
		transform: translateY(calc(-100% - 46px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.kd-header {
		transition: none;
	}
}

/* ============================================================
   Floating buttons appear together.
   ============================================================ */

.kd-wa {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 200ms ease,
		transform 200ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.kd-wa.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.kd-wa[hidden] {
	display: none;
}

/* ============================================================
   Footer — social as a third column.
   ============================================================ */

.kd-footer__top {
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.kd-footer__col--social {
	grid-column: auto;
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.kd-footer__col--social .kd-social {
	grid-auto-flow: row;
	grid-template-columns: max-content;
	gap: 0.55rem;
}

@media (max-width: 900px) {
	.kd-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kd-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.kd-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kd-footer__col--social {
		grid-column: 1 / -1;
	}

	.kd-footer__col--social .kd-social {
		grid-auto-flow: column;
		grid-template-columns: none;
		justify-content: start;
		gap: 0.6rem;
	}
}

/* ============================================================
   Mobile menu — a drawer.
   Slides in from the right over a scrim, rather than pushing the
   page down. The page behind is locked while it is open.
   ============================================================ */

@media (max-width: 820px) {
	.kd-header__scrim {
		position: fixed;
		inset: 0;
		z-index: 70;
		background: rgba(26, 36, 22, 0.55);
		opacity: 0;
		transition: opacity 240ms ease;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	.kd-header__scrim.is-visible {
		opacity: 1;
	}

	.kd-header__scrim[hidden] {
		display: none;
	}

	.kd-header--light .kd-header__right {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 75;
		inline-size: min(20rem, 84vw);
		max-block-size: none;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: var(--kd-s5) var(--kd-s3) var(--kd-s3);
		background: var(--kd-paper);
		border: 0;
		border-inline-start: var(--kd-rule) solid var(--kd-ink);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
		visibility: hidden;
	}

	.kd-header--light .kd-header__right.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.kd-header__close {
		position: absolute;
		inset-block-start: var(--kd-s2);
		inset-inline-end: var(--kd-s2);
		inline-size: 2.75rem;
		block-size: 2.75rem;
		font-size: 1.75rem;
		line-height: 1;
		background: transparent;
		border: var(--kd-hair) solid rgba(26, 36, 22, 0.2);
		color: var(--kd-ink);
		cursor: pointer;
	}

	.kd-header__close:hover {
		background: var(--kd-sage);
	}

	/* Links stagger in behind the panel. */
	.kd-header--light .kd-nav__list li {
		opacity: 0;
		transform: translateX(12px);
		transition: opacity 200ms ease, transform 200ms ease;
	}

	.kd-header--light .kd-header__right.is-open .kd-nav__list li {
		opacity: 1;
		transform: translateX(0);
	}

	.kd-header--light .is-open .kd-nav__list li:nth-child(1) { transition-delay: 80ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(2) { transition-delay: 120ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(3) { transition-delay: 160ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(4) { transition-delay: 200ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(5) { transition-delay: 240ms; }

	.kd-header--light .kd-btn--sm {
		margin-block-start: auto;
	}

	/* The toggle stays above the scrim so it can still be reached. */
	.kd-header__toggle {
		position: relative;
		z-index: 80;
	}
}

/* Lock the page behind the drawer. */
.kd-menu-open,
.kd-menu-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.kd-header--light .kd-header__right,
	.kd-header__scrim,
	.kd-header--light .kd-nav__list li {
		transition: none;
	}
}

/* ============================================================
   Fixes.
   ============================================================ */

/* 1. The hamburger.
   inset-inline: 11px was applied to the bar and to both pseudo
   elements in one rule. The pseudos are positioned against the bar,
   which is only 22px wide, so 11px each side collapsed them to
   nothing — leaving a single dash instead of three lines. */

.kd-header__toggle span[aria-hidden] {
	inset-inline: 11px;
}

.kd-header__toggle span[aria-hidden]::before,
.kd-header__toggle span[aria-hidden]::after {
	inset-inline: 0;
}

/* 2. The drawer close button is a mobile control. It had no desktop
   rule, so it rendered beside the nav. */

.kd-header__close {
	display: none;
}

@media (max-width: 820px) {
	.kd-header__close {
		display: grid;
		place-items: center;
	}
}

/* 3. Footer icons run across, not down. */

.kd-footer__col--social .kd-social {
	grid-auto-flow: column;
	grid-template-columns: none;
	justify-content: start;
	gap: 0.5rem;
}

@media (max-width: 900px) {
	.kd-footer__col--social .kd-social {
		grid-auto-flow: column;
	}
}

/* 4. The drawer sits above the header, so the bar underneath should
   not stay interactive while it is open — and the header must not
   hide itself mid-drawer. */

@media (max-width: 820px) {
	.kd-menu-open .kd-header {
		transform: none !important;
	}

	.kd-header--light .kd-header__right {
		padding-block-start: var(--kd-s6);
	}

	/* Give the panel a real height on iOS, where 100% of a fixed
	   inset can sit under the browser chrome. */
	.kd-header--light .kd-header__right {
		block-size: 100dvh;
	}
}

/* ============================================================
   Drawer — overflow and controls.

   A fixed panel parked at translateX(100%) sits a full width past
   the right edge, and fixed elements are not clipped by an
   ancestor's overflow — which is why the page had dead space beside
   it on mobile. The panel is now display:none until it opens, and
   hidden again after it closes.
   ============================================================ */

@media (max-width: 820px) {
	.kd-header--light .kd-header__right[hidden] {
		display: none;
	}

	/* The toggle becomes an X of its own when open, so with the
	   drawer's close button both were stacked in the same corner. */
	.kd-menu-open .kd-header__toggle {
		display: none;
	}

	.kd-header__close {
		inset-block-start: var(--kd-s3);
		inset-inline-end: var(--kd-s3);
	}

	.kd-header--light .kd-header__right {
		padding-block-start: calc(var(--kd-s3) + 3.5rem);
	}

	/* Space the drawer's own contents rather than inheriting the
	   inline bar's spacing. */
	.kd-header--light .kd-nav__list li:first-child {
		border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.12);
	}

	.kd-header--light .kd-btn--sm {
		margin-block-start: var(--kd-s3);
	}
}

/* Belt and braces against horizontal drift on small screens. */
@media (max-width: 820px) {
	html,
	body {
		max-inline-size: 100%;
		overflow-x: hidden;
	}
}

/* ============================================================
   Mobile menu — a panel, not a drawer.
   The full-height side drawer read as an app pattern on a site that
   has five links. This drops from under the bar instead: compact,
   translucent, sized to its contents.
   ============================================================ */

@media (max-width: 820px) {
	.kd-header--light .kd-header__right {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: var(--kd-s3);
		inset-block-end: auto;
		z-index: 75;
		inline-size: min(17rem, calc(100vw - 2 * var(--kd-s3)));
		block-size: auto;
		max-block-size: min(70dvh, 30rem);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0.5rem 0 0;
		padding: 0.5rem;
		background: rgba(253, 255, 245, 0.82);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		backdrop-filter: saturate(180%) blur(18px);
		border: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
		border-inline-start-width: var(--kd-hair);
		box-shadow: 0 18px 40px -20px rgba(26, 36, 22, 0.45);
		overflow-y: auto;
		transform: translateY(-6px) scale(0.98);
		transform-origin: top right;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 180ms ease,
			transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
			visibility 220ms;
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.kd-header--light .kd-header__right {
			background: var(--kd-paper);
		}
	}

	.kd-header--light .kd-header__right.is-open {
		transform: translateY(0) scale(1);
		opacity: 1;
		visibility: visible;
	}

	/* The panel is small and close to the toggle, so a full-screen
	   scrim is more than it needs. */
	.kd-header__scrim {
		background: rgba(26, 36, 22, 0.25);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Its own close button is redundant now — the toggle sits right
	   above the panel and turns into an X. */
	.kd-header__close {
		display: none;
	}

	.kd-menu-open .kd-header__toggle {
		display: block;
	}

	.kd-header--light .kd-header__right {
		padding-block-start: 0.5rem;
	}

	.kd-header--light .kd-nav__list li {
		border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.12);
		border-block-start: 0;
	}

	.kd-header--light .kd-nav__list li:first-child {
		border-block-start: 0;
	}

	.kd-header--light .kd-nav__list li:last-child {
		border-block-end: 0;
	}

	.kd-header--light .kd-nav a {
		padding: 0.8rem 0.75rem;
		font-size: 1rem;
	}

	.kd-header--light .kd-nav a:hover,
	.kd-header--light .kd-nav .current-menu-item > a {
		background: var(--kd-sage);
		color: var(--kd-ink);
	}

	.kd-header--light .kd-btn--sm {
		margin: 0.5rem 0 0;
		justify-content: center;
		padding-block: 0.85rem;
	}

	/* Shorter stagger — the panel is small, so a long cascade drags. */
	.kd-header--light .is-open .kd-nav__list li:nth-child(1) { transition-delay: 40ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(2) { transition-delay: 65ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(3) { transition-delay: 90ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(4) { transition-delay: 115ms; }
	.kd-header--light .is-open .kd-nav__list li:nth-child(5) { transition-delay: 140ms; }

	/* The panel is anchored to the bar, so the bar needs a stacking
	   context and cannot clip it. */
	.kd-header {
		overflow: visible;
	}

	.kd-header__inner {
		position: relative;
	}
}

/* The page no longer needs locking — the panel is small and the
   scrim handles dismissal. */
.kd-menu-open,
.kd-menu-open body {
	overflow: visible;
}

@media (max-width: 820px) {
	.kd-menu-open body {
		overflow: hidden;
	}
}

/* ============================================================
   Mobile menu — full width under the bar.
   17rem left the page showing through beside it and the panel read
   as floating debris. It now spans the content width and is close
   to opaque, so it covers what is behind rather than competing
   with it.
   ============================================================ */

@media (max-width: 820px) {
	.kd-header--light .kd-header__right {
		inset-inline: var(--kd-s3);
		inline-size: auto;
		max-inline-size: none;
		margin-block-start: 0;
		padding: 0.4rem;
		background: rgba(253, 255, 245, 0.97);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border: var(--kd-rule) solid var(--kd-ink);
		box-shadow: 0 20px 44px -22px rgba(26, 36, 22, 0.55);
		transform-origin: top center;
		transform: translateY(-8px);
	}

	.kd-header--light .kd-header__right.is-open {
		transform: translateY(0);
	}

	/* Flush to the bar, so the two read as one unit. */
	.kd-header--light .kd-header__right {
		inset-block-start: calc(100% - 1px);
	}

	.kd-header--light .kd-nav a {
		padding: 0.95rem 0.75rem;
		font-size: 1.0625rem;
	}

	.kd-header--light .kd-btn--sm {
		margin: 0.4rem 0 0;
		padding-block: 0.95rem;
	}
}

/* The header keeps hiding on scroll down and returning on scroll up.
   It only stays put while the menu is open, so the panel anchored to
   it cannot be dragged off screen mid-interaction. */

@media (max-width: 820px) {
	.kd-menu-open .kd-header {
		transform: none !important;
	}
}

/* ============================================================
   Mobile menu — solid sheet.
   Transparency was letting the hero headline read straight through
   the links, and the scrim sat above the header, greying out the
   logo. Both are gone: the panel is opaque and full bleed, the
   scrim sits below the bar.
   ============================================================ */

@media (max-width: 820px) {
	.kd-header--light .kd-header__right {
		inset-inline: 0;
		inset-block-start: 100%;
		inline-size: 100%;
		max-inline-size: none;
		max-block-size: min(76dvh, 34rem);
		margin: 0;
		padding: 0;
		background: var(--kd-paper);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-block-end: var(--kd-rule) solid var(--kd-ink);
		box-shadow: 0 16px 28px -22px rgba(26, 36, 22, 0.5);
		transform: translateY(-100%);
		transform-origin: top center;
		transition:
			transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
			opacity 160ms ease,
			visibility 260ms;
		opacity: 1;
	}

	/* Slides down from behind the bar, which is why the bar needs to
	   paint on top of it. */
	.kd-header--light .kd-header__right.is-open {
		transform: translateY(0);
	}

	.kd-header__inner {
		position: static;
	}

	.kd-header {
		position: sticky;
		z-index: 60;
	}

	.kd-header--light .kd-header__right {
		z-index: -1;
	}

	.kd-header__scrim {
		z-index: 50;
		background: rgba(26, 36, 22, 0.35);
	}

	.kd-header--light .kd-nav__list {
		gap: 0;
	}

	.kd-header--light .kd-nav__list li {
		border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.14);
	}

	.kd-header--light .kd-nav a {
		padding: 1.05rem var(--kd-s3);
		font-size: 1.0625rem;
	}

	.kd-header--light .kd-btn--sm {
		margin: var(--kd-s2) var(--kd-s3) var(--kd-s3);
		inline-size: auto;
		padding-block: 1rem;
	}

	/* No cascade — on a sheet this size it reads as lag. */
	.kd-header--light .kd-nav__list li,
	.kd-header--light .is-open .kd-nav__list li {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}

/* ============================================================
   Sticky header on mobile.

   overflow-x: hidden on html/body turns them into a scroll
   container, which disables position: sticky on everything inside —
   so the bar was not sticky on mobile and could not hide or return.
   That backstop is no longer needed: the menu panel is display:none
   when closed, so nothing sits off-screen widening the page.
   ============================================================ */

@media (max-width: 820px) {
	html,
	body {
		overflow-x: visible;
		max-inline-size: none;
	}
}

html {
	overflow-x: clip;
}

.kd-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	transition:
		transform 240ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
}

.admin-bar .kd-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .kd-header {
		inset-block-start: 46px;
	}
}

.kd-header.is-hidden {
	transform: translateY(-100%);
}

.admin-bar .kd-header.is-hidden {
	transform: translateY(calc(-100% - 32px));
}

@media (max-width: 782px) {
	.admin-bar .kd-header.is-hidden {
		transform: translateY(calc(-100% - 46px));
	}
}

/* Never while the menu is open — the panel is anchored to the bar. */
.kd-menu-open .kd-header,
.kd-menu-open .kd-header.is-hidden {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.kd-header {
		transition: none;
	}
}

/* ============================================================
   Contact.
   ============================================================ */

.kd-contacthero,
.kd-resultshero,
.kd-bloghero,
.kd-legalhero {
	padding-block: var(--kd-s5) var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-contacthero__grid,
.kd-resultshero__grid,
.kd-bloghero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--kd-s4);
	align-items: end;
}

@media (max-width: 860px) {
	.kd-contacthero__grid,
	.kd-resultshero__grid,
	.kd-bloghero__grid {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--kd-s3);
	}
}

.kd-contacthero__title,
.kd-resultshero__title,
.kd-bloghero__title {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	line-height: 1;
	max-width: 12ch;
}

.kd-contacthero__lead p,
.kd-resultshero__lead p,
.kd-bloghero__lead p {
	margin-block: 0 var(--kd-s2);
	font-size: var(--kd-fs-medium);
	max-width: 50ch;
}

.kd-contacthero__cta {
	margin-block-end: 0 !important;
}

.kd-contactlist {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-channels {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 54rem;
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-channels li {
	max-width: none;
	border-block-end: var(--kd-hair) solid rgba(26, 36, 22, 0.18);
}

.kd-channel {
	display: grid;
	grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
	gap: var(--kd-s2) var(--kd-s3);
	align-items: baseline;
	padding: var(--kd-s3) var(--kd-s2);
	margin-inline: calc(var(--kd-s2) * -1);
	text-decoration: none;
	color: inherit;
	transition: background-color 160ms ease;
}

.kd-channel:hover {
	background: var(--kd-sage);
}

.kd-channel__label {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-leaf-deep);
}

.kd-channel__value {
	font-family: var(--kd-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.kd-channel__note {
	grid-column: 2 / -1;
	font-size: 0.9375rem;
	color: var(--kd-smoke);
	max-width: 46ch;
}

.kd-channel__arrow {
	font-size: 1.35rem;
	transition: transform 160ms ease;
}

.kd-channel:hover .kd-channel__arrow {
	transform: translateX(4px);
}

@media (max-width: 620px) {
	.kd-channel {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.kd-channel__label {
		grid-column: 1 / -1;
	}

	.kd-channel__note {
		grid-column: 1 / -1;
	}
}

.kd-contactnote {
	margin-block-start: var(--kd-s4);
	padding-inline-start: var(--kd-s2);
	border-inline-start: var(--kd-rule) solid var(--kd-yolk);
	font-size: 0.9375rem;
	color: var(--kd-smoke);
	max-width: 60ch;
}

/* ============================================================
   Results.
   ============================================================ */

.kd-stories {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-stories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kd-s3);
}

.kd-story {
	margin: 0;
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 5px solid var(--kd-leaf);
	padding: var(--kd-s3);
}

.kd-story blockquote {
	margin: 0 0 var(--kd-s2);
	border: 0;
	padding: 0;
	font-family: var(--kd-display);
	font-size: 1.25rem;
	line-height: 1.35;
}

.kd-story blockquote p {
	margin: 0;
}

.kd-story figcaption {
	display: grid;
	gap: 0.15rem;
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-story__name {
	font-weight: 700;
	font-size: 0.9375rem;
}

.kd-story__plan {
	font-size: 0.8125rem;
	color: var(--kd-smoke);
}

.kd-stories--empty {
	padding-block: var(--kd-s5);
}

.kd-resultsnote {
	padding-block: var(--kd-s4);
}

.kd-resultsnote p {
	margin: 0;
	font-size: 1rem;
	max-width: 62ch;
	opacity: 0.9;
}

/* ============================================================
   Blog.
   ============================================================ */

.kd-bloglist {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kd-s4) var(--kd-s3);
}

.kd-post {
	display: flex;
	flex-direction: column;
}

.kd-post__media {
	display: block;
	margin-block-end: var(--kd-s2);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	overflow: hidden;
}

.kd-post__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 320ms ease;
}

.kd-post:hover .kd-post__media img {
	transform: scale(1.03);
}

.kd-post__meta {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
	max-width: none;
}

.kd-post__title {
	margin: 0 0 0.6rem;
	font-size: 1.375rem;
	line-height: 1.15;
}

.kd-post__title a {
	text-decoration: none;
	transition: color 160ms ease;
}

.kd-post:hover .kd-post__title a {
	color: var(--kd-leaf-deep);
}

.kd-post__excerpt {
	margin: 0 0 var(--kd-s2);
	font-size: 1rem;
	line-height: 1.5;
	flex: 1;
}

.kd-post__more a {
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
}

/* The newest post takes the full width, so the listing has a focal
   point instead of a uniform grid. */
.kd-post--lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: center;
	padding-block-end: var(--kd-s4);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-post--lead .kd-post__media {
	margin-block-end: 0;
}

.kd-post--lead .kd-post__title {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
}

.kd-post--lead .kd-post__excerpt {
	font-size: 1.0625rem;
	flex: 0 1 auto;
}

@media (max-width: 760px) {
	.kd-post--lead {
		grid-template-columns: 1fr;
		gap: var(--kd-s2);
	}
}

/* ============================================================
   Single post.
   ============================================================ */

.kd-singlehero {
	padding-block: var(--kd-s5) var(--kd-s4);
}

.kd-singlehero__title {
	margin: 0.4rem 0 0;
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	line-height: 1.05;
}

.kd-singlemedia {
	background: var(--kd-paper);
	padding-block: var(--kd-s4) 0;
}

.kd-singlemedia img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-singlebody {
	background: var(--kd-paper);
	padding-block: var(--kd-s4) var(--kd-s5);
}

/* ============================================================
   Legal pages.
   ============================================================ */

.kd-legalhero__title {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	line-height: 1.05;
}

.kd-legalhero__updated {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--kd-leaf-deep);
}

.kd-legal {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-legal__intro {
	margin-block-end: var(--kd-s4);
}

.kd-legal__list {
	list-style: none;
	counter-reset: kd-legal;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kd-s4);
}

.kd-legal__list li {
	counter-increment: kd-legal;
	max-width: none;
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-legal__list h2 {
	margin: 0 0 var(--kd-s2);
	font-size: 1.375rem;
	line-height: 1.2;
}

.kd-legal__list h2::before {
	content: counter( kd-legal, decimal-leading-zero ) " ";
	color: var(--kd-leaf-deep);
	font-size: 0.75em;
}

.kd-legal__list p {
	margin: 0 0 var(--kd-s2);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 66ch;
}

.kd-legal__list p:last-child {
	margin-block-end: 0;
}

/* ============================================================
   Contact — a lead card plus the rest.
   WhatsApp is the channel that actually gets used, so it gets the
   weight; the others sit beside it as a list.
   ============================================================ */

.kd-contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--kd-s4);
	align-items: start;
}

@media (max-width: 860px) {
	.kd-contactgrid {
		grid-template-columns: 1fr;
		gap: var(--kd-s3);
	}
}

.kd-primarycard {
	display: grid;
	gap: 0.4rem;
	padding: var(--kd-s4) var(--kd-s3);
	background: var(--kd-ink);
	color: var(--kd-paper);
	border: var(--kd-rule) solid var(--kd-ink);
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

.kd-primarycard:hover {
	background: var(--kd-leaf-deep);
	border-color: var(--kd-leaf-deep);
	color: var(--kd-paper);
}

.kd-primarycard__icon svg {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--kd-leaf);
	margin-block-end: var(--kd-s2);
}

.kd-primarycard__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kd-leaf);
}

.kd-primarycard__value {
	font-family: var(--kd-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.1;
}

.kd-primarycard__note {
	font-size: 0.9375rem;
	opacity: 0.86;
	max-width: 34ch;
}

.kd-primarycard__cta {
	margin-block-start: var(--kd-s2);
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-hair) solid rgba(253, 255, 245, 0.28);
	font-weight: 700;
	font-size: 0.9375rem;
}

.kd-primarycard:hover .kd-primarycard__cta span {
	display: inline-block;
	transform: translateX(3px);
}

.kd-contactlist .kd-channels {
	max-width: none;
	margin: 0;
}

/* ============================================================
   Results — conversation screenshots.
   Screenshots are tall and vary in height, so the grid is columned
   rather than rowed: nothing is cropped and nothing is stretched.
   ============================================================ */

.kd-shots {
	background: var(--kd-paper);
	padding-block: var(--kd-s5);
}

.kd-shots__grid {
	columns: 3 260px;
	column-gap: var(--kd-s3);
}

@media (max-width: 640px) {
	.kd-shots__grid {
		columns: 1;
	}
}

.kd-shot {
	break-inside: avoid;
	margin: 0 0 var(--kd-s3);
	background: var(--kd-white);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 5px solid var(--kd-leaf);
	transition: transform 180ms ease, border-color 180ms ease;
}

.kd-shot:hover {
	transform: translateY(-3px);
	border-color: rgba(93, 166, 103, 0.6);
}

.kd-shot__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.kd-shot figcaption {
	display: grid;
	gap: 0.2rem;
	padding: var(--kd-s2);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-shot__name {
	font-weight: 700;
	font-size: 0.9375rem;
}

.kd-shot__note {
	font-size: 0.875rem;
	color: var(--kd-smoke);
}

.kd-shots--empty {
	padding-block: var(--kd-s5);
}

.kd-shots--empty p {
	margin-block-end: var(--kd-s2);
}

/* ============================================================
   Contact cards.
   All three channels share one treatment; WhatsApp is distinguished
   by fill rather than by being a different component.
   ============================================================ */

.kd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kd-s3);
}

.kd-card {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: var(--kd-s4) var(--kd-s3);
	background: var(--kd-white);
	color: var(--kd-ink);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	border-block-start: 5px solid var(--kd-leaf);
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.kd-card:hover {
	transform: translateY(-4px);
	border-color: rgba(93, 166, 103, 0.6);
	background: var(--kd-paper);
	color: var(--kd-ink);
}

.kd-card--primary {
	background: var(--kd-ink);
	color: var(--kd-paper);
	border-color: var(--kd-ink);
	border-block-start-color: var(--kd-leaf);
}

.kd-card--primary:hover {
	background: var(--kd-leaf-deep);
	border-color: var(--kd-leaf-deep);
	color: var(--kd-paper);
}

.kd-card__icon svg {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--kd-leaf);
	margin-block-end: var(--kd-s2);
}

.kd-card--primary .kd-card__icon svg {
	color: var(--kd-leaf);
}

.kd-card__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kd-leaf-deep);
}

.kd-card--primary .kd-card__label {
	color: var(--kd-leaf);
}

.kd-card__value {
	font-family: var(--kd-display);
	font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem);
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.kd-card__note {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--kd-smoke);
	max-width: 32ch;
}

.kd-card--primary .kd-card__note {
	color: inherit;
	opacity: 0.86;
}

.kd-card__cta {
	margin-block-start: var(--kd-s2);
	padding-block-start: var(--kd-s2);
	border-block-start: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	font-weight: 700;
	font-size: 0.9375rem;
}

.kd-card--primary .kd-card__cta {
	border-block-start-color: rgba(253, 255, 245, 0.28);
}

.kd-card:hover .kd-card__cta span {
	display: inline-block;
	transform: translateX(3px);
}

/* Pagination on the blog page template. */
.kd-bloglist .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: var(--kd-rule) solid var(--kd-ink);
	text-decoration: none;
	margin-inline-end: 0.35rem;
}

.kd-bloglist .page-numbers.current {
	background: var(--kd-ink);
	color: var(--kd-paper);
}

.kd-bloglist ul.page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: var(--kd-s4) 0 0;
	padding: 0;
}

.kd-bloglist ul.page-numbers li {
	max-width: none;
}

/* ============================================================
   Blog listing.
   The newest post takes the full width; the rest form a grid.
   Every card carries a category chip, a date and a reading time, so
   the listing tells you what a post is before you open it.
   ============================================================ */

.kd-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--kd-s4) var(--kd-s3);
}

.kd-post {
	display: flex;
	flex-direction: column;
}

.kd-post__media {
	display: block;
	margin-block-end: var(--kd-s2);
	overflow: hidden;
	background: var(--kd-husk);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-post__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.kd-post:hover .kd-post__media img {
	transform: scale(1.04);
}

/* Without a featured image the card still needs a shape, or the grid
   goes ragged. A flat husk panel reads as intentional. */
.kd-post__media--blank {
	aspect-ratio: 3 / 2;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 10px,
			rgba(93, 166, 103, 0.14) 10px 11px
		),
		var(--kd-husk);
}

.kd-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	color: var(--kd-smoke);
	max-width: none;
}

.kd-chip {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	background: var(--kd-sage);
	color: var(--kd-leaf-deep);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.kd-chip:hover {
	background: var(--kd-leaf);
	color: var(--kd-ink);
}

.kd-post__read::before {
	content: "";
	display: inline-block;
	inline-size: 4px;
	block-size: 4px;
	margin-inline-end: 0.6rem;
	vertical-align: middle;
	background: var(--kd-leaf);
}

.kd-post__title {
	margin: 0 0 0.6rem;
	font-size: 1.375rem;
	line-height: 1.15;
	text-wrap: balance;
}

.kd-post__title a {
	text-decoration: none;
	transition: color 160ms ease;
}

.kd-post:hover .kd-post__title a {
	color: var(--kd-leaf-deep);
}

.kd-post__excerpt {
	margin: 0 0 var(--kd-s2);
	font-size: 1rem;
	line-height: 1.55;
	flex: 1;
}

.kd-post__more a {
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	border-block-end: var(--kd-rule) solid var(--kd-leaf);
	padding-block-end: 2px;
	transition: border-color 160ms ease, color 160ms ease;
}

.kd-post:hover .kd-post__more a {
	color: var(--kd-leaf-deep);
	border-color: var(--kd-leaf-deep);
}

/* ---------- Lead post ---------- */

.kd-post--lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--kd-s4);
	align-items: center;
	padding-block-end: var(--kd-s4);
	margin-block-end: var(--kd-s2);
	border-block-end: var(--kd-rule) solid var(--kd-ink);
}

.kd-post--lead .kd-post__media {
	margin-block-end: 0;
	border-block-start-width: 5px;
	border-block-start-color: var(--kd-leaf);
}

.kd-post--lead .kd-post__media img {
	aspect-ratio: 16 / 10;
}

.kd-post--lead .kd-post__title {
	font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
}

.kd-post--lead .kd-post__excerpt {
	font-size: 1.0625rem;
	flex: 0 1 auto;
	max-width: 46ch;
}

@media (max-width: 760px) {
	.kd-post--lead {
		grid-template-columns: 1fr;
		gap: var(--kd-s2);
	}
}

/* ============================================================
   Single post.
   ============================================================ */

.kd-singlehero {
	padding-block: var(--kd-s4) var(--kd-s4);
}

.kd-singlehero__back {
	margin: 0 0 var(--kd-s2);
	font-size: 0.9375rem;
	font-weight: 700;
}

.kd-singlehero__back a {
	text-decoration: none;
	color: var(--kd-leaf-deep);
}

.kd-singlehero__back a:hover {
	color: var(--kd-paprika);
}

.kd-singlehero__title {
	margin: 0 0 var(--kd-s2);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	line-height: 1.04;
	text-wrap: balance;
}

.kd-singlehero__standfirst {
	margin: 0 0 var(--kd-s3);
	font-size: var(--kd-fs-medium);
	line-height: 1.5;
	max-width: 54ch;
}

.kd-singlemedia {
	margin: 0;
	background: var(--kd-paper);
	padding-block: var(--kd-s4) 0;
}

.kd-singlemedia img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 32rem;
	object-fit: cover;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-singlebody {
	background: var(--kd-paper);
	padding-block: var(--kd-s4) var(--kd-s5);
}

/* ---------- Article prose ----------
   The editor output needs its own rules — headings, lists, quotes
   and images all arrive unstyled. */

.kd-prose {
	font-size: 1.125rem;
	line-height: 1.7;
}

.kd-prose > * + * {
	margin-block-start: 1.3em;
}

.kd-prose h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.15;
	margin-block-start: 2em;
	padding-block-start: 0.6em;
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-prose h3 {
	font-size: 1.35rem;
	line-height: 1.2;
	margin-block-start: 1.8em;
}

.kd-prose p {
	max-width: 68ch;
}

.kd-prose a {
	color: var(--kd-leaf-deep);
	text-underline-offset: 3px;
}

.kd-prose ul,
.kd-prose ol {
	padding-inline-start: 1.4rem;
	max-width: 66ch;
}

.kd-prose li + li {
	margin-block-start: 0.5em;
}

.kd-prose ul {
	list-style: none;
	padding-inline-start: 0;
}

.kd-prose ul li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.kd-prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	inline-size: 0.65rem;
	block-size: 0.35rem;
	border-inline-start: 2px solid var(--kd-leaf);
	border-block-end: 2px solid var(--kd-leaf);
	transform: rotate(-45deg);
}

.kd-prose blockquote {
	margin-inline: 0;
	padding: var(--kd-s2) var(--kd-s3);
	background: var(--kd-white);
	border: 0;
	border-inline-start: 5px solid var(--kd-leaf);
	font-family: var(--kd-display);
	font-size: 1.3rem;
	line-height: 1.4;
}

.kd-prose blockquote p {
	margin: 0;
	max-width: none;
}

.kd-prose img,
.kd-prose figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
}

.kd-prose figcaption {
	margin-block-start: 0.6rem;
	font-size: 0.875rem;
	color: var(--kd-smoke);
}

.kd-prose hr {
	border: 0;
	block-size: var(--kd-rule);
	background: var(--kd-ink);
	margin-block: var(--kd-s4);
}

/* ---------- Prev / next ---------- */

.kd-postnav {
	background: var(--kd-husk);
	padding-block: var(--kd-s4);
	border-block-start: var(--kd-rule) solid var(--kd-ink);
}

.kd-postnav__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kd-s3);
}

.kd-postnav__item {
	display: grid;
	gap: 0.4rem;
	padding: var(--kd-s3);
	background: var(--kd-paper);
	border: var(--kd-hair) solid rgba(26, 36, 22, 0.16);
	text-decoration: none;
	transition: transform 160ms ease, border-color 160ms ease;
}

.kd-postnav__item:hover {
	transform: translateY(-3px);
	border-color: rgba(93, 166, 103, 0.6);
}

.kd-postnav__item--next {
	text-align: end;
}

.kd-postnav__dir {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kd-leaf-deep);
}

.kd-postnav__title {
	font-family: var(--kd-display);
	font-size: 1.2rem;
	line-height: 1.2;
}

/* ============================================================
   Wordmark.
   A logotype should not be the same face as every heading on the
   site, or it stops reading as a mark. Fraunces with the soft and
   wonky axes turned up gives it a hand-cut quality that Young
   Serif's flat slab does not have.
   ============================================================ */

.kd-header__title,
.kd-header__brand a {
	font-family: var(--kd-wordmark);
	font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: -0.015em;
	line-height: 1;
	display: inline-block;
	padding-block: 0.15em;
}

/* The apostrophe in "Kiki's" sits high and wide by default; pulling
   it in stops the two words drifting apart. */
.kd-header__title {
	font-feature-settings: "kern" 1;
}

.kd-header__brand a:hover {
	color: var(--kd-leaf-deep);
}

@media (max-width: 900px) {
	.kd-header__title,
	.kd-header__brand a {
		font-size: 1.4rem;
	}
}

@media (max-width: 380px) {
	.kd-header__title,
	.kd-header__brand a {
		font-size: 1.25rem;
	}
}

/* The footer tagline is the same wordmark, so it should match. */
.kd-footer__tagline {
	font-family: var(--kd-wordmark);
	font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
	font-weight: 600;
}

.kd-footer__descriptor {
	font-family: var(--kd-display);
	font-variation-settings: normal;
	font-weight: 400;
}

/* The banner ships hidden and is revealed by script once the cookie has
   been read, so it must not be visible before that runs. */
.kd-cookie[hidden] {
	display: none;
}

/* The banner is two links now, not buttons, so they need the button box. */
.kd-cookie__actions .kd-btn {
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

/* It is printed only when unanswered, so it is never hidden by attribute. */
.kd-cookie {
	display: block;
}

/* The banner ships on every page and is removed by the inline script when the
   visitor has already answered. It stays invisible until that script has run,
   so it can never flash on a page it should not appear on. */
.kd-cookie[data-kd-pending] {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}