/*!
 * CreditKit Pro — Design System v8 (Brand Direction v1)
 *
 * Built on "the ledger line": a 1px horizontal hairline with emerald nodes
 * is the brand's recurring shape. Every divider is one. The hero sits on
 * one. The "manifesto" sits between two. The receipt wall + event log are
 * its children.
 *
 * Light-default, with aggressive dark moments at near-black #05080f.
 * Geist + Inter pair (Geist for display, Inter for body, Geist Mono for
 * every number / event name / code). Drop indigo entirely. Amber only
 * for "needs attention" states.
 *
 * Loaded from PCS_License_Server\includes\marketing\class-pcs-ls-tokens.php
 */

/* ================================================================
 * 0. WEB FONTS — Geist + Geist Mono from Vercel's CDN
 * ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ================================================================
 * 1. TOKENS
 * ================================================================ */

:root {
	/* Color — brand */
	--ck-color-primary:        #10b981;
	--ck-color-primary-hover:  #059669;
	--ck-color-primary-active: #047857;
	--ck-color-primary-soft:   #ecfdf5;
	--ck-color-primary-ring:   rgba(16, 185, 129, .28);
	--ck-color-primary-glow:   rgba(16, 185, 129, .35);
	--ck-color-primary-on-dark:#34d399;
	--ck-color-warning:        #f59e0b;
	--ck-color-warning-soft:   #fef3c7;

	/* Color — light surfaces (cool-shifted, biased neutral) */
	--ck-color-bg:             #ffffff;
	--ck-color-bg-subtle:      #fafbfc;
	--ck-color-bg-muted:       #f1f3f5;

	/* Color — dark surfaces (near-black with blue cast — premium) */
	--ck-dark-bg:              #05080f;
	--ck-dark-surface:         #0b101a;
	--ck-dark-surface-2:       #131a28;
	--ck-dark-border:          #1a2236;
	--ck-dark-text:            #e6ebf2;
	--ck-dark-text-mute:       #7a8599;

	/* Color — light text */
	--ck-color-text-default:   #0f172a;
	--ck-color-text-strong:    #020617;
	--ck-color-text-muted:     #475569;
	--ck-color-text-subtle:    #94a3b8;
	--ck-color-text-on-primary:#ffffff;

	/* Color — borders */
	--ck-color-border-subtle:  #e6e9ee;
	--ck-color-border-default: #cbd5e1;

	/* Typography */
	--ck-font-display: 'Geist', system-ui, -apple-system, sans-serif;
	--ck-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
	--ck-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

	/* Type scale — display = Geist, body = Inter */
	--ck-text-display:  clamp(52px, 6vw, 88px);
	--ck-text-h1:       clamp(40px, 4.4vw, 64px);
	--ck-text-h2:       clamp(28px, 3vw, 44px);
	--ck-text-h3:       1.375rem;
	--ck-text-body-lg:  1.1875rem;
	--ck-text-body:     1rem;
	--ck-text-small:    0.875rem;
	--ck-text-eyebrow:  0.75rem;

	/* Spacing (4-base) */
	--ck-space-1: 4px;
	--ck-space-2: 8px;
	--ck-space-3: 16px;
	--ck-space-4: 24px;
	--ck-space-5: 32px;
	--ck-space-6: 48px;
	--ck-space-7: 80px;
	--ck-space-8: 120px;

	/* Radius */
	--ck-radius-sm:   6px;
	--ck-radius-md:   10px;
	--ck-radius-lg:   14px;
	--ck-radius-xl:   20px;
	--ck-radius-pill: 999px;

	/* Shadow — slate-tinted */
	--ck-shadow-sm:      0 1px 2px rgba(15, 23, 42, .06);
	--ck-shadow-md:      0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
	--ck-shadow-lg:      0 12px 32px rgba(15, 23, 42, .08), 0 4px 8px rgba(15, 23, 42, .04);
	--ck-shadow-frame:   0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .06);
	--ck-shadow-primary: 0 8px 24px rgba(16, 185, 129, .28);

	/* Motion — single easing for the brand */
	--ck-ease:       cubic-bezier(.2, .8, .2, 1);
	--ck-dur-fast:   200ms;
	--ck-dur:        400ms;
	--ck-dur-slow:   600ms;
}

/* ================================================================
 * 2. ROOT CLEANUP — kill the Kadence dark wrapper above the hero
 * ================================================================ */

body.home, body.page { background: var(--ck-color-bg); }

.site-content,
.site-content > article,
article.entry,
article.entry.content-bg,
.entry.content-bg {
	background: var(--ck-color-bg) !important;
}
/* First child gets white EXCEPT the hero, which owns its own gradient. */
.entry-content > *:first-child:not(.ck-hero) {
	background: var(--ck-color-bg) !important;
}
.site-content { padding-top: 0 !important; }
.content-area,
#primary.content-area { margin: 0 !important; padding: 0 !important; }
.entry-content, .entry-content-wrap { background: var(--ck-color-bg); }
.entry-content > *:first-child {
	margin-top: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hide site-title text next to logo */
.site-branding .site-title-wrap,
.site-branding p.site-title,
.site-branding .site-description {
	display: none !important;
}

/* ================================================================
 * 3. TYPOGRAPHY — Geist display + Inter body + Geist Mono numbers
 * ================================================================ */

body {
	font-family: var(--ck-font-sans);
	font-feature-settings: 'cv11', 'ss01';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--ck-color-text-muted);
	font-size: var(--ck-text-body);
	line-height: 1.65;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--ck-font-display);
	color: var(--ck-color-text-strong);
	font-feature-settings: 'ss01', 'ss02', 'cv11';
}

.entry-content h1 {
	font-size: var(--ck-text-h1);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
}
.entry-content h2 {
	font-size: var(--ck-text-h2);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
}
.entry-content h3 {
	font-size: var(--ck-text-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.entry-content p { color: var(--ck-color-text-muted); max-width: 62ch; }

/* Tabular numerals on all amounts, event names, etc. */
.ck-mono, .ck-amount, .ck-event-name, code, pre, .ck-stats .num, .ck-step-num {
	font-family: var(--ck-font-mono);
	font-feature-settings: 'tnum', 'zero';
	font-variant-numeric: tabular-nums;
}

/* ================================================================
 * 4. BRAND SIGNATURE — highlighter underline on key nouns + eyebrow
 * ================================================================ */

.entry-content .ck-accent,
.entry-content em.ck-accent,
.entry-content span.ck-accent {
	color: var(--ck-color-primary);
	font-style: normal;
	background: linear-gradient(180deg, transparent 62%, rgba(16, 185, 129, .18) 62%);
	padding: 0 0.06em;
}

.entry-content .ck-eyebrow {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: var(--ck-text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-color-primary);
	margin-bottom: 14px;
	line-height: 1.4;
}

/* ================================================================
 * 5. THE LEDGER LINE — brand's shape language
 * ================================================================ */

/* A single 1px hairline with emerald edges fading in/out. Optional
 * nodes (filled dots) sit on it at percent offsets. */
.ck-ledger-line {
	position: relative;
	width: 100%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--ck-color-border-subtle) 8%,
		var(--ck-color-border-subtle) 92%,
		transparent 100%
	);
	margin: 0;
}
.ck-ledger-line.ck-ledger-emerald {
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--ck-color-primary) 8%,
		var(--ck-color-primary) 92%,
		transparent 100%
	);
	opacity: 0.7;
}

/* A node = a filled circle sitting ON the line. Position via inline style:
 *   <span class="ck-ledger-node" style="left:32%"></span>
 * Place inside .ck-ledger-line. */
.ck-ledger-node {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--ck-color-primary);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 4px var(--ck-color-bg), 0 0 0 5px var(--ck-color-primary-soft);
}
.ck-ledger-node.ck-ledger-node-mute {
	background: var(--ck-color-border-default);
	box-shadow: 0 0 0 4px var(--ck-color-bg), 0 0 0 5px var(--ck-color-border-subtle);
}
.ck-ledger-node.ck-ledger-node-pulse {
	animation: ck-node-pulse 4s ease-in-out infinite;
}
@keyframes ck-node-pulse {
	0%, 70%, 100% { transform: translate(-50%, -50%) scale(1); }
	75%           { transform: translate(-50%, -50%) scale(1.4); }
}

/* Section divider: replace standard hairline borders with the ledger line */
.entry-content > .wp-block-group + .wp-block-group {
	border-top: 0 !important;
}
.entry-content > .wp-block-group + .wp-block-group::before {
	content: "";
	display: block;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	height: 1px;
	background: linear-gradient(
		90deg, transparent 0%,
		var(--ck-color-border-subtle) 8%,
		var(--ck-color-border-subtle) 92%, transparent 100%
	);
}

