/*
Theme Name: Penahak Modern
Theme URI: https://penahak.com
Description: Modern marketing and help-hub child theme for Penahak Technology. Built on Hello Elementor so Elementor remains fully available for blog posts and ad-hoc pages, while marketing pages are driven by a coded design system.
Author: Penahak Technology
Author URI: https://penahak.com
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: penahak-modern
Tags: business, corporate, saas, elementor
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand — emerald, matched to the Penahak ERP application palette. */
	--pk-brand-50:  #eafaf4;
	--pk-brand-100: #d0f2e4;
	--pk-brand-200: #a3e6cb;
	--pk-brand-300: #6fd5ae;
	--pk-brand-400: #3dbf92;
	--pk-brand-500: #1da57a;
	--pk-brand-600: #178a66;
	--pk-brand-700: #136f53;
	--pk-brand-800: #105843;
	--pk-brand-900: #0c4234;

	/* Ink — dark slate, matched to the existing brand dark. */
	--pk-ink-950: #0b1113;
	--pk-ink-900: #20292d;
	--pk-ink-800: #2c383d;
	--pk-ink-700: #3d4c52;
	--pk-ink-600: #536469;

	/* Neutrals */
	--pk-white: #ffffff;
	--pk-gray-25:  #fbfcfc;
	--pk-gray-50:  #f6f8f8;
	--pk-gray-100: #eef1f2;
	--pk-gray-200: #e972e2;
	--pk-gray-200: #e2e8e9;
	--pk-gray-300: #cdd6d8;
	--pk-gray-400: #9daaad;
	--pk-gray-500: #77868a;
	--pk-gray-600: #5b686c;

	/* Accents, used sparingly */
	--pk-teal: #2dd4bf;
	--pk-amber: #f5a524;

	/* White text on the brand green (#1da57a) measures 3.16:1 — under the
	   4.5:1 WCAG AA minimum for 16px text. This slightly deeper emerald reads
	   as the same brand identity at 4.9:1, and is used wherever white sits on
	   green. The brand green itself is unchanged for icons, rules and accents.
	   To revert, set this to var(--pk-brand-500). */
	--pk-cta: #16805f;
	--pk-cta-hover: #12694e;

	/* Semantic */
	--pk-bg: var(--pk-white);
	--pk-bg-alt: var(--pk-gray-50);
	--pk-surface: var(--pk-white);
	--pk-border: var(--pk-gray-200);
	--pk-border-strong: var(--pk-gray-300);
	--pk-heading: var(--pk-ink-900);
	--pk-body: var(--pk-gray-600);
	/* gray-500 measured 3.78:1 on white — under AA for small text. */
	--pk-muted: var(--pk-gray-600);
	--pk-link: var(--pk-brand-700);

	/* Typography */
	--pk-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--pk-text-xs:   0.75rem;
	--pk-text-sm:   0.875rem;
	--pk-text-base: 1rem;
	--pk-text-lg:   1.125rem;
	--pk-text-xl:   1.25rem;
	--pk-text-2xl:  1.5rem;
	--pk-text-3xl:  1.875rem;
	--pk-text-4xl:  2.25rem;
	--pk-text-5xl:  3rem;
	--pk-text-6xl:  3.75rem;

	/* Fluid display sizes */
	--pk-display-1: clamp(2.25rem, 1.25rem + 3.6vw, 4rem);
	--pk-display-2: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
	--pk-display-3: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);

	/* Spacing */
	--pk-space-1: 0.25rem;
	--pk-space-2: 0.5rem;
	--pk-space-3: 0.75rem;
	--pk-space-4: 1rem;
	--pk-space-5: 1.25rem;
	--pk-space-6: 1.5rem;
	--pk-space-7: 1.75rem;
	--pk-space-8: 2rem;
	--pk-space-10: 2.5rem;
	--pk-space-12: 3rem;
	--pk-space-16: 4rem;
	--pk-space-20: 5rem;
	--pk-space-24: 6rem;

	--pk-section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

	/* Radius */
	--pk-radius-sm: 8px;
	--pk-radius: 12px;
	--pk-radius-lg: 16px;
	--pk-radius-xl: 22px;
	--pk-radius-full: 999px;

	/* Elevation */
	--pk-shadow-xs: 0 1px 2px rgba(11, 17, 19, 0.05);
	--pk-shadow-sm: 0 1px 3px rgba(11, 17, 19, 0.06), 0 1px 2px rgba(11, 17, 19, 0.04);
	--pk-shadow: 0 4px 16px -2px rgba(11, 17, 19, 0.08), 0 2px 6px -2px rgba(11, 17, 19, 0.05);
	--pk-shadow-lg: 0 18px 40px -12px rgba(11, 17, 19, 0.16), 0 6px 16px -8px rgba(11, 17, 19, 0.08);
	--pk-shadow-brand: 0 12px 28px -10px rgba(29, 165, 122, 0.45);

	/* Layout */
	--pk-container: 1200px;
	--pk-container-narrow: 820px;
	--pk-container-wide: 1360px;
	--pk-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
	--pk-header-h: 76px;

	/* Motion */
	--pk-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--pk-dur: 0.28s;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pk-header-h) + 1rem);
}

body.pk-body {
	margin: 0;
	background: var(--pk-bg);
	color: var(--pk-body);
	font-family: var(--pk-font);
	font-size: var(--pk-text-base);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Keep Elementor-authored pages from inheriting our body rhythm unexpectedly. */
.pk-body :where(img, video) {
	max-width: 100%;
	height: auto;
}

/* Inline icons are excluded: `height: auto` on an SVG with a viewBox makes it
   scale to the container width, which rendered a 24px tick as a huge glyph
   inside a table cell. Icons get an explicit em-relative size instead, kept
   at low specificity so component rules can still override it. */
.pk-body svg:not(.pk-icon) {
	max-width: 100%;
	height: auto;
}

.pk-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: middle;
}

.pk-body h1,
.pk-body h2,
.pk-body h3,
.pk-body h4,
.pk-body h5,
.pk-body h6 {
	margin: 0 0 var(--pk-space-4);
	color: var(--pk-heading);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.pk-body h1 { font-size: var(--pk-display-1); }
.pk-body h2 { font-size: var(--pk-display-2); }
.pk-body h3 { font-size: var(--pk-display-3); }
.pk-body h4 { font-size: var(--pk-text-xl); font-weight: 700; }
.pk-body h5 { font-size: var(--pk-text-lg); font-weight: 700; }
.pk-body h6 { font-size: var(--pk-text-base); font-weight: 700; }

.pk-body p {
	margin: 0 0 var(--pk-space-4);
}

/* Links are deliberately NOT coloured globally.
 *
 * A blanket `.pk-body a { color }` rule scores (0,1,1), which silently beats
 * every single-class component rule such as `.pk-btn--primary` (0,1,0) — the
 * result was white button labels turning brand-green on a green background,
 * i.e. invisible text. Components own their own colour; prose-style links are
 * coloured explicitly below. */
/* Element-only selector (0,0,1) on purpose, so every single-class component
   rule such as .pk-drawer__link or .pk-arrow-link (0,1,0) still wins. */
a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--pk-dur) var(--pk-ease);
}

/* Editorial link styling, applied only where running text lives. */
.pk-body :where(.pk-prose, .pk-lead, .pk-faq__a, .pk-card p, .pk-announce, .pk-doc-body, .pk-prose li) a {
	color: var(--pk-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--pk-link) 35%, transparent);
}

.pk-body :where(.pk-prose, .pk-lead, .pk-faq__a, .pk-card p, .pk-doc-body) a:hover {
	color: var(--pk-brand-700);
	text-decoration-color: currentColor;
}

.pk-section--dark :where(.pk-prose, .pk-lead, .pk-card p) a {
	color: var(--pk-brand-300);
}

.pk-body strong,
.pk-body b {
	color: var(--pk-ink-900);
	font-weight: 700;
}

.pk-body ul,
.pk-body ol {
	margin: 0 0 var(--pk-space-4);
	padding-left: 1.25rem;
}

.pk-body li + li {
	margin-top: 0.375rem;
}

.pk-body code {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: var(--pk-gray-100);
	color: var(--pk-ink-800);
	font-family: var(--pk-font-mono);
	font-size: 0.9em;
}

.pk-body blockquote {
	margin: var(--pk-space-6) 0;
	padding: var(--pk-space-5) var(--pk-space-6);
	border-left: 3px solid var(--pk-brand-500);
	border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
	background: var(--pk-brand-50);
	color: var(--pk-ink-800);
	font-size: var(--pk-text-lg);
}