/* ================================================================
 * 6. HEADER — sleek sticky with backdrop-blur
 * ================================================================ */

#masthead.site-header,
.site-header {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ck-color-border-subtle);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
	position: sticky;
	top: 0;
	z-index: 100;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container ul li.menu-item:not(.menu-button) > a {
	color: var(--ck-color-text-default) !important;
	font-family: var(--ck-font-sans) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: -0.005em;
	padding: 8px 14px !important;
	border-radius: 8px;
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container ul li.menu-item:not(.menu-button) > a:hover {
	color: var(--ck-color-primary) !important;
	background: var(--ck-color-primary-soft) !important;
}
.main-navigation .primary-menu-container > ul {
	gap: 4px;
	align-items: center;
}
.main-navigation .primary-menu-container > ul > li.menu-button {
	margin-left: 16px;
}
.site-main-header-inner-wrap { min-height: 68px !important; }
.site-branding a.brand img { max-width: 170px !important; }
.site-branding a.brand img.svg-logo-image { width: 170px !important; }

.header-navigation .menu-button > a {
	background: var(--ck-color-primary) !important;
	color: var(--ck-color-text-on-primary) !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	border-radius: var(--ck-radius-md) !important;
	box-shadow: var(--ck-shadow-sm), 0 1px 0 rgba(255, 255, 255, .18) inset !important;
}
.header-navigation .menu-button:hover > a {
	background: var(--ck-color-primary-hover) !important;
	box-shadow: var(--ck-shadow-primary) !important;
	transform: translateY(-1px);
}

/* ================================================================
 * 7. BUTTONS
 * ================================================================ */

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.ck-btn-primary,
a.ck-btn-primary {
	background: var(--ck-color-primary);
	color: var(--ck-color-text-on-primary) !important;
	font-family: var(--ck-font-sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
	padding: 14px 22px;
	border-radius: var(--ck-radius-md);
	border: 1px solid var(--ck-color-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, var(--ck-shadow-sm);
	transition: all var(--ck-dur-fast) var(--ck-ease);
	text-decoration: none !important;
	display: inline-block;
}
a.ck-btn-secondary,
.ck-btn-secondary {
	text-decoration: none !important;
	display: inline-block;
	color: var(--ck-color-text-default) !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.ck-btn-primary:hover {
	background: var(--ck-color-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, var(--ck-shadow-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.ck-btn-secondary {
	background: transparent;
	color: var(--ck-color-text-default);
	border: 1px solid var(--ck-color-border-default);
	border-radius: var(--ck-radius-md);
	padding: 13px 21px;
	font-weight: 600;
	font-size: 15px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ck-btn-secondary:hover {
	border-color: var(--ck-color-primary);
	color: var(--ck-color-primary);
	box-shadow: 0 0 0 3px var(--ck-color-primary-ring);
}

/* ================================================================
 * 8. SECTIONS — full-bleed wrappers, constrained inner content
 * ================================================================ */

.entry-content > .wp-block-group,
.entry-content > section {
	padding-block: clamp(96px, 10vw, 140px);
}

.entry-content > .wp-block-group.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	padding-left: max(24px, calc(50vw - 590px)) !important;
	padding-right: max(24px, calc(50vw - 590px)) !important;
	box-sizing: border-box;
}
.entry-content > .wp-block-group.alignfull > .wp-block-columns,
.entry-content > .wp-block-group.alignfull > .wp-block-heading,
.entry-content > .wp-block-group.alignfull > .wp-block-paragraph,
.entry-content > .wp-block-group.alignfull > details {
	max-width: 1180px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Hero needs more room than the standard 1180px because of the 2-col grid */
.entry-content > .wp-block-group.alignfull.ck-hero {
	padding-left: max(24px, calc(50vw - 640px)) !important;
	padding-right: max(24px, calc(50vw - 640px)) !important;
}
.entry-content > .wp-block-group.alignfull.ck-narrow > * {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ck-section-alt { background: var(--ck-color-bg-subtle); }

/* ================================================================
 * 9. HERO v14 — BOLD vibrant gradient blobs that ACTUALLY pop
 * Cream-yellow base with high-opacity emerald + amber + coral
 * blobs (40-60% not 14%) so the page reads as "alive" not "white"
 * ================================================================ */

/* HERO v15 — "Ledger Cream" per designer spec:
 * ONE warm cream canvas, ONE amber wash, no competing blobs.
 * Headline emerald-600 (AA-compliant), dark terminal pills, decorative
 * dotted-grid + emerald ring + mono caption. Less is more. */
.ck-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #FBF7EE;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
}
.ck-hero-inner { width: 100%; }

/* Barely-there paper grain — adds tactility without competing for color */
.ck-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 25% 30%, rgba(15, 23, 42, .035) 50%, transparent 51%),
		radial-gradient(1px 1px at 75% 65%, rgba(15, 23, 42, .03)  50%, transparent 51%),
		radial-gradient(1px 1px at 50% 85%, rgba(15, 23, 42, .025) 50%, transparent 51%);
	background-size: 220px 220px, 280px 280px, 340px 340px;
	pointer-events: none;
	z-index: 0;
}

/* The ONLY chromatic moment: a soft amber wash top-right (warm light, not blob) */
.ck-hero::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle at center,
		rgba(251, 191, 36, .18) 0%,
		rgba(251, 191, 36, 0) 62%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

/* Decorative emerald ring sitting BEHIND the card, mid-right */
.ck-hero-deco-ring {
	position: absolute;
	top: 38%;
	right: -80px;
	width: 320px;
	height: 320px;
	border: 1.5px solid rgba(16, 185, 129, .22);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

/* Decorative dotted grid in the upper-left corner of the hero */
.ck-hero-deco-grid {
	position: absolute;
	top: 96px;
	left: max(24px, calc(50vw - 640px));
	width: 96px;
	height: 64px;
	background-image: radial-gradient(circle, rgba(11, 18, 32, .12) 1.5px, transparent 1.6px);
	background-size: 16px 16px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

.ck-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 112px);
	position: relative;
	z-index: 2;
	width: 100%;
}
.ck-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(40px, 5vw, 88px);
	align-items: center;
}

/* Super-eyebrow — tiny kicker ABOVE the main eyebrow, mono uppercase tracked.
 * Carries top-of-page WC/WP keyword signal for SEO without narrative cost. */
.ck-hero-supereyebrow {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: 12px;
	line-height: 1.4;
}
.ck-hero-supereyebrow strong {
	color: #047857;
	font-weight: 600;
}

/* Eyebrow as a pill (not naked text) with live emerald dot */
.ck-hero-copy .ck-eyebrow,
.ck-hero-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-family: var(--ck-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #047857;
	padding: 6px 12px !important;
	background: rgba(5, 150, 105, .08);
	border: 1px solid rgba(5, 150, 105, .18);
	border-radius: 999px;
	margin-bottom: 28px !important;
	line-height: 1.4;
}
.ck-hero-copy .ck-eyebrow::before,
.ck-hero-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
	flex-shrink: 0;
}

/* Headline: near-black ink on cream — 18.4:1 contrast (AAA) */
.ck-hero-copy h1 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(48px, 5.6vw, 76px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.02 !important;
	max-width: 11ch;
	margin: 0 0 24px !important;
	color: #0B1220 !important;
}
/* Accent block: emerald-600 (#059669) instead of emerald-500
 * which gives 4.62:1 white-on-emerald (AA) vs 3.13:1 (fails AA).
 * No rotation — squared block reads as financial, not cute. */
.ck-hero-copy h1 em.ck-accent,
.ck-hero-copy h1 .ck-accent {
	color: #FFFFFF !important;
	font-style: normal !important;
	background: #059669 !important;
	padding: 0.02em 0.28em 0.08em !important;
	border-radius: 6px !important;
	box-shadow:
		0 1px 0 rgba(0, 0, 0, .04),
		0 8px 24px -10px rgba(5, 150, 105, .45) !important;
	display: inline-block;
	transform: none;
}

.ck-hero-copy .ck-lead {
	font-family: var(--ck-font-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ck-color-text-muted);
	max-width: 48ch;
	margin: 0 0 32px;
}
.ck-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }

/* Mono technical caption — replaces star-row, earns the brand */
.ck-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	font: 500 11px/1 var(--ck-font-mono);
	color: #475569;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ck-hero-trust .stars { display: none; }
.ck-hero-trust .sep { color: #94a3b8; font-weight: 400; }

/* Card wrapper allows the pills to overflow the card edges */
.ck-hero-card-wrap {
	position: relative;
	perspective: 2400px;
}

/* Card: warm border (not cool grey) so it belongs in cream;
 * faint emerald shadow tints brand cast under the card */
.ck-hero-card {
	position: relative;
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #E8E1D0;
	overflow: visible;
	transform: rotateY(-3deg) rotateX(1.5deg) translateY(8px);
	transform-origin: left center;
	box-shadow:
		0 1px 0 rgba(11, 18, 32, .04),
		0 24px 48px -24px rgba(11, 18, 32, .18),
		0 8px 16px -8px rgba(5, 150, 105, .12);
	transition: transform var(--ck-dur-slow) var(--ck-ease);
	z-index: 2;
}
.ck-hero-card:hover {
	transform: rotateY(-1.5deg) rotateX(1deg) translateY(2px);
}
.ck-hero-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 26px;
	border-bottom: 1px solid rgba(15, 23, 42, .06);
	background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
	border-radius: 20px 20px 0 0;
}
.ck-hero-card-title {
	font: 600 13px/1.2 var(--ck-font-mono);
	color: var(--ck-color-text-default);
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ck-hero-card-title::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-color-primary);
}
.ck-hero-card-status {
	font: 600 10px/1 var(--ck-font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-color-primary);
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--ck-color-primary-soft);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ck-hero-card-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-color-primary);
	animation: ck-live-pulse 1.6s ease-in-out infinite;
}
@keyframes ck-live-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
	50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.ck-hero-card .ck-event-log {
	padding: 10px 26px 10px;
	font-size: 13px;
}
.ck-hero-card .ck-event-row {
	grid-template-columns: 56px 1fr 120px 22px;
	gap: 14px;
	padding: 14px 0;
	font-size: 13px;
	border-bottom-color: rgba(15, 23, 42, .05);
}
.ck-hero-card .ck-event-row .ck-user { display: none; }
.ck-hero-card .ck-event-row .ck-name { font-size: 12.5px; }
.ck-hero-card .ck-event-row .ck-amount { font-size: 12.5px; }
.ck-hero-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 26px;
	border-top: 1px solid rgba(15, 23, 42, .06);
	background: linear-gradient(180deg, #fafbfc 0%, #ecfdf5 100%);
	border-radius: 0 0 20px 20px;
	font-family: var(--ck-font-mono);
}
.ck-hero-card-balance {
	font-size: 22px;
	font-weight: 800;
	color: var(--ck-color-text-strong);
	letter-spacing: -0.025em;
}
.ck-hero-card-delta {
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-color-primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ck-hero-card-delta::before {
	content: "↑";
	font-size: 11px;
}

/* Pills: dark terminal-style toasts on cream = high contrast + CLI-cred */
.ck-hero-pill-webhook {
	position: absolute;
	z-index: 4;
	top: -18px;
	right: -24px;
	background: #0B1220;
	color: #E8F5EE;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 8px;
	padding: 10px 14px;
	box-shadow: 0 12px 28px -10px rgba(11, 18, 32, .45);
	font: 500 12px/1.2 var(--ck-font-mono);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	animation: ck-float 5s ease-in-out infinite;
}
.ck-hero-pill-webhook .method { color: #34d399; font-weight: 700; }
.ck-hero-pill-webhook .status { color: #94a3b8; }
.ck-hero-pill-webhook .ms { color: #64748b; }

.ck-hero-pill-refund {
	position: absolute;
	z-index: 4;
	bottom: -22px;
	left: -28px;
	background: #0B1220;
	color: #E8F5EE;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 10px;
	padding: 10px 14px 10px 10px;
	box-shadow: 0 16px 36px -12px rgba(11, 18, 32, .45);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	animation: ck-float 5s ease-in-out infinite;
	animation-delay: 1.2s;
}
.ck-hero-pill-refund .icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: rgba(251, 191, 36, .15);
	color: #fbbf24;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ck-hero-pill-refund .icon svg { width: 14px; height: 14px; }
.ck-hero-pill-refund .label {
	font: 600 12px/1.2 var(--ck-font-mono);
	color: #E8F5EE;
}
.ck-hero-pill-refund .meta {
	font: 500 11px/1.3 var(--ck-font-mono);
	color: #94a3b8;
	margin-top: 2px;
}
@keyframes ck-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* The signature ledger line — full-bleed at the bottom of the hero */
.ck-hero-ledger {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	max-width: 100vw;
}

/* Mobile: stack columns, simplify */
@media (max-width: 980px) {
	.ck-hero { min-height: auto; padding-block: 24px 56px; }
	.ck-hero-grid { grid-template-columns: 1fr; gap: 56px; }
	.ck-hero-copy h1 { max-width: 100%; font-size: clamp(40px, 9vw, 56px) !important; }
	.ck-hero-card { transform: none; }
	.ck-hero-card:hover { transform: none; }
	.ck-hero-pill-webhook, .ck-hero-pill-refund { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ck-hero-pill-webhook, .ck-hero-pill-refund { animation: none; }
	.ck-hero-card-status::before { animation: none; }
	.ck-hero-card { transition: none; }
}

/* The event log — sits below the ledger line */
.ck-event-log {
	font-family: var(--ck-font-mono);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ck-color-text-default);
	max-width: 100%;
}
.ck-event-row {
	display: grid;
	grid-template-columns: 76px minmax(120px, 1.4fr) minmax(140px, 1fr) minmax(100px, 0.9fr) 24px;
	gap: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ck-color-border-subtle);
	opacity: 0;
	animation: ck-row-rise var(--ck-dur) var(--ck-ease) both;
}
.ck-event-row:nth-child(1) { animation-delay: 0.05s; }
.ck-event-row:nth-child(2) { animation-delay: 0.15s; }
.ck-event-row:nth-child(3) { animation-delay: 0.25s; }
.ck-event-row:nth-child(4) { animation-delay: 0.35s; }
.ck-event-row:nth-child(5) { animation-delay: 0.45s; }
.ck-event-row:nth-child(6) { animation-delay: 0.55s; }
.ck-event-row:nth-child(7) { animation-delay: 0.65s; }
.ck-event-row:last-child { border-bottom: 0; }

.ck-event-row .ck-time { color: var(--ck-color-text-subtle); }
.ck-event-row .ck-user { color: var(--ck-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-event-row .ck-name { color: var(--ck-color-text-default); font-weight: 500; }
.ck-event-row .ck-amount { color: var(--ck-color-text-default); font-weight: 600; text-align: right; }
.ck-event-row .ck-amount.ck-positive { color: var(--ck-color-primary); }
.ck-event-row .ck-amount.ck-negative { color: var(--ck-color-text-strong); }
.ck-event-row .ck-status { font-size: 14px; }
.ck-event-row .ck-status.ck-status-ok { color: var(--ck-color-primary); }
.ck-event-row .ck-status.ck-status-warn { color: var(--ck-color-warning); }

@keyframes ck-row-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
 * 10. MANIFESTO — single confident sentence, full-bleed light
 * ================================================================ */

.ck-manifesto {
	background:
		radial-gradient(ellipse at center, rgba(16, 185, 129, .04) 0%, transparent 65%),
		var(--ck-color-bg);
	text-align: center;
	padding-block: clamp(140px, 16vw, 220px) !important;
	position: relative;
	overflow: hidden;
}
/* Manifesto owns its own visual rhythm — no decorative hairlines.
 * The section-divider rules below also explicitly skip this section. */
.entry-content > .ck-manifesto::before,
.entry-content > .ck-manifesto::after,
.entry-content > .wp-block-group + .ck-manifesto::before,
.entry-content > .wp-block-group + .ck-manifesto::after,
.entry-content > .ck-manifesto + .wp-block-group::before,
.entry-content > .ck-manifesto + .wp-block-group::after {
	display: none !important;
}
.ck-manifesto h2 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(48px, 7vw, 104px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.04em !important;
	line-height: 0.98 !important;
	color: var(--ck-color-text-strong) !important;
	margin: 0 auto !important;
	max-width: 18ch;
}

/* ================================================================
 * 10b. HERO ATMOSPHERE — subtle dot grid that fades out
 * ================================================================ */

.ck-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(circle, rgba(15, 23, 42, .07) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 65%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 65%);
	pointer-events: none;
}
.ck-hero-inner { position: relative; z-index: 1; }

/* Soft emerald glow in upper-left corner only — gives the hero "weather" */
.ck-hero::after {
	content: "";
	position: absolute;
	top: -160px;
	left: -120px;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(16, 185, 129, .14), rgba(16, 185, 129, 0) 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

/* ================================================================
 * 10c. USE CASES — "credits are for every kind of economy"
 * 4×2 grid of cards showing who uses CreditKit beyond e-commerce
 * ================================================================ */

.ck-usecases-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 980px) { .ck-usecases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ck-usecases-grid { grid-template-columns: 1fr; } }

.ck-usecase {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 14px;
	padding: 28px 24px;
	transition: transform var(--ck-dur-fast) var(--ck-ease), box-shadow var(--ck-dur-fast) var(--ck-ease);
}
.ck-usecase:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .12);
	border-color: var(--ck-color-primary-soft);
}
.ck-usecase-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--ck-color-primary-soft), #a7f3d0);
	color: var(--ck-color-primary-active);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.ck-usecase-icon svg { width: 22px; height: 22px; }
.ck-usecase-title {
	font-family: var(--ck-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ck-color-text-strong);
	margin: 0 0 8px;
}
.ck-usecase-desc {
	font-size: 14px;
	color: var(--ck-color-text-muted);
	line-height: 1.55;
	margin: 0 0 14px;
	max-width: none;
}
.ck-usecase-unit {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ck-color-primary-active);
	background: var(--ck-color-primary-soft);
	padding: 4px 10px;
	border-radius: 999px;
}