.pk-body hr {
	height: 1px;
	margin: var(--pk-space-12) 0;
	border: 0;
	background: var(--pk-border);
}

/* Accessibility ---------------------------------------------------------- */

.pk-skip-link {
	position: absolute;
	top: -100%;
	left: var(--pk-space-4);
	z-index: 1000;
	padding: var(--pk-space-3) var(--pk-space-5);
	border-radius: 0 0 var(--pk-radius) var(--pk-radius);
	background: var(--pk-ink-900);
	color: var(--pk-white);
	font-weight: 700;
	text-decoration: none;
}

.pk-skip-link:focus {
	top: 0;
	color: var(--pk-white);
}

.pk-body :focus-visible {
	outline: 2px solid var(--pk-brand-500);
	outline-offset: 3px;
	border-radius: 4px;
}

.pk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.pk-container {
	width: 100%;
	max-width: var(--pk-container);
	margin-inline: auto;
	padding-inline: var(--pk-gutter);
}

.pk-container--narrow { max-width: var(--pk-container-narrow); }
.pk-container--wide { max-width: var(--pk-container-wide); }

.pk-section {
	position: relative;
	padding-block: var(--pk-section-y);
}

.pk-section--tight { padding-block: calc(var(--pk-section-y) * 0.6); }
.pk-section--alt { background: var(--pk-bg-alt); }

.pk-section--dark {
	background: var(--pk-ink-900);
	color: color-mix(in srgb, var(--pk-white) 72%, transparent);
}

.pk-section--dark h1,
.pk-section--dark h2,
.pk-section--dark h3,
.pk-section--dark h4,
.pk-section--dark strong {
	color: var(--pk-white);
}

.pk-section--dark a { color: var(--pk-brand-300); }
.pk-section--dark a:hover { color: var(--pk-brand-200); }

.pk-divider {
	height: 1px;
	background: var(--pk-border);
}

/* Section headers -------------------------------------------------------- */

.pk-section-head {
	max-width: 46rem;
	margin-bottom: var(--pk-space-12);
}

.pk-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.pk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pk-space-2);
	margin-bottom: var(--pk-space-4);
	/* brand-600 measured 4.05:1 on the alt background — one step darker. */
	color: var(--pk-brand-700);
	font-size: var(--pk-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pk-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: var(--pk-brand-500);
}

.pk-section-head--center .pk-eyebrow::before { display: none; }
.pk-section--dark .pk-eyebrow { color: var(--pk-brand-300); }

.pk-lead {
	margin: 0;
	color: var(--pk-body);
	font-size: var(--pk-text-lg);
	line-height: 1.7;
	text-wrap: pretty;
}

.pk-section--dark .pk-lead {
	color: color-mix(in srgb, var(--pk-white) 74%, transparent);
}

/* Grids ------------------------------------------------------------------ */

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

.pk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pk-grid--split {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.pk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pk-space-2);
	padding: 0.8125rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--pk-radius-full);
	font-family: inherit;
	font-size: var(--pk-text-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--pk-dur) var(--pk-ease),
		box-shadow var(--pk-dur) var(--pk-ease),
		background-color var(--pk-dur) var(--pk-ease),
		border-color var(--pk-dur) var(--pk-ease),
		color var(--pk-dur) var(--pk-ease);
}

.pk-btn:hover { transform: translateY(-1px); }
.pk-btn:active { transform: translateY(0); }

.pk-btn svg {
	width: 1.125em;
	height: 1.125em;
	flex: none;
}

.pk-btn--primary {
	background: var(--pk-cta);
	color: var(--pk-white);
	box-shadow: var(--pk-shadow-brand);
}

.pk-btn--primary:hover {
	background: var(--pk-cta-hover);
	color: var(--pk-white);
	box-shadow: 0 16px 34px -10px rgba(29, 165, 122, 0.55);
}

.pk-btn--secondary {
	border-color: var(--pk-border-strong);
	background: var(--pk-white);
	color: var(--pk-ink-900);
	box-shadow: var(--pk-shadow-xs);
}

.pk-btn--secondary:hover {
	border-color: var(--pk-brand-400);
	background: var(--pk-brand-50);
	color: var(--pk-brand-700);
}

.pk-btn--ghost {
	background: transparent;
	color: var(--pk-ink-900);
}

.pk-btn--ghost:hover {
	background: var(--pk-gray-100);
	color: var(--pk-ink-900);
}

.pk-btn--on-dark {
	border-color: color-mix(in srgb, var(--pk-white) 24%, transparent);
	background: color-mix(in srgb, var(--pk-white) 8%, transparent);
	color: var(--pk-white);
	backdrop-filter: blur(6px);
}

.pk-btn--on-dark:hover {
	border-color: color-mix(in srgb, var(--pk-white) 40%, transparent);
	background: color-mix(in srgb, var(--pk-white) 14%, transparent);
	color: var(--pk-white);
}

.pk-btn--lg {
	padding: 1rem 1.75rem;
	font-size: var(--pk-text-lg);
}

.pk-btn--sm {
	padding: 0.5rem 0.9375rem;
	font-size: var(--pk-text-sm);
}

/* Belt and braces: Elementor's kit stylesheet colours bare `a` elements, and
 * loads after the theme. These compound selectors (0,2,1) keep button labels
 * readable regardless of what a page builder injects. */
.pk-body a.pk-btn--primary,
.pk-body a.pk-btn--primary:hover,
.pk-body a.pk-btn--on-dark,
.pk-body a.pk-btn--on-dark:hover {
	color: var(--pk-white);
	text-decoration: none;
}

.pk-body a.pk-btn--secondary,
.pk-body a.pk-btn--ghost {
	color: var(--pk-ink-900);
	text-decoration: none;
}

.pk-body a.pk-btn--secondary:hover {
	color: var(--pk-brand-700);
}

.pk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-3);
	align-items: center;
}

.pk-section-head--center .pk-btn-row { justify-content: center; }

/* Text link with arrow --------------------------------------------------- */

.pk-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: var(--pk-brand-600);
	font-weight: 700;
	text-decoration: none;
}

.pk-arrow-link:hover { color: var(--pk-brand-700); }
.pk-section--dark .pk-arrow-link { color: var(--pk-brand-300); }

.pk-arrow-link svg {
	width: 1.0625em;
	height: 1.0625em;
	transition: transform var(--pk-dur) var(--pk-ease);
}

.pk-arrow-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.pk-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: color-mix(in srgb, var(--pk-white) 88%, transparent);
	border-bottom: 1px solid transparent;
	backdrop-filter: saturate(180%) blur(14px);
	transition: border-color var(--pk-dur) var(--pk-ease),
		box-shadow var(--pk-dur) var(--pk-ease),
		background-color var(--pk-dur) var(--pk-ease);
}

.pk-header.is-stuck {
	border-bottom-color: var(--pk-border);
	box-shadow: var(--pk-shadow-sm);
	background: color-mix(in srgb, var(--pk-white) 96%, transparent);
}

/* Items stretch to the full header height so a dropdown anchored to
   `top: 100%` lands exactly on the header's bottom edge — and so there is no
   dead gap between the trigger and the panel to lose the hover in. */
.pk-header__inner {
	display: flex;
	align-items: stretch;
	gap: var(--pk-space-6);
	min-height: var(--pk-header-h);
}

.pk-brand,
.pk-header__actions,
.pk-nav-toggle {
	align-self: center;
}

.pk-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--pk-space-3);
	flex: none;
	text-decoration: none;
}

.pk-brand img {
	max-height: 40px;
	width: auto;
}

.pk-brand__text {
	color: var(--pk-ink-900);
	font-size: var(--pk-text-xl);
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* Announcement bar ------------------------------------------------------- */

.pk-announce {
	background: var(--pk-ink-900);
	color: color-mix(in srgb, var(--pk-white) 82%, transparent);
	font-size: var(--pk-text-sm);
	text-align: center;
}

.pk-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pk-space-3);
	min-height: 40px;
	flex-wrap: wrap;
}

.pk-announce a {
	color: var(--pk-brand-300);
	font-weight: 700;
	text-decoration: none;
}

.pk-announce a:hover { color: var(--pk-brand-200); }

.pk-announce__close {
	position: absolute;
	right: var(--pk-gutter);
	padding: 4px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
}

.pk-announce__close:hover { opacity: 1; }

/* Primary nav ------------------------------------------------------------ */

.pk-nav {
	display: flex;
	flex: 1 1 auto;
}