/* ================================================================
 * 11. RECEIPT WALL — scrolling marquee of fictional store receipts
 * ================================================================ */

.ck-receipt-wall {
	background: var(--ck-color-bg-subtle);
	padding-block: clamp(96px, 10vw, 140px) !important;
	position: relative;
	overflow: hidden;
}
.ck-receipt-wall-eyebrow {
	text-align: center;
	max-width: 1180px;
	margin: 0 auto 56px;
}
.ck-receipt-wall-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: ck-marquee 50s linear infinite;
}
.ck-receipt-wall:hover .ck-receipt-wall-track {
	animation-play-state: paused;
}
.ck-receipt-wall-viewport {
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
@keyframes ck-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.ck-receipt {
	flex-shrink: 0;
	width: 280px;
	background: #ffffff;
	border-radius: 10px;
	padding: 24px 20px;
	box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.05);
	border: 1px solid var(--ck-color-border-subtle);
	font-family: var(--ck-font-mono);
	font-size: 12px;
	color: var(--ck-color-text-default);
	position: relative;
}
/* Different receipts get different accent tints — warm vs cool variety */
.ck-receipt:nth-child(3n+1) { background: linear-gradient(180deg, #ffffff 0%, #fefce8 100%); border-color: #fef08a; }
.ck-receipt:nth-child(3n+2) { background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%); border-color: #fed7aa; }
.ck-receipt:nth-child(3n+3) { background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%); border-color: #99f6e4; }
.ck-receipt .ck-rcpt-store {
	font-family: var(--ck-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--ck-color-text-strong);
	letter-spacing: -0.015em;
	margin-bottom: 4px;
}
.ck-receipt .ck-rcpt-meta {
	color: var(--ck-color-text-subtle);
	font-size: 11px;
	margin-bottom: 14px;
}
.ck-receipt .ck-rcpt-line {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-top: 1px dashed var(--ck-color-border-subtle);
	color: var(--ck-color-text-muted);
}
.ck-receipt .ck-rcpt-line:first-of-type { border-top: 0; }
.ck-receipt .ck-rcpt-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 14px;
	margin-top: 10px;
	border-top: 2px solid var(--ck-color-text-strong);
	font-weight: 700;
	color: var(--ck-color-primary-active);
	font-size: 16px;
}
.ck-receipt .ck-rcpt-total > span:last-child {
	font-size: 18px;
	letter-spacing: -0.01em;
}
.ck-receipt .ck-rcpt-stamp {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--ck-color-primary);
	border: 1px solid var(--ck-color-primary);
	border-radius: 4px;
	padding: 2px 6px;
	text-transform: uppercase;
	transform: rotate(6deg);
}