.pk-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--pk-space-1);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicit full height rather than relying on flex stretch: a `ul` reset from
   the parent theme was collapsing the list to its content height, which left
   the dropdowns opening 17px inside the header. */
.pk-nav__list > li {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
}

.pk-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.5625rem 0.8125rem;
	border-radius: var(--pk-radius-sm);
	color: var(--pk-ink-800);
	font-size: 0.9375rem;
	font-weight: 600;
	/* Matches .pk-btn so nav labels and header buttons share one optical
	   centre line. */
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}

.pk-nav__list > li > a:hover,
.pk-nav__list > li.is-open > a {
	background: var(--pk-gray-100);
	color: var(--pk-ink-950);
}

.pk-nav__list > li.current-menu-item > a,
.pk-nav__list > li.current-page-ancestor > a,
.pk-nav__list > li.current-menu-parent > a {
	color: var(--pk-brand-600);
}

.pk-nav__caret {
	width: 0.875em;
	height: 0.875em;
	transition: transform var(--pk-dur) var(--pk-ease);
	opacity: 0.55;
}

.pk-nav__list > li.is-open .pk-nav__caret { transform: rotate(180deg); }

.pk-header__actions {
	display: flex;
	align-items: center;
	gap: var(--pk-space-2);
	flex: none;
	margin-left: auto;
	/* Keeps the sign-in link on the same centre line as the buttons. */
	line-height: 1.2;
}

.pk-header__actions .pk-btn--ghost {
	padding-inline: 0.75rem;
}

/* Dropdown panels -------------------------------------------------------- */

/* Wide mega panels span the header and centre their own container, so they
 * can never be pushed off-screen by the position of their trigger. They
 * anchor to .pk-header (sticky, therefore a containing block) — which is why
 * only compact-panel items below are made position: relative. */
.pk-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 210;
	border-top: 1px solid var(--pk-border);
	border-bottom: 1px solid var(--pk-border);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--pk-dur) var(--pk-ease),
		transform var(--pk-dur) var(--pk-ease),
		visibility var(--pk-dur) var(--pk-ease);
}

.pk-nav__item.is-open > .pk-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Compact panels sit directly under their own trigger. */
.pk-nav__item:has(.pk-nav__panel--compact) {
	position: relative;
}

/* Invisible bridge so the pointer can cross the few pixels between the
   trigger and the panel without the hover being lost. */
.pk-nav__panel--compact::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.pk-nav__panel--compact {
	left: 0;
	right: auto;
	width: max-content;
	min-width: 300px;
	max-width: min(360px, calc(100vw - 2 * var(--pk-gutter)));
	padding: var(--pk-space-3);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
}

/* Keep the last dropdowns from spilling past the right edge. */
.pk-nav__list > li:nth-last-child(-n + 2) .pk-nav__panel--compact {
	left: auto;
	right: 0;
}

/* The mega grid doubles as the panel's container: max-width plus auto margins
   keep it aligned with the rest of the page while the panel itself is
   full-bleed. */
.pk-mega {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 268px;
	gap: var(--pk-space-6);
	width: 100%;
	max-width: var(--pk-container-wide);
	margin-inline: auto;
	padding: var(--pk-space-8) var(--pk-gutter);
}

.pk-mega__col {
	min-width: 0;
}

.pk-mega__title {
	margin: 0 0 var(--pk-space-3);
	padding-left: 0.75rem;
	color: var(--pk-muted);
	font-size: var(--pk-text-xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.pk-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-mega__list li { margin: 0; }

.pk-mega__link {
	display: flex;
	gap: var(--pk-space-3);
	padding: 0.625rem 0.75rem;
	border-radius: var(--pk-radius);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--pk-dur) var(--pk-ease);
}

.pk-mega__link:hover {
	background: var(--pk-gray-50);
	color: inherit;
}

.pk-mega__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	background: var(--pk-brand-50);
	color: var(--pk-brand-600);
}

.pk-mega__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.pk-mega__link:hover .pk-mega__icon {
	background: var(--pk-brand-100);
}

.pk-mega__label {
	display: block;
	color: var(--pk-ink-900);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.pk-mega__desc {
	display: block;
	margin-top: 2px;
	color: var(--pk-muted);
	font-size: var(--pk-text-xs);
	line-height: 1.5;
}

.pk-mega__feature {
	display: flex;
	flex-direction: column;
	gap: var(--pk-space-3);
	padding: var(--pk-space-5);
	border-radius: var(--pk-radius);
	background: linear-gradient(160deg, var(--pk-ink-900), var(--pk-ink-800));
	color: color-mix(in srgb, var(--pk-white) 78%, transparent);
}

.pk-mega__feature h4 {
	margin: 0;
	color: var(--pk-white);
	font-size: var(--pk-text-lg);
}

.pk-mega__feature p {
	margin: 0;
	font-size: var(--pk-text-sm);
	line-height: 1.6;
}

.pk-mega__feature .pk-btn { margin-top: auto; }

/* Mobile toggle and drawer ---------------------------------------------- */

.pk-nav-toggle {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-sm);
	background: var(--pk-white);
	color: var(--pk-ink-900);
	cursor: pointer;
}

.pk-nav-toggle svg { width: 22px; height: 22px; }
.pk-nav-toggle .pk-icon-close { display: none; }
.pk-nav-toggle[aria-expanded="true"] .pk-icon-close { display: block; }
.pk-nav-toggle[aria-expanded="true"] .pk-icon-menu { display: none; }

/* Full-screen overlay. --pk-drawer-top is set from the live header height by
   main.js when the drawer opens, so the panel starts below the header whether
   or not the announcement bar is still on screen. */
.pk-drawer {
	position: fixed;
	top: var(--pk-drawer-top, var(--pk-header-h));
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 190;
	display: flex;
	flex-direction: column;
	padding: var(--pk-space-5) var(--pk-gutter) var(--pk-space-10);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pk-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--pk-dur) var(--pk-ease),
		transform var(--pk-dur) var(--pk-ease),
		visibility var(--pk-dur) var(--pk-ease);
}

.pk-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.pk-nav-open { overflow: hidden; }

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

.pk-drawer__list li { margin: 0; }

.pk-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pk-space-3);
	width: 100%;
	padding: 0.9375rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--pk-border);
	background: none;
	color: var(--pk-ink-900);
	font-family: inherit;
	font-size: var(--pk-text-lg);
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.pk-drawer__link svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	opacity: 0.5;
	transition: transform var(--pk-dur) var(--pk-ease);
}

.pk-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.pk-drawer__sub {
	display: none;
	margin: 0;
	padding: var(--pk-space-2) 0 var(--pk-space-3) 0.25rem;
	list-style: none;
}

.pk-drawer__sub.is-open { display: block; }

.pk-drawer__sub a {
	display: block;
	padding: 0.5rem 0;
	color: var(--pk-body);
	font-size: var(--pk-text-base);
	font-weight: 600;
	text-decoration: none;
}

.pk-drawer__sub a:hover { color: var(--pk-brand-600); }

.pk-drawer__actions {
	display: grid;
	gap: var(--pk-space-3);
	margin-top: auto;
}

.pk-drawer__actions .pk-btn { width: 100%; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.pk-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
	background: var(--pk-ink-900);
	color: color-mix(in srgb, var(--pk-white) 76%, transparent);
	isolation: isolate;
}

.pk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(58rem 34rem at 78% -10%, rgba(29, 165, 122, 0.32), transparent 62%),
		radial-gradient(42rem 30rem at 8% 108%, rgba(45, 212, 191, 0.16), transparent 60%);
}

.pk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(color-mix(in srgb, var(--pk-white) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--pk-white) 5%, transparent) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 25%, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 25%, transparent 75%);
}

.pk-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 1rem + 5vw, 5rem);
	align-items: center;
}

.pk-hero h1 {
	color: var(--pk-white);
	font-size: var(--pk-display-1);
	letter-spacing: -0.032em;
}

.pk-hero h1 em {
	font-style: normal;
	background: linear-gradient(96deg, var(--pk-brand-300), var(--pk-teal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pk-hero__lead {
	max-width: 34rem;
	margin-bottom: var(--pk-space-8);
	color: color-mix(in srgb, var(--pk-white) 78%, transparent);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.68;
	text-wrap: pretty;
}

.pk-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--pk-space-2);
	margin-bottom: var(--pk-space-5);
	padding: 0.4375rem 0.9375rem 0.4375rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--pk-white) 16%, transparent);
	border-radius: var(--pk-radius-full);
	background: color-mix(in srgb, var(--pk-white) 7%, transparent);
	color: color-mix(in srgb, var(--pk-white) 88%, transparent);
	font-size: var(--pk-text-sm);
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(6px);
}

.pk-badge__pill {
	padding: 0.125rem 0.5rem;
	border-radius: var(--pk-radius-full);
	background: var(--pk-cta);
	color: var(--pk-white);
	font-size: var(--pk-text-xs);
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.pk-hero__note {
	margin: var(--pk-space-5) 0 0;
	color: color-mix(in srgb, var(--pk-white) 58%, transparent);
	font-size: var(--pk-text-sm);
}

/* Hero visual: stylised app shell -------------------------------------- */

.pk-shell {
	position: relative;
	border: 1px solid color-mix(in srgb, var(--pk-white) 14%, transparent);
	border-radius: var(--pk-radius-lg);
	background: linear-gradient(170deg, color-mix(in srgb, var(--pk-white) 11%, transparent), color-mix(in srgb, var(--pk-white) 4%, transparent));
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	overflow: hidden;
}

.pk-shell__bar {
	display: flex;
	align-items: center;
	gap: var(--pk-space-2);
	padding: var(--pk-space-3) var(--pk-space-4);
	border-bottom: 1px solid color-mix(in srgb, var(--pk-white) 10%, transparent);
}

.pk-shell__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pk-white) 22%, transparent);
}

.pk-shell__title {
	margin-left: var(--pk-space-2);
	color: color-mix(in srgb, var(--pk-white) 62%, transparent);
	font-size: var(--pk-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.pk-shell__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pk-space-3);
	padding: var(--pk-space-4);
}

.pk-kpi {
	padding: var(--pk-space-4);
	border: 1px solid color-mix(in srgb, var(--pk-white) 10%, transparent);
	border-radius: var(--pk-radius);
	background: color-mix(in srgb, var(--pk-ink-950) 35%, transparent);
}

.pk-kpi__label {
	color: color-mix(in srgb, var(--pk-white) 58%, transparent);
	font-size: var(--pk-text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pk-kpi__value {
	margin-top: 0.25rem;
	color: var(--pk-white);
	font-size: var(--pk-text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pk-kpi__delta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.25rem;
	color: var(--pk-brand-300);
	font-size: var(--pk-text-xs);
	font-weight: 700;
}

.pk-kpi--wide { grid-column: 1 / -1; }

.pk-spark {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 62px;
	margin-top: var(--pk-space-3);
}

.pk-spark span {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(180deg, var(--pk-brand-400), color-mix(in srgb, var(--pk-brand-500) 22%, transparent));
	animation: pk-rise 1s var(--pk-ease) backwards;
}

@keyframes pk-rise {
	from { transform: scaleY(0.05); }
	to { transform: scaleY(1); }
}

.pk-spark span { transform-origin: bottom; }

/* ==========================================================================
   7. Trust bar and stats
   ========================================================================== */

.pk-trust {
	padding-block: var(--pk-space-10);
	border-bottom: 1px solid var(--pk-border);
	background: var(--pk-white);
}

.pk-trust__label {
	margin: 0 0 var(--pk-space-6);
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-align: center;
	text-transform: uppercase;
}

.pk-logos {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: center;
	justify-content: center;
}

.pk-logos img {
	max-height: 34px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--pk-dur) var(--pk-ease), opacity var(--pk-dur) var(--pk-ease);
}

.pk-logos img:hover {
	filter: grayscale(0);
	opacity: 1;
}

.pk-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pk-space-6);
	padding: var(--pk-space-8);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow-sm);
}

.pk-stat { text-align: center; }

.pk-stat__value {
	color: var(--pk-ink-900);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.pk-stat__label {
	margin-top: var(--pk-space-2);
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
	line-height: 1.5;
}

.pk-section--dark .pk-stats {
	border-color: color-mix(in srgb, var(--pk-white) 12%, transparent);
	background: color-mix(in srgb, var(--pk-white) 5%, transparent);
	box-shadow: none;
}

.pk-section--dark .pk-stat__value { color: var(--pk-white); }

.pk-section--dark .pk-stat__label {
	color: color-mix(in srgb, var(--pk-white) 62%, transparent);
}

/* ==========================================================================
   8. Cards
   ========================================================================== */

.pk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pk-space-3);
	padding: var(--pk-space-6);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-surface);
	transition: transform var(--pk-dur) var(--pk-ease),
		box-shadow var(--pk-dur) var(--pk-ease),
		border-color var(--pk-dur) var(--pk-ease);
}

.pk-card--link:hover {
	transform: translateY(-3px);
	border-color: var(--pk-brand-200);
	box-shadow: var(--pk-shadow-lg);
}

.pk-card__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--pk-radius);
	background: var(--pk-brand-50);
	color: var(--pk-brand-600);
}

.pk-card__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.pk-card h3,
.pk-card h4 {
	margin: 0;
	font-size: var(--pk-text-xl);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.pk-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.pk-card__foot {
	margin-top: auto;
	padding-top: var(--pk-space-2);
}

/* Stretched link keeps the whole card clickable and accessible. */
.pk-card__stretch {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	font-size: 0;
}

/* The inverted card treatment only applies inside a dark section. Outside
   one it keeps the normal light card look — otherwise a shared renderer
   dropped onto a light section produced white text on a white card. */
.pk-section--dark .pk-card--dark,
.pk-page-hero--dark .pk-card--dark {
	border-color: color-mix(in srgb, var(--pk-white) 12%, transparent);
	background: color-mix(in srgb, var(--pk-white) 5%, transparent);
}

.pk-section--dark :where(.pk-card--dark) :where(h3, h4) { color: var(--pk-white); }

.pk-section--dark :where(.pk-card--dark) p {
	color: color-mix(in srgb, var(--pk-white) 70%, transparent);
}

.pk-section--dark .pk-card--dark .pk-card__icon {
	background: color-mix(in srgb, var(--pk-brand-500) 22%, transparent);
	color: var(--pk-brand-300);
}

/* Feature list ---------------------------------------------------------- */

.pk-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-checklist li {
	position: relative;
	margin: 0 0 var(--pk-space-3);
	padding-left: 1.875rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.pk-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1875rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--pk-brand-50);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178a66' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
}

.pk-section--dark .pk-checklist li::before {
	background-color: color-mix(in srgb, var(--pk-brand-500) 26%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd5ae' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.pk-checklist--2col {
	columns: 2;
	column-gap: var(--pk-space-8);
}

.pk-checklist--2col li {
	break-inside: avoid;
}

/* Tag pills -------------------------------------------------------------- */

.pk-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0.375rem 0.8125rem;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-full);
	background: var(--pk-gray-50);
	color: var(--pk-ink-800);
	font-size: var(--pk-text-xs);
	font-weight: 600;
	/* Explicit line-height: the inherited 1.65 made the text box taller than
	   the pill and pushed the label visibly off centre. */
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

/* Chip rows align on their centres, not their baselines. */
.pk-tags {
	align-items: center;
}

a.pk-tag:hover {
	border-color: var(--pk-brand-300);
	background: var(--pk-brand-50);
	color: var(--pk-brand-700);
}

.pk-section--dark .pk-tag {
	border-color: color-mix(in srgb, var(--pk-white) 14%, transparent);
	background: color-mix(in srgb, var(--pk-white) 6%, transparent);
	color: color-mix(in srgb, var(--pk-white) 80%, transparent);
}

/* ==========================================================================
   9. Steps, FAQ, pricing
   ========================================================================== */

.pk-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pk-space-6);
	counter-reset: pk-step;
}

.pk-step {
	position: relative;
	padding-top: var(--pk-space-6);
	border-top: 2px solid var(--pk-border);
}

.pk-step__num {
	display: block;
	margin-bottom: var(--pk-space-2);
	color: var(--pk-brand-500);
	font-size: var(--pk-text-sm);
	font-weight: 800;
	letter-spacing: 0.06em;
}

.pk-step h3 {
	margin: 0 0 var(--pk-space-2);
	font-size: var(--pk-text-xl);
}

.pk-step p {
	margin: 0;
	font-size: 0.9375rem;
}

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

.pk-faq {
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
	overflow: hidden;
}

.pk-faq__item + .pk-faq__item {
	border-top: 1px solid var(--pk-border);
}

.pk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pk-space-4);
	width: 100%;
	padding: var(--pk-space-5) var(--pk-space-6);
	border: 0;
	background: none;
	color: var(--pk-ink-900);
	font-family: inherit;
	font-size: var(--pk-text-lg);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--pk-dur) var(--pk-ease);
}