/* ================================================================
 * 11b. DARK BANDS — short rhythm sections (Stats Band, Trust Bar)
 * Per dark-rhythm spec: 3-beat cadence L L D, short bands not tentpoles
 * ================================================================ */

.ck-dark-band {
	background: var(--ck-dark-bg) !important;
	color: var(--ck-dark-text) !important;
	padding-block: clamp(56px, 6vw, 88px) !important;
	position: relative;
	overflow: hidden;
}
.ck-dark-band > * { position: relative; z-index: 1; }

/* ---- Stats Band — 4 mono counters with vertical hairlines ---- */
.ck-dark-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 1180px;
	margin: 0 auto;
}
.ck-dark-stat {
	padding: 8px 32px;
	border-left: 1px solid rgba(255, 255, 255, .08);
	text-align: left;
}
.ck-dark-stat:first-child { border-left: 0; padding-left: 0; }
.ck-dark-stat-label {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-dark-text-mute);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ck-dark-stat-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	color: var(--ck-color-primary-on-dark);
	font-weight: 600;
}
.ck-dark-stat-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-color-primary-on-dark);
	animation: ck-live-pulse 1.6s ease-in-out infinite;
}
.ck-dark-stat-num {
	font-family: var(--ck-font-mono);
	font-feature-settings: 'tnum';
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.02em;
	line-height: 1;
}
.ck-dark-stat-delta {
	font-family: var(--ck-font-mono);
	font-size: 12px;
	color: var(--ck-color-primary-on-dark);
	margin-top: 8px;
}

@media (max-width: 900px) {
	.ck-dark-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
	.ck-dark-stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	.ck-dark-stat:nth-child(2n)   { border-left: 1px solid rgba(255, 255, 255, .08); }
}

/* ---- Trust Bar — scrolling signed audit entries, violet glow ---- */
.ck-dark-trust {
	background: var(--ck-dark-bg) !important;
	color: var(--ck-dark-text) !important;
	padding-block: clamp(64px, 7vw, 96px) !important;
	position: relative;
	overflow: hidden;
}
.ck-dark-trust::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}
/* Violet/indigo glow — differentiates Trust Bar from emerald-glow Ledger Demo */
.ck-dark-trust::after {
	content: "";
	position: absolute;
	top: -10%;
	right: -8%;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle, rgba(139, 92, 246, .14), rgba(139, 92, 246, 0) 65%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.ck-dark-trust > * { position: relative; z-index: 1; }

.ck-dark-trust-header {
	max-width: 1180px;
	margin: 0 auto 36px;
	text-align: center;
}
.ck-dark-trust .ck-eyebrow {
	color: rgba(196, 181, 253, .9) !important;
}
.ck-dark-trust h3 {
	font-family: var(--ck-font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 8px 0 0;
}

.ck-trust-marquee-viewport {
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	overflow: hidden;
}
.ck-trust-marquee {
	display: flex;
	gap: 0;
	width: max-content;
	animation: ck-marquee 60s linear infinite;
	font-family: var(--ck-font-mono);
	font-size: 12.5px;
	color: var(--ck-dark-text-mute);
}
.ck-dark-trust:hover .ck-trust-marquee {
	animation-play-state: paused;
}
.ck-trust-entry {
	padding: 0 28px;
	border-left: 1px solid rgba(255, 255, 255, .08);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ck-trust-entry:first-child { border-left: 0; }
.ck-trust-entry .hash    { color: rgba(196, 181, 253, .8); font-weight: 600; }
.ck-trust-entry .event   { color: #ffffff; font-weight: 500; }
.ck-trust-entry .meta    { color: var(--ck-dark-text-mute); }
.ck-trust-entry .stamp   { color: #64748b; font-size: 11.5px; }
.ck-trust-entry .ok      { color: var(--ck-color-primary-on-dark); font-weight: 600; }

/* ================================================================
 * 12. DARK LEDGER DEMO — flagship mid-page tentpole
 * ================================================================ */

.ck-dark-demo {
	background: var(--ck-dark-bg) !important;
	color: var(--ck-dark-text) !important;
	padding-block: clamp(120px, 13vw, 180px) !important;
	position: relative;
	overflow: hidden;
}
.ck-dark-demo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.ck-dark-demo::after {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(52, 211, 153, .15), rgba(52, 211, 153, 0) 70%);
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}
.ck-dark-demo > * { position: relative; z-index: 1; }
.ck-dark-demo .ck-eyebrow {
	color: var(--ck-color-primary-on-dark) !important;
}
.ck-dark-demo h2 {
	font-family: var(--ck-font-display) !important;
	color: #ffffff !important;
	font-size: clamp(36px, 4.4vw, 56px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	max-width: 22ch;
	margin: 0 auto 20px !important;
}
.ck-dark-demo h2 em.ck-accent {
	color: var(--ck-color-primary-on-dark) !important;
	background: linear-gradient(180deg, transparent 62%, rgba(52, 211, 153, .22) 62%) !important;
}
.ck-dark-demo .ck-lead {
	color: var(--ck-dark-text-mute);
	font-size: 18px;
	max-width: 56ch;
	margin: 0 auto 56px !important;
	text-align: center;
}
.ck-dark-demo .ck-eyebrow {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* The "live ledger" card on dark */
.ck-dark-ledger-card {
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 72px rgba(0, 0, 0, .5), 0 0 0 1px rgba(52, 211, 153, .08);
	max-width: 980px;
	margin: 56px auto 0;
}
.ck-dark-ledger-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ck-dark-border);
	background: var(--ck-dark-surface-2);
}
.ck-dark-ledger-card-title {
	font-family: var(--ck-font-display);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.015em;
}
.ck-dark-ledger-card-meta {
	font-family: var(--ck-font-mono);
	font-size: 12px;
	color: var(--ck-dark-text-mute);
}
.ck-dark-ledger-balance {
	color: var(--ck-color-primary-on-dark);
	font-size: 13px;
	font-weight: 600;
}
.ck-dark-ledger-card .ck-event-log {
	color: var(--ck-dark-text);
	padding: 8px 24px 16px;
}
.ck-dark-ledger-card .ck-event-row {
	border-bottom-color: var(--ck-dark-border);
	grid-template-columns: 84px 1fr 1.4fr 140px 24px;
	font-size: 13px;
	padding: 14px 0;
}
.ck-dark-ledger-card .ck-event-row .ck-time { color: var(--ck-dark-text-mute); }
.ck-dark-ledger-card .ck-event-row .ck-user { color: var(--ck-dark-text); }
.ck-dark-ledger-card .ck-event-row .ck-name { color: var(--ck-dark-text); }
.ck-dark-ledger-card .ck-event-row .ck-amount.ck-positive { color: var(--ck-color-primary-on-dark); }
.ck-dark-ledger-card .ck-event-row .ck-amount.ck-negative { color: #ffffff; }
.ck-dark-ledger-card .ck-event-row .ck-status.ck-status-warn { color: var(--ck-color-warning); }

/* ================================================================
 * 13. WRONG-WAY / RIGHT-WAY comparison
 * ================================================================ */

.ck-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
}
.ck-comparison-side {
	border-radius: 16px;
	padding: 40px 36px;
	position: relative;
	overflow: hidden;
	border: 1px solid;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ck-comparison-wrong {
	background: linear-gradient(180deg, #fef2f2 0%, #fff7f5 100%);
	border-color: #fecaca;
}
.ck-comparison-right {
	background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
	border-color: #a7f3d0;
}
.ck-comparison-tag {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 16px;
}
.ck-comparison-wrong .ck-comparison-tag { background: #fee2e2; color: #b91c1c; }
.ck-comparison-right .ck-comparison-tag { background: #d1fae5; color: var(--ck-color-primary-active); }
.ck-comparison-side h3 {
	font-family: var(--ck-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--ck-color-text-strong);
}
.ck-comparison-side ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ck-comparison-side ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	color: var(--ck-color-text-default);
	font-size: 14.5px;
	line-height: 1.55;
	border-top: 1px solid;
}
.ck-comparison-wrong ul li { border-top-color: #fecaca; color: #7f1d1d; }
.ck-comparison-right ul li { border-top-color: #a7f3d0; color: #064e3b; }
.ck-comparison-side ul li:first-child { border-top: 0; }
.ck-comparison-side ul li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background-repeat: no-repeat;
	background-position: center;
}
.ck-comparison-wrong ul li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4 L12 12 M12 4 L4 12'/%3E%3C/svg%3E");
}
.ck-comparison-right ul li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 L7 12 L13 4'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
	.ck-comparison { grid-template-columns: 1fr; }
}

/* ================================================================
 * 14. TERMINAL — code/REST API showcase, dark
 * ================================================================ */

.ck-terminal {
	background: #050a14;
	border-radius: 12px;
	box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
	overflow: hidden;
	font-family: var(--ck-font-mono);
	border: 1px solid #1a2236;
}
.ck-terminal-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #02060e;
	border-bottom: 1px solid #1a2236;
}
.ck-terminal-bar::before,
.ck-terminal-bar > .dot,
.ck-terminal-bar::after {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}
.ck-terminal-bar::before { background: #ef4444; }
.ck-terminal-bar > .dot { background: #f59e0b; }
.ck-terminal-bar::after { background: var(--ck-color-primary-on-dark); }
.ck-terminal-bar .ck-terminal-title {
	margin-left: 12px;
	font-size: 12px;
	color: #7a8599;
	font-family: var(--ck-font-sans);
}
.ck-terminal pre {
	margin: 0;
	padding: 24px 28px;
	color: #cbd5e1;
	font-size: 13.5px;
	line-height: 1.7;
	overflow-x: auto;
}
.ck-terminal .tk-cmt    { color: #64748b; }
.ck-terminal .tk-str    { color: #86efac; }
.ck-terminal .tk-key    { color: #a5b4fc; }
.ck-terminal .tk-fn     { color: #fde68a; }
.ck-terminal .tk-prompt { color: var(--ck-color-primary-on-dark); }
.ck-terminal .tk-warn   { color: var(--ck-color-warning); }

/* ================================================================
 * 11. FINAL CTA — only place near-black is allowed in body
 * ================================================================ */

.ck-cta-final {
	background: radial-gradient(circle at 30% 20%, #0b101a 0%, var(--ck-dark-bg) 70%) !important;
	color: var(--ck-dark-text) !important;
	padding-block: clamp(96px, 12vw, 160px) !important;
	text-align: center;
}
.ck-cta-final::before { display: none !important; } /* kill the ledger-line divider above */
.ck-cta-final h2 {
	color: #ffffff !important;
	font-family: var(--ck-font-display) !important;
	font-size: clamp(40px, 5vw, 64px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
}
.ck-cta-final p { color: var(--ck-dark-text-mute) !important; }
.ck-cta-final .wp-block-button .wp-block-button__link {
	background: var(--ck-color-primary-on-dark) !important;
	border-color: var(--ck-color-primary-on-dark) !important;
	color: var(--ck-dark-bg) !important;
}
.ck-cta-final .wp-block-button .wp-block-button__link:hover {
	background: #6ee7b7 !important;
}

/* ================================================================
 * 12. FOOTER — branded, rendered via wp_footer hook
 * ================================================================ */

.ck-branded-footer {
	background: var(--ck-dark-bg);
	color: var(--ck-dark-text-mute);
	padding: 96px 24px 40px;
	font-family: var(--ck-font-sans);
	border-top: 1px solid var(--ck-dark-border);
}
.ck-footer-inner { max-width: 1180px; margin: 0 auto; }
.ck-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 56px;
	padding-bottom: 64px;
}
.ck-footer-col h3 {
	color: #ffffff;
	font-family: var(--ck-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 20px;
}
.ck-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ck-footer-col ul li { margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
.ck-footer-col ul a {
	color: var(--ck-dark-text-mute);
	text-decoration: none;
	transition: color var(--ck-dur-fast) var(--ck-ease);
}
.ck-footer-col ul a:hover { color: var(--ck-color-primary-on-dark); }

.ck-footer-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ck-footer-brand .ck-mark {
	width: 36px; height: 36px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--ck-color-primary) 0%, var(--ck-color-primary-active) 100%);
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(16, 185, 129, .35);
}
.ck-footer-brand .ck-mark svg { width: 20px; height: 20px; color: #fff; }
.ck-footer-brand .ck-wordmark {
	font-family: var(--ck-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
}
.ck-footer-tagline {
	font-size: 14px;
	color: var(--ck-dark-text-mute);
	max-width: 36ch;
	line-height: 1.6;
	margin-bottom: 24px;
}
.ck-footer-trust {
	display: flex; gap: 12px; flex-wrap: wrap;
	font-size: 12px;
	color: var(--ck-dark-text-mute);
}
.ck-footer-trust > span {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 10px;
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	border-radius: 999px;
	font-weight: 500;
}
.ck-footer-trust svg { width: 12px; height: 12px; color: var(--ck-color-primary-on-dark); }
.ck-footer-bottom {
	border-top: 1px solid var(--ck-dark-border);
	margin-top: 64px;
	padding-top: 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #4a566a;
}
.ck-footer-bottom a { color: var(--ck-dark-text-mute); }
.ck-footer-bottom .ck-social { display: flex; gap: 12px; }
.ck-footer-bottom .ck-social a {
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	display: inline-flex; align-items: center; justify-content: center;
}
.ck-footer-bottom .ck-social a:hover { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); }
.ck-footer-bottom .ck-social svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
	.ck-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.ck-footer-col-brand { grid-column: 1 / -1; }
}

/* ================================================================
 * 14b. FEATURES PAGE — page-specific components
 * Compact hero (no card), capability grid, bundle table on dark,
 * refund math card, factor grid + preset strip, REST playground,
 * webhook table, audit grid (static).
 * ================================================================ */

/* Features hero — compact, anchor-pill nav */
.ck-features-hero {
	background: #FBF7EE;
	padding-block: clamp(72px, 8vw, 112px) clamp(56px, 6vw, 80px) !important;
	position: relative;
	overflow: hidden;
}
.ck-features-hero .ck-features-hero-inner {
	max-width: 1180px;
	margin: 0 auto;
}
.ck-features-hero h1 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(40px, 4.6vw, 60px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.02 !important;
	margin: 16px 0 24px !important;
	color: #0B1220 !important;
	max-width: 18ch;
}
.ck-features-pillnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}
.ck-features-pillnav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ck-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--ck-color-text-default);
	background: #fff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 999px;
	padding: 7px 14px;
	text-decoration: none !important;
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.ck-features-pillnav a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ck-color-primary);
}
.ck-features-pillnav a:hover {
	border-color: var(--ck-color-primary);
	color: var(--ck-color-primary);
	background: var(--ck-color-primary-soft);
}

/* Capability matrix — 4×2 grid of tiles */
.ck-capability-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 980px) { .ck-capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ck-capability-grid { grid-template-columns: 1fr; } }

.ck-capability-tile {
	background: #fff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 12px;
	padding: 22px 20px;
	position: relative;
	text-decoration: none !important;
	color: inherit;
	display: block;
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.ck-capability-tile::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 18px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-color-primary);
}
.ck-capability-tile:hover {
	border-color: var(--ck-color-primary-soft);
	box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .08);
	transform: translateY(-1px);
}
.ck-capability-tile-label {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	margin-left: 18px;
	margin-bottom: 12px;
}
.ck-capability-tile-name {
	font-family: var(--ck-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ck-color-text-strong);
	margin: 0 0 8px;
}
.ck-capability-tile-desc {
	font-size: 13.5px;
	color: var(--ck-color-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* Bundle table — dark band variant */
.ck-bundle-table-wrap { max-width: 980px; margin: 32px auto 0; }
.ck-bundle-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ck-font-mono);
	font-size: 13px;
	color: var(--ck-dark-text);
}
.ck-bundle-table th,
.ck-bundle-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--ck-dark-border);
}
.ck-bundle-table th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-dark-text-mute);
	background: var(--ck-dark-surface);
	border-bottom: 1px solid var(--ck-dark-border);
}
.ck-bundle-table tr:hover td { background: rgba(255, 255, 255, .02); }
.ck-bundle-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.ck-bundle-table .emerald { color: var(--ck-color-primary-on-dark); font-weight: 600; }

/* Refund math card — 2-column with worked example on right */
.ck-refund-math {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 32px;
	max-width: 1180px;
	margin: 0 auto;
	align-items: stretch;
}
@media (max-width: 900px) { .ck-refund-math { grid-template-columns: 1fr; } }

.ck-refund-math-copy {
	background: #fff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 14px;
	padding: 32px;
}
.ck-refund-math-example {
	background: var(--ck-dark-bg);
	border: 1px solid var(--ck-dark-border);
	border-radius: 14px;
	padding: 28px 32px;
	font-family: var(--ck-font-mono);
	font-size: 13px;
	color: var(--ck-dark-text);
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre;
}
.ck-refund-math-example .label { color: var(--ck-dark-text-mute); }
.ck-refund-math-example .num   { color: #ffffff; font-weight: 600; }
.ck-refund-math-example .em    { color: var(--ck-color-primary-on-dark); font-weight: 600; }

/* Fraud factor grid + preset strip */
.ck-factor-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 980px) { .ck-factor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ck-factor-grid { grid-template-columns: 1fr; } }

.ck-factor-card {
	background: #fff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 12px;
	padding: 22px 20px;
}
.ck-factor-card-weight {
	display: inline-block;
	font-family: var(--ck-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ck-color-primary-active);
	background: var(--ck-color-primary-soft);
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 14px;
}
.ck-factor-card-name {
	font-family: var(--ck-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--ck-color-text-strong);
	margin: 0 0 8px;
}
.ck-factor-card-watches {
	font-size: 13px;
	color: var(--ck-color-text-muted);
	line-height: 1.5;
	margin: 0;
}

.ck-preset-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 980px;
	margin: 32px auto 0;
}
@media (max-width: 720px) { .ck-preset-strip { grid-template-columns: 1fr; } }
.ck-preset-card {
	background: var(--ck-color-bg-subtle);
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 12px;
	padding: 22px 24px;
}
.ck-preset-card.is-default {
	border-color: var(--ck-color-primary);
	background: linear-gradient(180deg, #fff 0%, var(--ck-color-primary-soft) 100%);
}
.ck-preset-card-name {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	margin-bottom: 10px;
}
.ck-preset-card-name.is-default { color: var(--ck-color-primary-active); font-weight: 600; }
.ck-preset-card-mult {
	font-family: var(--ck-font-mono);
	font-size: 14px;
	color: var(--ck-color-text-default);
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}
.ck-preset-card-threshold {
	font-family: var(--ck-font-mono);
	font-size: 22px;
	font-weight: 700;
	color: var(--ck-color-text-strong);
	letter-spacing: -0.02em;
}

/* REST playground — dark, dropdown + curl + response */
.ck-rest-playground {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 900px) { .ck-rest-playground { grid-template-columns: 1fr; } }
.ck-rest-endpoints {
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	border-radius: 12px;
	padding: 14px;
	height: fit-content;
}
.ck-rest-endpoint {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	font-family: var(--ck-font-mono);
	font-size: 12.5px;
	color: var(--ck-dark-text-mute);
	cursor: pointer;
	transition: all var(--ck-dur-fast) var(--ck-ease);
	border: 1px solid transparent;
}
.ck-rest-endpoint .method { color: var(--ck-color-primary-on-dark); font-weight: 700; margin-right: 8px; }
.ck-rest-endpoint:hover {
	background: rgba(255, 255, 255, .03);
	color: var(--ck-dark-text);
}
.ck-rest-endpoint.is-active {
	background: rgba(52, 211, 153, .08);
	border-color: rgba(52, 211, 153, .25);
	color: var(--ck-dark-text);
}

.ck-rest-response {
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	border-radius: 12px;
	overflow: hidden;
}
.ck-rest-response-tab {
	padding: 12px 18px;
	border-bottom: 1px solid var(--ck-dark-border);
	background: var(--ck-dark-surface-2);
	font-family: var(--ck-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-dark-text-mute);
}
.ck-rest-response pre {
	margin: 0;
	padding: 22px 24px;
	font-family: var(--ck-font-mono);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--ck-dark-text);
	overflow-x: auto;
	background: transparent;
}
.ck-rest-response pre .tk-cmt    { color: #64748b; }
.ck-rest-response pre .tk-str    { color: #86efac; }
.ck-rest-response pre .tk-key    { color: #fde68a; }
.ck-rest-response pre .tk-prompt { color: var(--ck-color-primary-on-dark); }

/* Webhook events table */
.ck-webhook-table {
	width: 100%;
	max-width: 1180px;
	margin: 32px auto 0;
	border-collapse: collapse;
	font-family: var(--ck-font-sans);
	font-size: 14px;
}
.ck-webhook-table th,
.ck-webhook-table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--ck-color-border-subtle);
}
.ck-webhook-table th {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	background: var(--ck-color-bg-subtle);
}
.ck-webhook-table .event {
	font-family: var(--ck-font-mono);
	font-size: 13px;
	color: var(--ck-color-primary-active);
	font-weight: 600;
}
.ck-webhook-table .sample {
	font-family: var(--ck-font-mono);
	font-size: 12.5px;
	color: var(--ck-color-text-muted);
}

/* Trust grid — static variant of the homepage marquee */
.ck-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: 1180px;
	margin: 32px auto 0;
}
@media (max-width: 900px) { .ck-trust-grid { grid-template-columns: 1fr; } }
.ck-trust-grid-entry {
	background: var(--ck-dark-surface);
	border: 1px solid var(--ck-dark-border);
	border-radius: 10px;
	padding: 16px 18px;
	font-family: var(--ck-font-mono);
	font-size: 12.5px;
	color: var(--ck-dark-text-mute);
}
.ck-trust-grid-entry .hash    { color: rgba(196, 181, 253, .9); font-weight: 600; }
.ck-trust-grid-entry .event   { color: #ffffff; font-weight: 600; display: block; margin: 6px 0 4px; }
.ck-trust-grid-entry .meta    { color: var(--ck-dark-text-mute); }

/* ================================================================
 * 14c. PRICING PAGE — ledger-card stack, comparison matrix, refund band
 * ================================================================ */

.ck-pricing-hero {
	background: #FBF7EE;
	padding-block: clamp(72px, 8vw, 112px) clamp(40px, 4vw, 56px) !important;
}
.ck-pricing-hero h1 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(40px, 4.6vw, 60px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.02 !important;
	max-width: 16ch;
	margin: 12px auto 24px !important;
	color: #0B1220 !important;
	text-align: center;
}
.ck-pricing-hero h1 + p {
	max-width: 64ch;
	margin: 0 auto;
	text-align: center;
	color: var(--ck-color-text-muted);
	font-size: 17px;
	line-height: 1.65;
}

.ck-pricing-grid-wrap {
	position: relative;
	max-width: 1180px;
	margin: 64px auto 0;
}
/* Shared ledger line BEHIND all 3 cards (decorative anchor) */
.ck-pricing-ledger {
	position: absolute;
	left: 0; right: 0;
	top: 38%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, .4) 12%, rgba(16, 185, 129, .4) 88%, transparent 100%);
	z-index: 0;
}
.ck-pricing-ledger-node {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ck-color-primary);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 4px #FBF7EE, 0 0 0 5px rgba(16, 185, 129, .2);
}