.pk-faq__q:hover { background: var(--pk-gray-50); }

.pk-faq__q svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--pk-brand-600);
	transition: transform var(--pk-dur) var(--pk-ease);
}

.pk-faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }

.pk-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pk-dur) var(--pk-ease);
}

.pk-faq__a.is-open { grid-template-rows: 1fr; }

.pk-faq__a > div {
	overflow: hidden;
}

.pk-faq__a p {
	margin: 0;
	padding: 0 var(--pk-space-6) var(--pk-space-5);
	max-width: 60rem;
}

/* Pricing --------------------------------------------------------------- */

.pk-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pk-space-6);
	align-items: start;
}

.pk-plan {
	display: flex;
	flex-direction: column;
	gap: var(--pk-space-5);
	padding: var(--pk-space-8) var(--pk-space-7, 1.75rem);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-xl);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow-sm);
}

.pk-plan--featured {
	border-color: var(--pk-brand-400);
	box-shadow: var(--pk-shadow-lg);
	transform: scale(1.015);
}

.pk-plan__flag {
	align-self: flex-start;
	padding: 0.25rem 0.6875rem;
	border-radius: var(--pk-radius-full);
	background: var(--pk-cta);
	color: var(--pk-white);
	font-size: var(--pk-text-xs);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pk-plan h3 {
	margin: 0;
	font-size: var(--pk-text-2xl);
}

.pk-plan__blurb {
	margin: 0;
	min-height: 3.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* The price block needs air above and below it, not just the flex gap. */
.pk-plan__priceblock {
	padding-block: var(--pk-space-2);
	border-top: 1px solid var(--pk-border);
}

.pk-plan__price {
	color: var(--pk-ink-900);
	font-size: var(--pk-text-3xl);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.pk-plan__period {
	display: block;
	margin-top: 0.25rem;
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
	font-weight: 500;
}

.pk-plan .pk-btn { width: 100%; }

.pk-plan .pk-checklist {
	margin-bottom: 0;
	padding-top: var(--pk-space-5);
	border-top: 1px solid var(--pk-border);
}

/* ==========================================================================
   10. Split feature blocks
   ========================================================================== */

.pk-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}

.pk-split--reverse > :first-child { order: 2; }

.pk-panel {
	padding: var(--pk-space-6);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-gray-50);
}

.pk-panel--flow {
	display: grid;
	gap: var(--pk-space-3);
}

.pk-flow-row {
	display: flex;
	align-items: center;
	gap: var(--pk-space-3);
	padding: var(--pk-space-4);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow-xs);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--pk-ink-800);
}

.pk-flow-row__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background: var(--pk-brand-50);
	color: var(--pk-brand-600);
}

.pk-flow-row__icon svg { width: 1rem; height: 1rem; }

.pk-flow-row__meta {
	margin-left: auto;
	color: var(--pk-muted);
	font-size: var(--pk-text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.pk-flow-arrow {
	display: grid;
	place-items: center;
	color: var(--pk-brand-400);
}

.pk-flow-arrow svg { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   11. CTA band
   ========================================================================== */

.pk-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	border-radius: var(--pk-radius-xl);
	background: linear-gradient(150deg, var(--pk-ink-900) 0%, var(--pk-brand-800) 100%);
	color: color-mix(in srgb, var(--pk-white) 80%, transparent);
	text-align: center;
	isolation: isolate;
}

.pk-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(36rem 22rem at 80% 0%, rgba(45, 212, 191, 0.28), transparent 62%);
}

.pk-cta h2 {
	max-width: 34rem;
	margin-inline: auto;
	color: var(--pk-white);
}

.pk-cta p {
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: var(--pk-space-8);
	color: color-mix(in srgb, var(--pk-white) 80%, transparent);
	font-size: var(--pk-text-lg);
}

.pk-cta .pk-btn-row { justify-content: center; }

.pk-cta__note {
	margin: var(--pk-space-5) 0 0;
	color: color-mix(in srgb, var(--pk-white) 60%, transparent);
	font-size: var(--pk-text-sm);
}

/* ==========================================================================
   12. Page hero (interior pages)
   ========================================================================== */

.pk-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	border-bottom: 1px solid var(--pk-border);
	background: linear-gradient(180deg, var(--pk-brand-50), var(--pk-white));
}

.pk-page-hero__inner { max-width: 52rem; }

.pk-page-hero h1 {
	margin-bottom: var(--pk-space-4);
	font-size: var(--pk-display-2);
}

.pk-page-hero .pk-lead { font-size: var(--pk-text-xl); }

.pk-page-hero--dark {
	border-bottom: 0;
	background: var(--pk-ink-900);
	color: color-mix(in srgb, var(--pk-white) 76%, transparent);
}

.pk-page-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(46rem 26rem at 82% -20%, rgba(29, 165, 122, 0.3), transparent 62%);
}

.pk-page-hero--dark > * { position: relative; }
.pk-page-hero--dark h1 { color: var(--pk-white); }

.pk-page-hero--dark .pk-lead {
	color: color-mix(in srgb, var(--pk-white) 76%, transparent);
}

/* Breadcrumbs ----------------------------------------------------------- */

.pk-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4375rem;
	margin-bottom: var(--pk-space-4);
	font-size: var(--pk-text-sm);
	color: var(--pk-muted);
}

.pk-crumbs a {
	color: var(--pk-muted);
	font-weight: 600;
	text-decoration: none;
}

.pk-crumbs a:hover { color: var(--pk-brand-600); }

.pk-crumbs__sep { opacity: 0.5; }

.pk-page-hero--dark .pk-crumbs,
.pk-page-hero--dark .pk-crumbs a {
	color: color-mix(in srgb, var(--pk-white) 60%, transparent);
}

/* ==========================================================================
   13. Editorial content (blog, docs, legal)
   ========================================================================== */

.pk-prose {
	max-width: 46rem;
	font-size: var(--pk-text-lg);
	line-height: 1.75;
}

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

.pk-prose h2 {
	margin-top: var(--pk-space-12);
	font-size: var(--pk-text-3xl);
}

.pk-prose h3 {
	margin-top: var(--pk-space-10);
	font-size: var(--pk-text-2xl);
}

.pk-prose h4 {
	margin-top: var(--pk-space-8);
	font-size: var(--pk-text-xl);
}

.pk-prose img,
.pk-prose figure {
	margin-block: var(--pk-space-8);
	border-radius: var(--pk-radius);
}

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

.pk-prose table {
	width: 100%;
	margin-block: var(--pk-space-8);
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	overflow: hidden;
	font-size: 0.9375rem;
}

.pk-prose :where(th, td) {
	padding: var(--pk-space-3) var(--pk-space-4);
	border-bottom: 1px solid var(--pk-border);
	text-align: left;
	vertical-align: top;
}

/* Column separators, without a stray rule on the right-hand edge. */
.pk-prose :where(th, td):not(:last-child) {
	border-right: 1px solid var(--pk-border);
}

/* No rule under the final row — the table's own border closes the box. */
.pk-prose tr:last-child :where(th, td) {
	border-bottom: 0;
}

.pk-prose th {
	background: var(--pk-gray-50);
	color: var(--pk-ink-900);
	font-weight: 700;
}

.pk-prose thead th {
	border-bottom: 1px solid var(--pk-border-strong);
}

.pk-prose pre {
	margin-block: var(--pk-space-6);
	padding: var(--pk-space-5);
	overflow-x: auto;
	border-radius: var(--pk-radius);
	background: var(--pk-ink-900);
	color: var(--pk-gray-100);
	font-family: var(--pk-font-mono);
	font-size: var(--pk-text-sm);
	line-height: 1.6;
}

.pk-prose pre code {
	padding: 0;
	background: none;
	color: inherit;
}

/* Availability matrix marks. */
.pk-tick {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--pk-brand-50);
	color: var(--pk-brand-700);
}

.pk-tick .pk-icon {
	width: 0.875rem;
	height: 0.875rem;
	stroke-width: 3;
}

.pk-dash {
	color: var(--pk-gray-400);
	font-weight: 700;
}

/* Wide tables must scroll rather than break the page. */
/* The wrapper only provides horizontal scroll; the table draws its own box,
   so the wrapper must not add a second border around it. */
.pk-table-scroll {
	margin-block: var(--pk-space-8);
	overflow-x: auto;
}

.pk-table-scroll table {
	margin: 0;
	min-width: 34rem;
}

/* Article layout with sidebar ------------------------------------------ */

.pk-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}