.ck-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
	z-index: 1;
	align-items: stretch;
}
@media (max-width: 900px) { .ck-pricing-grid { grid-template-columns: 1fr; gap: 18px; } }

.ck-pricing-card {
	background: #ffffff;
	border: 1px solid #E8E1D0;
	border-radius: 14px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(11, 18, 32, .04);
	transition: all var(--ck-dur-fast) var(--ck-ease);
	position: relative;
}
.ck-pricing-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -12px rgba(11, 18, 32, .14);
}
.ck-pricing-card.is-featured {
	border-top: 3px solid var(--ck-color-primary);
	border-color: var(--ck-color-primary);
	transform: translateY(-8px);
	box-shadow:
		0 1px 2px rgba(11, 18, 32, .06),
		0 16px 40px -12px rgba(11, 18, 32, .18),
		0 0 0 1px rgba(16, 185, 129, .15);
}
.ck-pricing-card.is-featured:hover {
	transform: translateY(-10px);
	box-shadow:
		0 1px 2px rgba(11, 18, 32, .08),
		0 20px 48px -12px rgba(16, 185, 129, .25),
		0 0 0 1px rgba(16, 185, 129, .2);
}

.ck-pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--ck-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-color-primary-active);
	background: #FBF7EE;
	border: 1px solid var(--ck-color-primary);
	border-radius: 999px;
	padding: 6px 14px;
	white-space: nowrap;
}