.pk-sidebar {
	position: sticky;
	top: calc(var(--pk-header-h) + var(--pk-space-6));
	display: grid;
	gap: var(--pk-space-6);
}

.pk-widget {
	padding: var(--pk-space-5);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
}

.pk-widget__title {
	margin: 0 0 var(--pk-space-3);
	font-size: var(--pk-text-base);
	font-weight: 800;
}

.pk-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.pk-widget li + li {
	margin-top: var(--pk-space-2);
	padding-top: var(--pk-space-2);
	border-top: 1px solid var(--pk-border);
}

.pk-widget a { text-decoration: none; font-weight: 600; }

/* Table of contents ---------------------------------------------------- */

.pk-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.pk-toc__list li { margin: 0; }

.pk-toc__list a {
	display: block;
	padding: 0.375rem 0 0.375rem 0.75rem;
	border-left: 2px solid var(--pk-border);
	color: var(--pk-body);
	font-weight: 600;
	text-decoration: none;
}

.pk-toc__list a:hover,
.pk-toc__list a.is-active {
	border-left-color: var(--pk-brand-500);
	color: var(--pk-brand-700);
}

.pk-toc__list .is-h3 a { padding-left: 1.5rem; font-weight: 500; }

/* Post cards ----------------------------------------------------------- */

.pk-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
	transition: transform var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease);
}

.pk-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pk-shadow-lg);
}

.pk-post-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pk-gray-100);
}

.pk-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pk-ease);
}

.pk-post-card:hover .pk-post-card__media img { transform: scale(1.04); }

.pk-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--pk-space-2);
	padding: var(--pk-space-5);
}

.pk-post-card h3 {
	margin: 0;
	font-size: var(--pk-text-xl);
}

.pk-post-card h3 a {
	color: inherit;
	text-decoration: none;
}

.pk-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4375rem;
	align-items: center;
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
}

.pk-meta__sep { opacity: 0.5; }

/* Pagination ----------------------------------------------------------- */

.pk-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-2);
	justify-content: center;
	margin-top: var(--pk-space-12);
}

.pk-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.625rem;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-sm);
	color: var(--pk-ink-800);
	font-weight: 700;
	text-decoration: none;
}

.pk-pagination .page-numbers:hover {
	border-color: var(--pk-brand-300);
	background: var(--pk-brand-50);
}

.pk-pagination .page-numbers.current {
	border-color: var(--pk-cta);
	background: var(--pk-cta);
	color: var(--pk-white);
}

/* ==========================================================================
   14. Help hub
   ========================================================================== */

.pk-docsearch {
	position: relative;
	max-width: 34rem;
	margin-top: var(--pk-space-6);
}

.pk-docsearch input[type="search"],
.pk-docsearch input[type="text"] {
	width: 100%;
	padding: 1rem 1.125rem 1rem 3rem;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-full);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow);
	font-family: inherit;
	font-size: var(--pk-text-base);
	color: var(--pk-ink-900);
}

.pk-docsearch input::placeholder { color: var(--pk-gray-400); }

.pk-docsearch__icon {
	position: absolute;
	left: 1.125rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	color: var(--pk-gray-400);
	pointer-events: none;
}

.pk-doc-cat {
	display: flex;
	flex-direction: column;
	gap: var(--pk-space-3);
	padding: var(--pk-space-6);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
	transition: box-shadow var(--pk-dur) var(--pk-ease), border-color var(--pk-dur) var(--pk-ease);
}

.pk-doc-cat:hover {
	border-color: var(--pk-brand-200);
	box-shadow: var(--pk-shadow);
}

.pk-doc-cat__count {
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
	font-weight: 600;
}

.pk-doc-cat ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.pk-doc-cat li { margin: 0; }

.pk-doc-cat li a {
	display: block;
	padding: 0.375rem 0;
	color: var(--pk-body);
	font-weight: 600;
	text-decoration: none;
}

.pk-doc-cat li a:hover { color: var(--pk-brand-600); }

/* Help-centre article layout ------------------------------------------- */

.pk-doc-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) 220px;
	gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
	align-items: start;
}

.pk-doc-nav__inner,
.pk-doc-toc__inner {
	position: sticky;
	top: calc(var(--pk-header-h) + var(--pk-space-6));
	max-height: calc(100vh - var(--pk-header-h) - 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pk-doc-nav__title {
	margin: 0 0 var(--pk-space-2);
	color: var(--pk-ink-900);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pk-doc-nav__title a {
	color: inherit;
	text-decoration: none;
}

.pk-doc-nav__title a:hover { color: var(--pk-brand-600); }

.pk-doc-nav__title + .pk-doc-nav__list { margin-bottom: var(--pk-space-6); }
.pk-doc-nav__title:not(:first-child) { margin-top: var(--pk-space-5); }

.pk-doc-nav__list {
	margin: 0 0 var(--pk-space-5);
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--pk-border);
}

.pk-doc-nav__list li { margin: 0; }

.pk-doc-nav__list a {
	display: block;
	padding: 0.4375rem 0 0.4375rem 0.75rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--pk-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
}

.pk-doc-nav__list a:hover {
	border-left-color: var(--pk-brand-300);
	color: var(--pk-brand-700);
}

.pk-doc-nav__list a.is-active {
	border-left-color: var(--pk-brand-500);
	color: var(--pk-brand-700);
	background: var(--pk-brand-50);
}

.pk-doc-body { max-width: none; }

/* Previous / next pager ------------------------------------------------- */

.pk-doc-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pk-space-4);
	margin-top: var(--pk-space-12);
	padding-top: var(--pk-space-8);
	border-top: 1px solid var(--pk-border);
}

.pk-doc-pager__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--pk-space-4) var(--pk-space-5);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	background: var(--pk-white);
	text-decoration: none;
	transition: border-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease);
}

.pk-doc-pager__link:hover {
	border-color: var(--pk-brand-300);
	box-shadow: var(--pk-shadow-sm);
}

.pk-doc-pager__link span {
	color: var(--pk-muted);
	font-size: var(--pk-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pk-doc-pager__link strong {
	color: var(--pk-ink-900);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.pk-doc-pager__link--next {
	text-align: right;
	grid-column: 2;
}

/* Was this helpful ------------------------------------------------------ */

.pk-doc-help {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-4);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--pk-space-8);
	padding: var(--pk-space-5) var(--pk-space-6);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-gray-50);
}

.pk-doc-help p {
	margin: 0;
	font-size: 0.9375rem;
	max-width: 34rem;
}

/* Callout --------------------------------------------------------------- */

.pk-callout {
	margin-block: var(--pk-space-8);
	padding: var(--pk-space-5) var(--pk-space-6);
	border: 1px solid var(--pk-brand-200);
	border-left: 3px solid var(--pk-brand-500);
	border-radius: var(--pk-radius);
	background: var(--pk-brand-50);
}

.pk-callout p {
	margin: 0;
	color: var(--pk-ink-800);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.pk-callout p + p { margin-top: var(--pk-space-3); }

/* ==========================================================================
   14a. Legal documents
   ========================================================================== */

.pk-legal__updated {
	margin: var(--pk-space-4) 0 0;
	color: var(--pk-muted);
	font-size: var(--pk-text-sm);
	font-weight: 600;
}

.pk-legal-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

.pk-legal-toc__inner {
	position: sticky;
	top: calc(var(--pk-header-h) + var(--pk-space-6));
	max-height: calc(100vh - var(--pk-header-h) - 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--pk-space-5);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-gray-50);
}

.pk-legal-toc__list {
	margin: 0;
	padding-left: 1.125rem;
	font-size: 0.875rem;
}

.pk-legal-toc__list li { margin: 0 0 0.5rem; }

.pk-legal-toc__list a {
	color: var(--pk-body);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.pk-legal-toc__list a:hover,
.pk-legal-toc__list a.is-active { color: var(--pk-brand-700); }

.pk-legal-body { max-width: 46rem; }

.pk-legal-body h2 {
	margin-top: var(--pk-space-12);
	padding-top: var(--pk-space-6);
	border-top: 1px solid var(--pk-border);
	font-size: var(--pk-text-2xl);
	scroll-margin-top: calc(var(--pk-header-h) + 1.5rem);
}

.pk-legal-body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.pk-legal-body h3 {
	margin-top: var(--pk-space-8);
	font-size: var(--pk-text-lg);
}

/* ==========================================================================
   14b. Diagrams
   ========================================================================== */

.pk-figure-wrap {
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
	overflow-x: auto;
}

.pk-figure-wrap--dark {
	border-color: color-mix(in srgb, var(--pk-white) 12%, transparent);
	background: color-mix(in srgb, var(--pk-white) 4%, transparent);
}

/* The diagram scales with its container but never below a readable width;
   the wrapper scrolls horizontally instead of squashing the text. */
.pk-figure {
	display: block;
	width: 100%;
	height: auto;
}

.pk-figure--ledger { min-width: 460px; max-width: 620px; margin-inline: auto; }
.pk-figure--chain,
.pk-figure--print,
.pk-figure--stay,
.pk-figure--platform { min-width: 720px; }

/* Diagram parts. Colours come from tokens so both themes work. */
.pk-dg-line { stroke: var(--pk-border-strong); }
.pk-dg-accent { color: var(--pk-brand-500); }

.pk-dg-card {
	fill: var(--pk-white);
	stroke: var(--pk-border);
	stroke-width: 1;
}

.pk-dg-band {
	fill: var(--pk-gray-50);
	stroke: var(--pk-border);
	stroke-width: 1;
}

.pk-dg-node {
	fill: var(--pk-brand-50);
	stroke: var(--pk-brand-200);
	stroke-width: 1;
}

.pk-dg-hub { fill: var(--pk-ink-900); }
.pk-dg-hub-ring { stroke: var(--pk-brand-400); }

.pk-dg-badge { fill: var(--pk-cta); }
.pk-dg-dot { fill: var(--pk-brand-100); stroke: var(--pk-brand-300); stroke-width: 1.5; }

.pk-dg-hub-label {
	fill: #fff;
	font-family: var(--pk-font);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pk-dg-hub-sub {
	fill: color-mix(in srgb, #fff 62%, transparent);
	font-family: var(--pk-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pk-dg-node-label {
	fill: var(--pk-ink-900);
	font-family: var(--pk-font);
	font-size: 13px;
	font-weight: 700;
}

.pk-dg-card-title {
	fill: var(--pk-ink-900);
	font-family: var(--pk-font);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pk-dg-badge-label {
	fill: #fff;
	font-family: var(--pk-font);
	font-size: 13px;
	font-weight: 800;
}

.pk-dg-dot-label {
	fill: var(--pk-brand-800);
	font-family: var(--pk-font);
	font-size: 13px;
	font-weight: 800;
}

.pk-dg-band-label,
.pk-dg-foot {
	fill: var(--pk-muted);
	font-family: var(--pk-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pk-dg-foot { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Text inside foreignObject inherits normal CSS, which is why it is used for
   wrapping body copy that <text> cannot wrap. */
.pk-dg-fo {
	font-family: var(--pk-font);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pk-body);
}

.pk-dg-fo--center { text-align: center; }

.pk-section--dark .pk-dg-card { fill: color-mix(in srgb, #fff 8%, transparent); stroke: color-mix(in srgb, #fff 16%, transparent); }
.pk-section--dark .pk-dg-band { fill: color-mix(in srgb, #fff 5%, transparent); stroke: color-mix(in srgb, #fff 12%, transparent); }
.pk-section--dark .pk-dg-node { fill: color-mix(in srgb, var(--pk-brand-500) 22%, transparent); stroke: color-mix(in srgb, var(--pk-brand-300) 45%, transparent); }
.pk-section--dark .pk-dg-hub { fill: var(--pk-ink-950); }
.pk-section--dark .pk-dg-line { stroke: color-mix(in srgb, #fff 24%, transparent); }
.pk-section--dark .pk-dg-accent { color: var(--pk-brand-300); }
.pk-section--dark .pk-dg-node-label { fill: #fff; }
.pk-section--dark .pk-dg-card-title { fill: #fff; }
.pk-section--dark .pk-dg-fo { color: color-mix(in srgb, #fff 74%, transparent); }
.pk-section--dark :where(.pk-dg-band-label, .pk-dg-foot) { fill: color-mix(in srgb, #fff 60%, transparent); }

/* ==========================================================================
   14c. Numbered step list, problem cards, comparison
   ========================================================================== */

.pk-steplist {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pk-sl;
}

.pk-steplist li {
	position: relative;
	margin: 0 0 var(--pk-space-3);
	padding-left: 2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	counter-increment: pk-sl;
}

.pk-steplist li::before {
	content: counter(pk-sl);
	position: absolute;
	left: 0;
	top: 0.0625rem;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--pk-brand-50);
	color: var(--pk-brand-700);
	font-size: var(--pk-text-xs);
	font-weight: 800;
}

.pk-card--problem {
	border-left: 3px solid var(--pk-border-strong);
	background: var(--pk-gray-25);
}

.pk-tag--light { background: var(--pk-white); }

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

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

.pk-compare__row {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pk-space-5);
	align-items: start;
	padding: var(--pk-space-6);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-white);
}

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

.pk-compare__head h3 {
	margin: 0;
	font-size: var(--pk-text-lg);
	letter-spacing: -0.015em;
}

.pk-compare__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--pk-radius);
	background: var(--pk-brand-50);
	color: var(--pk-brand-700);
}

.pk-compare__icon svg { width: 1.25rem; height: 1.25rem; }

.pk-compare__cell {
	padding: var(--pk-space-4) var(--pk-space-5);
	border-radius: var(--pk-radius);
}

.pk-compare__cell p:last-child { margin-bottom: 0; }

.pk-compare__cell p:not(.pk-compare__label) {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.pk-compare__cell--usually {
	background: var(--pk-gray-50);
	border: 1px solid var(--pk-border);
}

.pk-compare__cell--ours {
	background: var(--pk-brand-50);
	border: 1px solid var(--pk-brand-200);
}

.pk-compare__label {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	margin-bottom: var(--pk-space-2);
	font-size: var(--pk-text-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pk-compare__label svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
.pk-compare__cell--usually .pk-compare__label { color: var(--pk-gray-600); }
.pk-compare__cell--ours .pk-compare__label { color: var(--pk-brand-700); }

.pk-section--dark .pk-compare__row {
	border-color: color-mix(in srgb, var(--pk-white) 12%, transparent);
	background: color-mix(in srgb, var(--pk-white) 4%, transparent);
}

.pk-section--dark .pk-compare__cell--usually {
	border-color: color-mix(in srgb, var(--pk-white) 10%, transparent);
	background: color-mix(in srgb, var(--pk-white) 4%, transparent);
}

.pk-section--dark .pk-compare__cell--ours {
	border-color: color-mix(in srgb, var(--pk-brand-400) 40%, transparent);
	background: color-mix(in srgb, var(--pk-brand-500) 14%, transparent);
}

.pk-section--dark :where(.pk-compare__cell--usually, .pk-compare__cell--ours) p:not(.pk-compare__label) {
	color: color-mix(in srgb, var(--pk-white) 76%, transparent);
}

.pk-section--dark .pk-compare__cell--usually .pk-compare__label { color: color-mix(in srgb, var(--pk-white) 62%, transparent); }
.pk-section--dark .pk-compare__cell--ours .pk-compare__label { color: var(--pk-brand-300); }

.pk-section--dark .pk-compare__icon {
	background: color-mix(in srgb, var(--pk-brand-500) 22%, transparent);
	color: var(--pk-brand-300);
}

/* ==========================================================================
   15. Forms (Contact Form 7 / WPForms friendly)
   ========================================================================== */

.pk-form-card {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-xl);
	background: var(--pk-white);
	box-shadow: var(--pk-shadow);
}

.pk-body :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], select, textarea) {
	width: 100%;
	padding: 0.75rem 0.9375rem;
	border: 1px solid var(--pk-border-strong);
	border-radius: var(--pk-radius-sm);
	background: var(--pk-white);
	color: var(--pk-ink-900);
	font-family: inherit;
	font-size: var(--pk-text-base);
	line-height: 1.5;
	transition: border-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease);
}

.pk-body :where(input, select, textarea):focus {
	border-color: var(--pk-brand-500);
	box-shadow: 0 0 0 3px var(--pk-brand-100);
	outline: none;
}

.pk-body textarea { min-height: 8rem; resize: vertical; }

.pk-body label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--pk-ink-900);
	font-size: 0.9375rem;
	font-weight: 700;
}

.pk-body :where(input[type="submit"], button[type="submit"], .wpcf7-submit) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0.8125rem 1.625rem;
	border: 0;
	border-radius: var(--pk-radius-full);
	background: var(--pk-cta);
	color: var(--pk-white);
	font-family: inherit;
	font-size: var(--pk-text-base);
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--pk-shadow-brand);
	transition: background-color var(--pk-dur) var(--pk-ease), transform var(--pk-dur) var(--pk-ease);
}

.pk-body :where(input[type="submit"], button[type="submit"], .wpcf7-submit):hover {
	background: var(--pk-cta-hover);
	transform: translateY(-1px);
}

/* CF7 renders <label>Text<br />[input]</label>, so the label's own
   margin-bottom cannot separate the two. Space the control wrapper instead. */
.pk-body .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.625rem;
}

.pk-body label > br {
	display: none;
}

.pk-body .wpcf7 p {
	margin-bottom: 0;
}

.pk-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pk-space-5);
}

.pk-form-grid .pk-form-full { grid-column: 1 / -1; }

.wpcf7 form .wpcf7-response-output {
	margin: var(--pk-space-4) 0 0;
	padding: var(--pk-space-3) var(--pk-space-4);
	border-width: 1px;
	border-radius: var(--pk-radius-sm);
	font-size: 0.9375rem;
}

.wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: var(--pk-text-sm);
	font-weight: 600;
}

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

.pk-footer {
	padding-top: var(--pk-space-20);
	background: var(--pk-ink-950);
	color: color-mix(in srgb, var(--pk-white) 64%, transparent);
	font-size: 0.9375rem;
}

.pk-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: var(--pk-space-8);
	padding-bottom: var(--pk-space-16);
}

.pk-footer__brand {
	max-width: 22rem;
}

.pk-footer__brand img {
	max-height: 44px;
	width: auto;
	margin-bottom: var(--pk-space-4);
}

.pk-footer__brand p {
	margin: 0 0 var(--pk-space-5);
	line-height: 1.7;
}

.pk-footer h3 {
	margin: 0 0 var(--pk-space-4);
	color: var(--pk-white);
	font-size: var(--pk-text-sm);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pk-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-footer li { margin: 0 0 0.6875rem; }

.pk-footer a {
	color: color-mix(in srgb, var(--pk-white) 64%, transparent);
	text-decoration: none;
}

.pk-footer a:hover { color: var(--pk-white); }

.pk-social {
	display: flex;
	gap: var(--pk-space-2);
}

.pk-social a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--pk-white) 14%, transparent);
	border-radius: 10px;
	color: color-mix(in srgb, var(--pk-white) 70%, transparent);
	transition: background-color var(--pk-dur) var(--pk-ease), border-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}

.pk-social a:hover {
	border-color: var(--pk-brand-500);
	background: var(--pk-brand-500);
	color: var(--pk-white);
}

.pk-social svg { width: 1.125rem; height: 1.125rem; }

.pk-footer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-3) var(--pk-space-6);
	align-items: center;
	padding-block: var(--pk-space-6);
	border-top: 1px solid color-mix(in srgb, var(--pk-white) 10%, transparent);
}

.pk-footer__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: color-mix(in srgb, var(--pk-white) 62%, transparent);
	font-size: var(--pk-text-sm);
	font-weight: 600;
}