.ck-pricing-tier-name {
	font-family: var(--ck-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	margin-bottom: 8px;
}
.ck-pricing-tagline {
	font-family: var(--ck-font-sans);
	font-size: 13px;
	color: var(--ck-color-text-muted);
	line-height: 1.5;
	margin-bottom: 24px;
	min-height: 40px;
}
.ck-pricing-price {
	font-family: var(--ck-font-mono);
	font-size: 56px;
	font-weight: 700;
	color: var(--ck-color-text-strong);
	letter-spacing: -0.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.ck-pricing-price-period {
	font-family: var(--ck-font-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--ck-color-text-muted);
	letter-spacing: 0;
}
.ck-pricing-features {
	list-style: none;
	padding: 0;
	margin: 32px 0;
	flex: 1;
}
.ck-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 14.5px;
	color: var(--ck-color-text-default);
	line-height: 1.5;
}
.ck-pricing-features li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 L7 12 L13 4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

.ck-pricing-cta {
	display: block;
	text-align: center;
	width: 100%;
	margin-top: auto;
}

/* Refund band — risk-reversal between tiers and matrix */
.ck-refund-band {
	background: #FBF7EE;
	padding-block: clamp(56px, 6vw, 80px) !important;
	border-top: 1px solid var(--ck-color-border-subtle);
	border-bottom: 1px solid var(--ck-color-border-subtle);
}
.ck-refund-band-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
}
@media (max-width: 720px) { .ck-refund-band-inner { grid-template-columns: 1fr; text-align: center; } }
.ck-refund-band-shield {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--ck-color-primary-soft), #a7f3d0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-color-primary-active);
}
.ck-refund-band-shield svg { width: 28px; height: 28px; }
.ck-refund-band-text .eyebrow {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-color-primary-active);
	display: block;
	margin-bottom: 8px;
}
.ck-refund-band-text .promise {
	font-family: var(--ck-font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--ck-color-text-strong);
	line-height: 1.3;
	margin: 0;
}

/* Comparison matrix */
.ck-pricing-matrix-wrap {
	max-width: 1180px;
	margin: 0 auto;
	overflow-x: auto;
}
.ck-pricing-matrix {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-family: var(--ck-font-sans);
	font-size: 14px;
}
.ck-pricing-matrix th,
.ck-pricing-matrix td {
	padding: 14px 20px;
	text-align: left;
	border-bottom: 1px solid var(--ck-color-border-subtle);
}
.ck-pricing-matrix thead th {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	background: var(--ck-color-bg-subtle);
	border-bottom: 2px solid var(--ck-color-border-default);
	text-align: center;
}
.ck-pricing-matrix thead th:first-child { text-align: left; }
.ck-pricing-matrix tbody td {
	text-align: center;
	font-family: var(--ck-font-mono);
	font-size: 13px;
	color: var(--ck-color-text-default);
	font-variant-numeric: tabular-nums;
}
.ck-pricing-matrix tbody td:first-child {
	text-align: left;
	font-family: var(--ck-font-sans);
	font-size: 14px;
	color: var(--ck-color-text-default);
	font-weight: 500;
}
.ck-pricing-matrix tbody td.check { color: var(--ck-color-primary-active); font-size: 16px; }
.ck-pricing-matrix tbody td.dash  { color: var(--ck-color-text-subtle); }
.ck-pricing-matrix tbody tr.is-group-header td {
	background: #fafbfc;
	font-family: var(--ck-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	padding: 18px 20px 10px;
}
.ck-pricing-matrix tbody tr.is-pro-col td:nth-child(3) {
	background: var(--ck-color-primary-soft);
}
.ck-pricing-matrix thead th:nth-child(3) {
	border-left: 1px solid var(--ck-color-primary);
	border-right: 1px solid var(--ck-color-primary);
	background: var(--ck-color-primary-soft);
	color: var(--ck-color-primary-active);
}
.ck-pricing-matrix tbody td:nth-child(3) {
	border-left: 1px solid var(--ck-color-primary-soft);
	border-right: 1px solid var(--ck-color-primary-soft);
}

/* ================================================================
 * 14d. DOCS PAGES — hub topic grid + sub-page sidebar layout
 * ================================================================ */

/* Docs hero — compact, search-style intro */
.ck-docs-hero {
	background: #FBF7EE;
	padding-block: clamp(72px, 8vw, 112px) clamp(48px, 5vw, 64px) !important;
}
.ck-docs-hero-inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.ck-docs-hero h1 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(36px, 4vw, 52px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.05 !important;
	margin: 12px 0 20px !important;
	color: #0B1220 !important;
}
.ck-docs-hero p {
	color: var(--ck-color-text-muted);
	font-size: 17px;
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 auto;
}

/* Topic grid — 3 cols × 4 rows of topic cards */
.ck-docs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 900px) { .ck-docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ck-docs-grid { grid-template-columns: 1fr; } }