.pk-footer__trust-item svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--pk-brand-300);
}

.pk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-4);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--pk-space-6);
	border-top: 1px solid color-mix(in srgb, var(--pk-white) 10%, transparent);
	font-size: var(--pk-text-sm);
}

.pk-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-footer__legal li { margin: 0; }

/* ==========================================================================
   17. Utilities and motion
   ========================================================================== */

.pk-center { text-align: center; }
.pk-mt-0 { margin-top: 0; }
.pk-mb-0 { margin-bottom: 0; }
.pk-mt-6 { margin-top: var(--pk-space-6); }
.pk-mt-8 { margin-top: var(--pk-space-8); }
.pk-mt-12 { margin-top: var(--pk-space-12); }

.pk-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--pk-ease), transform 0.6s var(--pk-ease);
}

.pk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Never let the reveal animation hide content if JS fails to load. */
.no-js .pk-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.pk-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1280px) {
	/* The on-page table of contents is the first thing to go. */
	.pk-doc-layout {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.pk-doc-toc { display: none; }
}

@media (max-width: 1180px) {
	.pk-mega {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pk-mega__feature {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: var(--pk-space-5);
	}

	.pk-mega__feature .pk-btn { margin: 0; flex: none; }
}

@media (max-width: 1120px) {
	/* Comparison rows: the label moves above the two cells rather than
	   holding a fixed 260px column that squeezes them to nothing. */
	.pk-compare__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pk-compare__head {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: var(--pk-space-3);
	}
}

@media (max-width: 1024px) {
	:root { --pk-header-h: 68px; }

	.pk-nav,
	.pk-header__actions { display: none; }

	.pk-nav-toggle { display: grid; }

	.pk-hero__grid,
	.pk-split,
	.pk-grid--split,
	.pk-article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.pk-split--reverse > :first-child { order: 0; }

	.pk-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pk-plan--featured { transform: none; }

	.pk-legal-layout { grid-template-columns: minmax(0, 1fr); }

	.pk-legal-toc__inner {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Docs on one column. The article comes first — a long category list above
	   it would push the answer the reader came for off the screen. */
	.pk-doc-layout { grid-template-columns: minmax(0, 1fr); }

	.pk-doc-body { order: 1; }

	.pk-doc-nav {
		order: 2;
		margin-top: var(--pk-space-8);
		padding: var(--pk-space-5) var(--pk-space-6);
		border: 1px solid var(--pk-border);
		border-radius: var(--pk-radius-lg);
		background: var(--pk-gray-50);
	}

	.pk-doc-nav::before {
		content: "All guides";
		display: block;
		margin-bottom: var(--pk-space-4);
		color: var(--pk-ink-900);
		font-size: var(--pk-text-lg);
		font-weight: 800;
		letter-spacing: -0.015em;
	}

	/* No nested scroll area on touch: let the page scroll instead. */
	.pk-doc-nav__inner {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Dropdown panels never render below the nav breakpoint, but make sure
	   a stale is-open class cannot leave one visible. */
	.pk-nav__panel { display: none; }
}

@media (max-width: 820px) {
	.pk-grid--3,
	.pk-steps,
	.pk-plans {
		grid-template-columns: minmax(0, 1fr);
	}

	.pk-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pk-footer__brand { grid-column: 1 / -1; }
	.pk-checklist--2col { columns: 1; }
}

@media (max-width: 600px) {
	.pk-grid--2,
	.pk-grid--4,
	.pk-shell__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.pk-stats {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--pk-space-6);
		gap: var(--pk-space-5);
	}

	.pk-stat { text-align: left; }

	.pk-footer__top { grid-template-columns: minmax(0, 1fr); }

	.pk-btn-row .pk-btn { width: 100%; }

	.pk-faq__q { font-size: var(--pk-text-base); padding-inline: var(--pk-space-5); }
	.pk-faq__a p { padding-inline: var(--pk-space-5); }

	.pk-sidebar { grid-template-columns: minmax(0, 1fr); }

	/* Docs pager stacks; "next" must not stay pinned to column 2. */
	.pk-doc-pager { grid-template-columns: minmax(0, 1fr); }

	.pk-doc-pager__link--next {
		grid-column: 1;
		text-align: left;
	}

	.pk-compare__row {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--pk-space-5);
	}

	.pk-doc-help { flex-direction: column; align-items: flex-start; }
	.pk-doc-help .pk-btn { width: 100%; }

	/* Prose scales down so long headings do not overflow narrow screens. */
	.pk-prose { font-size: var(--pk-text-base); }
	.pk-prose h2 { font-size: var(--pk-text-2xl); }
	.pk-prose h3 { font-size: var(--pk-text-xl); }

	.pk-cta { padding-inline: var(--pk-space-5); }

	/* Comfortable touch targets throughout. */
	.pk-drawer__link { min-height: 52px; }
	.pk-drawer__sub a { min-height: 44px; display: flex; align-items: center; }
	.pk-social a { width: 2.75rem; height: 2.75rem; }
}

/* Very narrow phones ---------------------------------------------------- */

@media (max-width: 380px) {
	:root { --pk-gutter: 1rem; }

	.pk-hero__lead,
	.pk-lead { font-size: var(--pk-text-base); }

	.pk-kpi__value { font-size: var(--pk-text-xl); }
	.pk-badge { font-size: var(--pk-text-xs); }
}

/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
	.pk-header,
	.pk-footer,
	.pk-announce,
	.pk-drawer,
	.pk-cta,
	.pk-nav-toggle {
		display: none !important;
	}

	.pk-body { color: #000; background: #fff; }
	.pk-prose { max-width: none; font-size: 11pt; }
}