.ck-docs-card {
	display: block;
	background: #fff;
	border: 1px solid var(--ck-color-border-subtle);
	border-radius: 10px;
	padding: 22px 22px 20px;
	text-decoration: none !important;
	color: inherit;
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.ck-docs-card:hover {
	border-color: var(--ck-color-primary-soft);
	box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .08);
	transform: translateY(-1px);
}
.ck-docs-card-kind {
	font-family: var(--ck-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ck-color-primary-active);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ck-docs-card-kind::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ck-color-primary);
}
.ck-docs-card-name {
	font-family: var(--ck-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ck-color-text-strong);
	margin: 0 0 6px;
}
.ck-docs-card-desc {
	font-size: 13.5px;
	color: var(--ck-color-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* Section heading inside the hub between groups */
.ck-docs-section-heading {
	max-width: 1180px;
	margin: 0 auto 16px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.ck-docs-section-heading h2 {
	font-family: var(--ck-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--ck-color-text-strong);
	margin: 0;
}
.ck-docs-section-heading .count {
	font-family: var(--ck-font-mono);
	font-size: 12px;
	color: var(--ck-color-text-muted);
}

/* Sub-page layout — sidebar nav + main content */
.ck-doc-page {
	max-width: 1180px;
	margin: 0 auto;
	padding-block: clamp(48px, 5vw, 72px) !important;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 56px;
}
@media (max-width: 900px) { .ck-doc-page { grid-template-columns: 1fr; gap: 32px; } }

.ck-doc-sidebar {
	position: sticky;
	top: 96px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding-right: 8px;
}
.ck-doc-sidebar-section {
	font-family: var(--ck-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-color-text-muted);
	margin: 24px 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ck-color-border-subtle);
}
.ck-doc-sidebar-section:first-child { margin-top: 0; }
.ck-doc-sidebar a {
	display: block;
	padding: 6px 12px;
	font-size: 14px;
	color: var(--ck-color-text-default);
	text-decoration: none !important;
	border-radius: 6px;
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.ck-doc-sidebar a:hover { background: var(--ck-color-bg-subtle); color: var(--ck-color-primary-active); }
.ck-doc-sidebar a.is-current {
	background: var(--ck-color-primary-soft);
	color: var(--ck-color-primary-active);
	font-weight: 600;
}

.ck-doc-content { min-width: 0; }
.ck-doc-content h1 {
	font-family: var(--ck-font-display) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.1 !important;
	color: #0B1220 !important;
	margin: 0 0 12px !important;
}
.ck-doc-content > p:first-of-type {
	font-size: 17px;
	color: var(--ck-color-text-muted);
	line-height: 1.6;
	margin-bottom: 32px;
}
.ck-doc-content h2 {
	font-family: var(--ck-font-display) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	letter-spacing: -0.018em !important;
	color: var(--ck-color-text-strong) !important;
	margin: 48px 0 16px !important;
	padding-top: 24px;
	border-top: 1px solid var(--ck-color-border-subtle);
}
.ck-doc-content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 32px !important; }
.ck-doc-content h3 {
	font-family: var(--ck-font-display) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ck-color-text-strong) !important;
	margin: 28px 0 10px !important;
}
.ck-doc-content p, .ck-doc-content li {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ck-color-text-default);
}
.ck-doc-content pre {
	background: #0b1220;
	color: #e6ebf2;
	padding: 18px 22px;
	border-radius: 10px;
	overflow-x: auto;
	font-family: var(--ck-font-mono);
	font-size: 13px;
	line-height: 1.6;
	margin: 16px 0;
}
.ck-doc-content code {
	font-family: var(--ck-font-mono);
	font-size: 13.5px;
	background: var(--ck-color-bg-subtle);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--ck-color-primary-active);
}
.ck-doc-content pre code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: 13px;
}
.ck-doc-callout {
	background: var(--ck-color-primary-soft);
	border-left: 3px solid var(--ck-color-primary);
	padding: 16px 20px;
	margin: 20px 0;
	border-radius: 0 8px 8px 0;
	color: var(--ck-color-text-default);
	font-size: 14.5px;
	line-height: 1.6;
}
.ck-doc-callout strong { color: var(--ck-color-primary-active); }

/* ================================================================
 * 15. FAQ POLISH — details with proper open/close styling
 * ================================================================ */

.entry-content details.wp-block-details {
	border-bottom: 1px solid var(--ck-color-border-subtle);
	padding: 24px 0 !important;
	transition: padding var(--ck-dur-fast) var(--ck-ease);
}
.entry-content details.wp-block-details summary {
	font-family: var(--ck-font-display);
	font-weight: 600;
	color: var(--ck-color-text-default);
	cursor: pointer;
	font-size: 17px;
	letter-spacing: -0.012em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	padding-right: 4px;
	transition: color var(--ck-dur-fast) var(--ck-ease);
}
.entry-content details.wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content details.wp-block-details summary::after {
	content: "+";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ck-color-primary-soft);
	color: var(--ck-color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 500;
	font-family: var(--ck-font-mono);
	transition: all var(--ck-dur-fast) var(--ck-ease);
}
.entry-content details.wp-block-details[open] summary::after {
	content: "−";
	background: var(--ck-color-primary);
	color: #fff;
	transform: rotate(180deg);
}
.entry-content details.wp-block-details summary:hover {
	color: var(--ck-color-primary);
}
.entry-content details.wp-block-details summary:hover::after {
	background: var(--ck-color-primary);
	color: #fff;
}
.entry-content details.wp-block-details p {
	color: var(--ck-color-text-muted);
	margin-top: 14px !important;
	padding-right: 44px;
	line-height: 1.65;
}

/* ================================================================
 * 16. SECTION TRANSITIONS — ledger node accent between major sections
 * ================================================================ */

/* Override the default linear-gradient hairline with the ledger-line that
 * has a centered emerald node — gives every section transition a brand mark. */
.entry-content > .wp-block-group + .wp-block-group::before {
	position: relative;
	background: linear-gradient(
		90deg, transparent 0%,
		var(--ck-color-border-subtle) 8%,
		var(--ck-color-border-subtle) 92%, transparent 100%
	) !important;
	margin-bottom: -1px;
}
/* Add a small emerald dot at the center of every transition */
.entry-content > .wp-block-group + .wp-block-group::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background: var(--ck-color-primary);
	border-radius: 50%;
	margin: -3px auto 0;
	box-shadow: 0 0 0 4px var(--ck-color-bg), 0 0 0 5px var(--ck-color-primary-soft);
	position: relative;
}
/* Don't show on dark sections (they own their own transition vibe) */
.ck-dark-demo + .wp-block-group::after,
.ck-dark-band + .wp-block-group::after,
.ck-dark-trust + .wp-block-group::after,
.entry-content > .ck-cta-final::after,
.entry-content > .ck-cta-final::before,
.entry-content > .wp-block-group.ck-dark-demo::before,
.entry-content > .wp-block-group.ck-dark-demo::after,
.entry-content > .wp-block-group.ck-dark-band::before,
.entry-content > .wp-block-group.ck-dark-band::after,
.entry-content > .wp-block-group.ck-dark-trust::before,
.entry-content > .wp-block-group.ck-dark-trust::after,
.entry-content > .wp-block-group + .ck-dark-demo::before,
.entry-content > .wp-block-group + .ck-dark-band::before,
.entry-content > .wp-block-group + .ck-dark-trust::before,
.entry-content > .wp-block-group + .ck-cta-final::before { display: none !important; }

/* ================================================================
 * 17. RESPONSIVE + A11Y
 * ================================================================ */

@media (max-width: 720px) {
	.ck-event-row {
		grid-template-columns: 64px 1fr 1fr;
		gap: 12px;
	}
	.ck-event-row .ck-user,
	.ck-event-row .ck-status { display: none; }
}

/* ================================================================
 * 18. MOTION — scroll-reveal + button underline-grow
 * (driven by creditkit-motion.js — only active when JS attaches classes)
 * ================================================================ */

.ck-pre-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--ck-dur-slow) var(--ck-ease),
				transform var(--ck-dur-slow) var(--ck-ease);
	will-change: opacity, transform;
}
.ck-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
	transition: opacity var(--ck-dur-slow) var(--ck-ease),
				transform var(--ck-dur-slow) var(--ck-ease);
}

/* Button hover — emerald underline grows from left to right
 * (the "ledger-underline-grow" pattern from brand-direction §8) */
.ck-btn-primary.ck-btn-grow {
	position: relative;
	overflow: hidden;
}
.ck-btn-primary.ck-btn-grow::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .5);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ck-dur) var(--ck-ease);
}
.ck-btn-primary.ck-btn-grow:hover::before {
	transform: scaleX(1);
}

/* Secondary button — emerald underline grows from below */
.ck-btn-secondary.ck-btn-grow {
	position: relative;
}
.ck-btn-secondary.ck-btn-grow::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 12%;
	width: 76%;
	height: 2px;
	background: var(--ck-color-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--ck-dur) var(--ck-ease);
	border-radius: 1px;
}
.ck-btn-secondary.ck-btn-grow:hover::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ck-event-row { animation: none; opacity: 1; }
	.ck-ledger-node.ck-ledger-node-pulse { animation: none; }
	.ck-receipt-wall-track { animation: none; }
	.ck-pre-reveal { opacity: 1; transform: none; transition: none; }
	.wp-block-button.is-style-fill .wp-block-button__link,
	.ck-btn-primary, .ck-btn-secondary { transition: none; }
	.wp-block-button.is-style-fill .wp-block-button__link:hover,
	.ck-btn-primary:hover, .ck-btn-secondary:hover { transform: none; }
	.ck-btn-primary.ck-btn-grow::before,
	.ck-btn-secondary.ck-btn-grow::after { display: none; }
}